Drupal Fusion Theme – Customize Grid Definition

I always install Fusion theme as base theme in Drupal development. It supports a 960px fixed width and a 100% fluid theme. 960px theme is very common now but what should we do if we want to define our own fixed theme? Here is a very good tutorial i found @ fusiondrupalthemes.com
fusion – Creating a custom grid definition
 

The following website could help you finding out the attributes of your customized grid.
Grid Calculator

 

I have created a 12 columns 1284px fixed width grid with 12px gutter. Here is my grid12-1284.css and put it in the <fustion_subtheme>/css.

/* grid widths */
.grid12-1 {width: 107px;}
.grid12-2 {width: 214px;}
.grid12-3 {width: 321px;}
.grid12-4 {width: 428px;}
.grid12-5 {width: 535px;}
.grid12-6 {width: 642px;}
.grid12-7 {width: 749px;}
.grid12-8 {width: 856px;}
.grid12-9 {width: 963px;}
.grid12-10 {width: 1070px;}
.grid12-11 {width: 1177px;}
.grid12-12 {width: 1284px;}

/* block indents */
.grid12-indent-1 {margin-left: 107px;}
.grid12-indent-2 {margin-left: 214px;}
.grid12-indent-3 {margin-left: 321px;}
.grid12-indent-4 {margin-left: 428px;}
.grid12-indent-5 {margin-left: 535px;}
.grid12-indent-6 {margin-left: 642px;}
.grid12-indent-7 {margin-left: 749px;}
.grid12-indent-8 {margin-left: 856px;}
.grid12-indent-9 {margin-left: 963px;}
.grid12-indent-10 {margin-left: 1070px;}
.grid12-indent-11 {margin-left: 1177px;}
.grid12-indent-12 {margin-left: 1284px;}

/* gutters (2 x margin) */
.block .inner {
  margin-left: 6px;
  margin-right: 6px;
}

/* hack to fix node-top & node-bottom being off-grid */
#content-content .node .first .inner {
  margin-right: 12px;
}

body,
div.full-width {
  min-width: 1284px;
}

 

And edit the <fusion_subtheme>.info as follow

...
; Default theme settings
settings[theme_grid] = grid12-1284
settings[theme_grid_options][] = grid12-1284
settings[theme_font_size] = font-size-12
settings[sidebar_layout] = sidebars-split
settings[sidebar_first_width] = 3
settings[sidebar_last_width] = 3

; Inherit Skinr styles from Fusion Core
skinr[options][inherit_skins] = true

; Disable 12 column grid block widths inherited from fusion_core
skinr[grid12-width] = ""

; Widths for 12 column, 1284px/fluid grid
skinr[grid12-width][title] = Width (12 column grid)
skinr[grid12-width][type] = select
skinr[grid12-width][features][] = block
skinr[grid12-width][options][1][label] = 1 unit wide (107px/8.33%)
skinr[grid12-width][options][1][class] = grid12-1
skinr[grid12-width][options][2][label] = 2 units wide (214px/16.67%)
skinr[grid12-width][options][2][class] = grid12-2
skinr[grid12-width][options][3][label] = 3 units wide (321px/25%)
skinr[grid12-width][options][3][class] = grid12-3
skinr[grid12-width][options][4][label] = 4 units wide (428px/33.33%)
skinr[grid12-width][options][4][class] = grid12-4
skinr[grid12-width][options][5][label] = 5 units wide (535px/41.67%)
skinr[grid12-width][options][5][class] = grid12-5
skinr[grid12-width][options][6][label] = 6 units wide (642px/50%)
skinr[grid12-width][options][6][class] = grid12-6
skinr[grid12-width][options][7][label] = 7 units wide (749px/58.33%)
skinr[grid12-width][options][7][class] = grid12-7
skinr[grid12-width][options][8][label] = 8 units wide (856px/66.67%)
skinr[grid12-width][options][8][class] = grid12-8
skinr[grid12-width][options][9][label] = 9 units wide (963px/75%)
skinr[grid12-width][options][9][class] = grid12-9
skinr[grid12-width][options][10][label] = 10 units wide (1070px/83.33%)
skinr[grid12-width][options][10][class] = grid12-10
skinr[grid12-width][options][11][label] = 11 units wide (1177px/91.67%)
skinr[grid12-width][options][11][class] = grid12-11
skinr[grid12-width][options][12][label] = 12 units wide (1284px/100%)
skinr[grid12-width][options][12][class] = grid12-12
...

 

So now go to Administer -> Site building -> Themes and pick the new grid.

 

Done =)

Reference:

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s