Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #778038

    Boxed layout, top header. We have a number of pages with custom sidebars and would like the background for the sidebar to span the entire height of the page. It appears that there’s no sidebar div to target with our styling.

    Accomplishing this through columns in the advanced layout editor is not a solution we can use for this problem. Link in Private Comments.

    #778178

    Hey Andrew,
    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (min-width:767px) {
    #main .container_wrap_first > .container {
    padding-right:0!important;
    }
    .sidebar {
    	position: absolute;    
        top:0;
        left:0;
        padding-left:30px!important;
        bottom:0;
        max-width:calc(25% - 50px);
        background:gold;
    }}
    

    Best regards,
    Vinay

    #778204

    That works. A couple of followup questions please:

    1. Is there a way to adjust the spacing between the sidebar and the main content? It’s about 2x bigger that we want it.

    2. What’s the best way change the background color of the sidebar background on pages? Just use the page id like: .page-id-12597 .sidebar {
    background:red;
    }
    That works, but if there’s a more elegant way, particularly one that lets you set based on what page the page is a child of would be appreciated!

    #778287

    Hi,

    1. You can try adding padding to the right and left or set a min-width to the sidebar.

    2. If you like to add a different background color to different pages please use the page id class, it’s the best way to achieve it.

    Best regards,
    Vinay

    #779273

    Targeting by page-id works, but how do I set a default background color for all the other pages?

    I tried both “.page” and “.page-template-default” of these above the specific page-id directives but nothing seems to work:

    .page-template-default .sidebar { background-color: #4c8599; width: 260px !important;}
    .page-id-12564 .sidebar { background-color: #b2a0ab; width: 260px !important;}

    Also, how would I change the link colors on the custom menus in a section? Looking for the easiest way, but I’d settle for any way!! See below for the page.

    #779541

    Hi,

    Here is how to specify the width of sidebar once and how to adjust menu links in that sidebar

    
    #top #main .sidebar_left .sidebar {
        width: 260px !important;
    }
    
    #nav_menu-5 li a {
        color: #ffffff;
    }
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #779684

    Great. One more thing is that the sidebar goes crazy on the page that I am trying to make the “Blog” page. See links below.

    Thank you!

    #779813

    Hi,

    Try adding this css code also:

    
    @media only screen and (min-width: 767px) {
      .sidebar.sidebar_right {
        left: auto;
        right: 0;
        background-color: #4c8599;
      }
    
      .sidebar.sidebar_right .inner_sidebar {
        margin-left: 0;
        margin-right: 50px;
      }
    }
    

    Hope this helps :)

    Best regards,
    Nikko

    #779972

    That did work Nikko but is there any way to have the sidebar be on the left as on the rest of the site?

    #780219

    Also if you look at the link below you can see how the CSS pushes items slightly off the edge of the box. Do you have a thought on the best way to fix that?

    #780757

    Hi abmich,

    Here are the settings in theme options to have sidebar on the left or on the right.
    And here is css for having that right padding:

    
    .content .entry-content-wrapper {
        padding-right: 50px !important;
    }
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.