Archived topic
Border + Spacing around widgets
7 replies · Started by Caitriona on October 3, 2020
Hello, I wanted to add boxes around my sidebar widgets and used this code:
.sidebar .widget {
border: 1px solid rgba(232, 234, 237, 1);
box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}
This is great but I also need to increase the spacing between the words and the box outline. How do I go about this?
Hi there,
you can add some padding to the widgets in Customizer > Layout > Sidebars --> Widget Padding.
Thank you for your response! That's really helpful :) Is there any way to get this kind of padding on just one or two of the sidebar panels? It seems to make the images much smaller so id like to have it on the text widgets only.
Aah ok - so i would do this:
1. Install this plugin:
https://en-gb.wordpress.org/plugins/widget-css-classes/
2. With that installed you can now add a CSS class of no-padding to the widgets you want no padding.
3. Add this CSS to the site:
#right-sidebar .no-padding {
padding: 0;
}I'm not too fond of plugins and maybe it has grown on me the way it is. Happy enough at the moment but might change again later. Thanks :)
Try this CSS:
#right-sidebar .widget:nth-child(2),
#right-sidebar .widget:nth-child(8) {
padding: 20px;
}It will add the padding back to the 2nd and 8th widget.
That works really well -- thank you so much! :)
Glad to be of help
