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.
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.
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:
Contributors:
Spahrep
JuiceB0x
Reply With Quote