Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • October 27, 2022 at 4:18 am #1370397
    hmsvictory

    I want to do some custom sidebars. I would like the Left Sidebar to go across the full content width before the page content, and the Right Side to go across the full content after the page content. I am struggling to figure out how to do this with the theme settings and CSS.

    I want it to look like this, with all three elements displaying as blocks without any floats:

    October 27, 2022 at 7:35 am #1370403
    Nikko

    Hi hmsvictory,

    I think you can use the Advanced Layout Builder for that.
    You can use a Color Section on top and inside it is a Widget Area element.
    Then you have the middle for the main content and for the bottom another Color Section with Widget Area element.
    I hope this helps.

    Best regards,
    Nikko

    October 27, 2022 at 7:37 am #1370404
    hmsvictory

    For a regular page, I agree. In this case, I want to use this in my WooCommerce store, so it would be better for me to do the layout as sidebars. I understand that I can use the product grid in the advanced layout builder but that is causing pagination and permalink issues.

    October 27, 2022 at 6:11 pm #1370485
    Nikko

    Hi hmsvictory,

    We can help you with CSS, can you give us a link to the page mentioned? so we can make sure the CSS we give you will work.
    You can post the link privately.

    Best regards,
    Nikko

    October 27, 2022 at 6:26 pm #1370486
    hmsvictory

    Sure, it’s in maintenance mode so I will give you admin access. Let me know if you make any changes.

    October 28, 2022 at 8:55 am #1370505
    Nikko

    Hi hmsvictory,

    Thanks for giving us admin access, I have added this CSS code in your Quick CSS:

    #main .container_wrap.sidebar_right .av-section-cont-open {
    display: flex;
    flex-direction: column;
}

#main .container_wrap.sidebar_right .av-section-cont-open > * {
    width: 100%;
}

#main .container_wrap.sidebar_right .av-section-cont-open .entry-content-wrapper {
    padding-right: 0;
}

#main .container_wrap.sidebar_right .av-section-cont-open .inner_sidebar {
    margin-left: 0;
}

    Please review your site.

    Best regards,
    Nikko

    October 29, 2022 at 1:38 am #1370612
    hmsvictory
    This reply has been marked as private.
    November 1, 2022 at 4:59 am #1370877
    hmsvictory

    Nikko, what would the proper selectors be for the left sidebar? I tried but was unsuccessful.

    November 3, 2022 at 9:37 am #1371188
    Nikko

    Hi hmsvictory,

    I apologize for the delayed response.
    Have you tried to change sidebar_right to sidebar_left? It should work unless there some changes in the classnames.
    I remember not seeing any left sidebar in the link you gave before, can you give us a link again? so we can try to inspect and give you CSS that should work.

    Best regards,
    Nikko

    November 4, 2022 at 7:10 am #1371301
    hmsvictory

    I tried but it just wouldn’t work for me. The login info is below, and don’t forget to email me. Thanks Nikko!

    • This reply was modified 2 years ago by hmsvictory.
    November 5, 2022 at 4:32 am #1371399
    Nikko

    Hi hmsvictory,

    Thanks for giving us admin access.
    We have updated the CSS we gave you in Quick CSS:

    #main .container_wrap.sidebar_right .av-section-cont-open,
#main .container_wrap.sidebar_left .av-section-cont-open {
    display: flex;
    flex-direction: column;
}

#main .container_wrap.sidebar_right .av-section-cont-open > *,
#main .container_wrap.sidebar_left .av-section-cont-open > * {
    width: 100%;
}

#main .container_wrap.sidebar_right .av-section-cont-open .entry-content-wrapper,
#main .container_wrap.sidebar_left .av-section-cont-open .entry-content-wrapper {
    padding-right: 0;
}

#main .container_wrap.sidebar_right .av-section-cont-open .inner_sidebar {
    margin-left: 0;
}

#main .container_wrap.sidebar_left .av-section-cont-open .inner_sidebar {
    margin-right: 0;
}

#main .container_wrap.sidebar_left .av-section-cont-open .content {
    padding-left: 0;
    padding-bottom: 0;
}

    Please review your site.

    Best regards,
    Nikko

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.