CSS to affect only to left OR right sidebar

[Jaakko Pöntinen]

Hi again.

I have widgets in the sidebar on the right of the content, and want them to have padding. They do, according to the Element spacing options in the WP customizer.

I made a slideshow and added it to the left sidebar as a widget. The widget has padding according to the same setting in the customizer. I’d want to adjust the padding on the left side sidebar to 0. I don’t know which containers to apply the CSS to. Firebug shows so many classes and id’s that sum up the left sidebar that I just don’t have the tiniest clue what to edit.

Here’s some of the code Firebug fetches, following the Slideshow widget’s code further down isn’t (I think) necessary, I think the padding should be set on the widget’s parent.

<div id="left-sidebar" class="widget-area grid-15 tablet-grid-15 grid-parent sidebar pull-65 tablet-pull-65" role="complementary" itemscope="itemscope" itemtype="http://schema.org/WPSideBar">
<div class="inside-left-sidebar">
<aside id="slideshowwidget-2" class="widget inner-padding SlideshowWidget" title="Shift-click to edit this widget.">
<div class="slideshow_container slideshow_container_style-light" data-style-version="2.3.1" data-style-name="style-light" data-slideshow-id="3062" style="height: 700px; width: 155px;" data-slideshow-active="1">
</aside>
</div>
</div>

Thanks again,

– Jaakko Pöntinen

Jaakko Pöntinen / Mainio Mooses sp.
WordPress / WooCommerce development

[Tom]

If you’re only wanting to apply it to one specific widget, you can use the ID there (slideshowwidget-2).

So it would be:

.widget#slideshowwidget-2 {
    padding: 0;
}

If you want to apply it to all left sidebar widgets, this should do it:

.inside-left-sidebar .widget {
    padding: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jaakko Pöntinen]

Thank you again. Solved 100%.

– Jaakko Pöntinen

Jaakko Pöntinen / Mainio Mooses sp.
WordPress / WooCommerce development

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts