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 Prince Edward Island, Canada.
{ 3 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- =-.
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.
{ 2 trackbacks }