Increasing width of content area?

Community Forums Forums Design Tips and Tricks Increasing width of content area?

This topic is: resolved

This topic contains 13 replies, has 6 voices, and was last updated by  dstrange26 1 year, 4 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #11548

    seanerin72
    Participant
    Post count: 22

    Hello folks,

    So I am new to all things Genesis framework and have been trying to sort through things on my own.  I am using the prose child theme.  The latest genesis updates mentions that I can increase the width of the content area.  Alas, I cannot figure out HOW to do that.  Any help would be appreciated. Thank you.

    Sean

    #11578

    Jon Bellah
    Participant
    Post count: 109

    Sean,

    It’s always helpful to post links to your site, so we can give specific help. However, you can change the width of the content area by changing the width of these selectors in the style.css file:

    [css]

    #content {
    float: left;
    width: 440px;
    padding: 15px;
    }

    .content-sidebar #content,
    .sidebar-content #content {
    width: 610px;
    padding: 15px;
    }

    .sidebar-content #content,
    .sidebar-sidebar-content #content {
    float: right;
    }

    .full-width-content #content {
    width: 960px;
    padding: 0;
    }
    [/css]


    Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

    #11677

    wendycholbi
    Participant
    Post count: 120

    If you’re using Prose, you’ll want to copy the CSS Jon provided into the Genesis –> Custom Code –> Custom CSS field, instead of modifying any style.css files. Make your changes on the Custom Code screen and save changes — makes testing and tweaking very easy.


    I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

    #11691

    seanerin72
    Participant
    Post count: 22

    Thank you Jon and Wendy… I posted the code into the custom css field and the result was that my sidebar was pushed to the bottom of the page.  The genesis framework 1.9 demo site gives an indication to the width that I would like for my site: http://www.genesisframework.com

    Currently, reset to its original width, my site looks like this: http://www.blackboarddreams.com

    So, how can I tweak my settings so that my site looks more like the width of the demo site?

    Thank you so much for your help…

    Sean

    #11708

    seanerin72
    Participant
    Post count: 22

    Sorry for posting again, but I tried this:  I posted the following code:

    body {
    background: #f5f5f5;
    margin: 0 auto;
    width: 1100px;
    }

    This happened: http://www.blackboarddreams.com

    As you can see, the page itself increased in width, but the content did not “scale” with accordingly.  How do I change that?

    Also, on an unrelated aesthetic note, at the very bottom of the page the “search” button is actually a few pixels wider than the search form.  How can I change that?

    Again, thank you so much for your help thus far.  As you can see, I am merely in the beginning stages of my site.

    Sean

    #11771

    wendycholbi
    Participant
    Post count: 120

    Hi Sean,

    I didn’t see your site during the period when the sidebar was pushed to the bottom, but it looks like you at least got the sidebar back in place.

    (Can I just say, I admire how you’ve customized Prose so far? A beautiful custom header, some nice styles in the nav and background, and it looks completely custom designed. Nice work!)

    Okay, you’ve got your body width set to 1100 pixels. Now you need to widen several boxes (divs) that are inside the body div. Refer to the Genesis Visual Markup Guide to see which pieces you need to widen (although that guide doesn’t show the footer widgets, which we’ll get to in a second).

    The divs you need to change the widths of are probably going to be #inner, #content-sidebar-wrap, #content, and #sidebar.

    I would start by putting something like this into Genesis –> Custom Code –> Custom CSS (and this is only for the sidebar-on-the-right layout; if you have pages with no sidebar or pages that use two sidebars, you’ll need some additional tweaking to cover those layouts):

    #inner {
    width: 1100px;
    padding: 0 20px;
    }
    .content-sidebar #content-sidebar-wrap {
    width: 1060px;
    }
    .content-sidebar #content {
    width: 690px;
    }
    .sidebar {
    width: 350px;
    }

    This is a starting point; tweak these numbers if you want. If the widths of the content div and the sidebar add up to wider than their container, the sidebar will get pushed down, which you’ve already experienced.

    To get the footer widgets to stretch across your wider site, put this code into Genesis –> Custom Code –> Custom CSS:

    .footer-widgets-1, .footer-widgets-3 {
    width: 335px;
    }
    .footer-widgets-2 {
    width: 340px;
    }

    That should get you started. Hope this helps!


    I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

    #11776

    seanerin72
    Participant
    Post count: 22

    Wendy, that was fabulous help!!! Thank you so much and thank you for the feedback on my site!  I figure another couple weeks of tweaking and I will be ready to add content :)

    #11781

    seanerin72
    Participant
    Post count: 22

    So, I think I am making progress, but I wonder about this page: http://www.blackboarddreams.com/category/humancondition/

    Beyond my home page, I plan to use full page templates.  In the above page the content does not quite make it over to the right side of the page.  How can I ensure that the content on full page templates spans the entire page?

    Thank you!

    #12130

    wendycholbi
    Participant
    Post count: 120

    Hi Sean,

    Try adding this code:

    .full-width-content #content {
    width: 1060px;
    }

    Tweak the width to suit you. If you have lines of text that are actually that long, though, they might end up being hard to read, so you might want a slightly narrower width but centered on the page, with something like this:

    .full-width-content #content-sidebar-wrap {
    width: 100%
    float: none;
    }
    .full-width-content #content {
    width: 925px;
    margin: 0 auto;
    }

    Let me know how it goes!


    I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

    #12532

    abackpackerstale
    Participant
    Post count: 5

    Hi I been reading the discussion above. I’m trying to do the same thing, but having problems.

    I want to make the content area wider. I feel everything is smashed in the middle.

    No matter what values I play with on the above CSS I can not get the page wider.

    All I accomplished was to smash the sidebar in a 100 directions :).

    What did you do Seanerin?

    My site: http://www.abackpackerstale.com/

    #12534

    abackpackerstale
    Participant
    Post count: 5

    Hi I have been reading the discussion above. I’m trying to do the same thing.

    I want to make the page wider. I feel like everything is smahed in the middle.

    No matter what vaules I play with from the above CSS I can’t make the acutally width of the whole page (content/sidebar) wider.

    What am I doing wrong.

    My Site: http://www.abackpackerstale.com/

    Thanks

    #12543

    seanerin72
    Participant
    Post count: 22

    Hi, on your dashboard, click on custom code under the genesis tab.  Within the custom css box, I posted the following code:

    body {
    background: #f5f5f5;
    margin: 0 auto;
    width: 1100px;
    }

    #inner {
    width: 1100px;
    padding: 0 20px;
    }
    .content-sidebar #content-sidebar-wrap {
    width: 1060px;
    }
    .content-sidebar #content {
    width: 740px;
    }
    .sidebar {
    width: 300px;
    }
    .full-width-content #content {
    width: 1040px;
    }

    .footer-widgets-1, .footer-widgets-3 {
    width: 335px;
    }
    .footer-widgets-2 {
    width: 340px;
    }

    Visiting the following link will give you a sense of which areas of your site are being affected by the numbers included.

    http://www.studiopress.com/images/gen_markup.png

    Additionally, my site is currently set for a width of 1100px so all numbers thereafter (for content, sidebar, and footers) are managed accordingly.  Keep in mind as you adjust the number for the content area (740 px for me) you must also adjust the sidebar number (300 px for me).

    As much help as I have gotten here, I hope that I have been of some help to you.  Take care.

    Sean

    #34697

    pritamnagrale
    Participant
    Post count: 2

    Hi,

    I am new & don’t have much idea on designing part. I have checked everything here & implemented on my blog Getsarkarinaukri.co.in but I am not able to increase my content & sidebar width.

    I want to increase content width & sidebar width on my website getsarkarinaukri.co.in but the its not getting changed at all.

    I am using Magazine theme.

    Thanks,

     

    #45127

    dstrange26
    Participant
    Post count: 10

    Hello, I’m new to all this and have tried some of the code above to enlarge my web page.  I am using the Prose child theme with a sidebar, content, sidebar layout.  Using Sean’s code, I do get a wider page, however, my Secondary Navigation bar is not in line with either the left or right sidebar.  Also, my header image did not resize to the wider page.  I’m assuming that is due to the fact that I didn’t change the dimensions of the header image.  Additionally, the content is not re-displaying the text to the bigger width of the  content area.  It is still wrapping as if the content width was smaller. Any help with this would be very helpful

     

    Thanks

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.