This post has been updated with a better explanation, please visit http://zeaks.org/twenty-eleven-sidebar-width-explained-and-2-bonus-layouts/
Here I’ll show you how to change the sidebar width of Twenty Eleven theme. Twenty Eleven uses a fluid width, so widths are defined as percentages instead of pixels, which can be a bit confusing if you’re not used to working with them.
Just remember, everything needs to add up to no more than 100% or it will break the layout. Take into account margins, and padding and width of elements.
Lets start off by looking at the left sidebar layout of Twenty Eleven.
|
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%; } |
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 my new CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.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% */ } |
As 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.
my sidebar goes down, why?
Hi J1m. That could depend on alot of things, usually it’s because there isn’t enough room for it to display where it should, but open a forum thread and I’ll take a look at your code.
Hi there, I am working on this site and I am using j query vertical mega menu to create my vertical navigation. I need to push the navigation right to the left hand edge to accommodate my layout. I can not figure out where to go to edit that. Can you help? Thanks Amy
Hi Amy, you’ll need to open a forum thread, this has nothing to do with the post. Thanks
@Hannah using the same classes will also change the sidebar width on the sidebar page template. I’ve tested the code from the tutorial in a child theme and it doesn’t cause the sidebar to drop on the sidebar page template.
The sidebar page template does have a body class, as do all pages for WordPress so you can direct CSS at that specific page.
Hi,
I would ask you to please help me change right-sidebar width. I am really new to programming so I really dont know how to do this on right-sidebar, like you did here for the left-sidebar.
thank you,
Aravinda
Hi I am just setting up the NomNom theme for my blog – and I totally want to make my right-hand sidepanel a little bigger (so it will think 300 x 250 ads in) – more like it looks on this page. I know you did the left above and I should be able to work it out – but I am totally confused none of my changes worked in the custom css panel in the theme options.
is there any chance you can help with the css code to fix it?
thanks
Hi Danielle,
I’ll be updating this post in the next few days with both left and right sidebar layouts, as well as left and right sidebar layouts that reduce the padding which is what I’m using on this site.
Hello! I’m just beginning to design my new WP site and eventually move over from Blogger. I used this & it worked great. Just wondering how I can find the pixel values of the widths of the sidebar based on the percentages. In order to insert well-proportioned images, it’d really be helpful. Thanks!
Hi Jelli. There is a much better explanation of the Twenty Eleven layout here. http://zeaks.org/general/twenty-eleven-sidebar-width-explained-and-2-bonus-layouts/
But it’s not hard to figure out. In Twenty Eleven style.css (for the right and left sidebar layouts) the max-width is 1000px, the rest of the layout is based around that.
The first image in that post I linked shows the content width, sidebar width and margins between them all.
Side Width = 1000 px wide
Content Width – 58.4% = 584px
Sidebar width – 18.8% = 188px
Left of content margin – 7.6% = 76px
right of content margin – 7.6% = 76px
right of sidebar margin – 7.6% = 76px
If you wanted your sidebar 300px wide that would be 30%
Then you need to reduce the content width by 112px to make up for the wider sidebar (300-188=112px) 584px-112=472px or 47.2%
So for a 300px wide sidebar your content width must be 47.2% and sidebar 30%