WebPageMaster Project w/Themes and Accordion Menu Download (1.00 mb)
Screen Shot Silver (35.41 kb)
Screen Shot Gold (35.49 kb)

Master Pages (3^rd of a Series)

You're probably getting bored looking at the same site over and over, now you need to set up the site for the visually-impaired, or need to change the look for an upcoming holiday. Whatever, using themes will fit the bill. As developers we find it refreshing...

Now, let's add a twist to applying a theme, instead of setting the pages tag in the web.config, let's make it dynamic so the user change can it on the opening screen. If the user were to log into the site, you could then save it as a preference, but let's just concentrate on applying a theme dynamically.

Here, we will try to make it simple (and it is).

the Building Blocks: the 'New Stuff' in the App_Code and the App_Themes folders

App_Code folder: just copy these three files to your project within the App_Code folder. (They are part of the download or you can get them here).

• BasePage.cs
• Theme.cs
• ThemeManager.cs

Basically, they are to build upon the System.Web.UI.Page and set the theme using a Session Variable. Instead of inheriting 'System.Web.UI.Page' on the server-side code you will be using 'BasePage'. And within the [BasePage.cs] is where you now set the default theme, in this project it is set to 'Standard'.

App_Themes folder: First, we added the folder [App_Themes] and a subfolder: [Standard] which will be our default theme, within this folder we moved ..\MasterStuff\Style.css and the ..\MasterStuff\images folder to the Standard folder, we then renamed [Styles.css] to 'Default.css'. Also, we added to our Default.css, a class .U_Theme which you find under the comment /* Radio control for Themes */ to handle the style of the radio button to change themes.

Second, we copied our [Standard] folder and renamed it 'Gold', Where we changed the images in the [Images] folder to be gold in color (keeping the same name to the images, being lazy so we limit the edits to the css...).

Now within our project environment, things look like this:

Sha-Zaam, were almost done... Change the server-side code of all your pages which you want to implement the chosen theme (we chose all of them) from:

public partial class "bla_bla_bla" : System.Web.UI.Page
{...

//to
public partial class "bla_bla_bla" : BasePage
{...

And then add the radio control to the [Default.aspx] page.

Note:  If you wanted to move the radio button for the theme setting to the footer of this sample project (so, it will always be visible within this project), which is in /masterstuff/Site.master (which is not in the root, where as default.aspx is), you will have to make a change in /App_Code/ThemeManager.cs as shown below (add "~/" in the MapPath statement):

//from
DirectoryInfo dInfo = new DirectoryInfo(System.Web.HttpContext.Current.Server.MapPath("App_Themes"));

//to
DirectoryInfo dInfo = new DirectoryInfo(System.Web.HttpContext.Current.Server.MapPath("~/App_Themes"));

the Result

When entering the site, we are presented with this:

Click on the radio button control to gold, we are now presented with this:

And then the chosen theme is used throughout the entire site:

As you add more themes (folders under the App_Themes), they will automatically update the radio control, which is cool... theme on!

Screen Shot Silver (35.41 kb)
Screen Shot Gold (35.49 kb)
WebPageMaster Project w/Themes and Accordion Menu Download (1.00 mb)

the WebPepper team