www.webdeveloper.com
Results 1 to 9 of 9

Thread: How can I let users switch between two themes?

Hybrid View

  1. #1
    Join Date
    Sep 2008
    Posts
    6

    How can I let users switch between two themes?

    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!

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,112
    You could do something like this with jQuery:


    Code:
    <script type="text/javascript">
    	$(document).ready(function(){
    		$('#blue-style').click(function(){
    			$('#theme').attr('href', 'blue.css');
    		});
    	});
    </script>
    
    <link rel="stylesheet" href="red.css" id="theme" />
    
    <a id="blue-style">Switch to blue.</a>

    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!

  3. #3
    Join Date
    Sep 2008
    Posts
    6

    forget my last reply!

    I got that working, it's a start!

  4. #4
    Join Date
    Sep 2008
    Posts
    6
    cb- What do I add the theme id to?

  5. #5
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,112
    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!

  6. #6
    Join Date
    Sep 2008
    Posts
    6
    Thanks CB-I dug a little deeper and tried
    HTML Code:
    	$(document).ready(function(){
    		$('#blue').click(function(){
    			$('#bluestyles').attr('href', 'blue.css');
    			this.text('I like blue');
    			return false;
    		});
    		
    		$('#red').click(function(){
    			$('#bluestyles').attr('href', '');
    			return false;
    		});
    		
    		
    	});
    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?

  7. #7
    Join Date
    Sep 2008
    Posts
    6
    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.

  8. #8
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,112
    Try targeting "this" like this:

    Code:
    $(this).text('i like blue');
    or

    Code:
    $(this).html('i like blue');
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  9. #9
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,112
    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!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles