Forums

socialjeev

After spending too much time of my theme customization , i finished creating a beautiful style of my theme in Dark color. Not sure if the visitors like the dark styled site and to make them convenient , I want to provide an option to switch to white colored style with a simple feature to switch.

I know that several template vendors use such feature to show case their theme and enable visitors to switch between color styles on front end of their demo site's itself. I want to have the same feature for my site . On the top corner of front page my visitors should have two buttons to switch between black and white styles. Googled for such tutorial , failed to find one for me.

Found such a tutorial here . But not with much help

I am not expert in coding, but can do with some guide/tutorial. Could any one help me with such tutorial to create such a featured option for my site

Thanks !

amyth91

have you tried the download sections of css-tricks ?? you have a tutorial there, here is the link.

cheers !

Mottie

Check out this thread. It essentially uses the same method they describe, but I know it works... the demo on the link you shared doesn't seem to work =(

socialjeev

@amyth91 and @mottie ,

I have tried the source this on a wordpress installation( on localserver)

1) copied the code to header


	<!-- Alternate css linkrel-->
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="alternate stylesheet" type="text/css" href="stylealt1.css" title="alternate 1" />
<link rel="alternate stylesheet" type="text/css" href="stylealt2.css" title="alternate 2" />
	

<script type="text/javascript" src="styleswitcher.js"></script>
		<!-- end Alternate css linkrel-->

2) Copied the two .css files style2 and style3 to the theme 's root folder. Added styleswitcher.js and images too

3) Copied style.css 's content to theme's style-sheet.
4) Finally copied this to header :

<div id="page_wrap">
	
		<h1>A webpage with alternate user-selectable stylesheets</h1>
		
		<a href="#" onclick="setActiveStyleSheet('default'); return false;"><img src="defaultstyle.jpg" alt="default style" /></a> 
		<a href="#" onclick="setActiveStyleSheet('alternate 1'); return false;"><img src="altstyle1.jpg" alt="alternate style 1" /></a> 
		<a href="#" onclick="setActiveStyleSheet('alternate 2'); return false;"><img src="altstyle2.jpg" alt="alternate style 2" /></a> 
		
		<br /><br /><br />
		
		<img src="shape.jpg" alt="shape" class="image" />
                    </div>

I have done without changing the code to check if it works . I can see the links on site.But no switching of styles as expected are happened.

Could any one help me to resolve the issue

Thanks

Mottie

It doesn't look like you are pointing the correct directories. For the themes directory, use the following:

<link rel="stylesheet" type="text/css" href="<?php get_theme_root() ?>/style.css" />
<link rel="alternate stylesheet" type="text/css" href="<?php get_theme_root() ?>/stylealt1.css" title="alternate 1" />
<link rel="alternate stylesheet" type="text/css" href="<?php get_theme_root() ?>/stylealt2.css" title="alternate 2" />

As for the javascript, check out this article (I'd be a youngling according to it LOL) on how to target and load the file correctly.

socialjeev

I think I stuck some where. No luck with it

Actually moved the .js file into a custom folder named " custom-jquery " and tried this in functions.php


 function register_my_script() {
	wp_register_script('my-script', plugins_url('/custom-jquery/styleswitcher.js', __FILE__), array('jquery'), '1.0', true);
}
 
function print_my_script() {
	global $add_my_script;
 
	if ( ! $add_my_script )
		return;
 
	wp_print_scripts('my-script');
}

Could able to use the style " One " . But unable to switch to other two styles

treehouse : what would you like to learn today?

Forums

How to let Visitors to Switch Between two or three CSS Styles / Themes