How to change the sidebar width in twenty eleven WordPress Theme

advertisement

In my previous post of “How to add sidebar in Twenty Eleven WordPress Theme” I have explained the method,in this post i will guide my visitors to modify/change width of sidebar.

so follow these steps.

Their two option to have side bar…..left sidebar…..and…..right sidebar,i will explain to modify both in this post.

How to change the sidebar width:

Step 1 Left sidebar Go to admin panel >>>>Click Editor under option appearance >>> click on the style sheet (style.css) and locate the following lines

.left-sidebar #primary {
	float: right;
	margin: 0 0 0 -26.4%;
	width: 100%;
}
.left-sidebar #content {
	margin: 0 7.6% 0 34%;
	width: 58.4%;
}
.left-sidebar #secondary {
	float: left;
	margin-left: 7.6%;
	margin-right: 0;
	width: 18.8%;
}

The sidebar class is #secondary, the post area is #content, and #primary is the area content area resides.

I want to increase the width of the left sidebar by 4%, so what we need to do is, increase the width of the sidebar, move the position of the content, and make room for the new sidebar width.
Here’s new CSS.

left-sidebar #primary {
float: right;
margin: 0 0 0 -30.4%; /* increased left margin 4% from -26.4% to -30.4% */
width: 100%;
}
.left-sidebar #content {
margin: 0 7.6% 0 38%; /* increased right margin 4% from 34* to 38% */
width: 58.4%;
}
.left-sidebar #secondary {
float: left;
margin-left: 7.6%;
margin-right: 0;
margin-top: 20px;
width: 22.8%; /* increased sidebar width 4% from 18.8% to 22.8% */

you can see it’s just a matter of adjusting the sidebar width and 2 margins to compensate for the new width. You can change the width to whatever you want, just make sure you change the other two by the same amount..

Step 2 Right Sidebar

If you have right side bar then you can add the following code in style.css file after the left sidebar code in step 1.or you can replace this code with the step 1 code.

.right-sidebar #primary {
	float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
}
.right-sidebar #content {
	margin: 0 34% 0 7.6%;
	width: 58.4%;
}
.right-sidebar #secondary {
	float: right;
	margin-right: 7.6%;
	width: 18.8%;
}

both will work fine,i have used the following code in my sidebar.

.right-sidebar #primary {
float : left;
margin : 0 -32.4% 0 0;
width : 100%;
}
.right-sidebar #content {
margin : 0 34% 0 7.6%;
width : 58.4%;
}
.right-sidebar #secondary {
float : right;
margin-right : 7.6%;
width : 24.8%;
}

if you have any query regarding the post,you can feel free to ask.,thanks.

Leave a Reply