- This topic has 15 replies, 2 voices, and was last updated 2 years, 7 months ago by
David.
-
AuthorPosts
-
August 25, 2022 at 5:33 am #2323410
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.
August 25, 2022 at 7:44 am #2323522David
StaffCustomer 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 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!
August 28, 2022 at 8:19 am #2326369David
StaffCustomer 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 Vietii
Thank you, is working. You are the best!
August 29, 2022 at 1:24 am #2326842David
StaffCustomer SupportGlad to hear that
August 29, 2022 at 3:52 am #2326943Glasul 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;
}August 29, 2022 at 3:52 am #2326944Glasul Vietii
Nevermind 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 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
August 29, 2022 at 6:04 am #2327081David
StaffCustomer SupportIs there an option in the Block to set the variable font size ?
August 29, 2022 at 6:33 am #2327103Glasul Vietii
Yes, there is and is set smallest 8 and bigger 22.
August 29, 2022 at 6:40 am #2327105David
StaffCustomer 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 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 */August 30, 2022 at 3:58 am #2328146David
StaffCustomer 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 Vietii
Is Working. You are the best. Thank you!
-
AuthorPosts
- You must be logged in to reply to this topic.