WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Elevel - 3 Column (23 posts)

  1. nz_mitch
    Member
    Posted 3 years ago #

    Hi there

    I'm loving the new Twenty Eleven theme, but keen to set it up with a three column layout (sidebar_1, content, sidebar_2). I've managed to hack something together by adjusting the margins in a child theme:

    #content {margin: 0 26.8% 0 26.8%; width:46.4%;}
    #secondary,	#secondary #content {width:18.8%; margin:0;}

    And then hooking in a PHP file as follows:

    get_header(); ?>
    	<?php  include (STYLESHEETPATH . '/sidebar_1.php'); ?>
    		<div id="primary">

    Unfortunately it's a bit rough and doesn't play all that well with the great things Twenty Eleven does in resizing for different screen sizes.

    I was just wondering if someone a little brighter had built a three column child them I could take a look at it, or anyone could offer a steer on how best to do it.

    Thanks in advance!
    Mitch

  2. webmystery
    Member
    Posted 3 years ago #

    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.

  3. j2brown
    Member
    Posted 3 years ago #

    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

  4. webmystery
    Member
    Posted 3 years ago #

    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.

  5. webmystery
    Member
    Posted 3 years ago #

    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.

  6. jokj
    Member
    Posted 2 years ago #

    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?

  7. webmystery
    Member
    Posted 2 years ago #

    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!

  8. zeaks
    Member
    Posted 2 years ago #

    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

  9. zeaks
    Member
    Posted 2 years ago #

    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. http://zeaks.org you can see one of the layouts.

    You can check the complete code out here for the left and right sidebar http://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.

  10. linzinz
    Member
    Posted 2 years ago #

    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)?

  11. zeaks
    Member
    Posted 2 years ago #

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

  12. webmystery
    Member
    Posted 2 years ago #

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

  13. linzinz
    Member
    Posted 2 years ago #

    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...

  14. darleene
    Member
    Posted 2 years ago #

    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?

  15. webmystery
    Member
    Posted 2 years ago #

    @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: http://codex.wordpress.org/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.

  16. darleene
    Member
    Posted 2 years ago #

    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: http://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?

  17. webmystery
    Member
    Posted 2 years ago #

    PS: plus, you need to, in the case of my version, put the "tertiary" div into your sidebar.php file and add some content to it either in the sidebar file, or set up a new tertiary sidebar in functions.php and add a widget to said sidebar, or you'll have styling with no div to style. I think the site you linked to covers all of that.

  18. webmystery
    Member
    Posted 2 years ago #

    If you only want the third sidebar on your posts page, depending on how your theme is constructed, you may call a different sidebar file from index.php (or other files) than you do from page.php

    If your theme sets a different body class for pages and posts, you can style the column widths differently for those entities:

    .page #primary {/* this width might be wider for a two column layout */ }
    #primary {/* this width would apply to posts but not pages */ }

    Keep trying - you'll get it!

  19. darleene
    Member
    Posted 2 years ago #

    I hate leaving my site like this, but I wanted you to see what happened. So I followed Voodoo’s tutorial *again* and got all sorts of funkiness. But at least the content has been moved to the center!
    http://www.weddingdecoratorblog.com/2011/12/awesome-ceiling-decorations/

  20. zeaks
    Member
    Posted 2 years ago #

    I think this is what you're looking for. http://board.zeaks.org/threads/2-sidebars-on-post-pages.184/#post-981 if it is, let me know I'll zip it up for you.

  21. greenpeas
    Member
    Posted 2 years ago #

    Hi darleene, love your site!, just discovered the showcase template. btw what are you using for the rotating images? a plugin? This thread has some great tips!

  22. darleene
    Member
    Posted 2 years ago #

    Hi greenpeas! The rotating images is actually part of the showcase template. Just make sure you correctly size and set a feature image, and before you post, mark it as a sticky post.

  23. greenpeas
    Member
    Posted 2 years ago #

    Thank you very much darleene!

Topic Closed

This topic has been closed to new replies.

About this Topic