Need help styling my wiki

[patent path]

Creating a main page is a laborious undertaking and the volunteers here probably won't have the time to spend hours making it for you. Since you don't have any content pages, it'll be even more difficult because we don't know what pages you want to link to and it's hard to know if you will abandon the project in a few days. Since you already know some css, you could get started by writing raw html in your main page. Here's a quick example: https://pokemonarceus.miraheze.org/wiki/User:PetraMagna/sandbox

^I spent 5 minutes writing the whole thing, so please
(1) use templates instead of copy-pasting the same html div
(2) use css classes instead of raw style attributes in html
(3) feel free to change it around
(4) beware that your wiki's license is incompatible with the runescape wiki, so use it as a reference but refrain from copy-pasting their css verbatim

[azure viper]

alright thanks

quick question: how do i change the text color on the sidebar? its currently blue but it blends with the background too much, so i would like to change it

[patent path]

You probably want to add those two lines in your Vector.css/Common.css since this background will interfere with more than the sidebar. Because the image has a bunch of different colors, it'll be quite difficult to find one color that works for all of them.

If you do want to change sidebar colors, links can be changed with #mw-panel a and headings with #mw-panel .vector-menu-heading-label

[azure viper]

Actually yeah the dulled background works a lot better

Thanks a lot

Couple more questions though:

• How do I shorten the content box so the right side of it dosnt just like touch the screen like that? Would like for it to cut off a bit before the end of the screen
• How do I get something like the icons on the Minecraft wiki that have a little icon and when you click on it, it leads to a link?

ref image

[patent path]

The content box has the right width. The problem is that #p-logo is too wide, so you'll need to scroll to the right in order to see the edge of the page. You could give #content some margin on the right as a band-aid.

As for icons, consult the section on linking https://www.mediawiki.org/wiki/Help:Images#Altering_the_default_link_target

[azure viper]

Ok

[azure viper]

how do i give it margin on the right

[junior mauve]

change #p-logo width to width: calc(100vw - 0.5em);
and also

#content {
  margin-right: 1em;
  border-right-width: 1px;
}

[azure viper]

thanks

[azure viper]

still cant rlly figure out the icon part, even after reading linking. Tried refering to the wikis source code, but when i tried implementing it into mine, it didnt worj

[azure viper]

and how do i change the little text colors the ones that say user, talk, admin linkcs, preferences,beta ect...

[junior mauve]

easiest way to do those icon things is with a gallery
https://www.mediawiki.org/wiki/Help:Images#Rendering_a_gallery_of_images

<gallery mode="nolines">
Image 1.png|[[Page 1]]|link=Page 1
Image 2.png|[[Page 2]]|link=Page 2
</gallery>

links are <a>, so its

a {
color: red !important;
}
``` (replace red with ur color)

[azure viper]

ok

[azure viper]

wait this changes every link to be grey

but i just want the admin tools and user settings top bar color to be changed

[junior mauve]

.vector-menu-content-list a, #mw-panel a {

[azure viper]

alright thanks

ok thanks that settles all my questions

nvm i lied 💀 mb

is there no way to make the icons the samesie

*same size

or picutres

like ik the propotions are off but lets say i have a diff icon that is shaped like a sqaure. Will it automiaticlly be the same sie as the previous icon

[woeful loom]

Size is done by adding [[Image.png|75px]] and adjust it so it fits with the other icons