[Resolved] CSS code for tag cloud not working

[Glasul Vietii]

Hi, i am trying to style the tag cloud in Appereance – Additonal CSS with this code:

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

.tagcloud a {
padding: 10px;
background: red;
color: white;
}

But no changes so far. What i am doing wrong?

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

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Glasul Vietii]

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!

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Glasul Vietii]

Thank you, is working. You are the best!

[David]

Glad to hear that

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Glasul Vietii]

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;
}

[Glasul Vietii]

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

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

[Glasul Vietii]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Glasul Vietii]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Glasul Vietii]

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 */

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Glasul Vietii]

Is Working. You are the best. Thank you!

[Author]

Posts