Tag Cloud Behavior

[johnboak]

On my own website, the Wordpress Tag Cloud displays just the way I would like it to display on other sites: all of the tag buttons are the same height and font-size, no matter how many posts carry that tag. In other words, I do not want large and small buttons.

home

I cannot figure out how I did that. In fact I do not think I did anything. I want to achieve that look on another site (in which is built in Pro).
My site is running an older version of X-theme (6.5.5).
Thus my question is: do you know how to make a Tag Cloud Widget display “same height and font-size” buttons.
Thanks!

[prakash_s]

Hello @johnboak,

Thanks for writing to us.

To change the font size of the tag cloud, please add this custom CSS under X-->Theme Options-- > CSS:

.widget_tag_cloud .tagcloud a, 
.widget_product_tag_cloud .tagcloud a {
    font-size: 14px !important;
}

You can change the font-size value as per your design.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

How to Inspect Website Elements With Your Web Browser

https://www.w3schools.com/css/default.asp

Thanks

[johnboak]

I added the css to the global css, per your instructions to the target site. Here is post page:
https://1stgenyale.org/2020/06/18/first-gen-in-medicine/

But it does not change the font-size. I also cleared the cache at the site’s host (Godaddy).
Any thoughts?

I have worked long and hard try to find selectors the affect the font-cloud widget.

Thanks for your help.

[marc_a]

Hi @johnboak,

I check your archive page but I don’t see the custom CSS provided by my colleauge to you, can you please double check your CSS settings.

Hope that helps and let us know how it goes.

Thank you.

[johnboak]

You are correct. I reviewed my Global CSS and saw a missing “}” in a previous rule. So your CSS worked perfectly! Thanks.

I am also try to control the padding on those same Tag buttons. Inspect Element shows the following selectors. But It never works when I place the followint in the global CSS, with or without the !important.

.widget_tag_cloud .tagcloud a, .widget_product_tag_cloud .tagcloud a {
padding: .5em, .8em, .5em, .8em !important;
}
My Selector and Rules shows up in Inspect Element but it is crossed out.

What do you think might make it work?

[friech]

Hi @johnboak,

Please remove the comma [,] separating your values.

@johnboak

padding: .5em, .8em, .5em, .8em !important;

CSS Shorthand properties

Thanks,

[johnboak]

Thanks!!!

[…extra characters to make forum code happy… ]

[friech]

We are delighted to assist you with this.

Cheers!