The Graphene Theme Sidebar Drove Me Nuts

If you’re reading this post you must be glad you found it because editing the Graphene theme is a beast of a task for a rookie in the skill of editing WordPress themes, but I got it done.

I took me about 10 hours (I’m a noob, get back!) to figure out how to widen the sidebar using css and I’m glad it wasn’t a waste because I missed some really, really, good sleep fooling with that theme. I am no CSS pro, not even a novice, but hey, we all get dirty sometimes.

The meat of the matter is that I manage a home improvement website for a friend, and its about time I add some pictures to it and give it some rich content, you know, some flavor.

At least give my friend a chance of making money off of it ….. ya know?

A Rich Media Sidebar Gets Love

The damn sidebar was 255 width, “with padding” – so I am only getting like 221 width and getting a migraine wondering who the hell would make a theme with a worthless sidebar?

Seriously, who does that? You can’t get jiggy with that shit, so I had to make some changes. After looking for a new theme for about two hours I decided to give it a go and do the unthinkable: Get my Firefox plug-in locked and loaded, crank up Firebug, and go into the unknown editing such an option packed theme!

The one thing that had bugged me to death about the Graphene theme is making the sidebar wider would throw the whole theme off and I wasn’t really sure if I could handle it or not.

Then, after I finally settled on making the sidebar 325 pix, I couldn’t even get it in the right spot-I swear it drove me nuts!

Then I discovered the wonderful attribute of “float: right;” and the rest, as they say, is history!

No sense in me being stingy, if you use the Graphene theme, the CSS code I used to widen the sidebar is below. Add it to the theme via the WordPress dashboard, works just fine. If you have any trouble or problems let me know (leave comment below), I will help you widen your sidebar my friends! I will help!

.two-columns #content-main {
float: left;
width: 620px;
}
#sidebar1, #sidebar2 {
display: inline;
float: right;
margin-top: 4px;
padding: 0 5px 10px;
width: 325px;
}
.two-columns .post.nodate, .two-columns .post.page, .two-columns .post.post_404, .two-columns .post.post_404_search {
width: 590px;
}
.two-columns .post {
border-top-right-radius: 5px;
width: 535px;
}
.two-columns .featured_slider #slider_root {
width: 580px;
}
.slider_post {
float: left;
height: 200px;
padding: 20px;
position: relative;
width: 545px;
}

.two-columns .slider_post {
width: 545px;
}

Written By VizFact

 Wordpress CSS Code to Widen Sidebar