Support » Theme: Coldbox » No sidebar on single page

  • Resolved quarlton

    (@quarlton)


    Is it possible to have a particular page without a sidebar?
    The sidebar is required on most pages, but on a couple of pages I would like to use a full width page.

    Many thanks

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Toshihiro Kanai

    (@mirucon)

    I do have a plan to support such an option, but I cannot spend much time on this project because I am busy lately 🙁
    In the meantime, you can use the following CSS code.

    If you want to show your sidebar on bottom (and the content is full width), use this:

    body #main #wrapper > .container {
      display: block;
    }
    @media screen and (min-width: 961px) {
      body #main .sidebar-s1 {
        width: 100%;
        margin-top: 24px;
      }
      body #main .sidebar-inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
      }
      body #main .sidebar .widget {
        width: calc(33.333% - 10px);
        margin: 5px;
      }
      body #main .grid-view .page,
      body #main .grid-view .post {
        width: 33.333%;
      }
    }
    body.right-sidebar-s1 .content {
      padding-right: 0;
      padding-left: 0;
    }
    body.right-sidebar-s1 .sidebar-s1{
        margin-left: 0;
    }
    body.right-sidebar-s1 .content {
      padding: 0;
    }

    If you don’t need the sidebar to show entirely, this is for you:

    body #main #wrapper > .container {
      display: block;
    }
    
    body.right-sidebar-s1 .content {
      padding-right: 0;
      padding-left: 0;
    }
    body.right-sidebar-s1 .sidebar-s1{
        display:none;
    }
    

    For both customization, replace all body selector with body.page-id-{PAGE_ID} where you can insert your page ID in {PAGE_ID} to enable it on only specific pages. For example if you have page ID 11 that you want to hide the sidebar entirely, use this:

    body.page-id-11 #main #wrapper > .container {
      display: block;
    }
    
    body.page-id-11.right-sidebar-s1 .content {
      padding-right: 0;
      padding-left: 0;
    }
    body.page-id-11.right-sidebar-s1 .sidebar-s1{
        display:none;
    }
    

    Hope this works. Please let me know if it doesn’t work for you 🙂

    Hi Toshihiro

    Many thanks for your quick response.

    The code for individual pages using PAGE_ID is just what I wanted.

    Thank you very much.

    Hi

    Sorry, forgot to mention that I do get some error messages in the Custom CSS panel:

    Expected LBRACE at Line 38, col 32
    Unexpected token ‘&’ at line 38 col 32
    Expected LBRACE ay line 38, col 35
    Unexpected token ‘;’ at line 38, col 35

    But if I tell it to publish anyway, it works

    Line 38 is:

    body.page-id-13 #main #wrapper > .container {

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.