I want the user to be able to choose between two themes on my site. The first one (let's call it "red" for example) is the default, and the alternative is "blue". I've made a theme switching nav; that by default says "I like red || [switch to blue]". If the user clicks on [switch to blue], I want the page to load an additional stylesheet (blue.css). Most of the styles are the same; there are only like 2 or 3 additional lines of code added to blue.css, so I don't want the user to have to reload an entirely new stylesheet (if that makes sens!) The nav should also change to "[switch to red] || I like blue" I want the site to continue to use the blue stylesheet throughout the user's visit to the site, until they decide to switch back to red. I'd prefer a solution that does not refresh the page, if possible. Any ideas? Thanks!
This would change it on your page, so you'd have to use some cookies or session variables to remember what color they selected to keep the theme as they navigate.
I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!
Excellent! It's a very basic example, but the idea is there.
If you use the cookie approach, you could create a cookie that stores the theme value as "red" or "blue". You could then use the jQuery to check what the value is, then set the appropriate href value on the theme stylesheet.
I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!
Two questions: The inner html of the blue link isn't changing from "Switch to blue" to "I like blue", and the "I like red" link simply sets the href of the blue stylesheet to "", which works but is an error. Thoughts?
It's coming along, but I'm having cookie weirdness. I'm using the jquery cookie plugin and $.cookie("color", "blue"); to set the cookie to blue, but it seems like every page in the site is creating a new cookie-when I look at my cookies I have a bunch of "color" cookies.
All righty! If you're using wordpress, then the best way to handle this is to use a combination of PHP and jQuery. You'll use PHP to handle your cookies so that it carries through all your pages. This way the server can serve the stylesheet before the page loads. You'll use jQuery to call the PHP pages dynamically and update the href accordingly.
Here's how you're HTML is going to look:
Code:
<?php
// checking if the user already has a theme, if not, then it sets red as the default
if(!isset($_COOKIE['theme'])){
setcookie('theme', 'red', time()+3600);
}
?>
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// handles the click actions for the style changes
// if they click blue, it's going to call the php function (setting the php cookie), then update the theme href
$('#blue-link').click(function(){
$.get('set-blue.php', function(data){
// sets the blue cookie
$('#theme').attr('href', 'blue.css');
});
});
$('#red-link').click(function(){
$.get('set-red.php', function(data){
// sets the blue cookie
$('#theme').attr('href', 'red.css');
});
});
});
</script>
<link rel="stylesheet" href="<?php getTheme() ?>" id="theme" />
<?php
// this function checks what them they are in, then serves it when the page loads
function getTheme(){
if($_COOKIE['theme'] == 'red'){
echo "red.css";
} else if($_COOKIE['theme'] == 'blue'){
echo "blue.css";
}
}
?>
</head>
<body>
<h1>Testing php cookies</h1>
<p><a href="#" id="blue-link">Blue stylesheet</a>
<p><a href="#" id="red-link">Red stylesheet</a>
</body>
</html>
You'll have two php files.
set-red.php:
Code:
<?php
setcookie("theme", "red", time()+3600);
?>
set-red.php:
Code:
<?php
setcookie("theme", "blue", time()+3600);
?>
Let me know if that makes sense!
I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!
Reply With Quote
Bookmarks