307 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Envato Studio (Microlancer) Beta Tester
  • United States
  • Has been a member for 4-5 years
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
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.

307 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Envato Studio (Microlancer) Beta Tester
  • United States
  • Has been a member for 4-5 years
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
brainbuzzmedia says

Any ideas?

3007 posts
  • Author had a File in an Envato Bundle
  • Bought between 1 and 9 items
  • Elite Author
  • Europe
  • Exclusive Author
  • Has been a member for 3-4 years
  • Referred between 100 and 199 users
+2 more
duotive says

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

307 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Envato Studio (Microlancer) Beta Tester
  • United States
  • Has been a member for 4-5 years
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
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
  • Has been a member for 5-6 years
  • Sold between 50 000 and 100 000 dollars
  • Exclusive Author
  • Most Wanted Bounty Winner
  • Bought between 50 and 99 items
  • Poland
  • Referred between 10 and 49 users
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.

307 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Envato Studio (Microlancer) Beta Tester
  • United States
  • Has been a member for 4-5 years
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
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?

384 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 4-5 years
  • United Kingdom
  • Referred between 100 and 199 users
  • Bought between 10 and 49 items
  • Exclusive Author
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.

307 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Envato Studio (Microlancer) Beta Tester
  • United States
  • Has been a member for 4-5 years
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
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
  • Has been a member for 5-6 years
  • Sold between 50 000 and 100 000 dollars
  • Exclusive Author
  • Most Wanted Bounty Winner
  • Bought between 50 and 99 items
  • Poland
  • Referred between 10 and 49 users
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
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Author had a File in an Envato Bundle
  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 500 and 999 users
+1 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”

by
by
by
by
by
by