An Experiment on Variable-Width Acquia Slate

Hi all,

We recently migrated our World of Warcraft guild website from GuildPortal to our own host. As the designated webdeveloper, I took a well-researched plunge into the world of Drupal. Our site went live about a month ago, and we've continuously been modifying and updating the site since then. You can take a look at the site at TWC Gaming. Our performance optimization and caching still isn't fully set up, so the site is slow on occasion. Apologies in advance.

One of the biggest challenges we faced in this project is theming. We're a community of gamers, and as such, most of us own large monitors with high resolutions. At the same time, we wanted the static content on the site to be high compatible and convenient to not just us but everyone who happens to stroll onto our site. We originally had 1280px fixed-width across the whole site, but the forums ended up too big for some of our users on smaller screens. When we cut it down to 1028px wide, it ended up too small for everyone else. And so we went digging...

You may have noticed that the current iteration of the website has almost all the pages at 1028px wide - with the exception of all the pages with 'forum' node type inside. The forum pages use a variable-width setup, and given the layout of Acquia Slate, that was quite a challenge to accomplish. We do like the theme a lot and we decided to put up with the extra work and keep the looks.

So long story short, I wanted to post here and give some information on how to accomplish this on Drupal 6 and Acquia Slate because the few tickets asking the same questions I had on this subject didn't have any responses to it.

1) First and foremost, Acquia Slate (at least the version we're using - without Fusion or Skinr) doesn't inherently have the capacity to apply different templates based on node-type. There's a useful Drupal document about how to get this done, and the gist of it is simply pasting the following code snippet inside the theme's template.php, under the phptemplate_preprocess_page(&$vars) function.

Simply put, this allows for creation of page-'nodetype'.tpl.php files where nodetype is the type of node you want to apply a unique template to. For our purposes, this was page-forum.tpl.php.

2) Once that was done, we made a copy of page.tpl.php and renamed it appropriately for our node type. Inside this tpl.php file, there are several div tags with corresponding ids. The ones that we decided to modify are, for the most part, self-explanatory. There are others, but these were the ones that had to have the variable width. Everything else remains static.

• "page"
• "header-wrapper"
• "content"
• "content-wrapper"
• "sidebar-first" and "sidebar-last"

These same IDs are used by other tpl.php files as well so changing them is out of the question. We simply created new ones on their place. Our naming convention, in this case, is "page-fluid", "header-wrapper-fluid" "content-fluid" and "content-wrapper-fluid". We didn't change the sidebar-first and sidebar-last, because the sidebars are still static content.

3) With the page-forum.tpl.php properly edited, the last step was to actually go into the theme's style.css file and add these three new div id's we created. Acquia Slate has three different possible sidebar/content layouts though, and because of that, there are three different sets of content-wrapper-fluid in the new style.css. "sidebar-first" and "sidebar-last" were both individually modified for the entire website. Below are the specific changes we made:

We don't use the sidebar | content | sidebar system anywhere on the website, but following the same logic, that section isn't hard to modify either. After all of these were done, we simply cleared our cache and our forums settled nicely into a stable, variable-width layout.

This approach isn't without its downsides.

For one, making the white banner variable width requires splitting the .png file into two and putting whitespace in the middle. The CSS code that makes this happen under "header-wrapper-fluid" is CSS3 and as of now, it is not supported by IE8 or Firefox 3.5 or older (3.6 supports it). Google Chrome, Apple Safari and Opera all work with this convention though.

Another unfortunate workaround is likely born out of my own lack of knowledge. I am self-taught in the ways of HTML, PHP and CSS. I tried various methods of making the website variable width - methods that work elsewhere on non-drupal websites - but the only one that worked for our particular situation is the one above. It's not elegant. It uses "position: absolute;" to stomp right over the area taken by #content-wrapper, and the only way we made this work was to squeeze the content-wrapper in with a margin, equal in size to the sidebar that we're trying to make room for. In addition, because the sidebar is now separated from the page with "position: absolute;", the gray background can actually be too short on occasion when the length of the content is less than the length of the sidebar. We prevented this by adding "min-height" to the #page div so that the gray background is extended down at a minimum of 1500px from the top of the page. Again, not so elegant.

The solution is far from perfect, but we did spend weeks on research (with no results) and a few days on top of that just experimenting on possible solutions on local installations of the site. My hope is that it at least serves as a good starting point to anyone who struggled with this same issue on their own installation.

Cheers!