Jump to content

Customize tag cloud

Recommended Posts

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 tagchange 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:

  1. add a background color #D4D0C7 to each word
  2. 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:

  1. increase the gap between each line so each tag is separate
  2. 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.

chrome_1xP8TssM6T.jpg

Link to comment

Use this CSS code under

<style>
ul.sqs-tagcloud li {
    margin-bottom: 10px;
}
  ul.sqs-tagcloud>li:nth-child(3n) span {
    color: #4A4766 !important;
}
ul.sqs-tagcloud>li:nth-child(3n+2) span {
    color: #f1f !important;
}
ul.sqs-tagcloud>li:nth-child(3n+3) span {
    color: red !important;
}
ul.sqs-tagcloud>li:nth-child(3n+4) span {
    color: blue !important;
}
</style>

You can replace example color with your color

image.thumb.png.881ada373dd3121c5ea953d0d3a9e9cc.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/13/2024 at 2:48 AM, tuanphan said:

Use this CSS code under

<style>
ul.sqs-tagcloud li {
    margin-bottom: 10px;
}
  ul.sqs-tagcloud>li:nth-child(3n) span {
    color: #4A4766 !important;
}
ul.sqs-tagcloud>li:nth-child(3n+2) span {
    color: #f1f !important;
}
ul.sqs-tagcloud>li:nth-child(3n+3) span {
    color: red !important;
}
ul.sqs-tagcloud>li:nth-child(3n+4) span {
    color: blue !important;
}
</style>

You can replace example color with your color

image.thumb.png.881ada373dd3121c5ea953d0d3a9e9cc.png

Thank you so much. I added your code and kept the background and padding code as well and it looks so much better. Because the words are different sizes is there any way to make the padding consistent around each word? For example the word Generous needs more padding say 18px, but I want to leave the other words at 10px?

Thanks.

Code used to create image below:

<style>
ul.sqs-tagcloud li {
    background-color: #D4D0C7;
    padding: 10px 10px;
    margin-bottom: 10px;
}
  ul.sqs-tagcloud>li:nth-child(4n) span {
    color: #4A4766 !important;
}
ul.sqs-tagcloud>li:nth-child(4n+1) span {
    color: #325D33 !important;
}
ul.sqs-tagcloud>li:nth-child(4n+2) span {
    color: #076279 !important;
}
ul.sqs-tagcloud>li:nth-child(4n+3) span {
    color: #4A4766 !important;
}
ul.sqs-tagcloud>li:nth-child(4n+4) span {
    color: #BE3437 !important;
}
</style>

chrome_Qcy18cBx9v.jpg

Link to comment

How about set same size for all text?

ul.sqs-tagcloud li span {
    font-size: 18px !important;
}

In case you still want to keep different size, use this code

ul.sqs-tagcloud [href="/heart/tag/Generous"] span {
    padding: 18px !important;
    display: inline-block;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.