User blog:Penguin-Pal/CSS Tutorial: Styling Your Wikia's Header

Hello everyone,

On this tutorial, i'll be demenstrating how to customize your wiki's header, and add a unique background to it. For using this, all you need is to have admin rights in a particular wiki, or jsut to edit your custom CSS stylesheeet.


 * An example of a customized header is shown on the image on the right. This one was used during the Hollywood Party, and the wordmark was submitted by Ultimate iPad Expert.

Step 1
First of all, add a new line (to your MediaWiki:Wikia.css), which contains the following content This is a notice, which means it will not affect the code, but can let others know what this code does. You can also mention there a particular event for the design, such as a party. It is also helpful for finding the code, in case it's needed to remove it.

Step 2
Now, we'll add a custom background. You don't necessarily need to customize the background, but this is an example for one thing to do with your wiki header.

Anyway, this is the code: As you can see, it says background: black !important;. The background: tells what code to apply on the background, and for this example, i used the color black. I've also added a line saying !important as wikia's theme already affect the background of the header (which is transparent), and by adding !important i can make sure that my code is the dominant, and not the default code.

Please note that using !important a lot is not recommended, as it may affect codes you'd want to add in the future.

For the wiki's theme, it's really nice to use gradient colors. For this tutorial, i only used black as i didn't want it to take too much space, and be easier to read. If you're looking for a gradient color generator, i highly recommend using Colorzilla.


 * Note: you can also use images as wiki header background for your wiki. You can search in google for ways for adding images, or leave a question in the comments, i just don't want this blog to be too long.

Step 3
But wait! As you can see, the background of the header would now be black, but the text of the wiki navigation tabs is also black! Wouldn't it be difficult to see them?

That's right. So, we'll also need to modify the tabs colors in the wiki navigation as well. As the background color is slightly dark, we'll use the color "white" for it. This will affect all text in the tabs (not the sub-tabs). This will ensure that unselected tabs will still be clear.

But, just one more thing, i also want to give the selected tab a different color, something unique. For this example, i'll select "Gold". An example for a HEX value of gold is #ffd62a. It's golden, but still very clear. So, this would be the code:

Step 4
Last step! In case you used a gradient background for your wiki header, and also added a filter property, this is to ensure Internet Explorer 9 will also display your background properly.

Wiki Timer
Some wikis, including this one, have a timer in Wikia skin. As it uses dark colors, in case you want a dark background as well, you might want to give it a lighter colors. Here's an example that works in this wiki.

Example
This example gathers entire blog's examples into one code:

Important Notice
Note that CSS is used for syling HTML content in browsers. It is based on selectors- which are usd for selecting particular tags (such as &lt;span&gt;), or classses and ids. Sometimes Wikia changes those classes or ids, which means you'll also have to make some modifications in the code's selectors. An example for this was in October last year, where wikia changed the class value of the header.

If you're looking for reasons for why your code no longer works, make sure its selectors are still valid!

So...
I hope this helps :) (although i doubt if at least 2 users read this entire blog :P )

If you have some questions, or anything else, please leave it in the comments :)

Penguin-Pal  (talk)  17:22, February 14, 2013 (UTC)