02.07
Few days back one of our client ask us for Theme changer of web site managed by user only (without page refresh). His idea was like user who is surfing web site can select particular theme for web site in which basic structure of web site remain same but font style, background images, spacer, etc. items which are related to CSS get changed.
if i remember well than www.yahoo.com also have same functionality. They also allow you to switch your layout in narrow and wide area also. so i started to get idea from google and come across one site. This link shows me how can i do this. After reading his tutorial i started developing my code and doing some research work and other stuff i got my code working. Although code in above link is also working but i have slightly made changes in generation and management of cookie with javascript. This code at least works in IE, Firefox and Opera.
ok so lets get started.
We have seen lots of web site in which we found theme changer. just by clicking on particular theme image or icon our theme changes automatically and it is saved in our profile. This is one good theme support of web site. This help users to keep remind your web site with some functionality.
Before starting this tutorial i am assuming that you have good idea regarding CSS and Javascript. Also your HTML must be developed using CSS wherever images and fonts are used with different colors.
You can DOWNLOAD source Code From here.
First we set our basic steps.
- We have 2 different themes to be install on web site. so we need 2 different cascading style sheet (CSS). For conviency we make two different folder named as style1 and style2. Here Folder will have images folder and say [folder name].css file in it [style1.css for style1 folder and style2.css for style2folder]
- Our HTML is made properly with CSS. I recommend you to check your html pages with both CSS. Once you are done with that we can move ahead.
Let’s assume that we have the following style sheets defined in our HEAD section
| <link href=”http://www.domain.com/css/style/style1.css” rel=”stylesheet” type=”text/css” title=”style1″/>
<link href=”http://www.domain.com/css/style1/style2.css” rel=”alternate stylesheet” type=”text/css” title=”style2″/> <meta http-equiv=”Default-Style” content=”style1″> |
Above code is pretty self explanatory. We are including both CSS to HTML page. Now rel=”alternate stylesheet” means it is and alternative of style1.
Also meta of Default-Style is set as style1. so default will be style1.css when nothing has been selected.
Now you will need to provide some way for your visitors to select the theme they want. There are many ways to do this, by use of radio buttons, drop down selection boxes, normal submit buttons, text links, etc. We will use text links here as it is best usability options.
so we place code like this
| <form>Change Theme :<a href=”#” onclick=”switch_style(’style1′);return false;” name=”theme” value=”Old Theme” id=”style1″>Style 1</a> <a href=”#” onclick=”switch_style(’style2′);return false;” name=”theme” value=”New Theme” id=”style2″>Style 2</a></form> |
When user clicks any of the buttons, the JavaScript onclick function, switch_style(), will run. The function will be passed either ’style1′ or ’style2′ as its parameters.
Now we create one file theme.js and we use following code in it
| var style_cookie_name = “style1″ ;
var style_cookie_duration = 30*30*7 ; function switch_style ( css_title ) { var i, link_tag ; for (i = 0, link_tag = document.getElementsByTagName(”link”) ; i < link_tag.length ; i++ ) { if ((link_tag[i].rel.indexOf( “stylesheet” ) != -1) && link_tag[i].title) { link_tag[i].disabled = true ; if (link_tag[i].title == css_title) { link_tag[i].disabled = false ; } } set_cookie( style_cookie_name, css_title, style_cookie_duration ); } } function set_style_from_cookie() { var css_title = get_cookie( style_cookie_name ); if (css_title.length) { switch_style( css_title ); } } function set_cookie ( name, value, days, domain ) { var path = domain ?(”; domain=” + domain) : ” ; var expires, date; if (typeof days == “number”) { date = new Date(); date.setTime( date.getTime() + (days*24*60*60*1000) ); expires = date.toGMTString(); } document.cookie = name + “=” + escape(value) + ((expires) ? “; expires=” + expires : “”) + ((path) ? “; path=” + path : “”) + ((domain) ? “; domain=” + domain : “”); } function get_cookie ( cookie_name ) { var nameq = cookie_name + “=”; var c_ar = document.cookie.split(’;'); for (var i=0; i<c_ar.length; i++) { var c = c_ar[i]; while (c.charAt(0)==’ ‘) c = c.substring(1,c.length); if (c.indexOf(nameq) == 0) return decodeURIComponent(unescape(c.substring(nameq.length,c.length))); } return ”; } |
Note that this script includes the set_cookie() and get_cookie() functions by which user can set Cookies of particular browser through javascript. The switch_style() function iterates through all your link tags looking for a style sheet with the same title as the text specified in its argument. If it matches, it sets a special property, called disabled, to false, thus enabling that style sheet. In the meantime, all other relevant style sheets are disabled.
Make sure that the visitors’ style sheet settings remain when they visit other pages of your site, as well as when they reload the page, you will also need to recall one function which checks from cookie that which style is active for current user.
For this you can use following code in head tag
| <script type=”text/javascript”>
set_style_from_cookie(); </script> |
Due to this when the browser to run the set_style_from_cookie() function when the page is loaded or loading, this function checks for the style-setting cookie, and if present, switches the style sheets accordingly. Otherwise, it does nothing.