Tweaking StoreFront 6 Page Layout

The design and layout of pages in StoreFront 6 can be somewhat controlled through their design and configuration tool.  When the page is rendered, the values you set in the configuration tool overwite the defaults set at design time, generating the final layout.

As it turns out, the physical layout of the pages is controlled by two tables.  One, named PageTable, is the outer table, and its defaults are not overwritten.  PageTable contains a single row, with a single cell, no borders, 100% width.  The inner table, PageSubTable, is the one whose settings are overwritten.  Maybe there’s a good reason for this, or maybe LaGarde didn’t read the “Good HTML” chapter in their books.  Whatever the reason, with some small tweaking, you can use PageTable to your advantage with more stylized layouts.

Rather than change the tag on every page, it would be nice to assign PageTable a CSS class, so we can control its appearance using stylesheets.  Rather than edit each and every page, we can use FrontPage’s “search all pages” feature for the string ‘id=”PageTable”‘, and edit the tage ourselves.  Unfortunately, not all the tags are the same, or we could just use the Replace feature as well.  There’s less than 50 instances you’ll need to edit, so it’s not so horrible. Bare minimum, the TABLE tag should have an id attribute and class attrribute.  After this, you can control its appearance through CSS.

If you want to tie PageTable’s appearance into the SF/FP configuration tool, you can skip the editing of each tag.  Instead, open CWebPage.vb, and find the sub named SetDesign (around line 289 in my version).  Several lines into this sub is the block of code which overwrites PageSubTable’s default values with the ones you set through the designer.  Make a copy of this block, ad change PageSubTable to PageTable.  This will apply the designer settings to PageTable.  You can comment out PageSubTable (you really shouldn’t apply the settings to both tables, the results could be a little unexpected), or change it to suit your needs.