Using An Alternate Stylesheet With StoreFront 6.x

StoreFront includes some client-side design tools which plug into FrontPage or Dreamweaver, and they’re not too bad (especially for beginners).  One downside to these tools is that they completely rewrite the styles.css file each time you save your settings.  Not so good if you’ve made some CSS changes.  Instead of altering the styles.css, I recommend using an additional stylesheet.  Remember that styles are cascaded—that is, if you specify the same class in two stylesheets, the browser will mash them together and use both sets of settings.  If you specify the same element in both stylesheets, then the sheet which is listed last wins.  This is excellent for us, because you can add settings to all the basic classes in styles.css, and you don’t have to worry about losing your settings if you still want to use StoreFront’s design tools.

To make sure our new stylesheet is added to every page, you need to add one line of code to the CWebPage.vb file and recompile your site.  Open CWebPage.vb in FrontPage or Dreamweaver, and find the subroutine named PageHeader.  Scroll down to the end of the subroutine (marked by ‘End Sub’, at roughly line 938).  Add the following line of code right above End Sub:

response.write(“<link type=””text/css”” rel=””stylesheet”” href=””MyStyleSheet.css””></script>”)

You do need the double double-quotes where you see them, and remember to change the name of MyStyleSheet.css in the line of code.  This line of code will add a stylesheet link to the end of the header of every page.  Recompile your site using Compile Components on the StoreFront menu, and you’ll be good to go.

Now playing: Eddie MoneyGimme Some Water