- This topic has 15 replies, 2 voices, and was last updated 1 year, 7 months ago by David.
-
AuthorPosts
-
August 25, 2022 at 5:33 am #2323410Glasul 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.
August 25, 2022 at 7:44 am #2323522DavidStaffCustomer SupportHi 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; }
August 28, 2022 at 6:12 am #2326114Glasul VietiiHi, 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!
August 28, 2022 at 8:19 am #2326369DavidStaffCustomer SupportOk
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; }
August 28, 2022 at 10:54 am #2326487Glasul VietiiThank you, is working. You are the best!
August 29, 2022 at 1:24 am #2326842DavidStaffCustomer SupportGlad to hear that
August 29, 2022 at 3:52 am #2326943Glasul VietiiHi,
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;
}August 29, 2022 at 3:52 am #2326944Glasul VietiiNevermind I use: background-color and it is working!
.wp-block-tag-cloud a {
padding: 10px;
background-color: #f8f8f8;
color: black;
}August 29, 2022 at 5:02 am #2327019Glasul VietiiHi,
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
August 29, 2022 at 6:04 am #2327081DavidStaffCustomer SupportIs there an option in the Block to set the variable font size ?
August 29, 2022 at 6:33 am #2327103Glasul VietiiYes, there is and is set smallest 8 and bigger 22.
August 29, 2022 at 6:40 am #2327105DavidStaffCustomer SupportAll 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.August 30, 2022 at 2:59 am #2328109Glasul VietiiHi, 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 */August 30, 2022 at 3:58 am #2328146DavidStaffCustomer SupportChange 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; }
August 30, 2022 at 4:26 am #2328164Glasul VietiiIs Working. You are the best. Thank you!
-
AuthorPosts
- You must be logged in to reply to this topic.