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
Skin
Moderator: General Moderators
-
YoussefSiblini
- Forum Contributor
- Posts: 206
- Joined: Thu Jul 21, 2011 1:51 pm
Re: Skin
Hi,
I tried this:
Link
HTML
JQUERY
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:
I tried this:
Link
Code: Select all
<link id="skins" rel="stylesheet" type="text/css" href="css/orange.css"/>
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>
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;
});
});
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: '/'});