WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven (copy) - make content wider for one col layout (21 posts)

  1. AardvarkGirl
    Member
    Posted 3 years ago #

    I have searched and tried 3 different methods of making the content area wider for the default 'one column / no sidebar' pages.

    I tried changing this:

    .one-column #content {
    	margin: 0 7.6%;
    	width: auto;
    }

    to this:

    .one-column #content {
    margin: 0 auto;
    width: auto;
    }

    from this article -

    http://voodoopress.com/2011/07/customizing-twentyeleven-lets-start-with-width-and-smaller-header/

    Then I tried changing this: http://wordpress.org/support/topic/make-twentyeleven-nosidebar-wider?replies=4

    I changed it, uploaded it, looked at it in two different browsers.

    http://www.houseconcretelandscaping.com/a-test-page/

  2. Caroline Moore
    Member
    Posted 3 years ago #

    (I'm assuming by "copy" you mean you're working within a child theme. Good on ya. :))

    Try adding this to your child theme's stylesheet:

    .singular .entry-header,
    .singular .entry-content,
    .singular footer.entry-meta,
    .singular #comments-title {
        width: 100%;
    }

    You may need to adjust the margins within the surrounding divs to suit your taste, but right now the entry header and content are set to display at only 68.9% of the entire column width.

  3. AardvarkGirl
    Member
    Posted 3 years ago #

    sixhours - well I'm not working with a child theme, I'm working on a renamed twenty eleven.

    Based on what you posted, I went back and looked at the code generated for the page I posted the link to:

    <div id="main">
    		<div id="primary">
    			<div id="content" role="main">
    <article id="post-109" class="post-109 page type-page status-publish hentry">
    <header class="entry-header">
      <h1 class="entry-title">A Test Page</h1>
    	</header><!-- .entry-header -->
    	<div class="entry-content">
    		<p>Full text here. This is just to test the full width of the page here.  This is just a test and will be deleleted soon.  This is only a test.</p>

    In any of that I don't see reference to .singular anywhere in the code.

    I'm going to post what I just replied on someone else post that I read before I started this thread (someone replied to me there as well).

    http://wordpress.org/support/topic/make-twentyeleven-nosidebar-wider?replies=6#post-2251035

    ---------------------------

    alchymyth - (thanks for the reply)

    "It has a two column, right sidebar setting static page."

    I'm fairly familiar with Twenty Ten, this is my first gander at Twenty Eleven. What has changed as far as creating new pages and their default settings?

    I'm looking at the page in question in the admin and it is set to 'default' - but does not show any of the active widgets. The default in Twenty Ten was a two-col lay out with any active widgets showing in side bar. To get a one-col lay out with out the side bar you had to select it in the page template selector.

    I guess I need to first understand what has changed in Twenty Eleven (instead of just being handed a 'fix'). :)

    CAME BACK TO SAY: I'm reading this http://theme.wordpress.com/themes/twentyeleven/ now.

    CAME BACK AGAIN: I just found the theme options in the admin - where it has choices for content on left, content on right, and one col no side bar. It is selected to content on left.

    So compared to Twenty Ten - how do I select a "One Col No Sidebar" option? (now I'm really confused)

  4. AardvarkGirl
    Member
    Posted 3 years ago #

    Ok, so I did the change you suggested:

    .singular .entry-header,
    .singular .entry-content,
    .singular footer.entry-meta,
    .singular #comments-title {
        width: 100%;
    }

    But now when I am logged in the EDIT button is right smack on top of the page title ("A Test Page"). So... can this really be the correct fix?

  5. Caroline Moore
    Member
    Posted 3 years ago #

    The singular class is called in the body tag.

    There are many ways to "fix" something like this, depending on what you're looking to achieve--I've only looked at the CSS modifying the page you linked to. I can't tell you what your ideal solution would be for your circumstances, just what I would do.

    This is the style for the Edit link:

    .singular .entry-meta .edit-link a {
        bottom: auto;
        left: 50px;
        position: absolute;
        right: auto;
        top: 80px;
    }

    You can remove position: absolute and it will move to the bottom of the page under the entry. Or you can leave it positioned absolutely and move it elsewhere (above the title, for instance.)

    I'm not familiar with Twenty Ten so I can't tell you how it compares to Twenty Eleven.

  6. alchymyth
    Forum Moderator
    Posted 3 years ago #

    'one column / no sidebar'

    if this refers to the 'theme options' setting, then there will be no css class .singular in the body tag;
    there definitively will be no sidebar, not even with a 'sidebar-page' page template.

    to generally widen this 'one-column' theme option, you will need to find this style in style.css:

    /* One column */
    .one-column #page {
    	max-width: 690px;
    }

    and change it, for instance, to:

    /* One column */
    .one-column #page {
    	max-width: 1060px;
    }

    the layout will then be fluid, starting with this wider layout.

  7. greenfuture
    Member
    Posted 2 years ago #

    Thanks for the code ...just what i needed
    this is how i used it

    .singular.page .hentry {padding:1em;}
    .singular .entry-header,
    .singular .entry-content,
    .singular footer.entry-meta,
    .singular #comments-title {
        width: 90%;
    }
    
    .singular .entry-meta .edit-link a {
        bottom: auto;
        left: 0px;
        right: auto;
        top: 30px;
    }
  8. michauko
    Member
    Posted 2 years ago #

    Thank you, too.
    I just added greenfuture's code at the end of styles.css

  9. joesell89
    Member
    Posted 2 years ago #

    Brilliant! I used it here and it looks sooo much better.

    Thanks.

  10. jhauer
    Member
    Posted 2 years ago #

    Thanks all. Greenfuture's code was exactly what I was looking for. A little tweak to the width percentage and I was in business.

  11. amandelman
    Member
    Posted 2 years ago #

    This was also exactly what I was looking for, but, now the little comment callout icon has been squished into a weird little grey box on my posts page. I imagine this is because the new width is messing with the sidebar template?

    I'm completely new at this, so forgive me for not knowing what I'm doing.

  12. Schuurmudgeon
    Member
    Posted 2 years ago #

    @sixhours that was very useful, thank you!

    Now, instead of changing ALL my pages to a wider content, I would only want to change ONE page to allow for a wider content area. (I want to present some tables on that page rather than text, and those tables look too cramped in the default content width).

    Can I achieve this just with CSS, or should I create a special page template? If I created a special page template, how would I make the content area wider for just the pages created with that template?

    Many thanks.

  13. alchymyth
    Forum Moderator
    Posted 2 years ago #

    Can I achieve this just with CSS,

    yes, as each page has its unique css body_class of .page-id-123 with 123 being the page ID

    example:

    .page-id-123.singular .entry-header,
    .page-id-123.singular .entry-content,
    .page-id-123.singular footer.entry-meta,
    .page-id-123.singular #comments-title {
        width: 100%;
    }

    would I make the content area wider for just the pages created with that template?

    the body_class has a page template dependant css class:

    .page-template-templatefilename-php

    http://codex.wordpress.org/Function_Reference/body_class

  14. jummy
    Member
    Posted 2 years ago #

    greenfuture and all who contributed to what s/he shared: thank you!

  15. Schuurmudgeon
    Member
    Posted 2 years ago #

    @alchymyth Thanks so much, that's brilliant! Simple and elegant.

  16. Bellajoey
    Member
    Posted 2 years ago #

    Thanks so much for this!! I have been trawling through the forums and finally this suggestion worked!

  17. murrayhopkins
    Member
    Posted 2 years ago #

    Hi.

    This is what did. I am being detailed for people like me who are new to this whole process of modifying templates. Our normal template option is 2 column, sidebar to the right. We needed a template with no sidebar that used 100% of the page width for a few special pages.

    I copied the sidebar-page.php file to fullwidth-page.php;
    changed the comment at the top to
    * Template Name: Fullwidth
    (so that it appears in the list of available templates on the wp page we are adding);
    and removed the line <?php get_sidebar(); ?>
    which created a template that had no sidebar, but that also did not display full width and had the vertical bar where the sidebar would normally be.

    So, the next step is to edit the style.css file.

    As posted above, each template generates a template specific identifier in the body css - in my case it is called
    .page-template-fullwidth-page-php since the template name is "fullwidth". Using that, I added the following CSS to the end of the style.css file. Note that I am not a css expert by any means so the following may not be the optimal solution syntactically, but it worked!

    /* Murray Hopkins: To make the content of the fullwidth template 100% and to remove the vertical bar
    that normally divides the side-bar - that appears even if there is no side bar!
    */
    .page-template-fullwidth-page-php.two-column.right-sidebar #main{
    	width: 100%;
    	background: 0 none;
    } 
    
    .page-template-fullwidth-page-php.two-column.right-sidebar #primary{
    	width: 100%;
    }
    
    .page-template-fullwidth-page-php.two-column.right-sidebar #content{
    /* to better line up with our particular header design. Set this to suit your situation */
    	padding-left:76px;
    }
    
    .page-template-fullwidth-page-php .entry-header,
    .page-template-fullwidth-page-php .entry-content,
    .page-template-fullwidth-page-php .footer.entry-meta,
    .page-template-fullwidth-page-php #comments-title {
        width: 100%;
    }

    Thanks for all the previous posts that allowed me to work this out.

    Suggestions on better css syntax greatly appreciated.

    Murray

  18. cfm168
    Member
    Posted 2 years ago #

    I must to leave a word here. Thank you greenfuture! Perfectly work with your codes.

  19. berelson@hotmail.com
    Member
    Posted 2 years ago #

    Thank you. I have been searching hi and lo for this!

  20. iGeorg
    Member
    Posted 2 years ago #

    I've read all this and am stuck on how to make the right column a bit wider so my fixed-whith widgets are not scaled down.

    Can anybody please point me in the right direction?

    Thank you!

    I'm talking about that blog:
    http://blog.kunstgriff.net

  21. alchymyth
    Forum Moderator
    Posted 2 years ago #

    @iGeorg

    please start your own topic - your problem is different.

Topic Closed

This topic has been closed to new replies.

About this Topic