I got an interesting request for a feature on a new board I’m working on tonight. This is a phpBB2 board (of course ) and I am using a variation on subSilver. That template is “fluid” meaning the width will expand to fit the size of the window. Years ago having a site expand to fit the window was okay. Now that some people are using 1600×1200 pixel resolutions it can be hard to read. The human eye / brain simply can’t scan a line of text that far without losing track of where you are. I solve this myself by running my browsers at less than full screen, but that’s my choice. If someone else chooses to run their browser window stretched over two high-resolution monitors that should be there choice as well.

Where is this going? Based on the remarks made earlier tonight I worked out a really quick and easy MOD for phpBB2 (and the idea would work just as well for phpBB3). It’s a few bits of code that allow users to set a fixed width for the board (by pixel count) or opt for a full screen display. It took about an hour from initial concept to execution.

Building the User Selectable Board Width MOD

Step one is creating a place to store this information.

alter table phpbb_users
add user_board_width smallint(5) unsigned not null default 0;

I opted to use smallint(5) because the highest value I anticipate is 1600. The MySQL smallint data type goes up to 65535 for an unsigned value, so that should be plenty. The default value is defined as 0, which my code will interpret as full screen. Any other value will be used as the screen width.

Step 2 is to let the user enter something into that new value. Here’s what that looks like:

The code to build the selector and handle the user input value is all in includes/usercp_register.php which is the dual-purpose register and edit profile program.

What I did next I will call step 2.5 since it would not really be necessary. I added admin control that lets the board owner set the default width in case the user doesn’t pick anything. The value for that is stored in the phpbb_config table and therefore added to the $board_config array.

Step 4 is to collect the user preference and pass it to the template. That process takes place in includes/page_header.php like this:

'TABLE_WIDTH' => (intval($userdata['user_board_width']) == 0 ? $board_config['default_board_width'] : intval($userdata['user_board_width'])),

As you can see, if the $userdata array contains a zero value for the board width, the default value entered by the board admin will be used. Otherwise the user profile option is converted to an integer and sent to the template. That’s all the coding that was required. The template changes are even easier.

subSilver Template Changes

For subSilver the final step is very simple. Open the overall_header and find the top table that contains the rest of the page structure. It starts out looking like this:

<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">

Change it to this, and you’re done:

<table width="{TABLE_WIDTH}" cellspacing="0" cellpadding="0" border="0" align="center">

Fluid versus Fixed Design Debate

The debate over fixed versus fluid design can be as contentious as the debate comparing Mac to PC or IE to FF. Well, perhaps not that bad, but I’ve seen it get close. As a user, I perfer fluid sites so I can resize the window to fit my preferences. As a designer I think fixed width designs are easier to create. Making something scale well from 800 pixels all the way up to 1600 pixels (or beyond) is quite a challenge. When I was looking for templates for one of my blogs, I found that the ratio of fixed to fluid templates was probably about 5:1 (five fixed for every one fluid). And many of the fluid templates were … less than useful.

The subSilver template is a great example of a style that works both ways. For any style that fits the same pattern, having this simple MOD installed puts the choice back into the hands (and mouse) of your user. I think that’s a good thing.

I will be writing up the full MOD install and posting it in my MOD Catalog so that it’s available on this site.