CODEWITHSUNDEEP
conditional-statementsblogger
akcan
akcan

Reputation: 299

Blogger - give each label a different color

I'm trying to make each different label in Blogger have a different color, for example each hobbies label to be red, and each movies label to be blue, but it seems to change the color of every single label to red.

This is the current code I have:

<b:loop values='data:post.labels' var='label'> 
  <b:if cond='data:label.name == &quot;hobbies&quot;'>
    <style> .post-labels a { color: red; } </style> 
  </b:if> 
</b:loop>

Upvotes: 0

Views: 840

Answers (2)

Raquel Segal
Raquel Segal

Reputation: 1

Keep the default CSS and HTML code of labels intact, and instead of changing it, do this for each label:

a[href^="http://www.YOURSITE.com/search/label/CINEMA"] {
color: #colorcode !important;
background: #colorcode !important;
}

You can see I've added the entire label path for Cinema. Similarly, take full path of all labels and add different color rules for each label

For example, let's say one more label name is 'Television'.

You can add one more rule like this:

a[href^="http://www.YOURSITE.com/search/label/TELEVISION"] {
color: #colorcode !important;
background: #colorcode !important;
}

Color and background can be of your choice. Make sure you keep the !important directive intact.

Upvotes: 0

Harsimran
Harsimran

Reputation: 486

Easy way would be by adding a class to each label, for example add a class .Movies to label Movies and class named .Hobbies to label Hobbies. This way you can style each label from css rather than adding code for every label.

In this case all you have to do is add expr:class='data:label.name' to <a> tag, this will add class to each label with same name as label itself. 

<b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag' expr:class='data:label.name'><data:label.name/></a>
</b:loop>

Upvotes: 1

Related Questions