<< URL Routing With ASP.NET 4 - Web Forms | Deprecated APIs In .NET 4.0 >>

Change Page Themes Dynamically Using JQuery Theme Roller

by Prashant 4. July 2010 21:21

If you are using JQuery controls like date picker, accordion, progress bar, slider, tabs, dialog etc. You can set the theme of your choice or you can also allow the user to set the theme of their choice. For those folks who don’t know about the JQuery Theme Roller, then take a look at official Jquery site demonstrating the Jquery Theme Roller. The best part is when you select the theme from the theme roller control all the JQuery controls on the page will automatically inherit the color scheme of the theme.

To incorporate Theme Roller in your page, build a simple page and link some CSS and some JavaScript

<link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/ui.all.css" />
<link rel="stylesheet" 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" 
type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" 
type="text/css" media="all" />
<script type="text/javascript" src="http://jqueryui.com/js/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" 
type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" 
type="text/javascript"></script>

Now under the head section we will have the JQuery Theme Roller control.

    $(document).ready(function () {
        $('#ThemeRoller').themeswitcher();
    });

Notice the ThemeRoller id of the control passed in the JQuery code to initialize the Theme Roller/Switcher. Now in the Body tag of your page set a div with id as ThemeRoller or whatever the name you want to give, but make sure you use the same name as your control id.

<script type="text/javascript"
  src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="ThemeRoller"></div>

I have set the theme roller on the body of the page and therefore all the controls on the page will automatically change the theme accordingly set by the user using the theme roller on the page. You can also set a DIV or a form on your page instead of setting it for the complete page. Set some other controls on the page like date picker, progress bar, dialog etc. Html code for the controls.

Set some other controls on the page like date picker, progress bar, dialog etc.

<p>Date: <input id="datepicker" type="text" />
</p>
    
<div id="dialog" title="Basic dialog">
    <p>
    This is a Demo Dialog box using JQuery!!<br />
    Change theme to see this Dialog in different theme.
    </p>
</div>
    <div id="progressbar" style="width:200px;">

    </div>

Placing HTML code isn’t enough. You also need to set the JQuery code in the head section of the page to get the controls working. When you set all the JQuery code for the controls you body and head section of the page looks something like this.

Body section of the page:

<body style="font-size:62.5%;">
  
<script type="text/javascript"
  src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="ThemeRoller"></div>

<p>Date: <input id="datepicker" type="text" />
</p>
    
<div id="dialog" title="Basic dialog">
    <p>
    This is a Demo Dialog box using JQuery!!<br />
    Change theme to see this Dialog in different theme.
    </p>
</div>
    <div id="progressbar" style="width:200px;">

    </div>
</body>

Head section of the page:

<head>
<title>JQuery Theme Roller</title>
<link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/ui.all.css" />
<link rel="stylesheet" 

href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" 

type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" 

type="text/css" media="all" />
<script type="text/javascript" src="http://jqueryui.com/js/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" 

type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" 

type="text/javascript"></script>


<script type="text/javascript">
//Set theme roller 
    $(document).ready(function () {
        $('#ThemeRoller').themeswitcher();
    });

//Show date time picker control
    $(function () {
        $("#datepicker").datepicker();
});

//Show Dialog
    $(function () {
        $("#dialog").dialog();
    });

//Progress Bar
    $(function () {
        $("#progressbar").progressbar({
            value: 50
        });
    });

</script>
</head>

Now try setting the theme of the page in one click using the Theme Roller. Check the live demo here

If you enjoyed this post, make sure you subscribe to my RSS feed!

3710d29e-8126-471f-8142-67ae2a5cff75|14|4.2

Tags: jquery, web

Jquery

Handling Text Changed Event In ASP.NET MVC 3 With JQueryIn my quest of learning MVC I came across many problems and here is one of them. I was trying to fir...Calling ASP.NET Web Service Using Jquery - Part IJquery is now one of the most favorite JavaScript frameworks to play around. It offers some more adv...HTML5 File Drag and Drop Upload With jQuery and ASP.NETI came across an article on Tutorialzine which demonstrate file drag and drop upload with jQuery and...

Comments (4) -

Sanjay M

9/29/2010 11:56:23 PM #

thanks a ton, this was really useful!

What I'd really like to know, which I couldn't quite figure out, is how to 'save' the selected theme that gets used later again, its supposed to use some sort of cookie mechanism I think, maybe in my application this is hardcoded, will have to check.

Also, instead of using the jquery-ui hosted themes, is there any way I can get a localised version that can by which I can get it to list my own themes? It seemed to be loading the themes list from some PHP file on the server, so as of now couldn't figure out a way to modify this in any way.

Prashant

9/30/2010 2:57:19 AM #

Yes, you can save but theme roller doesn't provide any way to save the selected theme in the cookie. What you can do is to download the themes http://jqueryui.com/themeroller/ and place it in your web folder or theme directory. Select the theme you want to download from the "Gallery" tab and then download from "Roll Your Own" tab. Get the collection, let the user select from the combo box on your web page, save it in a cookie or some other persistent storage.

Hope this helps!

wira

10/21/2011 3:57:34 PM #

Nice topic,.. I just use this tool into my intranet, but my question is, how to make themeroller take the css from local server, not requesting into jquery website. I need this because not all my workstation connected into internet.

Prashant

10/22/2011 7:34:28 PM #

If you take a look at the head section you will see that all the js and css file reference are from the Google's CDN. What you need to do is to get the latest release of the jQuery UI from jquery.com and place these files with your intranet application or to the local server path. Now on the page where you want a Theme Roller, you need to reference the js and css files from the folder in your local server path.