Widget Side Bar CSS Customization

  • Unknown's avatar
    vlogazul · Member ·

    Hello!
    I am currently using the Forever theme and am wondering if there’s a way or a snippet to make the widget side bar section on my blog have a different color like the blue I have in my navigation bar. But just the widget section and not the complete page. I would appreciate any help. Thanks

    The blog I need help with is: (visible only to logged in users)

  • johndcoy · Staff ·

    Hello.
    It is possible to change only the background of the sidebar using the following CSS.
    #secondary {background: #0A3143;}
    After applying the above CSS you will notice that the font color and margins view a bit differently. Here is CSS that will change the font color and margins, in addition to the background color. 

    #secondary {
	background: #0A3143;
	margin-right: 0;
	padding-right: 1.646%;
	padding-top: 1.646%;
}
#secondary a{color: #FFF;}
#secondary .widget-title {color: #FFF;}

    Please let me know if this works for you.

  • Unknown's avatar
    vlogazul · Member ·

    Thanks it works perfect! Just one thing can you make it start from where the navigation bar starts and end until the gray footer starts so that I can’t see that white space on between?

  • johndcoy · Staff ·

    You can flush the sidebar with the primary menu, but doing so will cause the posts to left of the sidebar to become flushed also. The CSS below will remove the bottom margin from the navigation and apply a top margin to the posts. 

    #access { margin: 1.615em auto 0 0;}
#content { margin: 1.615em 38.021% 0 3.646%;}

    The sidebar will automatically end at the gray footer as long as it has more content than the posts.

  • The topic ‘Widget Side Bar CSS Customization’ is closed to new replies.