Return to previous page

Styling the sidebar - by tumoneygram@gmail.com

This topic has 8 replies, 2 voices, and was last updated 5 years ago ago by Rose Tyler

tumoneygram@gmail.com

Participant

December 13, 2020 at 21:02

Hi,

I would like to customize the appearance of the sidebar:

Grey backround
Solid border 1px
7px of padding in the top, bottom
5 px of padding in the right and left

Please, contact administrator
for this information.

#263864 Copied Theme version: 7.1.3

7 Answers
Rose Tyler

Support staff

December 14, 2020 at 08:32
Hi,

Try to add the next code in Theme Options > Theme Custom CSS:

.post-type-archive-product .sidebar-left { background-color: #e2e2e2; border: 1px solid black; padding: 7px 5px 5px 5px; } .s_widgets-with-scroll .sidebar .sidebar-widget:not(.sidebar-slider) > ul:after { background: none; } .post-type-archive-product .wc-layered-nav-term a:before, .post-type-archive-product .wc-layered-nav-rating a:before, .post-type-archive-product .etheme_widget_brands_filter li a:before, .post-type-archive-product .etheme-product-status-filter a:before { border-color: #888888; }

Regards
#263887 Copied
tumoneygram@gmail.com

Participant

December 14, 2020 at 10:37

Thank you very much Rose.

There is a problem. The sidebar changes the styling just in the principal store page but not in product category pages. I just need this for desktop version as in the mobile version, I have off canvas filters.

Please contact administrator
for this information.

#263897 Copied

Rose Tyler

Support staff

December 14, 2020 at 10:57

Hello,

Change the code to: https://prnt.sc/w29ir3
.tax-product_cat
, place this code in Theme Options > Theme Custom CSS > Custom CSS area for desctop.

Regards

#263899 Copied

tumoneygram@gmail.com

Participant

December 14, 2020 at 11:52

Thank you very much Rose

I am very grateful for your help

It seems to work ok. I have pasted this code:

/* ========= SIDEBAR STYLYING ========== */
.post-type-archive-product .sidebar-left, .tax-product_cat .sidebar-left {
background-color: #fdfdfd;
border: 1px solid lightgrey;
padding: 20px 20px 20px 20px;
}
.s_widgets-with-scroll .sidebar .sidebar-widget:not(.sidebar-slider) > ul:after {
background: none;
}
.post-type-archive-product .tax-product_cat .wc-layered-nav-term a:before,
.post-type-archive-product .tax-product_cat .wc-layered-nav-rating a:before,
.post-type-archive-product .tax-product_cat .etheme_widget_brands_filter li a:before,
.post-type-archive-product .tax-product_cat .etheme-product-status-filter a:before {
border-color: lightgrey;
}

If everything is correct, this topic can be closed

#263910 Copied

Rose Tyler

Support staff

December 14, 2020 at 13:52

Hello,

Delete this part of code – https://prnt.sc/w2easm

Regards

#263925 Copied

tumoneygram@gmail.com

Participant

December 14, 2020 at 14:49

Thank you very much

#263927 Copied

Rose Tyler

Support staff

December 14, 2020 at 15:19

You’re welcome!

Regards

#263933 Copied
Viewing 8 results - 1 through 8 (of 8 total)