308 posts
  • Has referred 1+ members
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+4 more
brainbuzzmedia says

Does anyone out there know of an easy way to do this for a demo? I’m going mad trying to get one that works. I have a ‘style.css’ and then a ‘color.css’. The color.css is the one that I need to change depending on what color it is.

I have tried http://net.tutsplus.com/tutorials/javascript-ajax/jquery-style-switcher/ and all I could get was for the jquery to pop up a black screen that didn’t go away.

308 posts
  • Has referred 1+ members
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+4 more
brainbuzzmedia says

Any ideas?

3007 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 200+ members
  • Has sold $250,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+7 more
duotive says

i use my own code. with form, selects and plain and simple php post and cookies. why not try simple?

308 posts
  • Has referred 1+ members
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+4 more
brainbuzzmedia says

i use my own code. with form, selects and plain and simple php post and cookies. why not try simple?

I would if I had any clue what I was doing with that kind of php. I have tried 11 different tutorials and none of them have worked. Three of them have worked on plain .html on my server and then not worked once I put them in my theme, even when I stripped the index.php of my theme down to only the style switcher example and no other code.

741 posts
  • Had an item featured on Envato Market
  • Won a Most Wanted contest
  • Has been part of the Envato Community for over 5 years
  • Has sold $40,000+ on Envato Market
+4 more
Orbital_Themes says

Does anyone out there know of an easy way to do this for a demo? I’m going mad trying to get one that works. I have a ‘style.css’ and then a ‘color.css’. The color.css is the one that I need to change depending on what color it is. I have tried http://net.tutsplus.com/tutorials/javascript-ajax/jquery-style-switcher/ and all I could get was for the jquery to pop up a black screen that didn’t go away.

This style switcher works great, I use it in my demos. One thing you have to remember is putting switcher.php file in WordPress root folder, not theme folder. It somehow doesn’t work for me when the file is in theme folder.

308 posts
  • Has referred 1+ members
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+4 more
brainbuzzmedia says

Pogo

I got it to work with what you said, however it only works after I refresh the page and it leaves a 100% height / width black overlay on the screen until you do refresh it (I can see the page if I scroll down and it does not change until refresh).

Do you have any idea how to get past this or possibly add something in to automatically refresh the page?

391 posts
  • Has referred 100+ members
  • Has sold $250,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+5 more
EugeneO says

Pick your poison: http://www.net-kit.com/10-practical-jquery-style-switchers/

I think it’s number 7 that I use now.

308 posts
  • Has referred 1+ members
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+4 more
brainbuzzmedia says

Pick your poison: http://www.net-kit.com/10-practical-jquery-style-switchers/ I think it’s number 7 that I use now.

Unfortunately, I already found that and I managed to fail at every one that I tried. I’m really not sure what is going wrong, but at least the nuttuts one works, it just needs to be refreshed. However, I’m not sure how to do that.

741 posts
  • Had an item featured on Envato Market
  • Won a Most Wanted contest
  • Has been part of the Envato Community for over 5 years
  • Has sold $40,000+ on Envato Market
+4 more
Orbital_Themes says

So, in the nettuts one, there is a step where you test for height of element with ID of “test”. You probably didn’t add the height value for #test at the end of your stylesheets, that’s why the overlay won’t disappear.

1028 posts
  • Has referred 500+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+6 more
ThemeBlvd says

Since you are failing all javascript related ways, let me give you the code I just wrote to put in some of my theme demos. You can see this exact code being used in my Complexity WordPress theme demo.

This method would be all PHP . In my case, I add links to my main menu (same as inFocus and Showtime themes do). When the user clicks ones of those links a variable is set for the specific stylesheet, and a cookie is placed on their computer. This way, they can navigate around your demo site and that style they’ve chosen will stay in place.

At the very top of your header.php file (assuming this is a WordPress theme), place this within PHP tags: (you could also put this at the top of any php file if your site isn’t wordpress).

##########################################################
# DEMO (start)
##########################################################

//Default style
$demo_style = "blue";

//Retrieve Cookie (if exists)
if( isset($_COOKIE['themeblvd-complexity-style']) ){

    //Set Style
    $demo_style = $_COOKIE['themeblvd-complexity-style']; 

}

//Retrieve Style form URL
if( isset($_GET['style']) ){

    //Set Style
    $demo_style = $_GET['style'];

    //Set cookie
    setcookie('themeblvd-complexity-style', $demo_style);

}

##########################################################
# DEMO (end)
##########################################################

Note: the above code will obviously need to be wrapped in PHP tags… ”<?php” and ”?>”

So what’s happening is by default our value is set to “blue” in order to call your “blue.css” file (which is what will happen a user visits your site for the first time).

You would be link up this CSS file in this way below in the < head > of your site:

<!-- CSS for specific color variation -->
<link href="http://yoursite.com/&lt;?php echo $demo_style; ?&gt;.css" rel="stylesheet" type="text/css" />

(Sorry – try to ignore TF’s annoying little bug of replacing ”<?php” and ”?>” in the above code with “&lt;?php” and “?&gt;”.)

Now let’s say you wanted the user to view a “red” style to call your “red.css” file. You’d link them here:

?style=red

OR

http://yoursite.com/?style=red

Then the cookie gets set to red, and as they navigate around the site, that $demo_style variable will remain “red”.

I’m personally using this method in a WordPress theme… however note that if you’re creating something in the Site Templates category that’s just HTML files, you’d have to adujst your demo site to have files with ”.php” extension instead of ”.html”

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by