Skip to main content

Dynamic Theme Switching - Creating User-Selectable Themes

Theme  :


 A theme is a collection of property settings that allow you to define the look of pages and controls, and then apply the look consistently across pages in a Web application, across an entire Web application, or across all Web applications on a server.

Skins :


A skin file has the file name extension .skin and contains property settings for individual controls such as Button, Label, TextBox, or Calendar controls. Control skin settings are like the control markup itself, but contain only the properties you want to set as part of the theme.


Previous Post  I was Explained about the  jQuery - Allow Alphanumeric (Alphabets & Numbers) Characters in Textbox using JavaScript , Fileupload show selected file in label when file selected , Check for file size with JavaScript before uploading, Show jQuery UI Dialog Popup Window from Server Side ( Code Behind ) in ASP.Net , How to use the window.open()  method ,  CONFIRMATION BOX WITH YES NO BUTTONS USING AJAX MODAL POPUP EXTENDER IN ASP.NET , Highlight Gridview Row When CheckBox is Checked in Asp.Net using Jquery


I think it is usually a good design practice, with Framework 2.0 applications, to control as much as possible  with themes that consist of a CSS file, a Skin file, and whatever graphic files are required. 

  This allows for an entire site to change its appearance by just changing the theme.  I went a step beyond that and enabled this site to allow dynamic theme changes from the dropdown box on the page heading.  One of the choices is “NoTheme” so you can see the site as it is with no CSS or Skin applied.  I plan to go a step further soon and implement memory of the last theme the user chose so it can be redisplayed at the users’ next visit using the new Atlas  ProfileScriptService.
 
Implementing dynamic theme switching entails the following …
 
First develop all of the themes you want and put them all under the App_Themes folder in your ASP.Net project.
 
Create a class, call it SwitchPage, and put it in the App_code folder.  It would look like this…
 
public class SwitchPage : System.Web.UI.Page
{
    protected override void OnPreInit(EventArgs e)
    {
        base.OnPreInit(e);
        if (Session["TheTheme"] == null)
        {
            Session.Add("TheTheme", "EasyHotel");
            Page.Theme = ((string)Session["TheTheme"]);
        }
        else
        {
            Page.Theme = ((string)Session["TheTheme"]);
        }
    }
}
 
In my case “EasyHotel” is the name of my theme that I want to always display first.  What this does is set the page, 
to which this class belongs, to whatever is in Session[“TheTheme”].  The trick to make this work is to change the 
inherit statement on all of you aspx pages to inherit from SwitchPage instead of System.Web.UIPage.
 
The theme DropDown has to be connected to an ObjectDataSource that is bound to the following C# class that returns 
an List object…
 
public class ThemeSupplier
{
    
    public static List<Theme> GetThemes()
    {
        DirectoryInfo dInfo = new DirectoryInfo(System.Web.HttpContext.Current.Server.MapPath("App_Themes"));
        DirectoryInfo[] dArrInfo = dInfo.GetDirectories();
        List<Theme> list = new List<Theme>();
        foreach (DirectoryInfo sDirectory in dArrInfo)
        {
            Theme temp = new Theme(sDirectory.Name);
            list.Add(temp);
        }
        return list;
    }
    
}
 
ThemeSupplier is helped by the following helper class... to get theme names 
 
public class Theme
{
    private string _name;
    public string Name
    {
        get  { return _name; }
        set  { _name = value; }
    }
    public Theme(string name)
    {
        Name = name;
    }
}
 
Finally the following two events make the switch actually happen… In master Page 

  <asp:ObjectDataSource ID="ThemeDataSource" runat="server" SelectMethod="GetThemes"
                TypeName="ThemeManager"></asp:ObjectDataSource>
            <asp:RadioButtonList ID="strTheme" runat="server" DataTextField="name" DataValueField="name"
                OnSelectedIndexChanged="strTheme_SelectedIndexChanged" OnDataBound="strTheme_DataBound"
                DataSourceID="ThemeDataSource" AutoPostBack="true" RepeatDirection="Horizontal" />

  
   protected void strTheme_DataBound(object sender, EventArgs e)
    {
        ddlTheme.SelectedValue = Page.Theme;
    }
    protected void strTheme_SelectedIndexChanged(object sender, EventArgs e)
    {
        Session.Add("TheTheme", ddlTheme.SelectedValue);
        Server.Transfer(Request.FilePath);  //just start the page over
    }
 
I use a program named TopStyle to do CSS files.  I prefer it to Visual Studio but you might not.
 
The trick to doing Skin files is to add a page, call it Scratch.aspx, to your project.  Drag, for instance, a GridView 
onto it and then use VS design time to make it look just like you want your gridviews for a given theme to look.  Then 
paste the definition into your .Skin file and remove the id entry.  That way you are letting VS do a lot of the work for you.

 Your Theme folder look like this :



Labels:

Comments

Post a Comment

Popular posts from this blog

How to hide url parameters in asp.net

There are different ways to Hide the URL in asp.net , you can choose any one from bellow options . Previously I was Explained about the  Difference between Convert.tostring and .tostring() method Example  ,   Reasons to use Twitter Bootstrap , How to Register AJAX toolkit in web.config file in asp.net a) Using Post Method b) Using Of Session . c) URL Encoding & decoding process . d) Using Server.Transfer() instead of Response.Redirect() method (1)Use a form and POST the information. This might require additional code in source pages, but should not require logic changes in the target pages (merely change Request.QueryString to Request.Form). While POST is not impossible to muck with, it's certainly less appealing than playing with QueryString parameters. (2)Use session variables to carry information from page to page. This is likely a more substantial effort compared to (1), because you will need to take session variable checking into account...
Post a Comment
Read more

How to send mail asynchronously in asp.net with MailMessage

With Microsoft.NET Framework 2.0 everything is asynchronous and we can send mail also asynchronously. This features is very useful when you send lots of bulk mails like offers , Discounts , Greetings . You don’t have to wait for response from mail server and you can do other task . By using     SmtpClient . SendAsync Method (MailMessage, Object)    you need to do  System.Net.Mail has also added asynchronous support for sending email. To send asynchronously, you need need to Wire up a SendCompleted event Create the SendCompleted event Call SmtpClient.SendAsync smtpClient.send() will initiate the sending on the main/ui  thread and would block.  smtpClient.SendAsync() will pick a thread from the .NET Thread Pool and execute the method on that thread. So your main UI will not hang or block . Let's create a simple example to send mail. For sending mail asynchronously you need to create a event handler that will notify that mail success...
Post a Comment
Read more

12 Sentences that Change Your Attitude at Work

If you work with the right attitude and right way, you’ll have your productivity up another level, and eventually, success will be just a step away. These are the 12 encouraging sentences that could change your attitude at work. #1 Don’t work harder, work deeper. #2 When you are young, work to learn, not to earn. #3 If you work really hard and are kind, amazing things will happen. #4 Productivity is never an accident. It is always the result of commitment to excellence, intelligent planning, and focused effort. #5 Most people work just hard enough not to get fired and get paid just enough money not to quit. #6 Boost your productivity by taking action immediately after setting a target even without perfect plans. Adjust your course along the way. #7 To be successful, the first thing to do is to fall in love with your work. #8 Identify your peak hour of productivity. Schedule your most important task for this period. Work on unimportant tasks during non-peak hours. #9 Be a mo...
Post a Comment
Read more