CSS switcher with js

CMS & WordPress
1

Trying to use this js script from Design Shack to enable users to select alternate style sheets for a site.

Here’s what’s in my header:


<head>
....
<!--Style switcher js -->
<script type="text/javascript" src="http://website.com/folder1/folder2/scriptsfolder/styleswitcher.js"></script>

<!-- Style switcher sheets  -->
	<link rel="default stylesheet" type="text/css" href="http://website.com/folder1/folder2/themefolder/mystyle-default.css" title="mystyledefault" />
	<link rel="alternate stylesheet" type="text/css" href="http://website.com/folder1/folder2/themefolder/mystyle1.css" title="mystyle1" />
	<link rel="alternate stylesheet" type="text/css" href="http://website.com/folder1/folder2/themefolder/mystyle2.css" title="mystyle2" />
....
</head>
<body>
....
<a href="/" onclick="setActiveStyleSheet('mystyledefault'); return false;">test</a>
<a href="/" onclick="setActiveStyleSheet('mystyle1'); return false;">test</a>
<a href="/" onclick="setActiveStyleSheet('mystyle2'); return false;">test</a>
....
</body>

The page refreshes but the styles don’t change… I’ve probably checked the paths 1,000 times. Can someone please help me out?

I should also mention that I’m trying to do this for a wordpress blog.

2

We can’t check if those paths are correct or not without access to your site. Can you post a link?

3

They are correct.

Bigger issue is with wordpress magic quotes, they are persistent even when ‘off’ in php.ini.

So


<a href="/" onclick="setActiveStyleSheet[B]('mystyle2')[/B]; return false;">test</a>

becomes


<a href="/" onclick="setActiveStyleSheet[B](\\'mystyle2\\')[/B]; return false;">test</a>
4

Hmm, I don’t understand WP well enough, but I wouldn’t have thought it would affect HTML/JS like that. What happens if you just remove those single quotes?

5

It will be worth noting that your rel attribute for the default stylesheet is set to “default stylesheet” … you should change that back to just “stylesheet”

There was an article on A List Apart about alternate stylesheets a while ago that might be worth a read :slight_smile: