Page 1 of 1
Skin
Posted: Fri Mar 23, 2012 6:03 am
by YoussefSiblini
Hi Guys,
I want to achieve some thing like this website:
http://themeforest.net/item/spotlight-c ... ew/1924544
I want to give the user the option to change the website skin or css, so when the user click yellow box the links and bg changes into yellow, or red will change into red in all pages.
Do I build a whole new website (Pages) for this, or is it some thing to do with jQuery?
Youssef
Re: Skin
Posted: Fri Mar 23, 2012 6:15 am
by azycraze
jquery themeswitch will do the purpose for you
Re: Skin
Posted: Sat Mar 24, 2012 7:45 am
by YoussefSiblini
Hi,
I tried this:
Link
Code: Select all
<link id="skins" rel="stylesheet" type="text/css" href="css/orange.css"/>
HTML
Code: Select all
<a class="colorbox colorblue" href="?theme=blue" title="Blue Theme">Blue</a>
<a class="colorbox colorgreen" href="?theme=green" title="Green Theme">Green</a>
<a class="colorbox colororange" href="?theme=orange" title="Orange Theme">Orange</a>
JQUERY
Code: Select all
google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{
// Color changer
$(".colorblue").click(function()
{
$("link[type='text/css']").each( function(i)
{
if ($(this).attr('id') == 'skins')
{
$(this).attr({href : "css/blue.css"});
}
});
return false;
});
$(".colorgreen").click(function()
{
$("link[type='text/css']").each( function(i)
{
if ($(this).attr('id') == 'skins')
{
$(this).attr({href : "css/green.css"});
}
});
return false;
});
$(".colororange").click(function()
{
$("link[type='text/css']").each( function(i)
{
if ($(this).attr('id') == 'skins')
{
$(this).attr({href : "css/orange.css"});
}
});
return false;
});
});
The thing is that this is applying for the current page only and not to all the website, and user will find this annoying to keep changing in every page.
I tried adding this into the code but didn't work:
Code: Select all
if($.cookie("css")) {
$("link#skins").attr("href",$.cookie("css"));
}
$.cookie("css",$(this).attr('href'), {expires: 365, path: '/'});