Question

I have a wordpress based site where for widgets have titles like

• Browse By Category
• Shopping Cart
• Newsletter
• Community Poll
• etc

Now, I want to display first word of each widget in blue colour and remaining words in black colour.
How do I do that?

(i.e. Browse, Shopping, Newsletter, Community in blue colour rest in black color)

I guess, we can do this using jQuery but I have no idea, how to do that.

EDIT:

Site: http://granitess.com/wp/

Answer 1

You can try this, get iterate all .widget-title, get its text, split by space and change first word with <span style='color:blue;'> and then join all words and set in .widget-title html. like

$('.widget-title').each(function(){
    var $title = $(this).text();
    var words = $title.split(' ');
    words[0] = "<span style='color:blue;'>"+words[0]+"</span>";
    $(this).html(words.join(' '));
});

Edited:

On your side your widget title is in .widget h3 So try this –

$('.widget h3').each(function(){
    var $title = $(this).text();
    var words = $title.split(' ');
    words[0] = "<span style='color:blue;'>"+words[0]+"</span>";
    $(this).html(words[0] + ' <span style="color:black;">' + words.slice(1).join(' ') + '</span>');
});

or If you want same like as in your footer then you can try this

$('.widget h3').each(function(){
    var $title = $(this).text();
    var words = $title.split(' ');
    $(this).html(words[0] + ' <span style="color:#333333;">' + words.slice(1).join(' ') + '</span>');
});