Thesis comes packed with plenty of configuration options, but I’m going to show you how to create a fluid layout for your site by only editing custom.css.
Not sure what a fluid layout even is? Basically it’s just means the site width is determined by the size of the users browser window. If you resize, the content resizes as well. W3C’s site is a good example of a fluid/liquid layout. Google “Fluid Layout” and you’ll find plenty of info on it!
Making this change is actually pretty easy, but it should also be noted that you’ll lose the functionality inside Thesis to define column sizes. Also, with the code provided you can only use the 2 columns option (without making extra changes on your own).
Anyways, lets get to it- open up the custom.css file found inside the Thesis custom folder and add the code below:
#container { width: 100%; }
#content_box { background-position: 70% 0; }
#content { width: 70%; }
.teasers_box { width: auto; }
.teaser { width: 48%; }
#sidebars { width: 30%; }
#image_box { text-align: center; overflow: hidden; }
#image_box img { display: inline-block; border: none; background: none; }
That’s going to give you your fluid design with no other steps and you should have something that looks like the site in the image below:
Of course you can take things into your own hands and edit the different % values to come up with different sidebar / content ratios (make sure it equals 100%). If you’re using interior lines (the default) make sure the background the #content_box and #content values match up. If you want to use your sidebar on the left column, have the #content_box value equal your #sidebars value.
Need more padding on the sides? Thesis has an option found in Design Options called Outer Page Padding, which you can tweak to your fancy.
I didn’t do extensive testing, but from the looks of things it works in IE6+ and all major browsers. Let me know any different.
Leave your questions, comments, and issues after the break!
I'm a freelance web designer working out of 
{ 8 comments… read them below or add one }
Smooth moves. That didn’t take as much CSS as I thought it would.
For readability’s sake it’s usually a good idea to have min and max widths for fluid content, otherwise it can get a little ridiculous, but this is a great start.
Matt – Thanks for this, it’s very clean and simple.
Krista Good point! I also appreciate how W3C’s fluid layout magically switches to a mobile site layout if it get really really narrow. I’ve been meaning to look into that very feature of fluid layouts myself lately… haven’t yet, but soon. Assuming it’s just a different style sheet altogether, although I’d assume it was called via JScript, but it looks to be in the header…
.-= Jon Brown´s last blog ..Hello world- =-.
That’s what I was thinking before I made it to the bottom of the article. Need minimums, at a minimum.
Ha ha!
I have been looking for a tutorial on customizing thesis skins with this functionality. I have been trying to customize my Thesis Skin and the results are good, but it shows poorly on most small screen computers in low resolution. I hope this solution works its wonders on my site.
I agree about the maximum width issue. Sadly, many visitors to your site won’t have enough computer savvy to realise that they can resize the window. Many others also have their browser window permanently maximized.
For readers who are not familiar with CSS, just change the first line of the Matt’s code to this:
#container { width: 100%; max-width:1250px;}
1250 pixels seems to me to be about the right maximum for comfortable reading without having to scan. What do others think?
And of course you do you can add:
min-width:400px;
or whatever if that is your heart’s desire.
Thanks for the quick tutorial Matt. I have been facing this issue with my site in recent times and I think this code snippet would enhance my readers’ experience.
Do you happen to have any code for a fluid custom header with thesis? Having a terrible time sizing this correctly for different resolutions! thank you !
Padding option worked ^^ Thanks for the tip. I’m a codeless wp builder and help such as these keeps me in business.
{ 2 trackbacks }