Support » Themes and Templates » Multiple font colors within blog title. Can it be done?

  • Resolved lsargent


    I’m trying to have 2 different font colors in my blog title.

    For example, my blog title is “How To Catch Any Fish”

    I want all the text black, which it is by default in the css, but want to change the word “Catch” to #b9b9b9.

    I thought maybe I could go into the header.php file and replace something that resolved the title like <?php bloginfo(‘name’); ?> and replace that with:

    How To <font color=”#b9b9b9″>Catch</font> Any Fish

    But I don’t see anywhere I can do that and make it work. Any suggestions?


Viewing 3 replies - 1 through 3 (of 3 total)
  • Replace <?php bloginfo('name'); ?> with
    <h1>How To <span>Catch</span> Any Fish</h1>
    (the <h1> may already be in your code – don’t duplicate it if its akready there)
    Then to your stylesheet
    h1 span { color: #b9b9b9; }

    if you need to adjust the styling on the rest of the title, here is the code to make the rest display in black at 22 pixels height. Adjust as you need. (The font-size from here will also apply to the word “Catch”.)

    h1 {
     color: #000000;
     font-size: 22px;

    If you are going to use a static text then you can use the method suggested by stvwlf. Its hassle free.

    But to dynamically change colour you can use my code:

    Add this to functions.php

    function add_span_to_title($input_content)
    	if(str_word_count($input_content) > 3)
    		foreach($word_array as $word)
    			if($count++ > 1) break;
    			$str_length += strlen($word);
    		$mod_con_title = "<span>".substr_replace($input_content,"</span> ", strpos($input_content," ",$str_length),1);
    	else if(str_word_count($input_content) > 1)
    		$mod_con_title = "<span>".substr_replace($input_content,"</span> ", strpos($input_content," ",0),1);
    	else $mod_con_title = $input_content;
    	echo $mod_con_title;

    Wherever you require to add span enclosures you can call that function. Example:
    <h1><?php echo add_span_to_title(get_the_title()); ?></h1>

    Actual title: Hello World Friend
    Modified title: <span>Hello World</span> Friend

    You can play with the code to modify it as you want. If you want explanation of how the above function works, feel free to ask.

    You could use get_bloginfo instead and use str_replace or preg_replace to wrap ‘catch’ in a <span> which you could then format to a different color. Something like:

    $t = get_bloginfo('name');
    $t = str_replace('Catch','<span>Catch</span>',$t);
    echo $t;

    str_replace will replace all occurances of the search term– shouldn’t matter in your case though.

    Or you could just hard code the blog title.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Multiple font colors within blog title. Can it be done?’ is closed to new replies.