CODEWITHSUNDEEP
csswidgettitleblogger
Ree Tom
Ree Tom

Reputation: 19

Style a part of widget title for Blogger?

How do I make only one "word2" of the widget title bold or of red color?

Or how do I split Blogspot widget title in two or three inline parts? And then separately style its parts.

in CSS I got:

<b:widget id='Profile1' locked='false' title='word1 word2 word3' type='Profile' version='1' visible='true'>

All my multiple attempts produced errors, coz I am not a PRO

Upvotes: 1

Views: 744

Answers (1)

Prayag Verma
Prayag Verma

Reputation: 5651

Blogger only allows adding the following HTML tags in the Title field of a widget -

You can use some HTML tags, such as <b>, <i>, <a>

In your case, when editing the title of your widget, change it to -

word1 <b>word2</b> word3

Changing the color and other properties cannot be directly done. You will instead need to use the above HTML tags and CSS to achieve that

Like for example -

  1. You want word2 to be bold and with red color, then you will first need to modify the title to 

    word1 <b>word2</b> word3

    and then also add the following CSS

    #Profile1 h2 b {color:red;}

  2. If you only want the word2 to have the color red, without being bold, then modify the title to

    word1 <b>word2</b> word3

    and then add the following CSS

    #Profile1 h2 b {color:red;font-weight:normal;}

  3. If you want the word1 to have bold font & color blue and the word3 to have the color green, then modify the title to

    <b>word1</b> word2 <b>word3</b>

    and then add the following CSS

    #Profile1 h2 b:nth-child(1) {color:blue;}
#Profile1 h2 b:nth-child(2) {color:green;font-weight:normal;}

The CSS selector will change according to the id of the widget.

Upvotes: 0

Related Questions