[Resolved] Layout element sidebars sizing

[Andrew]

Hi, I’ve created a layout that’s used on product archive pages. sidebar/content/sidebar. I don’t see any way to control the width of the sidebars or customize the widgets within them.

Can you please help to limit the sidebar size to around 20% and advise how I would go about customizing the widget elements?

Please don’t say CSS. 🙁

Thanks
Andrew

[Ying]

Hi Andrew,

Have you tried the settings in customizer > layout > sidebar.
https://docs.generatepress.com/article/sidebar-layout-overview/

Let me know 🙂

[Andrew]

Oh wow what a dummy I am. I figured since my default layout was full width that those settings were no longer useful. LOL

Thank you.

Now as far as styling the widgets, is there any guide available so that I don’t have to wade through web developer tools? I’m not a designer or developer and all the levels of CSS take hours for me to work out. Would be grateful for any guidance on this. On the left I have some woo filters and on the right I have recently viewed.

[Ying]

It becomes a pure CSS question 🙂

Sorry we don’t have specific guide for this.

If you can show us a example site and what you have achieved on your site, we might be able to point you the right direction!

[Andrew]

https://w3.traveltek.com.au/laptop-notebook

I want to reduce the font sizes, the button sizes, add radius to buttons etc.

[Andrew]

All good I worked most of it out. I’ll come back with another ticket if I have more questions.

Thanks again.

[Ying]

You are welcome 🙂

Widget titles:

.inside-left-sidebar .widget-title {
    font-size: 15px; {
}

First widget button:

.woocommerce .widget_price_filter .price_slider_amount .button {
    border-radius: 4px;
    font-size: 1em;
}

First widget text:

.price_slider_amount span {
    font-size: 1em;
}

Second widget button:

.inside-left-sidebar #pwb_filter_by_brand_widget-2 button {
    font-size: 15px;
    border-radius: 4px;
}

Second widget text:

.inside-left-sidebar #pwb_filter_by_brand_widget-2 li {
    font-size: 15px;
    padding: 0 0 10px 0;
}

[Author]

Posts