Widen Content, Shorten Sidebar – Sample Theme

[friendlier2]

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! 🙂

[Marcy]

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 */
}

---

Marcy | Amethyst Website Design | Twitter

[friendlier2]

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

[Marcy]

I'm glad it worked for you!

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts