WordPress.org

Ready to get started?Download WordPress

Forums

Oxygen
Change color of site title (4 posts)

  1. scrappy123
    Member
    Posted 2 years ago #

    I'm using Oxygen and know that it's possible to change the site title's color and font size but I can't seem to make it work. I know it's in the CSS but which numbers specifically should I be changing?

    Ideally I'd like to achieve a title that displays two colors and I can't figure out how to do that either; so a different color for the last word in my title. sugarpopboutique.com has achieved it so it definitely can be done.

    Any pointers would be gratefully received.

    Thank you!

    http://wordpress.org/extend/themes/oxygen/

  2. Chris Fritz
    Member
    Posted 2 years ago #

    CREATING A CHILD THEME

    First of all, before you start modifying the Oxygen theme, you'll want to create a child theme, so that the Oxygen theme can update without your modifications being overwritten. Follow the link for instructions.

    CHANGING THE COLOR AND FONT SIZE

    Look for this in your CSS:

    #site-title a {
     ...
    }

    That selects any links (i.e. anchors) inside this theme's title area. From there, you can change the color and font size by modifying (or adding, if they don't already exist) the following within the brackets:

    color: #123456;
    font-size: 1em;

    The free Adobe Kuler webapp is useful for finding the right color and getting the hex code (that's the #123456). For the font-size, experiment with making the 1em larger and smaller (e.g. 1.6em or 0.8em, etc).

    MAKING THE TITLE TWO DIFFERENT COLORS

    Right now, the title is within a single span tag. You want to edit the header.php and put another span tag with a unique id around the part you want to make different. For example, take the follow code for a website titled My Wonderful Website and let's say we want to change the look of the word Wonderful.

    <h1 id="site-title">
    <a href="http://wp-themes.com" title="My Wonderful Website" rel="home"><span>My <span id="title-wonderful">Wonderful</span> Website</span>
    </a>
    </h1>

    Now that we've surrounded what we want to change with a span, with the id "title-wonderful", we can modify how it looks in the CSS. We just need to add:

    #title-wonderful {
     ...
    }

    with whatever we want to modify in the between the brackets. For example, if we want to change the color to a nice orange, we can add this:

    color: #FF8955;

    Hope that helps! Have fun. :-)

  3. scrappy123
    Member
    Posted 2 years ago #

    Oh Chris you are so brill - thank you! What an amazingly detailed reply.

    I'm on the steepest learning curve this week and I think my brain is about to explode with all my new technical tasks so I'll leave this until next week I think.

    Of course it did occur to me that I could just create a logo and upload it as a picture into the header but I don't think the quality would be as good.

    Thanks again for taking the time - I appreciate it. :-)

  4. Chris Fritz
    Member
    Posted 2 years ago #

    This will also load faster than an image it'll be easier to add really nice, dynamic effects by doing this all in CSS rather than an image. CSS3 doesn't have complete or consistent support yet in all browsers, but you can add some pretty neat text effects with it!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags