Support » Themes and Templates » Multicolor blog title

  • Hi,

    I’m a complete beginner to this but a quick learner.

    I’m using the Blossom 2.3 theme by Liane Blanco and I would like to use two colors in the blog title. I have mangaged to change the colour but after searching this forum I am still unable to include two different colors.

    The title is joeblogs and I would like jo and blogs in #da8d9d and ‘e’ in white but attached to the end of jo if that makes sense.

    Any help would be greatly appreciated.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator cubecolour



    I think this should work:

    edit the theme’s header.php, look for where the site name h1 is specified:

    <h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>

    change it to

    <h1><a href="http://your.url">jo<span="white">e</span>blogs</a></h1>

    Then specify the colours in your style.css

    h1 {color: #da8d9d;}
    h1.white {color: #fff;}



    Forum Moderator

    this idea will exchange any character ‘e’ in your blog title and wrap it into a span with the style: color:white;
    using the php function: str_replace().
    first step:

    <?php $blog_title = get_bloginfo('name');
    //loads the blog title into a variable//
    $blog_title = str_replace('e','<span style="color:#fff;">e</span>',$blog_title);
    //replaces 'e' and surrounds it with a span with color white//

    second step:
    output the new title echo $blog_title; instead of bloginfo('name');.

    so, in your ‘header.php’ find this:

    <div id="headerimg">
    <?php if (is_front_page()) { ?>
         <h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>
    <?php } else { ?>
          <a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a>
    <?php } ?></div>

    change it to this:

    <div id="headerimg">
    <?php $blog_title = get_bloginfo('name');
    $blog_title = str_replace('e','<span style="color:#fff;">e</span>',$blog_title); ?>
    <?php if (is_front_page()) { ?>
         <h1><a href="<?php echo get_option('home'); ?>"><?php echo $blog_title; ?></a></h1>
    <?php } else { ?>
          <a href="<?php echo get_option('home'); ?>"><?php echo $blog_title; ?></a>
    <?php } ?></div>

    hope it works 😉

    see it here

    Above method should work fine. But if you wish to use a more generic function which adds span enclosure based on word count you can use my solution here:

    Hi guys, thank you all so much for your advice. I am a complete amateur at this. It did seem very compicated to me and I’m sure it’s very easy once you know what you’re doing but I think I’ve managed it now! Thanks again 🙂

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Multicolor blog title’ is closed to new replies.