Sidebar Background Color

Community Forums Forums Design Tips and Tricks Sidebar Background Color

This topic is: not resolved

Tagged: 

This topic contains 14 replies, has 4 voices, and was last updated by  michiganseo 10 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #51970

    designbytracy
    Participant
    Post count: 51

    Is there any way that I can extend my sidebar background color to 100% of the height of the left column even if I don’t have enough content in the sidebar to fill up the space? My design started from the Executive Theme.

    http://www.designbytracy.com/dev/105designstudioA/about-us/


    http://www.designbytracy.com/dev/105designstudioA/about-us/
    #51983

    dev
    Participant
    Post count: 451

    This is something people have been asking from WordPress for years.

    You could get one of those plugins that let you create and assign different sidebars to different pages and give each one a height:xxxpx in CSS, but that would be a lot of work. Maybe there is one that will do exactly what you want, but if so, I’ve never heard of it.

    Another way, a bit easer is to NOT show a sidebar and use the columns shortcode in a page and put what would be in the right sidebar into the far right column. I’m not sure if you can style the individual columns but I think you can.

    If you find a way, let us know.

    Dev

    http://www.NewMediaWebsiteDesign.com

    #52034

    designbytracy
    Participant
    Post count: 51

    Ugh.

    I am going to be using Simple Sidebars so that I can setup a few different ones, so I might go ahead and assign the height, but I’m not really wanting to do that because I will want the content of the sidebars to be easily flexible.

    Ugh.


    #52044

    designbytracy
    Participant
    Post count: 51

    Well, I figured out a way to cheat it. I added a background image to the content area with just that color behind the sidebar. It works great. I just need to test it responsively and make sure there are no issues, but think I can just drop the background for smaller screen sizes and it will be ok.


    #52060

    dev
    Participant
    Post count: 451

    That seems to work well. I tried to replicate your code via Chrome/Inspect on the Agency theme:

    http://demo.studiopress.com/agency/layouts/cs

    [css]
    #content-sidebar-wrap {
    background-image: url(images/content_bg.gif);
    float: left;
    width: 100%;
    }
    [/css]

    but it didn’t work. You are using Executive and they are similar so I don’t know what I did wrong. I could get your gif file:

    http://www.designbytracy.com/dev/105designstudioA/wp-content/themes/executive/images/content_bg.gif

    but it only displayed about 150px wide on the right… and I could not get it to widen, no matter what I did. Whatever you did, you solved a problem that a lot of people have been trying to solve.

    #52103

    designbytracy
    Participant
    Post count: 51

    That theme has a smaller width and my file was created 1140px wide. The code you used worked, it’s just that the right side of the image was cutting off because it’s too wide for that theme’s width.


    #52107

    dev
    Participant
    Post count: 451

    I don’t quite understand your analysis, but am not questioning it.

    Any idea how I can make this work for Agency theme?

    Thanks.

    #52108

    designbytracy
    Participant
    Post count: 51

    Yes, make your background image that you use 960px wide.


    #52392

    ken
    Participant
    Post count: 7
    This reply has been marked as private.
    #52394

    designbytracy
    Participant
    Post count: 51

    Yes, it’s posted above in the thread. I still need to work through a few responsive issues.


    #52402

    ken
    Participant
    Post count: 7
    This reply has been marked as private.
    #52403

    ken
    Participant
    Post count: 7
    This reply has been marked as private.
    #52448

    designbytracy
    Participant
    Post count: 51

    CSS edits to the child theme are the correct way to make modifications and customize your site, making use of the parent-child heirarchy. Yes, if you were to update your child theme, it would override, but that doesn’t really happen. Studiopress sends out all updates through the parent or framework Genesis so your edits will stay.


    #54782

    designbytracy
    Participant
    Post count: 51

    Just to finish this up, I wanted to note that I added some more CSS to make sure the background didn’t appear on my full-width pages. Here’s the complete code that I added.

    #content-sidebar-wrap {
    	background-image: url(images/content_bg.gif);
    }
    
    .full-width-content #content-sidebar-wrap {
    	background-image: none !important;
    }

    And, my site is now live so the new URL is http://105DesignStudio.com.


    #63655

    michiganseo
    Participant
    Post count: 6

    Thanks, Tracy. Just so you know, this helped me as well. Thanks, much!

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

You must be logged in to reply to this topic.