Jump to content

Tag Cloud - Each Item on New Line

Recommended Posts

Site URL: https://lobster-parakeet-5fh3.squarespace.com/index

Hello! I'm using the Tag Cloud to create an index page for our blog.

I've formatted the cloud to appear in columns — but I can't figure out how to force each tag to have a paragraph break after it and start on a new line. (Although the columns help to force things onto new lines, when site is viewed on a wide screen, the tags still run together because they do not have a hard paragraph break.)

https://lobster-parakeet-5fh3.squarespace.com/index

Pass: MV

Screen Shot 2021-08-05 at 10.57.48 AM.png

Link to comment
  • Replies 3
  • Views 2k
  • Created
  • Last Reply

Top Posters In This Topic

On 8/6/2021 at 12:58 AM, chavous_writes said:

Site URL: https://lobster-parakeet-5fh3.squarespace.com/index

Hello! I'm using the Tag Cloud to create an index page for our blog.

I've formatted the cloud to appear in columns — but I can't figure out how to force each tag to have a paragraph break after it and start on a new line. (Although the columns help to force things onto new lines, when site is viewed on a wide screen, the tags still run together because they do not have a hard paragraph break.)

https://lobster-parakeet-5fh3.squarespace.com/index

Pass: MV

Screen Shot 2021-08-05 at 10.57.48 AM.png

Hi. Use this code

/* tagcloud new line */
ul.sqs-tagcloud li {
    display: block !important;
}

 

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
  • 2 years later...

Hi Everyone,

we thought the tagcloud design looks a little messy, so here we have redesigned it to be button styled, grey and with darker grey hover background
https://www.ikko-ikki.org/tagcloud-block-design-for-squarespace-7-1

Live demo:
https://www.ikko-ikki.org/articles

Hope y'all enjoy and can use it ... btw, this is free and there is no support or customization for it, but you can change color and spacing simply in the css code.

free-tagcloud-design-squarespace7-1.jpg

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.