Results 1 to 5 of 5

Thread: Custom Theme Help Tutoria 1

  1. #1
    Forum Addict Spahrep's Avatar
    Join Date
    Aug 2012
    Posts
    1,056

    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.



    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
    Last edited by Spahrep; 15-07-2014 at 11:10.
    Work Safe Custom Theme: http://spahrep.github.io/
    Age 55 TFC - Faery Warrior - Triple Crown (acres,nw,honor) <Unicorn Stampede>
    Age 56 TFC - Faery Warrior <Fen of the Unicorn>
    Age 57 TFC - Elf Mystic - 1st TFC Prince :P (S) <Rarity>
    Age 58 HRS (S) - Elf Mystic <Space Truckin - Deep Purple>
    Age 59 HRS (M) / AC (M) Faery Merchant <Cantaloupe>
    Age 60 AC (council) - Human Sage <Cerulean Frost>
    Age 60b Simians - Orc Tact <Cerulean Frost Rebooted>
    Age 61 - Silly Pink Ghetto Cats - Dwarf Merchant <Starship Unicorn Express>
    Age 62 - A Ghetto - Human Sage - 1M+ nw <Cerulean Unicorn Adventure>
    Age 63 - Another Ghetto
    Daughter of the Fifth House, Holder of the Sacred Chalice of Riix, Heir to the Holy Rings of Betazed.

    -- The opinions/rants do not represent my kingdom or its affiliates, only me, and i have a lot of them.

  2. #2
    Forum Addict Spahrep's Avatar
    Join Date
    Aug 2012
    Posts
    1,056
    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.
    Last edited by Spahrep; 11-07-2014 at 18:44.
    Work Safe Custom Theme: http://spahrep.github.io/
    Age 55 TFC - Faery Warrior - Triple Crown (acres,nw,honor) <Unicorn Stampede>
    Age 56 TFC - Faery Warrior <Fen of the Unicorn>
    Age 57 TFC - Elf Mystic - 1st TFC Prince :P (S) <Rarity>
    Age 58 HRS (S) - Elf Mystic <Space Truckin - Deep Purple>
    Age 59 HRS (M) / AC (M) Faery Merchant <Cantaloupe>
    Age 60 AC (council) - Human Sage <Cerulean Frost>
    Age 60b Simians - Orc Tact <Cerulean Frost Rebooted>
    Age 61 - Silly Pink Ghetto Cats - Dwarf Merchant <Starship Unicorn Express>
    Age 62 - A Ghetto - Human Sage - 1M+ nw <Cerulean Unicorn Adventure>
    Age 63 - Another Ghetto
    Daughter of the Fifth House, Holder of the Sacred Chalice of Riix, Heir to the Holy Rings of Betazed.

    -- The opinions/rants do not represent my kingdom or its affiliates, only me, and i have a lot of them.

  3. #3
    Member
    Join Date
    Dec 2013
    Location
    Philly. PA
    Posts
    44
    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:



    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.

  4. #4
    Forum Addict Spahrep's Avatar
    Join Date
    Aug 2012
    Posts
    1,056
    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?
    Last edited by Spahrep; 15-07-2014 at 11:11.
    Work Safe Custom Theme: http://spahrep.github.io/
    Age 55 TFC - Faery Warrior - Triple Crown (acres,nw,honor) <Unicorn Stampede>
    Age 56 TFC - Faery Warrior <Fen of the Unicorn>
    Age 57 TFC - Elf Mystic - 1st TFC Prince :P (S) <Rarity>
    Age 58 HRS (S) - Elf Mystic <Space Truckin - Deep Purple>
    Age 59 HRS (M) / AC (M) Faery Merchant <Cantaloupe>
    Age 60 AC (council) - Human Sage <Cerulean Frost>
    Age 60b Simians - Orc Tact <Cerulean Frost Rebooted>
    Age 61 - Silly Pink Ghetto Cats - Dwarf Merchant <Starship Unicorn Express>
    Age 62 - A Ghetto - Human Sage - 1M+ nw <Cerulean Unicorn Adventure>
    Age 63 - Another Ghetto
    Daughter of the Fifth House, Holder of the Sacred Chalice of Riix, Heir to the Holy Rings of Betazed.

    -- The opinions/rants do not represent my kingdom or its affiliates, only me, and i have a lot of them.

  5. #5
    Member
    Join Date
    Dec 2013
    Location
    Philly. PA
    Posts
    44
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •