Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 9, 2017 at 4:29 am #730942
    paultho

    I would like the colour of the entire sidebar to be different from the main page. I’ve already used the following quick css to make the widget area a different colour

    .main_color .sidebar { background-color: #cfcdcf; color: #cfcdcf;
    }

    However the background colour to the right and below the widget area remains the same colour as the main page.

    I was wondering if you can let me know the quick css to change this. Width is currently set to 75% main content and 25% sidebar.

    Thanks

    Paul

    January 9, 2017 at 12:05 pm #731082
    Vinay

    Hey paultho,

    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:989px) {
#main .container_wrap_first > .container {
padding-right:0!important;
}
.sidebar {
	position: absolute;    
    top:0;
    right:0;
    padding-right:50px!important;
    bottom:0;
    max-width:calc(25% - 50px);
    background:gold;
}}

    Best regards,
    Vinay

    January 9, 2017 at 8:50 pm #731284
    paultho

    Thanks for that Vinay, that worked pretty well.

    However, on pages with less text, some of the sidebar now gets chopped off at the bottom. Previously, I could continue to scroll down to see the rest of the sidebar. Do you have some CSS to correct that?

    Example link in Private Content.

    Thanks

    Paul

    January 9, 2017 at 10:23 pm #731313
    Basilis

    Hi!

    You can add an overflow:true to the sidebar, so you can combine it and have both effects.

    Thank u

    Regards,
    Basilis

    January 10, 2017 at 7:58 am #731426
    paultho

    I tried adding overflow:true towards the end of the CSS provided earlier. – See snippet below.

    max-width:calc(25% – 50px);
    background:gold;
    overflow.true;
    }}

    That didn’t make an difference, but I may not be doing it right.

    If you can send me the complete CSS with this included in the right place that would be wonderful.

    Thanks

    Paul

    January 11, 2017 at 7:59 am #731919
    Vinay

    Hi,

    Please add

    overflow-y: auto!important;

    to “.sidebar” in the above code this will scroll the sidebar content on pages with less content.

    Best regards,
    Vinay

    January 11, 2017 at 9:44 pm #732326
    paultho

    Thanks Vinay,

    That worked a treat!

    Kind regards

    Paul

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Change colour of entire sidebar’ is closed to new replies.