Theme Switcher For Blogger

Theme changer or Theme switcher is a really a little complicated thing when comapared to the other hacks here..Here i introduce a theme changer for our blogger beta
.

Demo

Here is the method to do it
Goto your Blogger Template>Edit Html and back up your Template by downloading it..
Now In the Template code find

<b:skin><![CDATA[

you will notice some variable defenitions and some style defenitions below it


copy all the data below the above code till

]]></b:skin>

and save the copied text as a text file on your desktop
.

Now in the text file you will see codes like

<Variable name="sidebarTitleBgColor" description="Sidebar Title Background Color" type="color" default="#ffd595" value="#eed595">

This means that the variable "sidebarTitleBgColor" by default has the value #ffd595 and now you are using the value #eed595


To use theme switcher you will have to replace each occurance of this variable by its value in the text file..


That is you should replace all occurances of $sidebarTitleBgColor with #eed595


Similarly all the variables(like $borderColor,$Sidebartextcolor $mainBgColoretc..) should be replaced by their values.


Now consider the declaration of the font variables

<Variable name="bodyFont" description="Text Font"

type="font" default="normal normal 100% Verdana, Arial, Sans-serif;" value="normal normal 100% Verdana, Arial, Sans-serif;">

Here the $bodyFont variable should be replaced by normal normal 100% Verdana, Arial, Sans-serif;


Similarly all variables should be replaced by the text enclosed in its corresponding value="........" declaration..

Now remove all the variable defenitions from the text file..

Variable defenitions will look like this

/* Variable definitions


====================

========Defenitions here====================

*/


So delete every thing between /* and */


Now your default style sheet is ready.Save this test file as default.css


Now make another style sheet and save it as custom.css.The great thing about this script is that you don't have to make a completely new stylesheet. You only have to define those rules that are different from the default stylesheet (although you can include all the options that are the same too if you want).

Similarly you can make as many style sheets as you want (say custom2.css,custom3.css etc).


Now upload all of your stylesheets somewhere(maybe google pages).






Now in your Blogger Template>Edit Html delete everything below the variable defenitions and above

]]></b:skin>

Now just below find the following code

</head>

and replace it with

<script src='http://bloggerplugins.org/templates/styled-denim/styleswitch.js' type='text/javascript'/>
</script>
<link href='url of default.css' rel='stylesheet' type='text/css'/>

<link href='url of custom.css' media='screen' rel='alternate stylesheet' title='custom-theme-1' type='text/css'/>
<script type='text/javascript'>

window.onload=function(){

var formref=document.getElementById("switchform");

indicateSelected(formref.choice);

}


</script>
</head>

(Dont Forget to replace url of default.css and custom.css with its actual urls.)


Now some where in the sidebar add the Theme switcher Button code below.

<form id="switchform">

<input value="none" name="choice" onclick="chooseStyle(this.value, 60)" type="radio"/>Default Theme<br/>

<input value="custom-theme-1" name="choice" onclick="chooseStyle(this.value, 60)" type="radio"/>Custom Theme 1
</form>

To add more themes you should add similar link href= tags for each of your stylesheet and add the button code for each of them..



The awesome javascript for this hack was developed by Dynamic Drive.


If you need a template with integrated theme switcher,then you can try out my new template- Styled Denim with Theme Switcher

If you have any doubts feel free to contact me or comment here..