Possible to change my header title to 2 colors?

  • Hi,
    As you can see on my blog, my title is all pink. I am interested in making the “uncle” pink and regular font and the “farkus” black and bold. Is this possible in css? Here is the header code as it stands now:

    /************************* MASTHEAD ************************************/
.pusher {cursor:pointer;}
#masthead { background: padding: 0;border-top:5px solid #000;}
#masthead h4 {margin:1em 0;font-weight: bold; text-transform: uppercase;width:100%;}
#masthead h4 a { color: #ff1493; text-decoration: none; float:left;}
#masthead h4 a:hover {color:#ff1493;}
#masthead span {color:#666;font-size:.8em;text-transform:lowercase;font-weight:normal;}
#masthead span.description {float:left;margin-left: 20px;padding-top:.2em;}
#masthead span.contact {float:right;line-height:1em;}
#masthead span.contact a:hover {color:#000;}
Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello,

    Changing the color here:

    #masthead h4 a { color: #ff1493; text-decoration: none; float:left;}

    will change your title color.

    Changing the color here:

    #masthead h4 a:hover {color:#ff1493;}

    will change the color of the mouse over.

    Hope that helps.

    You can find the color palette numbers here:

    https://meyerweb.com/eric/tools/color-blend/

    Regards,
    Alex.

    I realize this is a 4 month old post, but I have been tinkering with this for a while and have come up with a relatively short php code to to what you are looking for.

    I assume that you want your title in 2 colors, and that the title is divided only in 2 sections.

    For ex:
    Title : A quick Brown fox.
    You want “A quick” in one color and “brown fox” in another. If that is so, the code is as follows:

    <h1><a rel="home" href="<?php echo get_option('url'); ?>/">
<span class="brown"><?php
$blogname = get_bloginfo('name');
$data = explode(" ", $blogname);
echo ($data[0]);
?></span>
<?php
$blogname = get_bloginfo('name');
$data = explode(" ", $blogname);
echo ($data[1]);
?>
</a></h1>

    In the above code, I have the first word in a span class=”brown” with the second word with default colors. Go to your css and add the new class and you should be up and running. You can set up a count if the title is longer than 2 words and loop it in a for loop if necessary.

    If you need help with that, let me know.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Possible to change my header title to 2 colors?’ is closed to new replies.