Hello!
How to Customize Tag Cloud?
I am happy with the layout and the weighting given to each word but I want to add a background to each tag, change the font color to multiple colors and add a hover effect when the cursor is place over each tag.
So far but reading other discussions I have managed to:
add a background color #D4D0C7 to each word
add padding around each word, but this is not working properly for the larger words Generous, Generosity, Genius, etc.
This is my test page: https://alasdairgrayspace.net/tag-cloud
CSS used:
<style>
.tagcloud-block ul li {
background-color: #D4D0C7;
padding: 5px 10px;
font-size: 18px;
-webkit-transition: .15s ease-out;
-moz-transition: .15s ease-out;
transition: .15s ease-out;
}
</style>
I cannot work out how to:
increase the gap between each line so each tag is separate
change the tag font color from 1 color to 4 different colors (#4A4766, #BE3437, #325D33, #076279).
I've seen CSS code used to add 3 different colors to bullet points and was hoping something similar could be done with tags?
/* bullet point - create a pattern */
li:nth-of-type(3n+1)>*:first-child::before {color:#4A4766; }
li:nth-of-type(3n+2)>*:first-child::before {color:#BE3437; }
li:nth-of-type(3n)>*:first-child::before {color:#325D33}
Thank you.