Archived topic
Styling Sidebar Widget Titles, Padding
1 reply · Started by Gary on July 2, 2021
Hi! How can I style the appearance of the widget titles in the sidebars of my pages on https://www.enewspf.com. Would like to decrease the padding above them, perhaps style the background color of their DIVs, decrease font-size, etc.
Styles like the Archives and Categories widgets widgets on this page:
They're spaced so far apart.
Thanks!
Hi there,
try the following:
1. Customizer > Layout > Sidebars - and change the desktop padding - to 20px for all values, except for Top padding which you can set to 0
2. Customizer > Typography > Widgets and reduce the Font size and its bottom margin.
3. Then you can add some background style for the widget title:
.sidebar .widget .widget-title {
background-color: #186519;
color: #fff;
text-transform: uppercase;
padding: 15px 20px;
margin-left: -20px;
margin-right: -20px;
}This CSS will force the title background to fill the width of the widget. Note these three properties:
padding: 15px 20px;
margin-left: -20px;
margin-right: -20px;The 20px and -20px need to match the padding values you set in the customizer - hence point 1 above.
To really benefit from the effect add a Background color to Customizer > Colors > Sidebar Widgets
