1

So I have my site set up to have two different themes, and that works wonderfully, but when I'm making a lot of changes, I can miss some stuff and things start to not look the same.

This is how I'm doing that:

<select onchange="window.location=this.value">
<option>Default</option>
<option value="http://MyWebsite.com/Cyan/">Cyan</option>
</select>

What I WANT to do, is just have two separate style.css files and have the dropdown menu request the one you choose.

This would make my job so much easier, but I'm not 100% sure how to do it. Would I simply replace the website link with the stylesheet? Is there even a way to do this?

cuSK
  • 809
  • 11
  • 26
Chris
  • 69
  • 2
  • 9
  • Take a look here: http://stackoverflow.com/questions/2126238/can-i-load-external-stylesheets-on-request – Adjit Oct 28 '14 at 19:22
  • Not really what I'm looking for, Adjit; that would indeed load a css file, but I want to have multiple stylesheets to CHOOSE from. Say, a default one where everything is black/white, a secondary one where everything is blue/purple. Sorry if I didn't make that entirely clear. – Chris Oct 28 '14 at 19:26
  • right. You can use an `If` statement or `onchange` of your dropdown menu and choose the stylsheet accordingly. – Adjit Oct 28 '14 at 19:32

2 Answers2

0

One possible solution using jquery:

$("select").on("change", function(){
    $("<link/>", {
       rel: "stylesheet",
       type: "text/css",
       href: $(this).val()
    }).appendTo("head");
});
Alex Char
  • 32,879
  • 9
  • 49
  • 70
0

There's a framework that deals with this kind of thing. Coupled with jQuery it could be pretty good. It's utils.js, available there.

Your HTML should look like this:

<link id="stylesheet" rel="stylesheet" href="path/to/theme1.css" />
...
<select id="dropdown">
    <option value="path/to/theme1.css">Theme 1</option>
    <option value="path/to/theme2.css">Theme 2</option>
</select>

And then your script:

$("#dropdown").on("change", function(){
    var path = $(this).val();     // Get path from selected option
    utils.changeStylesheet("stylesheet", path);
});

Should work fine, though I haven't checked the documentation so the utils statement may need revising...

ArtOfCode
  • 5,702
  • 5
  • 37
  • 56
  • This looks like it would work, logically...I'll try it and get back to you when I get off work in a few hours. Thanks – Chris Oct 28 '14 at 22:08
  • Sorry, would you mind making the dropdown menu? I'm not a jQuery aficionado so I'm not 100% sure what to put where/what to change in my current – Chris Oct 29 '14 at 03:42
  • Unless I'm doing something majorly wrong, it isn't pulling the style.css automatically. When I pull up the website, it's supposed to automatically load Theme 1, right? – Chris Oct 30 '14 at 19:44
  • Not unless you've put the path to it in that first link tag – ArtOfCode Oct 30 '14 at 21:21
  • Updated again. Shows how it should be – ArtOfCode Oct 30 '14 at 21:23
  • Excuse that message, if you saw it. It doesn't do anything; the option changes but none of the changes made in the second stylesheet show up, making me think it's not changing the stylesheet in the tag – Chris Oct 31 '14 at 04:46
  • Have a look at the console and check the head for the stylesheet tag – ArtOfCode Oct 31 '14 at 07:09
  • If not then I'll get back to you this evening when I've got more time – ArtOfCode Oct 31 '14 at 07:09