Trying to change font color and preview result

  • Unknown's avatar
    fitzrovianews · Member ·

    Hi

    I’m experimenting with css and trying to add a bit of color to the Journalist 1.3 theme, but failing to preview the changes.

    When I add the following in the editor

    h1 a {
    color:#FF0000;
    }

    nothing changes. And the same if I add

    h1 a {
    color:#FF0000;
    }

    I’m missing something. I’m bit rusty on CSS and HTML but not a noob. Any tips to help me on my way.

    Linus

    The blog I need help with is: (visible only to logged in users)

  • andrewspittle · Staff ·

    Are you trying to change the color of your blog’s title in the header?

    If so you may want to try using #container h1 a That should add the custom styles correctly.

    If it’s another portion of the theme that you’re trying to change can you let us know specifics so that we can help with details. Thanks!

  • Unknown's avatar
    fitzrovianews · Member ·

    Thanks for replying. I have tried that. I currently have the following

    #container h1 a {
    color:#FF0000;
    }

    in the editor window and nothing else, but it still won’t preview.

    Putting:

    h3 {
    color:#FF0000;
    }

    makes no difference either. Bit stumped.

  • Unknown's avatar
    thesacredpath · Member ·

    What exactly are you trying to change the color on? The blog title, post titles or widget titles or what?

  • Unknown's avatar
    fitzrovianews · Member ·

    OK, I’m trying to change the color of the blog title, the post title and the h3 headings.

  • Unknown's avatar
    thesacredpath · Member ·

    First off, the CSS preview thing has been seriously finicky lately (possibly due to browser changes which rely more heavily on cached files) so once you put the following into the CSS edit window and edit the colors, when you click preview, force refresh the preview page.

    Put the following into the CSS edit window and edit the colors as needed. The first is the blog title, the second the post titles (on main page and single-post page) and the third is the non-link sidebar titles. The fourth I threw in in case you want to also change the color of the h3 link titles in the sidebar (such as on the twitter widget you have).

    #container h1 a {
color: #222222;
}

#content h2 a, #content h2 {
color: #222222;
}

#sidebar h3 {
color: #222222;
}

#sidebar h3 a {
color: #222222;
}

    There are also “hover” colors for the blog title, post titles and the sidebar link titles which would be under:

    #container h1 a:hover {
color: #CC0000;
}

#content h2 a:hover {
color: #CC0000;
}

#sidebar h3 a:hover {
color: #CC0000;
}

    Some of the above does not exist as written in the CSS since some of the elements “inherit” the colors from other selectors.

  • Unknown's avatar
    fitzrovianews · Member ·

    @thesacredpath

    First: Happy New Year and good blogging.

    Second: I can’t thank you enough for all those suggestions above. The issue of browser refresh (I’m using Google Chrome) was correct, plus me being thick about the CSS stuff (I’ve forgotten so much). I added all your suggestions (with comments) and changed the color to suit. From that I figured out how to change the h3 headings.

    I just wish we could preview posts in this forum before posting.

    Linus


    /* as suggested by sacredpath <http://the-sacred-path.com/> at https://en.forums.wordpress.com/topic/trying-to-change-font-color-and-preview-result?replies=6 */

    /* First off, the CSS preview thing has been seriously finicky lately (possibly due to browser changes which rely more heavily on cached files) so once you put the following into the CSS edit window and edit the colors, when you click preview, force refresh the preview page.

    Put the following into the CSS edit window and edit the colors as needed. The first is the blog title, the second the post titles (on main page and single-post page) and the third is the non-link sidebar titles. The fourth I threw in in case you want to also change the color of the h3 link titles in the sidebar (such as on the twitter widget you have).

    I've changed the colours (colors) to suit Fitzrovia News look */

    #container h1 a {
    color: #FF0000;
    }

    #content h2 a, #content h2 {
    color: #FF0000;
    }

    #sidebar h3 {
    color: #FF0000;
    }

    #sidebar h3 a {
    color: #FF0000;
    }

    /* There are also "hover" colors for the blog title, post titles and the sidebar link titles which would be under: */

    /*
    #container h1 a:hover {
    color: #FF0000;
    }
    */

    /*
    #content h2 a:hover {
    color: #FF0000;
    }
    */

    /*
    #sidebar h3 a:hover {
    color: #FF0000;
    }
    */

    /*Some of the above does not exist as written in the CSS since some of the elements "inherit" the colors from other selectors. */

    /* and the h3 headings */

    #content h3 {
    color: #FF0000;
    }

  • The topic ‘Trying to change font color and preview result’ is closed to new replies.