Extending Background Colour of Sidebar Dynamically – Genesis Sample

[LaunchPad777]

Hello there,

I need to find out how to get the background colour of the sidebar to extend to the bottom of the page in line with the main content section (irrespective of how long or short the content section is).

At the moment, the background colour of the site shows at the bottom of the sidebar (black).

Your help is appreciated.

Best regards
Greg

http://www.gpmotorworks.co.za

[gvanaart]

Hi,

are you familiar with CSS?

Put in your sidebar, I don't know your theme so check the right class or ID, the following code:

padding-bottom: 5000px;
margin-bottom: -5000px;

Now the height of your sidebar equals your content field.

[LaunchPad777]

Hi gvanaart,

Thanks.....am using the Genesis Sample Theme on this website....

Is the number 5000 px a random number?

Using Inspect Element this looks like it could be the right bit of code to change?

.sidebar .widget {
background-color: #969697;
border-radius: none;
margin-bottom: 4rem;
padding: 4rem;
}

The question is that those values (4rem) affect more than just the bottom of the sidebar.
So what should be changed to keep the existing values and only change the bottom values for the padding and margin?

Regards
Greg

What

[LaunchPad777]

Anyone have any input here?

Thanks
Regards

Greg

[LaunchPad777]

Hello there,

I searched the forum and found this thread which had a similar problem:

The code used was:

#sidebar {
	background-color: #EFEFEF;
	width: 25%;
	overflow: hidden;
	margin-bottom: -99999px;
	padding-bottom: 99999px;
	position:relative;
	z-index:2; // in front of content
	}

#footer-widgets .wrap {
	font-size: 13px;
	line-height: 20px;
	text-align: center;
	border: 0;
	padding: 0;
	background-color: #76666E;
	max-height: 20px;
	position:relative;
	z-index:9; // on top
}

Please can someone shed light on the "position" and "z-index" parameters....particularly the "z-index" one.

Where do you get those values?

The thread mentioning this is - http://www.studiopress.community/topic/sidebar-background-color-full-height/

Appreciate your help!!!

Regards
Greg

[LaunchPad777]

Any ideas on how to do this properly?

On another thread I was told that the idea of extending like this is not good:
padding-bottom: 5000px;
margin-bottom: -5000px;

What is the right way to achieve this???

Please help...

Regards
Greg

[Author]

Posts