need help making CSS code changes – Titan

  • Unknown's avatar
    swainkyle · Member ·

    I have minimal experience with CSS and code. Can you help me identify the parts of the code (in “Titan”) where I would make these changes:

    1. color of navigation tabs (“Swain website”, “Photo gallery” etc.)

    2. make the band under the navigation tabs (looks lighter right now) the same color as the rest of the background

    3. the color of “Reflections on Switzerland”

    4. the color and size of author/date

    5. the color of “Email Subscription”

    6. the color of “Archives”, “Links” and “Book Recommendations” (and the text underneath each one)

    7. increasing space between each of the widgets on the right?

    Thanks!
    Blog url: http://swainkyle.wordpress.com/

  • Unknown's avatar
    designsimply · Member ·

    First, you might want to try out the Firebug browser extension for Firefox. When it’s installed, you can right-click on elements on a page and select “Inspect Element” and it will display all the related CSS to whatever you selected. It’s pretty handy. There is also a CSS inspector built right in to the Safari and Chrome browsers.

    You should also look up a basic CSS tutorial like the one here as it will be very helpful when you are just starting out: http://www.htmldog.com/guides/cssbeginner/

    1. To change the color of the navigation bar in the Titan theme, try the following. Note that you should replace the #navigation blog already in your Custom CSS with this: 

    #navigation {
    background: #EEE8CD;
}

    To change the color of the individual navigation bar elements, use the following. Adjust the colors as necessary: 

    #nav li:hover, #nav li.sfhover {
    background: #003366;
}

#nav li:hover a, #nav li.sfhover a {
    color: #EEE8CD;
}

    2. To make the band under the navigation tabs the same color as the rest of the background in the Titan theme, use this: 

    .content-background {
    background: none;
}

    3. To change, the color of post titles like “Reflections on Switzerland”, you can can change all link colors: 

    a:link, a:visited {
    color: #C11C3E;
}
a:hover {
    color: #71AB57;
}

    Or you can just change h2 level titles instead: 

    h2 a:link, h2 a:visited {
    color: #C11C3E;
}
h2 a:hover {
    color: #71AB57;
}

    4. In the Titan theme, the author has class=”author” and the date has class=”date”, so you can change the color and size of the text for it with a class selector in CSS like this: 

    .author, .date {
    color: #C11C3E;
    font-size: 2em;
}

    5 & 6. To change the color of sidebar widget titles like “Email Subscription”, “Archives”, “Links” and “Book Recommendations”, you can use this: 

    ul li h2.widgettitle {
    color: #71AB57;
}

    7. To increase space between each of the widgets on the right, you can add this CSS to the Titan theme on your Appearance → Custom Design → CSS page: 

    .widget {
    padding-bottom: 5em;
}

    Don’t forget to adjust the colors and amount of spacing to your liking.

    Don’t be afraid to experiment!

    Once you learn how to find these elements in the html, you should be able to adjust other things on the site without too much trouble.

  • Unknown's avatar
    swainkyle · Member ·

    Thank you! I’m working from home now (as opposed to my work computer) and have Chrome here, so I found the “Inspect Element” item you referenced – between that and your other helpful hints I am in pretty good shape now. I appreciate it very much – I will also take a look at that tutorial; I kind of needed to jump right into this and get it going.

  • The topic ‘need help making CSS code changes – Titan’ is closed to new replies.