Increase Sidebar Width on eleven40 Theme

Community Forums › Forums › Design Tips and Tricks › Increase Sidebar Width on eleven40 Theme

This topic is: resolved

This topic contains 21 replies, has 3 voices, and was last updated by  SoZo 3 months, 3 weeks ago.

Viewing 15 posts - 1 through 15 (of 22 total)
1 2
  • Author
    Posts
  • January 30, 2013 at 2:02 pm #16481

    Ellis
    Member
    Post count: 10

    Does anyone know where I can get exact step-by-step instructions on how to increase the sidebar width on the eleven40 theme while still keeping it responsive? I’m using content and 1 sidebar.

    January 30, 2013 at 2:15 pm #16493

    SoZo
    Moderator
    Post count: 1573

    There isn’t an exact step by step guide that I have happened upon. There are several elements that you will need to edit. I recommend installing the Firebug add on for Firefox or using Chrome’s Firebug Lite which will enable you to right click on any element to inspect it and determine the associated style rules or the selectors required to create new style rules. Also take a look at the visual markup guide to understand the underlying structure of genesis.

    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    January 30, 2013 at 2:29 pm #16505

    Ellis
    Member
    Post count: 10

    I have already tried using Firebug and the visual markup guide and still can’t figure it out. I guess I’m not quite where I need to be on a technical level to figure this theme out. Thanks for taking the time to reply.

    January 30, 2013 at 4:03 pm #16522

    SoZo
    Moderator
    Post count: 1573

    I suppose the key is understanding that if you have two boxes both within a larger box you can’t increase the size of one box without also either reducing the width of the other inner box or increasing the width of the outside box to accomodate the larger inner box. i.e. since the primary sidebar and the content div are both within the content-sidebar-wrap div you either need to decrease the width of #content according to the increase in .sidebar or increase the width of .content-sidebar-wrap. And if you increase the width of .content-sidebar-wrap then you need to increase the width of #inner and #wrap accordingly.

    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    January 30, 2013 at 5:17 pm #16560

    Ellis
    Member
    Post count: 10

    I’ve tried the corresponding addition and subtraction and it pushes my sidebar down to the bottom.

    #content  width: 580px; changed to 490px (subtracted 90px)

    .sidebar  width: 250px; changed to 340px (added 90px)

    January 30, 2013 at 5:51 pm #16573

    SoZo
    Moderator
    Post count: 1573

    There are several different places where a width is declared for #content that will override the default content rule, i.e. .content-sidebar #content

    If you post a link to your site I can see what’s going on

    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    January 30, 2013 at 6:04 pm #16578

    Ellis
    Member
    Post count: 10

    http://www.petcarejournal.com

    January 30, 2013 at 6:14 pm #16582

    SoZo
    Moderator
    Post count: 1573

    Since you have a content-sidebar layout the width of the content div is defined in this rule on line 575

    .content-sidebar #content,
    .sidebar-content #content {
    width: 810px;
    }

    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    January 30, 2013 at 6:19 pm #16586

    Ellis
    Member
    Post count: 10

    Yeah, I’ve tried changing that too and still have the same problem – sidebar pushed to bottom.

    January 30, 2013 at 6:21 pm #16588

    SoZo
    Moderator
    Post count: 1573

    Make your edits so I can see what’s going on

    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    January 30, 2013 at 6:32 pm #16591

    Ellis
    Member
    Post count: 10

    I did.

    January 30, 2013 at 6:48 pm #16593

    SoZo
    Moderator
    Post count: 1573

    Everything looks like it should to me. Sidebar is next to the content. Perhaps you need to clear your cache.

    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    January 30, 2013 at 7:00 pm #16596

    Ellis
    Member
    Post count: 10

    I meant that I did leave the edits in place after the 2nd change -

    .content-sidebar #content,
    .sidebar-content #content {
    width: 810px;
    }

    width changed to 720px

    I cleared the cache on my PC Firefox, PC Explorer, and Mac Safari browsers and the sidebar is pushed to the bottom on all of them

     

    January 30, 2013 at 7:01 pm #16598

    SoZo
    Moderator
    Post count: 1573

    Yep, content is showing as 720px and sidebar is 340px and everything is aligned properly fgor me

    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    January 30, 2013 at 7:16 pm #16601

    Ellis
    Member
    Post count: 10

    Thank you so much for all of your help – it’s much appreciated. Unfortunately, I’m still stuck with a sidebar that is pushed to the bottom according to my 3 computers – 2 PCs and 1 MacBook even after clearing the cache on each machine.

    Maybe someone else could check on their computer to see if my machines are the oddballs. The sidebar is located at the very bottom of the page just above the footer.

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 22 total)
1 2

The topic ‘Increase Sidebar Width on eleven40 Theme’ is closed to new replies.