A two colour Site Title

Community Forums Forums General Discussion A two colour Site Title

This topic is: not resolved

This topic contains 4 replies, has 3 voices, and was last updated by  wpsmith 1 year, 9 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #7791

    kategorgeous
    Participant
    Post count: 19

    Hello there and Happy belated Christmas …

    I would like my main site title to be two colours ie the first word in purple and then the next word in brown.

    Is it possible?

    Thanks

    Kate


    http://www.underbrella.co.uk
    Only dead fish go with the flow

    #7830

    willyr
    Participant
    Post count: 36

    Kate, I suspect you can do it with html, but wouldn’t it be easier to create a graphic with the title coloured as you see fit, and then use that graphic as a title?

    If you go to your Appearance tab on the left, and then click on the header link from the menu, you can see how you can upload a graphic for the header.

    Then, see the code snippets to remove the existing header graphic, if necessary.

    Hope this helps.

    Cheers,

    Bill

    http://www.all-about-ottawa.com
    http://www.incredible-kingston.com
    http://www.fix-my-compressor.com

    #7888

    wpsmith
    Moderator
    Post count: 178

    Yes, you can do this. I had to this for a client site back not too long ago. You can do this one of two ways:

    First, you can filter what’s already there:

    add_filter( 'genesis_seo_title', 'wps_seo_title', 10, 3 );
    /**
    * Modify the Genesis SEO Title.
    *
    * @param string $title Default HTML title output.
    * @param string $inside HTML blog name output.
    * @param string $wrap h1 or p based on settings.
    * @return string $title Modified HTML title output.
    */
    function wps_seo_title( $title, $inside, $wrap ) {
    // do something using <span> tags to manipulate your colors
    return $title;
    }

    Second, remove the Genesis default and roll your own. Doing it this way will render the Homepage Settings in the SEO Settings pointless unless you build in the same logic.

    remove_action( 'genesis_site_title', 'genesis_seo_site_title' );
    add_action( 'genesis_site_title', 'wps_seo_site_title' );
    /**
    * Echo the site title into the header.
    */
    function wps_seo_site_title() {
    //do something, output some HTML
    }


    Travis Smith | Recommended StudioPress Developer & Contributor
    WP Smith | @wp_smith | GitHub

    Due to the forums, please paste code using Pastebin, JS Fiddle (for JavaScript) or GitHub.
    How to use Firebug for Designers by SixRevisions

    #7998

    kategorgeous
    Participant
    Post count: 19

    Huge thanks but ooh heavens that sounds a bit complicated! How about I make the site title blank in the settings and set up a heading with Simple Hooks?

    Would you be able to send me the link to the site that you managed to achieve the two colour HTML effect? Thank you


    http://www.underbrella.co.uk
    Only dead fish go with the flow

    #8006

    wpsmith
    Moderator
    Post count: 178

    I would recommend the first approach. The site that I did this on has changed to an image logo since the launch of the site not worrying about the SEO of their site name.

    So here’s basically what I did:

    add_filter( 'genesis_seo_title', 'wps_seo_title', 10, 3 );
    /**
    * Modify the Genesis SEO Title.
    *
    * @param string $title Default HTML title output.
    * @param string $inside HTML blog name output.
    * @param string $wrap h1 or p based on settings.
    * @return string Modified HTML title output.
    */
    function wps_seo_title( $title, $inside, $wrap ) {
    return sprintf( '<h1 id="title"><span class="color1">%s</span><span class="color2">%s</span></h1>', 'text for color 1', 'text for color 2'  );
    }


    Travis Smith | Recommended StudioPress Developer & Contributor
    WP Smith | @wp_smith | GitHub

    Due to the forums, please paste code using Pastebin, JS Fiddle (for JavaScript) or GitHub.
    How to use Firebug for Designers by SixRevisions

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.