Widen Content, Shorten Sidebar – Sample Theme

Community Forums Forums Design Tips and Tricks Widen Content, Shorten Sidebar – Sample Theme

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  Marcy 1 year, 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #49683

    friendlier2
    Participant
    Post count: 2

    Hey guys,

    How do I widen the content of Sample theme and thin out the sidebar? I’ve shortened the sidebar with pixels, but of course there’s whitespace between the content of the posts, now, and the sidebar, i’m assuming i need to tweak the wrappers as well–any pointers?

    Here’s the css for the content wrappers:

    }

    .content-sidebar-sidebar .sidebar,
    .sidebar-content-sidebar .sidebar,
    .sidebar-sidebar-content .sidebar {
    width: 37.931034482%; /* 352px / 928px */
    }

    .content-sidebar-sidebar #content,
    .sidebar-content-sidebar #content,
    .sidebar-sidebar-content #content {
    width: 56.896551724%; /* 528px / 928px */
    }

    .content-sidebar #content,
    .sidebar-content #content,
    #title-area {
    width: 65.277777777%; /* 752px / 1152px */
    }

    .content-sidebar-sidebar #content-sidebar-wrap,
    .sidebar-content-sidebar #content-sidebar-wrap,
    .sidebar-sidebar-content #content-sidebar-wrap {
    width: 80.555555555%; /* 928px / 1152px */
    }

    .content-sidebar #content-sidebar-wrap,
    .full-width-content #content,
    .full-width-content #content-sidebar-wrap,
    .sidebar-content #content-sidebar-wrap {
    width: 100%; /* 1152px / 1152px */
    }

    and here’s the css I tweaked to thin out the sidebar:
    .sidebar {
    display: inline;
    line-height: 1.5;
    width:250px;

    I’m a novice Genesis theme-r so have grace with me! :)

    #49980

    Marcy
    Participant
    Post count: 381

    The original sidebar was (I’m only:
    .sidebar {
    width: 30.555555555%; /* 352px / 1152px */
    }
    The % number is what you want to change; the part between /* and */ is a comment that tells you to divide the width of the sidebar (352px) by the width of the site (1152px)

    You want the new width to be 250px, so 250px /1152px = 21.70138%,
    so the new width for .sidebar is
    width: 21.70138%; /* 250px /1152px */

    So now you want the content area to be larger by 352px – 250px = 102px

    So for each of the sections, you would add 102px to the first number and divide by 1152px to get the new %.
    ————–

    .content-sidebar-sidebar .sidebar,
    .sidebar-content-sidebar .sidebar,
    .sidebar-sidebar-content .sidebar {
    width: 21.70138%; /* 250px /1152px */
    }

    .content-sidebar-sidebar #content,
    .sidebar-content-sidebar #content,
    .sidebar-sidebar-content #content {
    width: 67.788793%; /* 630px / 928px */
    }

    .content-sidebar #content,
    .sidebar-content #content,
    #title-area {
    width: 74.13194%; /* 854px / 1152px */
    }

    I don’t think you want to change this one, unless you have also changed the width of #sidebar-alt.
    .content-sidebar-sidebar #content-sidebar-wrap,
    .sidebar-content-sidebar #content-sidebar-wrap,
    .sidebar-sidebar-content #content-sidebar-wrap {
    width: 80.555555555%; /* 928px / 1152px */
    }


    • This reply was modified 1 year, 3 months ago by  Marcy. Reason: Added
    • This reply was modified 1 year, 3 months ago by  Marcy. Reason: Added
    #49988

    friendlier2
    Participant
    Post count: 2

    thank you so much for the help, Marcy. the percentages have been a learning curve for me, and now that I know the pixels are meant for math, that helps. worked like a charm when i put the code into the theme. thanks again!!

    #49991

    Marcy
    Participant
    Post count: 381

    I’m glad it worked for you!


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

You must be logged in to reply to this topic.