Jump to content

Astaraiche

Member
  • Posts

    5
  • Joined

  • Last visited

Astaraiche's Achievements

Level 2

Level 2 (2/20)

0

Reputation

  1. 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>
  2. 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.
  3. I am getting the same invalid session crumb error message. Have you found out how to fix this yet?
×
×
  • 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.