Sidebar Widgets as Cards (SCSS)
Styles each sidebar widget as a card with a border, rounded corners, an underlined title and tidy list dividers.
Opens WPIDE on
Code
$card-radius: 8px;
$card-padding: 1.25rem;
$divider: rgba(0, 0, 0, 0.1);
#secondary .widget,
.widget-area .widget,
.sidebar .widget {
margin-bottom: 1.5rem;
padding: $card-padding;
border: 1px solid $divider;
border-radius: $card-radius;
background: var(--wp--preset--color--base, #fff);
.widget-title,
.widgettitle {
margin-top: 0;
padding-bottom: 0.5rem;
border-bottom: 2px solid currentColor;
font-size: 1rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
ul {
margin: 0;
padding-left: 0;
list-style: none;
li {
padding: 0.4rem 0;
border-bottom: 1px solid $divider;
&:last-child {
border-bottom: 0;
}
}
}
}Notes
Adjust the variables at the top. Selectors cover the usual classic theme sidebar classes.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.