Add colors to your tag cloud for readability

I’m using the A better tag cloud WordPress widget to be able to configure the tag cloud on my blog. It’s a nice widget that I really recommend!

I wanted to make it easier (and prettier) to use by adding colors to the tags. A darker color means a more used tag, a lighter means that the tag is less used. I based my colors on the Tango palette.

The tag cloud with the original CSS to the left and my customized to the right

All different sizes in A better tag cloud already had their different CSS classes so adding colors were easy. All I had to do was to add the following CSS to the bottom of my styles.css file.

/* Add colors to A better tag cloud */
.nktagcloud-8 {
  background-color:#fce94f;
}
.nktagcloud-9 {
  background-color:#edd400;
}
.nktagcloud-10 {
  background-color:#fcaf3e;
}
.nktagcloud-11 {
  background-color:#f57900;
}
.nktagcloud-12 {
  background-color:#ce5c00;
}
.nktagcloud-13 {
  background-color:#e9b96e;
}
.nktagcloud-14 {
  background-color:#8ae234;
}
.nktagcloud-15 {
  background-color:#73d216;
}
.nktagcloud-16 {
  background-color:#4e9a06;
}
.nktagcloud-17 {
  background-color:#729fcf;
}
.nktagcloud-18 {
  background-color:#3465a4;
}
.nktagcloud-19 {
  background-color:#204a87;
}
.nktagcloud-20 {
  background-color:#ad7fa8;
}
.nktagcloud-21 {
  background-color:#ef2929;
}
.nktagcloud-22 {
  background-color:#cc0000;
}

Enjoy!

Publicerat av

Ola

Mångsysslande doer & klätterentusiast. Jag driver varumärket Sten & bloggen Klätterbilder. Jag konsultar inom IT & Marknadsföring samt undervisar inom webb på Folkuniversitetet. Jag älskar att fota. /// Doer & climbing enthusiast. I run the climbing brand Sten & the blog Klätterbilder. Consulting with IT & marketing & teaching at Folkuniversitetet. I love to take pictures.