[BVercouteren]

Hi,

How can I change the site title color? Preferably in two separate colors. The HTML code in dashboard is overwritten. Is there a hard coded way in the editor?

Of course I can also upload an image, but I prefer text.

Many thanks in advance!

Bastiaan

[ahmetsali]

Hi, you can do this in two steps;

1-) Paste the code below to the Theme Options > Style > External Js box;

<script>
jQuery( document ).ready(function( $ ) {
  $('.site-title a').each(function(){
    var me = $(this)
       , t = me.text().split(' ');
    me.html( '<span>'+t.shift()+'</span> '+t.join(' ') );
  });
});	
</script>

2-) Then style with custom css;

/* first word */
.site-title a span {
    color: green;
}
/* second word */
.site-title a {
    color: orange;
}

[BVercouteren]

Thanks, but it only shows the orange color. Also with two words.

BTW: Ideally I would like to have two separate colors within ONE word (no spaces). Not sure if that’s possible. Maybe I’m asking too much. But it would great if it’s possible.

Thanks in advance!

[BVercouteren]

Correction: two words works. Still curious though if two colors within one word would work also. For now this is ok, but two colors in one word is ideal.

[Mehmet S.]

Hi, try this way:

Use this in your Theme Site Title field.

<span style="color: red;">Pos</span><span style="color: green;">sible</span>

Output:

Possible

[BVercouteren]

It works in the preview, but not in the final save. Check: http://www.blogkracht.nl

[Mehmet S.]

Important:

– Select “Theme Site Title” not “WordPress Site Title”.

[BVercouteren]

Now it is fully black. I changes i in Theme Options / General and also in Customize. Both don’t work.

[Mehmet S.]

Remove the above code from your External JS field and this from your custom css field:

/* first word */
.site-title a span {
    color: green;
}
/* second word */
.site-title a {
    color: orange;
}

[BVercouteren]

We got it! Awesome. Thanks for all your help!

[Mehmet S.]

You are welcome.