Sidebar Background Color

[designbytracy]

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/

---

Tracy

Design by Tracy | Twitter | Facebook | LinkedIn

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

[dev]

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

[designbytracy]

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.

---

Tracy

Design by Tracy | Twitter | Facebook | LinkedIn

[designbytracy]

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.

---

Tracy

Design by Tracy | Twitter | Facebook | LinkedIn

[dev]

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

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

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.

[designbytracy]

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.

---

Tracy

Design by Tracy | Twitter | Facebook | LinkedIn

[dev]

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

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

Thanks.

[designbytracy]

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

---

Tracy

Design by Tracy | Twitter | Facebook | LinkedIn

[ken]

This reply has been marked as private.

[designbytracy]

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

---

Tracy

Design by Tracy | Twitter | Facebook | LinkedIn

[ken]

This reply has been marked as private.

[ken]

This reply has been marked as private.

[designbytracy]

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.

---

Tracy

Design by Tracy | Twitter | Facebook | LinkedIn

[designbytracy]

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.

---

Tracy

Design by Tracy | Twitter | Facebook | LinkedIn

[michiganseo]

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

[tuppersex]

Thanks Tracy reuniones

[Author]

Posts