Ayman Hourieh's Blog

This site uses a modified version of the Blix theme. The most notable modification is the change from fixed width to a fluid layout. I often receive questions on how I did it. Here is a quick tutorial. As you will see, the process is quite easy.

The first step is getting a general idea of how the structure of the page is organized. Blix has an overall div container named #container, in which there are 2 div containers, #content for the main content, and #subcontent for the sidebar.

Fixed width themes specify container width values in pixels. So the next step is locating those lines. When doing a simple search for "width:", you will find the following pieces of code:

#container {
  width: 690px;
}
/* ... */
#content {
  width: 455px;
}
/* ... */
#subcontent {
  width: 205px;
}

To switch to fluid layout, you need to specify width in relative values (percents):

#content {
  width: 70%;
}
/* ... */
#subcontent {
  width: 25%;
}

That's it. Next, I did some cosmetic changes to fix background colors and images, below is a working patch for the Drupal 4.6 version of Blix. It only patches style.css and should be all what you need to switch Blix from fixed width to a fluid layout.

It's worth noting that modifying other themes to a fluid layout may need more work, especially those which use absolute positioning.

Hope this helps Blix users.