Change metrics for Carbone and Grafite

Carbone MetricsCarbone and Grafite are two of the most successful themes by BehindTheRabbit. They are two “twin” designs, meaning that they share many characteristics; among them, most of their metrics. A common request about them is: “Can I increase their width”?

They are both 900px wide, which is suitable for most purposes but narrower than the 960px standard so common nowadays. Anyway, since the graphics of both designs are completely created via CSS, there’s a lot of changes we can do. We’ll use Carbone as an a example.

Header’s height

Header’s height is one of the easiest parts we can change. It is 120px tall and the title has a padding-top of 40px; to make it, for example, 100px tall the code is quite straightforward:

#title {height:100px;}

As you can see, we need to move up a little the title too. We shortened the header by 20px, so let’s subtract around 20px to the padding-top as well (let’s make it just 20px to keep things simple). This is the final code:

#title {height:100px;}
#title h1 {padding-top:20px;}

You can play with this values, according for example to the visibility of the tagline or you personal taste.

Technically, you can also increase its height, but there’s a catch: whatever the size of the header is, a banner picture can only be 120px tall. This limit is hardcoded into the design and cannot be changed via CSS injection, so you will not be able to use a picture as a header background (unless it’s a pattern).

Page width

Increasing the width of the page from 900px to 960px is sligthly more difficult. The tweak itself is very simple indeed:

#page-container {width:960px;}
body.allow-sidebar #main {width:610px;}

The first line increases the overall size, the second one increases the size of the main body to fill the newly available space.

The problem is that this affects a number of other parts of the website. Our first concern is something most people don’t think about: line length. A single line of text shouldn’t be longer than 80 chars; you can find many examples online of lines up to 100 chars, but over this value readability seriously worsen.

Keeping the code as it is, a single line in a page with no sidebar in Carbone can be up to 140px long: too much. We need to increase font-size as well:

#main p, #main ul {font-size: 1.4em;}

For Carbone, 1.4em corresponds to 14px. Still the line is a bit long, less anyway than 140px. How large the text should be and how many chars you can accept for a single line is up to you, just play with these values and see what happens.

If you’d like to differentiate pages with sidebar from pages with no sidebar, you can:

body.no-sidebar #main p,
body.no-sidebar  #main ul {font-size: 1.5em;}
body.allow-sidebar #main p,
body.allow-sidebar  #main ul {font-size: 1.4em;}

Galleries

More room in the page means more room for photo album thumbnails. But if you don’t tell them, they stick very close to each other leaving an unused blank space on their right.

Let’s give some breath, starting with pages with sidebar:

body.allow-sidebar .gridItem {margin: 12px;}

Then deal with pages with no sidebar:

body.no-sidebar .gridItem {margin:10px;}

This is definitely more consistent.

Grafite

This code works for Grafite as well, with few adjustements. Since text base size for Grafite is slightly larger, you might need to work on line height as well. For example:

#main p, #main ul {font-size: 1.4em; line-height:1.8em;}

For no-sidebar galleries, 9px is the size that works:

body.no-sidebar .gridItem {margin:9px;}

Conclusions

Starting with these examples you should be able to radically change the height, width and size of the main elements of your website. Play with values until you reach your goal and don’t forget to test the result with as many browsers as possible.