Styling the sidebar - by tumoneygram@gmail.com

Solved7 replies2 participantsUpdated by Rose Tyler

  • Avatar: tumoneygram@gmail.com
    tumoneygram@gmail.com
    Participant

    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

    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    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
    Avatar: tumoneygram@gmail.com
    tumoneygram@gmail.com
    Participant

    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
    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    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
    Avatar: tumoneygram@gmail.com
    tumoneygram@gmail.com
    Participant

    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
    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    Hello,

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

    Regards

    #263925 Copied
    Avatar: tumoneygram@gmail.com
    tumoneygram@gmail.com
    Participant

    Thank you very much

    #263927 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    You’re welcome!

    Regards

    #263933 Copied

The issue related to '‘Styling the sidebar’' has been successfully resolved, and the topic is now closed for further responses