What is the theme?
Website theme determines the overall look of your site. Your theme is
the layout or blueprint of your site, it helps structure your website, giving
you to areas to place pictures and text, or things like navigation bars and
other widgets.
A theme requirements the look and style of your website. Your theme is
made up of a range of things, such as font types and sizes. Your theme helps to
reflect your identity through your site, and helps to improve your customer’s
experience.
Simply put, the layout and themes are the same as decorating a room in
your house.
What does the theme control?
Website themes control the following elements of your website:
• Default colors and shapes
• Default site background and background image
library
• Text style choices in the content editor(e.g.
Heading 1, heading 2)
• Master layouts
• Customization option that appear on the colors
and styles screen
• Menu location (vertical and horizontal) and the
menu are static and dynamic.
Step to adding a Style Sheet change in
JavaScript:
Let’s suppose
that we have the following style sheet defined in our HEAD section.
<link rel="stylesheet"
type="text/css" href="web-css/theme1.css"
title="theme1">
<link rel="alternate stylesheet"
type="text/css" href="web-css/theme2.css"
title="theme2">
Create a Button:
<form method="post" class="left">
<input
type="submit" value="theme1"
onclick="change_style('theme1');return false;" name="theme"
id="theme1">
<input
type="submit" value="theme2"
onclick="change_style('theme2');return false;" name="theme"
id="theme2">
</form>
When the visitor
clicks any of the button, the javascript onclick handler, change_style(), will run. The function will be passed either theme1 or theme2 as its parameter, depending on which button is clicked. The
words theme1 and theme2 correspond to the title attributes for the link elements referencing the style
sheets.
JavaScript Function to Change Style Sheet:
The actual
JavaScript code needed to implement css style changing can be found below.
<script type="text/javascript">
var scname = "style" ; //
var scduration = 30 ;
//
function change_style ( css_title ) //
{ //css_style
is used to pass a value
var i, tag ; //local variable declaration
tag =
document.getElementsByTagName("link") ;
/*getElementByTagName is a method and link is representing
the name of elements. */
for (i = 0; i <
tag.length ; i++ ) //for Loop execute a
block of code
{
if ((tag[i].rel.indexOf(
"stylesheet" ) != -1)&&tag[i].title)
{
tag[i].disabled
= true ;
if
(tag[i].title == css_title)
{
tag[i].disabled = false ;
}
/* The above code checks the value : If value is
exact equal(==) than condition is true and put the Boolean value false. */
}
/*
set_cookie(
scname, css_title,scduration );
}
}
function set_style_from_cookie() //Another function
{
var css_title =
get_cookie( scname );
if
(css_title.length) {
switch_style(
css_title );
}
}
function set_cookie ( cookie_name, cookie_value,
lifespan_in_days,
valid_domain )
{
var domain_string
= valid_domain ?
("; domain=" + valid_domain) : '' ;
document.cookie =
cookie_name +
"=" + encodeURIComponent( cookie_value ) +
"; max-age=" + 60 * 60 *
24 * lifespan_in_days +
"; path=/" + domain_string ;
}
function get_cookie ( cookie_name )
{
var cookie_string
= document.cookie ;
if
(cookie_string.length != 0) {
var
cookie_value = cookie_string.match ('(^|;)[\s]*' + cookie_name +
'=([^;]*)' );
return
decodeURIComponent ( cookie_value[2] ) ;
}
return '' ;
}
Onload Cookies Change:
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 add an onload attribute to your web pages body element.
For example:
<body onload=”set_style_from_cookie()”>
Summary:
This article finish the series on creating a theme changer, to change
style sheets, using both CSS and JavaScript. Above explanation will surely help
you in understanding Theme Changer in JavaScript, CSS and HTML.
