Twenty Elevel – 3 Column

I’d like this feature too. Subscribing to this thread. It would have been nice to make right and left sidebars one of the theme options. I modified sidebar.php to also load sidebar_2 into a div named ‘tertiary’, and I’ve managed to float the sidebars to the right and left of content, but they are at the bottom of the page. I dislike using positioning becasue for me it doesn’t play nice. I understand that for SEO the content should come before the sidebars or it would be much simpler. Will post here if I come up with a not-too klugey solution.

I love the new theme, but I’m also interested in a three column format. Add me to the list of interested parties.

jeff
sdg

Here’s my solution in a child theme. It works in Firefox – haven’t checked in other browsers yet. It is based on an old article from the most excellent A List Apart web site.

1. Add the second sidebar (aka showcase) to sidebar.php – put this code below the final secondary widget div, and above the final endif:

<div id="tertiary" class="widget-area" role="complementary">
    <?php if ( ! dynamic_sidebar( 'sidebar-2' ) ) : ?>
    <?php endif; // end sidebar widget area ?>
</div><!-- #tertiary .widget-area -->

Here’s what I put in style.css:

#main{
	margin:0 auto;
	max-width:1000px;}

#primary{
	float:none;
	padding:0;}

#content{
	padding-left: 18%;   /* LC width */
	margin:0;
	width:58.4%;
	position: relative;
	float: left;}

#secondary{
	width: 18%;          /* LC width */
	right: 18%;          /* LC width */
	margin-left: -56%;
	position: relative;
	float: left;}

#tertiary {
	position: relative;
	float: left;
	width: 18%;           /* RC width */
	margin:0 -18% 0 3%;  }

Basically, as I understand it, the idea is to float everything to the left and then jog it over to where you want it using negative margins. Relative positioning helps to accomplish this. — PS start with the left sidebar selected in your theme options or this might not work.

As always, suggestions for how this code could be improved are welcome.

Hmmm – further observation — As with nz_mitch’s solution, The layout goes wonky when you shrink the browser windows too far. There is no immediately apparent solution (to me) through playing with different percentages and minimum widths. Might have to resort to a fixed width layout to get three columns. Suggestions welcome.

Thanks webmystery, I tried to use your solutions but it seems like the margin between the right widget area and the content is overlapping so the widget gets into the content text?

That did make three columns, though, right? I tried to omit my superfluous child theme styles from the code above, and I probably have some additional padding in the tertiary div. Try adding dome padding or reducing the width of the tertiary div.

I suggest using the Firefox add on Firebug to play with the fine tuning of the styles and then put that code in your style.css. Great way to hone your CSS chops!

I played around with this a bit, it’s not perfect, but the sidebars don’t seem to mess up when the browser is resized.

#page { max-width: 989px;}
#primary {
	float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
}
#content {
	margin: 0 34% 0 24.6%;
	width: 45.4%;
}
#secondary {
	float: right;
	margin-right: 5.6%;
	width: 20.8%;
}
#tertiary {
	position: relative;
	float: left;
	width: 18.8%;
	margin-left: -70%;

}

I increased the page width, but it’s pretty easy to adjust it

Ok, figured this out..I think. Seems to work fine on my site so far. The sidebars fall into place nicely when the browser is resized.

I’ve created 3 layouts for Twenty Eleven sidebar left and right, 2 sidebars left, 2 sidebars right. I’ll be adding them to my child theme after I test them more and will have it available for download soon. https://zeaks.org you can see one of the layouts.

You can check the complete code out here for the left and right sidebar https://pastebin.com/iADZpFzG

If it seems to be missing anything, let me know, I took this from my child theme, so I could of overlooked something.

I have 3 columns on twenty eleven following zeaks instructions. Sidebar left, content, sidebar right. However, not sure how to make the extra-sidebar (left)stretch to the same length as the default right hand sidebar (to the bottom of the page)?

The length of the sidebars would be determined on how many widgets you have active. Unless I misunderstood what you are asking.

Visually, you can fake it so that your columns appear to be the same height with a vertically tiled background image: https://www.alistapart.com/articles/fauxcolumns/

zeaks thanks thought that might be the case.

webmystery I have used this before and it works well but I have a non tiling main background on this site. Will continue to work on it though…

I’ve tried to use Zeaks code for the single posts on my site, but it just won’t work. I’ve also been trying to implement the code found here, but I can’t get that one to work either. Is there something extra I should be doing if I want to put three columns on just the post pages?

@darlene –Since we don’t know what exactly you did it is difficult to say what steps you may have missed. The code snippets above by myself and Zeaks are intended to go in your style sheet – usually style.css.

Are you familiar with the creation of child themes? If not, start here: https://codex.www.ads-software.com/Child_Themes

If you still cannot identify the problem, please be more specific in your description of the steps you took and what “doesn’t work” looks like. It works for me, and I don’t have enough information to tell why it does not work for you.

Hi webmystery, definitely using a child theme. ?? Of course, I was using a plugin called Theme Test Drive so I could keep my old site live while working on my redesign, but I just made it live. See the site here: https://www.weddingdecoratorblog.com.

I followed each of Zeaks’ steps, and they didn’t work for me. However, I did go to Zeaks’ site, and followed his tutorial for a single sidebar, and *that* worked.

I wonder if my desire to have 2 sidebars on just the post pages is the difference?