New design…

As you may or may not have noticed, I changed the design on my site this week. Things were loading slow and behaving sluggishly with the old theme and I wanted something a bit more easily manageable, customizable, and unique. I purchased the Thesis theme by Chris Pearson, whom I met last year out in LA, largely because it provides a nice balance of out of the box customization options alongside the ability to build a unique look for your site. Currently, this site lacks nearly any sort of unique look, because I’m just starting to figure out how I want it to look and how I want to customize it.

I managed to increase the width of the main content column to 600px wide by adding the following to my custom.css file (and I’m debating making it even wider):

.custom #content { width: 600px; }
.custom #container { width: 1010px; }

Ideally, what I’d like to do next is widen the second sidebar so that it’s as wide as the medium rectangle housing the YouTube video that currently sits on top of both columns, and then move the first sidebar to live on it’s own over to the far left of the main content column. Unfortunately all my attempts so far to do this have resulted in the first sidebar looking fine, the main column looking fine, and then a gap of about 150px before the second sidebar begins, thus pushing it off the side of the container.

If there are any CSS ninjas out there with quick answers, I’d appreciate it. I’ve also written to Chris to see if he has a solution. After I get the basic layout that I want in place, then I’ll start adding some custom images and changing the header.

UPDATE: I figured out how to get the layout how I wanted with small column on the left, 600px main content column, and then wider 360px right hand column featuring my Twitter updates and Google Reader Shared items amongst other things. Here’s the code I added to custom.css:

.custom #content { width: 600px; }
.custom #container { width: 1200px; }
.custom #sidebars { width: 360px; }
.custom #sidebar_2 { width: 360px; }

About C.K. Sample III

I am a father, a husband, a blogger, a parrot owner, a pug owner, and the Chief Product Officer for YouEarnedIt. This site has no comments. If you want to talk to me, send me an @cksample on Twitter. If you like this post, feel free to buy me something off of my wishlist.
This entry was posted in Blogging, Personal and tagged , , , , , . Bookmark the permalink.

5 Responses to New design…

  1. Craig Wood says:

    CK,

    CSS is a black art that when done perfectly is more powerful that the strongest net mogo magic. When done improperly you summon a devil bent on nothing else but consuming your entire life with ID and Class hacks.

    Don't try and work with CSS without the webdeveloper plugin on Firefox, it will tell you what rules are being assigned and where those rules are in your CSS.

  2. cksthree says:

    Yeah, I can see on this permalink page that the 600px width didn't really take for this column. The Disqus comments are edging their side over the line over there —>

  3. cksthree says:

    Ooooh, cool. I figured it out:

    .custom #content { width: 600px; }
    .custom #container { width: 1200px; }
    .custom #sidebars { width: 360px; }
    .custom #sidebar_1 { width: 161px; }
    .custom #sidebar_2 { width: 360px; }

Comments are closed.