Archived topic
Add Lines Under Each Category in Sidebar and Remove The Link Color
15 replies · Started by Ivaylo on August 9, 2022
I would like to have a thin line under each category on the sidebar widget and would like to keep the color of the category name original ( black ) instead of blue like a link color.

Hi there,
can i see this on your site ?
The theme is replaced with GeneratePress so you can't see it anymore while it is live.
Try adding this CSS:
.widget_categories a {
color: #000;
display: block;
border-bottom: 1px solid #ccc;
}
That makes it exactly what I need.
One more thing though -how to change the font for these categories?
In Customizer > Typography --> Add New Typography.
In the list of Target Elements, select Custom
In the CSS class field provided add: .widget_categories
Now set the font styles you need.
I don't have the option Add New Typography
Ah, ok you would need to activate Dynamic Typography in Customizer > General.
Read here first:
https://docs.generatepress.com/article/dynamic-typography-overview/
Note - its a one way change. If you change to dynamic theres no going back. Unless you have a backup site. GP will try its best to convert all your current Typography settings to the new system, i have yet to see it go wrong, so this is more a polite warning :)
Would this change slow down my websites? Is the dynamic change adds something that will change dynamically on my website? Every time I hear dynamic it makes me anxious. Does this adds more CSS or JS code to my website, especially front end?
No change to site performance.
Theres no Javascript or any additional CSS.
In most cases there is actually less CSS.
The reason we call it Dynamic is that it only creates the CSS for the Typograghy settings you make.
Whereas in the old method it may load a style by default that you do not use.
If you're concerned and do not want to do that today, then you write your own CSS. eg.
Chang this:
.widget_categories a {
color: #000;
display: block;
border-bottom: 1px solid #ccc;
}
to:
.widget_categories a {
color: #000;
display: block;
border-bottom: 1px solid #ccc;
font-family: your-font;
font-size: 15px;
font-weight: bold;
}
Note if you're wanting to set the font-family: your-font; then it must be a font you already have in the Customizer settings.
Where to change this - in the stylesheet.css?
The CSS i gave you here:
Change that, wherever you put it :)
Thanks, all is good now!
Resolved