Skin

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
YoussefSiblini
Forum Contributor
Posts: 206
Joined: Thu Jul 21, 2011 1:51 pm

Skin

Post 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
User avatar
azycraze
Forum Commoner
Posts: 56
Joined: Mon Oct 24, 2011 12:08 pm
Location: India

Re: Skin

Post by azycraze »

jquery themeswitch will do the purpose for you
YoussefSiblini
Forum Contributor
Posts: 206
Joined: Thu Jul 21, 2011 1:51 pm

Re: Skin

Post 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: '/'});
Post Reply