Wordpress Update Changes Appearance of Tag Cloud Widget

Support
#1

Hello,

I need to update my WP version to 4.8, but it causes a problem in my Child theme. When I upgrade the site to 4.8, the appearance of the Tag Cloud is altered.

On the site here: www.corpsyn.com/knowledge-center you can see the Filter by Category items are set to all be the same size.

After I update Wordpress to 4.8, the same widget looks like this:

I saved the page with the altered widget on my staging site here: http://corpsyn.staging.wpengine.com/knowledge-center/ if you want to look at the code. The live site will remain unchanged, since we can’t publish the tag cloud like this.

I am using a Child theme, so the appearance of the widget shouldn’t be affected, but I don’t know how to fix it. Any help is greatly appreciated!

Thank you!

#2

Hi there,

I strongly recommend that you update your theme to version 5.0.1 and Cornerstone to 2.0.5 in your staging server using this guide:

As if the theme gets old problems will start and it is better to do it as soon as possible.

To fix the issue you mentioned please add the CSS code below to Appearance > Customize > Additional CSS:

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

Thank you.

1 Like
#3

Thank you so much for the fix!

Yes, we are currently in the process of updating our site. Unfortunately, we have some plugins that are causing an issue with the Cornerstone and XTheme update, so we are currently working around that.

Thanks again!

#4

Hi there,

Thank you for considering the update and hope you can find a workaround regarding the conflict.

#5

Hi there,

I just found this post and was able to solve 50% of my issue with it.
Many thx!! :slight_smile:
The thing I couldn’t fix is, I would like to limit the tags shown in my footer to a specific number of tags.
Because the widget is showing too many tags now, it is super long . How do you usually deal with this issue?
Just limit the no. of Tags or? Would be very grateful for your solution.
Please look at my screenshot for a better understanding Thank you ! maik

#6

Hi @Maik,

Thanks for writing around! Please add the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

.tagcloud {
    max-height: 320px;
    overflow: hidden;
}

Let us know how this goes!

1 Like
#7

@Nabeel it works perfectly!

Thank you very much!!

1 Like
#8

You’re welcome.

#9

I added this to one of my sites but it’s not working. If I add “!important” in the relevant section in developer tools, it works fine. But when I add it to my custom CSS it doesn’t work. Any ideas? Do you want me to open a new thread for this? The site is https://www.lauracrobb.com/blog/.

#10

Hi There,

If a certain CSS is working on developer tools but not when you add it on your GLOBAL CSS even if !important was added, this means a CSS syntax error is preventing it from working. Make sure that all open curly brace { has corresponding closing curly brace }. I can confirm that’s the reason.
If CSS encounter a syntax error, CSS after that part will not work.

Hope this helps.

#11

Ah! Of course. Thanks for catching that. :slight_smile:

#12

You are welcome!