Build horizontal bar for the category name on the home
-
AuthorPosts
-
I apologize if I still disturb, I would like to ask you if you can insert a red horizontal bar above each category of the home. The category title must be contained within the red bar. A bit like those red rectangles that helped me to insert images in “highlights”.
Here’s how I would like the change: https://preview.ibb.co/fA8Wx0/BARRA-ROSSA.png
Thank you so much. Ah, I forgot, I remind you if you can also answer me here: https://premium-themes.forums.wordpress.com/topic/link-to-the-category-from-bar-category-page-improvements/page/2/
The blog I need help with is: intellettualemoderno.com
P.S: the red bar on “all” the names of the category
You don’t need to remind me. I know what I have and haven’t replied to and I always reply.
add this:
.sidebar-category-summaries .item h3 a { background: #c0392b; color:#ffffff; display: block; padding: 5px 10px; } .sidebar-category-summaries .item h3 { padding-right: 0; }
delete this:
.sidebar-category-summaries .item h3 a { color: #c0392b !important; }
“WOW”: beautiful effect. I am very satisfied, thank you :)
Just one question: how can I reduce the space between the red bar and the posts …… and also reduce the space with the red bar below? (too much white space).
Here’s what I say: https://imgur.com/a/BBhGkoD
THANK YOU
.sidebar-category-summaries .item h3 { padding-top: 0; padding-bottom: 0; } .sidebar-category-summaries .item { margin-bottom: 30px; }
Optional: The padding-top and padding-bottom could be merged with the padding-right instruction from the previous code.
No tried all the css but it does not work. I also tried to add the padding-top and padding-bottom to the previous code … but it also works.
I tried, for example, a question the padding-top and the padding-bottom at 1000, but nothing changes.
I do not understand what’s wrong.
FROM RIGO 5 to 15 OF CSS there is this:
.sidebar-category-summaries .item h3 a {
background: # e20a16;
color: #ffffff;
display: block;
padding: 4px 10px;
}.sidebar-category-summaries .item h3 {
padding-right: 0;
}WHILE, FROM RIGO 80 to RIGO 87 there is this:
.sidebar-category-summaries .item h3 {
padding-top: 10px;
padding-bottom: 10px;
}.sidebar-category-summaries .item {
margin-bottom: 12px;
}I decreased the space between a line and the post above …. but I can not decrease the space between the staff and the post below.
Here is a picture of the problem, and also of the final result that I would like: https://imgur.com/a/n1PkGaV
I’ve just tried it again and the same code worked fine.
To reduce the space as you have in the image, all you need is:
.sidebar-category-summaries .item h3 { padding-bottom: 0; }
Note that you can reduce the gap further (entirely) with
.sidebar-category-summaries .item h3 { margin-bottom: 0; }
Also note that adding a value of 10000 will do nothing since there’s no unit. Unitless values only work for 0. You need to add a px, or em, or rem, or ch, or vh or some other unit (there’s loads of them). In this case px is easiest since it refers to pixels.
So the value would be:
.sidebar-category-summaries .item h3 { padding-bottom: 10000px; }
Now works. All solved, thanks, thanks, thanksssss of patience and kindness
-
AuthorPosts
The topic ‘Build horizontal bar for the category name on the home’ is closed to new replies.