I’ve had many questions on how to change the width of the sidebar in Twenty Eleven, I’m going to show how it can be done for both left and right sidebar layouts. My last post on this was a bit confusing, I’ll try to explain it as best I can.
First lets take a look at the layout, it’s easier to understand what you’re doing when you understand the way things work.
There are 3 main sections to the layout
#primary – The area the content and sidebar reside in.
#content – Your post content.
#secondary – The sidebar.
Here’s the CSS for the default right sidebar layout.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#primary { float: left; margin: 0 -26.4% 0 0; width: 100%; } #content { margin: 0 34% 0 7.6%; width: 58.4%; } #secondary { float: right; margin-right: 7.6%; width: 18.8%; } |
Think of the #primary as a box, and inside there are two smaller boxes that fit perfectly. If you were to make one box bigger, the other box will have to get smaller. Here is an image that might help visualize the layout.
The content is 58.4% wide, the sidebar is 18.8% wide. There is also a 7.6% margin on the left and right of the content, and on the right side of the sidebar. Add this all up 58.4 + 18.8 + 7.6 + 7.6 + 7.6 = 100% These cannot add up to more than 100 or the sidebar and content won’t fit together within the #primary area.
If we increase the sidebar by 5%, we need to take 5% away from something, it could be from the #content width, or from the margins.
Ok enough explaining, take a look at the code below and compare it to the code above. I’ve increased the sidebar by 5%. I had to adjust 3 areas, the sidebar width, the content width, and the #primary margin to allow for the wider sidebar
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#primary { float: left; margin: 0 -31.4% 0 0; /* incresed margin by 5% */ width: 100%; } #content { margin: 0 34% 0 7.6%; width: 53.4%; /* decreased width by 5% */ } #secondary { float: right; margin-right: 7.6%; width: 23.8%; /* increased width by 5% */ } |
The left sidebar layout is pretty much the same only backwards for the #primary margin. Here’s the original CSS for it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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%; } |
Here it is with a 5% increase to the sidebar
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.left-sidebar #primary { float: right; margin: 0 0 0 -31.4%; /* increased margin by 5% */ width: 100%; } .left-sidebar #content { margin: 0 7.6% 0 34%; width: 53.4%; /* decreased content by 5% */ } .left-sidebar #secondary { float: left; margin-left: 7.6%; margin-right: 0; width: 23.8%; /* increased sidebar width by 5% */ } |
You don’t have to take the width from the #content either, you can remove it from the margins instead then your content size will stay the same. If you’re using NomNom theme, you’ll need to add the extra sidebar to this, use #extra-sidebar class with the #secondary, EX: .left-sidebar #secondary, .left-sidebar #extra-sidebar {}
BONUS: Smaller Margin Layouts
Twenty Eleven theme contains alot of large margins which reduces your content area. I never cared much for this so here’s an easy way to reduce some of it by 3% on each side, and make better use of your precious content area.
The content and sidebar both have a margin of 7.6%, that’s 7.6% x 3= 22.8% of the area in your theme is wasted! The site title, search and menu div also share these same margins. So to use some of this space all I did was reduce each margin by 3%, then add the 3% back to the width of the content and sidebar, so you have 6% more content showing on your site and it still looks nice.
I’m not going to explain in detail, but you should be able to figure it out if you’ve stuck through this post.
(I’ve added NomNoms extra sidebar class in it as well)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#branding hgroup { margin: 0 4.6%; /* decreased by 3% */ } #branding #searchform { right: 4.6%; /* decreased by 3% */ } #access div { margin: 0 4.6%; /* decreased by 3% */ } #content { margin: 0 34% 0 4.6%; /* decreased by 3% */ width: 61.4%; /* increased by 3% */ } #secondary, #extra-sidebar { margin-right: 4.6%; /* decreased by 3% */ width: 21.8%; /* increased by 3% */ } |
This is for the left sidebar layout
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#branding hgroup { margin: 0 4.6%; /* decreased by 3% */ } #branding #searchform { right: 4.6%; /* decreased by 3% */ } #access div { margin: 0 4.6%; /* decreased by 3% */ } .left-sidebar #secondary, .left-sidebar #extra-sidebar{ margin-left: 4.6%; /* decreased by 3% */ width: 21.8%; /* increased by 3% */ } .left-sidebar #content { margin: 0 4.6% 0 34%; /*decreased by 4% */ width: 61.4%; /* increased by 4% */ } |
A big thanks for this one, it was exactly what I was looking for!
THANK YOU THANK YOU THANK YOU!! It was so hard to find this on the WordPress site. The moderators won’t stop sniping at people to use child themes or to stop “interrupting” somebody’s thread by asking the SAME question!
This was very helpful–to a point. I needed to increase the sidebar size so that a Facebook like box with faces, 292 px, would fit. Now it fits, but it’s moved down much lower on the page leaving a big gap on the top left. What to do?
This is my modified sidebar.
Thanks, Carol
Hi Carol, looks like you’ve only changed the width of the sidebar but didn’t adjust the other areas. (this is actually what the post was about)
Take a look at this code and notice the 3 areas you need to adjust to reflect the new sidebar width. Originally the sidebar width is 18.8%, since you’re increasing that to 29.2% the difference is 10.4%. Each section needs to be adjusted to reflect that in order to make room for the wider sidebar.
Let me know how that works out for you
I guess the situation was corrected somewhat, but now the sidebar and content overlaps with the main content. I’ll try to think about this and figure it out, but I’m still confused. I am very grateful for the help! Thanks.
Try this, for the content section increase the margin
That should fix it up. If you want to bring things closer to the edges of the page, you can change the 7.6% margins to something like 3.6% as well, that will give you a bit of room, then increase the width of the sidebar by 4% and the content by 4%.
Once you get the hang of how it works, it’s pretty easy.
Thank you. It worked! I do think I understand it better now, and yes, I might try tweaking the margins some more. But it looks so much better now, and that Facebook feed is important to us. You have been a great help to this little volunteer.
Thanks for the great article on sidebars and margins in Word press 2011. I’ve had a bit of a play and had success in following you examples but have been unable to achieve my goal properly.
I’m want to increase my right hand side bar to 300px whilst trying to keep as much content area as possible and robbing the margins, which I think would mean something like :
content width 60%
Sidebar 30%
Left of content 3%
Right of content 4%
Right of sidebar 3%
I am still a bit confused as to what to change, as I can only grasp half of the concept.
Sorry for being a bit dense, Is it possible to help me? Thanks
Thank you so much the clear pictorial explanation! This is exactly what I’m looking for.
Zeak, thank you so much for this tutorial! It made the whole margin & primary/content/secondary stuff easy to understand.