Styling Tag Cloud

Hi there,

if you inspect the block on the frontend in the browser developers tools you should see its HTML eg.

<p class="wp-block-tag-cloud">
    <a  class="tag-cloud-link tag-link-18 tag-link-position-1" style="font-size: 22pt;" aria-label="cheese (2 items)">cheese</a>
</p>

So you can see the markup exists for you to use the href eg.

.wp-block-tag-cloud a[class*="the_tag_term"] {
     /* your styles here */
}

Thank you for that. I will amend my code as advised.

still learning about CSS and what I can and cannot use from the dev tools. I sort of understand most of it and know the difference between # and . But do struggle when selectors are seemingly merged.

How about the hover state issue. Any suggestions?

The hover state CSS should work, I don’t see why not?

Do you have other CSS might conflict with it? If you can provide your site link, we can take a look for you.

This is the main section that styles the tags in the tag cloud:

.tag-cloud-link {
    display: inline-block;
    flex-grow: 1;
    font-size: 14px;
	font-weight: 600;
    padding: 5px 10px;
	margin: 5px 5px 0px 0px;
    text-decoration: none;
    background-color: var(--base-5);
    color: var(--base-3);
	font: "Oxygen","Arial",Sans-Serif;
    text-transform: uppercase;
    border-radius: 4px;
	line-height: initial;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
.tag-cloud-link:hover {
    background:rgba(100,100,100, 0.2);
}

Note the default colours for the background and text. This is there so that I can still see tags that have not had a custom style added yet.

When I use my original code it styles the relevant tag, IE:

/* Security - Red */
.tag-link-18 {
	background-color:#ff3e00;
}

However, when I use the code that David suggested the tag just shows with the default background and text colour defined in the main section.

.wp-block-tag-cloud a[class*="security"] {
	background-color:#ff3e00;
}

I can only make the changes on my local development site at the moment as Ying is currently helping on another topic where I have had to disable everything, including my child theme.

Yes, David’s CSS overrides the hover state CSS as you only have 1 selector in that CSS.

Try this to make the selector more specific:

.wp-block-tag-cloud a.tag-cloud-link:hover {
    background-color: rgba(100,100,100, 0.2);
}

I now have the following code:

.tag-cloud-link {
    display: inline-block;
    flex-grow: 1;
    font-size: 14px;
	font-weight: 600;
    padding: 5px 10px;
	margin: 5px 5px 0px 0px;
    text-decoration: none;
    background-color: var(--base-5);
    color: var(--base-3);
	font: "Oxygen","Arial",Sans-Serif;
    text-transform: uppercase;
    border-radius: 4px;
	line-height: initial;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
.wp-block-tag-cloud a.tag-cloud-link:hover {
    background-color: rgba(100,100,100, 0.2);
}

/* Featured - Light Yellow */
.wp-block-tag-cloud a[class*="featured"] {
	background-color:#dcbf37;
}

If you visit: All Articles – CrikeyThatsMint and scroll down a bit, you’ll see that the Featured tag in the Tag Cloud has the default colours still, as opposed to the light yellow colour that is meant to be showing.

*EDIT

The site is now live again as the other issue has been resolved. Take a look for yourself.

The above featured tag shows as class="tag-cloud-link tag-link-13 tag-link-position-3" when viewing it with the dev tools. However, It only seems to work for me when I specifically tell it to affect .tag-link-13 (each obviously has their own number).

.wp-block-tag-cloud doesn’t seem to do anything at all.

Been playing round on my local dev site and noticed that if I change .wp-block-tag-cloud a[class*="featured"] to .wp-block-tag-cloud a then all tags do indeed turn yellow. However, i am of course attempting to style them individually. Just thought I would share my findings.

So what’s the issue now?

The issue is that I do not want all the tags the same colour… I have them all set to their individual colours to match the tags that are shown under each post. However, when using my original code I have to stipulate the ID of each. My original question was, is it possible to use the tag name instead of the ID (IE [class*="security"]).

I think David was meant to say .wp-block-tag-cloud .tag-cloud-link[href*="security"]

That did the trick. Awesome thank you so much all.

The only issue now is the hover state…. Currently it just fades the text to black and does not affect the colour of the background at all.

The plan was to have it alter the opacity of the entire button.

This is what I currently have:

.tag-cloud-link {
    display: inline-block;
    flex-grow: 1;
    font-size: 14px;
	font-weight: 600;
    padding: 5px 10px;
	margin: 5px 5px 0px 0px;
    text-decoration: none;
    background-color: var(--base-5);
    color: var(--base-3);
	font: "Oxygen","Arial",Sans-Serif;
    text-transform: uppercase;
    border-radius: 4px;
	line-height: initial;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
.tag-cloud-link:hover {
    background:rgba(100,100,100, 0.2);
}

/* Featured - Light Yellow */
.wp-block-tag-cloud .tag-cloud-link[href*="featured"] {
	background-color:#dcbf37;
}

/* CSS - Grey */
.wp-block-tag-cloud .tag-cloud-link[href*="css"] {
	background-color:#eee;
	color: #000;
}

/* Customisation - Green */
.wp-block-tag-cloud .tag-cloud-link[href*="customisation"] {
	background-color:#77bb2c;
}

/* JavaScript - Pale Yellow */
.wp-block-tag-cloud .tag-cloud-link[href*="javascript"] {
	background-color:#611ab8;
}

/* MySQL - Logo Blue */
.wp-block-tag-cloud .tag-cloud-link[href*="mysql"] {
	background-color:#00758d;
}

/* PHP - Logo Blue */
.wp-block-tag-cloud .tag-cloud-link[href*="php"] {
	background-color:#8793bc;
}

/* HTML - Black */
.wp-block-tag-cloud .tag-cloud-link[href*="html"] {
	background-color:#000;
}

/* Security - Red */
.wp-block-tag-cloud .tag-cloud-link[href*="security"] {
	background-color:#ff3e00;
}

/* Tips & Tricks - Red */
.wp-block-tag-cloud .tag-cloud-link[href*="tips"] {
	background-color:#ff3e00;
}

Do you mean the tag links in the footer meta or the tag links of the tag cloud?

If it’s the tag cloud, try change this:

.tag-cloud-link:hover {
background:rgba(100,100,100, 0.2);
}

to this:

.wp-block-tag-cloud a.tag-cloud-link:hover {
background:rgba(100,100,100, 0.2) !important;
}

I tried changing the hover state to match my tags and categories by simply using opacity: 0.4; but they both behave differently for some reason..

For example, if I set my tags and categories have the following CSS:

.entry-meta .tags-links a, .entry-meta .cat-links a {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    padding: 5px 10px;
    margin: 5px 5px 0px 0px;
    text-decoration: none;
    background-color: var(--base-5);
    color: var(--base-3);
    font: "Oxygen","Arial",Sans-Serif;
    text-transform: uppercase;
    border-radius: 4px;
    line-height: initial;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

.entry-meta .tags-links a:hover, .entry-meta .cat-links a:hover {
    background:rgba(100,100,100, 0.2) !important;
}

and my tag cloud the same using:

.tag-cloud-link {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    padding: 5px 10px;
    margin: 5px 5px 0px 0px;
    text-decoration: none;
    background-color: var(--base-5);
    color: var(--base-3);
    font: "Oxygen","Arial",Sans-Serif;
    text-transform: uppercase;
    border-radius: 4px;
    line-height: initial;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
.wp-block-tag-cloud a.tag-cloud-link:hover {
    background:rgba(100,100,100, 0.2) !important;
}

They both produce a different effect when hovered over.

I have updated the live site to use the above CSS for both the tags and categories and also the tag cloud. Hover over them to see the difference.

See how the tags and categories below each post does what I would imagine and simply alters the opacity of both the background and text when hovered over; but when hovering over the tags in the tag cloud the text turns dark.

• This reply was modified 7 months ago by Bri.

Where on your site can I see the cloud tag?

Let me know ??

Go here: https://crikeythatsmint.com/all-articles/ then scroll down until you can see them side by side like this:

Now hover over the category or tags below the post and compare it to the tags in the tag cloud. They are both using the exact same CSS for their hover states so why do they show differently?