How do you change the font color of the text under the header? It is currently illegible.

  • Unknown's avatar
    cbjazz · Member ·

    The text under the header is:
    Jazz Clarinet, Saxophone, Improv, Ear Training
    Dark font on a dark background is not legible.
    There seems to be no way to change the color.

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

  • Unknown's avatar
    alexjgustafson · Member ·

    HI again. :)

    Since you have the Custom Design upgrade, you can adjust that color with some Custom CSS. Here’s the code currently making the text that color:

    h1, h1 a, h1 a:hover, h1 a:visited, .description {
text-decoration: none;
color: #897A2E;
}

    Copy+paste that code into your custom CSS editor, but change #897A2E to your preferred text color. You can find hex values for any color (or choose from one already given) here:

    http://www.colorhexa.com/web-safe-colors

    Best,

    -Alex G.

  • Unknown's avatar
    cbjazz · Member ·

    Thanks, Alex.
    I’m afraid that code is way over my head! I’d ruin 6 years of work on that site, even though I studied FORTRAN, COBOL, BASIC, and C in college. I just wanted the text to be simple white #ffffff but the text “Jazz Clarinet, Saxophone, Improv, and Ear Training” is no where to be found in that CSS code.

  • Unknown's avatar
    alexjgustafson · Member ·

    Hi Craig,

    CSS selectors often don’t have the actual text itself, rather, the tags the text is within. I got that selector by pulling up your site, and inspecting it with Chrome’s Developer tools:

    You can do the same in Firefox. HIghlight the text, right-click, and click inspect element. These tools let you see exactly what CSS is affecting the highlighted html.

    So in your case, the text “Jazz Clarinet, Saxophone, Improv, and Ear Training” is never being told to be the color #897A2E. But anything with the class of “description” is told to be that color, and your text is within a “div” tag with the class of “description” so that CSS code gets applied in the browser.

    To make it simpler, you could even just use this:

    .description {
color: #fff;
}

    That will make any element with the class “description” white, so that will make your text white.

    Best,

    -Alex G.

    PS — Whenever you change CSS on WordPress.com, we save up to 25 of your previously saved revisions:

    http://en.support.wordpress.com/custom-design/editing-css/#css-revisions

    So if you try out some CSS and it doesn’t work, just load up a previous version to get started again. :)

  • The topic ‘How do you change the font color of the text under the header? It is currently illegible.’ is closed to new replies.