IE3+ & NN4+ all support the basic standards of Cascading Style Sheets(CSS). Here is essentially how I implemented an interface so the customer can choose the "theme" of the demo site. If you choose not to allow modification the architecture is even simpler to implement and maintain. There are several other ways to accomplish this but this is the simplest I have found. For a demonstration change the theme for the site from the list above.
My implementation uses frames and separate CSS files. This makes creating the "dynamic" part very easy. However, combining "Talk Between Pages" concept with this concept could be used to accomplish the task in a non-frames design if you pass the CSS file as a parameter.
- In the frame definition page(FDP) create a global variable to store the location of the CSS file. In our example the variable name is "MYCSS". I recommend defining a default value.
- Now replace of the normal CSS link code found in all your frames pages with the following:
<script type="text/javascript">
<!--
document.writeln('<link REL="STYLESHEET" HREF="'+top.MYCSS+'" TYPE="text/css">')
// -->
</script>You now have a very simple way to apply and maintain the theme of your site. Change the global variable and all pages automatically use the new CSS file. The next steps provide a mechanism to allow your customers to select a theme. In order to continue you need to have more than one CSS theme file created. You could stop here and enjoy maintenance benefits.
You now need mechanisms to allow your customers to select a theme. You will need a list of available themes for the customer to select, a small script to change the theme, and cookies to remember the customers selection. Where the script code resides is important.
Create a form with only your themes list box. The form should have NO action. Ensure the list box includes an "OnChange" event to trigger our small script(ChangeCSS) to actually change the theme. Here is a minimum you will require.
...
<script type="text/javascript">
<!--
function ChangeCSS(){
top.MYCSS = document.forms[0].themes.value
}
// -->
</script>
....
<form>
<select name="themes" onchange="ChangeCSS()">
<option value="/css/dir/blue.css">Blue</option>
<option value="/css/dir/red.css">Red</option>
<option value="/css/dir/green.css">Green</option>
</select>
</form>There is still something missing from the ChangeCSS code... The displayable frames must be refreshed so they use the new settings. You may decide to go through the array of frames and refresh each one or hardcode which frames you need to refresh when the theme changes. Simple hard code might be "top.frames[1].location = top.frames[1].location". This causes a refresh instead of a reload. Make your own decision. You do not have to refresh the FDP and unless you are using cookies refreshing the FDP will cause the theme to revert back to the default value(not good).
You may also want to save CSS settings with a cookie in ChangeCSS. The cookies are important for future visits only. This will also require script to read the cookie and adjust the MYCSS variable when the FDP is loaded. All cookie code should be located in the FDP and not on frames pages. I did not provide examples since this is generic cookie processing.
There are several parts intentionally omitted and this is not exactly the way I did it at this site... But it gives the same results.
- Have to set theme list to currently selected theme when page loads.
- Benefits of splitting the MYCSS variable into directory and file
- Benefits of using FDP for code modules
- Details of cookie processing
I have promoted CSS since I first used it in IE3Beta. In my opinion CSS is by far the best value and least recognized architecture created on the web. Perhaps because it came from Microsoft no one wants to recognize it is good.
Anyway, I hope this helps those that want it.