Custom Theme Help Tutoria 1

Basics:

After you have followed the instructions on how to create your own theme, it"s time to get to work on making it your own. If you no little to nothing about CSS its highly suggested you go over to http://www.w3schools.com/css/ as this tutorial will assume you know the basics which are well taught there.

When you fork the master repository you will get a number of files, but the one you are most interested in is theme.css followed by uniform.utopia.css (which is called by theme.css).

The next thing you want to do is ensure you have a browser or browser plugin that allows you to quickly find the CSS associated with a given part of the page you are looking at. Chrome has built in developer tools which can be found by pressing ctrl + shift + c (or ctrl + shift + I) -- this will open up the developer tools on the bottom of the page.
My preference is "firebug" which works in Firefox and can be found here: https://getfirebug.com/
If you are using Chrome you can use the chrome developer tools, and many other browsers come with similar tools built in.

When turned to inspect mode, simply click on the page and you can see what CSS class is associated with what you clicked on, and you can change it on the fly:

In the below image I used firebug"s inspect tool, and clicked on the date (red circle) . I was then able to see the style path for that element (green circle), and where it was located in the page"s html (blue circle). In this particular image, because CSS cascades from the top down, making any change to any style in its style path would lead to a change in this element.
http://i.imgur.com/dHMjzMC.png


You can make changes to theme.css on the github site, simply click the edit button, and then when you are done click the green "commit change" button to save.
http://i.imgur.com/x8nBsBp.png

If we were to go into theme.css and do a search on the inner most style "current-date" we find the following exists:
#game-navigation .current-date {
padding: 11px 0px;
font-family: KnightsQuestRegular;
font-size: 16px;
...
}

This style applies to any "current-date" classed elements that are encased in a #game-navigation element. By looking at our style path, we can see that our .current-date classed div in indeed wrapped by a #game-navigation div, so this is where we want to edit.

For example we could change the font family line to:
font-family: "Times New Roman",Georgia,Serif;
And we would set the font to Times New Roman for this box
#game-navigation .current-date {
padding: 11px 0px;
font-family: KnightsQuestRegular;
font-size: 16px;
...
}

If there were other elements classed with .current-date that were not inside a #game-navigation element, we could simply create a new style after the previous style as follows:

.current-date{
font-family: "Times New Roman",Georgia,Serif;
}

Remember that the most recently applied style in the cascade is the one that is used, with the lowest style defined being the most recent.

Sometimes you may add a CSS rule, but you do not see your changes. If there is a more "specific" rule that styles the particular element, that will take precedence.

Here is an example of what this means:

If you wanted to change the font size of the top navigation menu buttons but leave the left navigation buttons alone, you could do something like the following:

/* This rule will apply to any element with the class .navigation
* and is already given to you by default in theme.css
*/
.navigation
{
font-size: 20px;
}

/* You could optionally add this CSS rule to affect only the
* top menu button's font size.
* This rule would override the above rule because it is more specific.
*/
#header-navigation .navigation
{
font-size: 14px;
}

A quick way to determine the specificity of your rule/selector is as follows:
1. Start at 0, assign every ID selector a value of 100 (those that begin with "#")
2. Assign each class selector / pseudo selector a value of 10 (class selectors begin with "." and pseudo selectors are those that have ":hover" or ":focus" etc.)
3. After assigning each a point value, add them up, the rule with the highest value will be the one that is applied.

So ".navigation" would have a value of 10 and
"#header-navigation .navigation" would have a value of 110


Here are some ids (#name) and classes (.name) that exist on the default page that you can change in your theme.css file:
http://i.imgur.com/NkeT0sS.png

Contributors:
Spahrep
JuiceB0x

The tutorial is still in progress, I'll try to add more hints/tips/tricks as they come along.
If there are any questions or clarification required please post and I'll try to update the tutorial and address them.
If you have any tips/tricks let me know and I'll put them in here.

Thanks.

This is good information, Spahrep, I am sure it will benefit the community.

As a web developer, I mainly use Chrome -- which by default comes with a robust set of developer tools (so you don't need to download firebug).

I find the Chrome tools a bit more intuitive than firebug, but both work very similarly and can be used to accomplish the same end result.

To access the developer tools in chrome, you can do this two ways:

On the page, you can press ctrl + shift + c (or ctrl + shift + I) -- this will open up the developer tools on the bottom of the page.
You can optionally go to the Settings > Tools > Developer Tools menu.

Here is a screen shot that gives a quick overview of the developer tools:

http://s29.postimg.org/e9f5ts63b/Uto...oper_Tools.png

Also, you mentioned that the most recent CSS rule / lowest defined is the one that is used. While this is pretty much correct, I'd like to add some notes on specificity of CSS rules.

Sometimes you may add a CSS rule, but you do not see your changes. If there is a more "specific" rule that styles the particular element, that will take precedence.

Here is an example of what this means:

If you wanted to change the font size of the top navigation menu buttons but leave the left navigation buttons alone, you could do something like the following:

/* This rule will apply to any element with the class .navigation
* and is already given to you by default in theme.css
*/
.navigation
{
font-size: 20px;
}

/* You could optionally add this CSS rule to affect only the
* top menu button's font size.
* This rule would override the above rule because it is more specific.
*/
#header-navigation .navigation
{
font-size: 14px;
}

A quick way to determine the specificity of your rule/selector is as follows:
1. Start at 0, assign every ID selector a value of 100 (those that begin with "#")
2. Assign each class selector / pseudo selector a value of 10 (class selectors begin with "." and pseudo selectors are those that have ":hover" or ":focus" etc.)
3. After assigning each a point value, add them up, the rule with the highest value will be the one that is applied.

So ".navigation" would have a value of 10 and
"#header-navigation .navigation" would have a value of 110

Hopefully this wasn't too confusing.

Thanks JuiceB0x, I havent done web dev in like 6 years so I'm a bit rusty haha. I'll encorporate that into the main article probably tomorrow if work is slow and credit you as the contributor for that section. This way we can keep all the good stuff at the start of the thread :)

Edit: Your image went away, can you get it back?

Still appears for me? Maybe its cached for me... Let me know if it is still not showing up and I can upload it else where.