CSS code for tag cloud not working

Hi there,

try this CSS:

.wp-block-tag-cloud a.tag-cloud-link {
    font-size: 12px !important;
    /* extra styles */
    padding: 5px;
    border: 1px solid #777;
    border-radius: 5px;
}

.wp-block-tag-cloud a {
    padding: 10px;
    background: red;
    color: white;
}

Hi, thank you, is working!

1. I customize a bit for margins, but i dont know how can I make all the little boxes(aka tags with borders) to fill up all the space on the left margin, like the option Justify from Word?

2. How can i make the tag (from tag cloud) to change color when i hoover over it (like in a menu)?

You can check here: http://test.glasulvietii.ro/category/stiri/ – scroll down and on the right you will see the tag cloud.

Thanks!

Ok

1. Make the tags fill the space. Add this CSS:

.wp-block-tag-cloud {
    display: flex;
    flex-wrap: wrap;
}
.wp-block-tag-cloud a {
    flex-grow: 1;
    text-align: center;
}

2. Make the color changes on hover:

.wp-block-tag-cloud a:hover {
    background-color: #000;
    color: #fff;
}

Thank you, is working. You are the best!

Glad to hear that

Hi,

I dont know if i can write in the same post but i can not change the background color on the tag:

.wp-block-tag-cloud a {
padding: 10px;
  background: #f8f8f8; Here the code is for a light gray but does not change the color, if I use the text "lightgray" it works but i dont like the color ?
color: black;
}

Nevermind I use: background-color and it is working!

.wp-block-tag-cloud a {
padding: 10px;
  background-color: #f8f8f8;
color: black;
}

Hi,

How can i make the font of the most used tags (more posts) to be bigger, the less used ones (few posts) - the font will be smaller and so on and preserve the css format in custom settings?

Thanks

Is there an option in the Block to set the variable font size ?

Yes, there is and is set smallest 8 and bigger 22.

All of those tags, show there is only a single post in each, which is why they are all 8pt text size.
If you add more posts to a tag, then the size should automatically change.

Hi, you can check here:

https://glasulvietii.ro/category/stiri/ (scroll down)

If i remove the custom CSS code for tag cloud is working (there are bigger and smaller). You can check, the custom code is removed.

This is the custom code for tag cloud (if i remove the code the tags are bigger and smaller):

/* Tag cloud customize */
.wp-block-tag-cloud a.tag-cloud-link {
font-size: 12px !important;
/* extra styles */
padding: 5px;
border: 1px solid #777;
border-radius: 5px;
margin-bottom: 5px;
}

.wp-block-tag-cloud a {
padding: 10px;
  background-color: #f8f8f8;
color: black;
}
/* end */

/* Make the Tag fill the space */
.wp-block-tag-cloud {
display: flex;
flex-wrap: wrap;
}
.wp-block-tag-cloud a {
flex-grow: 1;
text-align: center;
}
/* end */

/* Make the color of tag change on hoover */
.wp-block-tag-cloud a:hover {
background-color: #000;
color: #fff;
}
/* end */

Change that CSS to:

.wp-block-tag-cloud {
    display: flex;
    flex-wrap: wrap;
}

.wp-block-tag-cloud a.tag-cloud-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    line-height: 1em;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 5px;
    border: 1px solid #777;
    background-color: #f8f8f8;
    color: black;
}
/* tag hover colors */
.wp-block-tag-cloud a:hover {
    background-color: #000;
    color: #fff;
}

Is Working. You are the best. Thank you!