• Welcome to The Cave of Dragonflies forums, where the smallest bugs live alongside the strongest dragons.

    Guests are not able to post messages or even read certain areas of the forums. Now, that's boring, don't you think? Registration, on the other hand, is simple, completely free of charge, and does not require you to give out any personal information at all. As soon as you register, you can take part in some of the happy fun things at the forums such as posting messages, voting in polls, sending private messages to people and being told that this is where we drink tea and eat cod.

    Of course I'm not forcing you to do anything if you don't want to, but seriously, what have you got to lose? Five seconds of your life?

Style switcher.

kyeugh

onion witch
Pronoun
she/her
I know there's already a thread on this, but it didn't help me much. So here's my scenario.

I have five styles, all of them are fully configured. All I need is to find a way to switch between them on each page; a styleswitcher. After hours of scouring the net for a tutorial, I haven't found any that make sense to me, because I'm an idiot. Anyway, considering many of you are geniuses in this field, I figured I should probably ask.

I haven't even started on the switcher, because of the fact that I can't find a way to do it. So, there's absolutely no progress on it at all-- only the styles. So, if you can, please start from the very beginning of the process to the end (hopefully that didn't repel too many people!), and please do not post a tutorial link on here for me.
 
Well then, we should make some decisions.

Do you want to use PHP or Javascript?
Do you plan on making it nice and simple or long and complicated;
(The simple version might be slightly buggy)
Do you want it to provide a preview when hovering over the style (if you're using buttons)?
Do you want it to change back to default after moving to another page or store a cookie and stay consistent?


I'm going to assume that you want the simple code and have it stay consistent over the pages. And just in case you do not have any PHP support, then using JavaScript. No preview.

Let's make some psuedo-code:

JS:
Function that runs on page load
Javascript checks for cookie
Javascript reads cookie if there is one
Using the cookie's data, choose the correct style
Send the variable to the below function

Functions that changes the style (A variable for the style choice)
Modify the <link> "href" attribute to the style according to the above variable

HTML:
head
Style to be modified.
body
A button or drop-down menu triggers a onclick event to send the style choice to the function that changes the style.
 
Well the above post removed all the formatting I used. :(

Whatever

To start, we need to prepare the html code:
In the header, provide use an id to identify the stylesheet.
E.G.
<link id="style" href="/style/style1.css" rel="stylesheet" type="text/css" />

Then we need to setup a button or drop-down list that will trigger a javascript event.
(The below example will use a drop-down menu)
E.G.
<form name="stylepick">
<select name="list" onChange="changestyle (document.stylepick.list.options[document.stylepick.list.selectedIndex].value)">
<option selected>-- Choose a Style --</option>
<option value="1">Style1</option>
<option value="2">Style2</option>
</select>
</form>

Now there is one specific thing I want to focus on from the above.
onChange="changestyle (document.stylepick.list.options[document.stylepick.list.selectedIndex].value)"
This section activates a Javascript function whenever the dropdown box's value changes. The form's name is stylepick. stylepick is going to be under the entire document. And under that form is a drop-down box named list. This get's us through document.stylepick.list. I think you get the idea.

Except, before that document.etc. blabber, you have changestyle (. This is the javascript function we are calling, and inside the parenthesis is the parameters. By specifying the value of the drop-down options, we are using document.stylepick.list.options[document.stylepick.list.selectedIndex].value so take the value and send it to the changestyle () function.

That's pretty much the necessary HTML code.
 
About

This will be a PHP styleswitcher! It uses clickable links to switch styles. Each link will make you go back to the home page. The style will be stored on a cookie on the user's computer.

Here are the files from this tutorial, in case you want to reference them: https://dl.dropboxusercontent.com/u/16623407/codey things/phpstyleswitcher/phpstyleswitcher.zip Don't panic if they don't work directly on your computer; you have to have PHP set up on your actual computer to do that.

Step 1: page.php

Make a regular old page. It can be named anything you want, but it has to say .php at the end! So index.php, sample.php, frog.php...

Put a couple of things on it (maybe some text and a link) for testing purposes.

Mine is called index.php. Here it is:

HTML:
<html>
<head>
        
 <title>Untitled</title>

</head>
<body>


la la la I'm a piece of text

<a href="http://fake.link">hi I'm a link</a>

</body>
</html>

We'll edit that page later to make it styleswitcher-compatible.

Step 2: switcher.php

Next, make a new file called something like switcher.php, and paste this code into it:

PHP:
<?php

setcookie("sitestyle", $_GET['set'], time()+31536000);  /* expire in 1 year */

header("Location: YOURPAGE.php");

?>

Where it says "YOURPAGE.php", you have to change that to the name of the page from step one. This will be the page it makes you visit when you change your style.

Don't change anything else.

Step 3: bluestyle.css

Now we'll make our very first style sheet! Mine is going to be named bluestyle.css; you can change the name of yours.

Code:
body {
    background: #0000FF;
}

a {
    color: #00FFFF;
}

Step 3: redstyle.css

The second style sheet! Mine is redstyle.css; again, yours can be something else.

Code:
body {
    background: #FF0000;
}

a {
    color: #000000;
}

Step 4: index.php style code

Remember the part of index.php that says <head> and then later </head>? In between those two, we need to put this style code:

HTML:
<link rel="stylesheet" type="text/css" href="BLUESTYLE.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo (!$_COOKIE["sitestyle"])?'default':$_COOKIE["sitestyle"] ?>.css" />

BLUESTYLE.css is the default style. Whichever style you want as the default, replace BLUESTYLE.css with that style's name.

The code should look like this now:

HTML:
<html>
<head>
        
 <title>Untitled</title>

<link rel="stylesheet" type="text/css" href="bluestyle.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo (!$_COOKIE["sitestyle"])?'default':$_COOKIE["sitestyle"] ?>.css" />

</head>
<body>


la la la I'm a piece of text

<a href="http://fake.link">hi I'm a link</a>

</body>
</html>

Step 5: trouble-shooting

If you view index.php (or whatever your test page is named) now, it should have a style on it. This is the style that will always appear by default when someone very first visits the site.

If it doesn't work, check these things:

1. Did you change BLUESTYLE.css to the correct style name?
2. Do YOURPAGE.php and switcher.php end in ".php" on your site?
3. Does the style you chose actually change anything about the page? Try it on a normal page and see if it works there.
4. Did you remember to put the code from step 4 between <head> and </head>?
5. Check your casing. Did you accidentally write Bluestyle.css instead of bluestyle.css?
6. If you can't get it to work, try starting over at step 1, but use all the same names used here. Once it works, you can change them to whatever you want.

Step 6: index.php links

Remember when we put some code between <head> and </head>? This next code goes in between <body> and </body> (anywhere you like inside of that).

HTML:
<a href="SWITCHER.PHP?set=BLUESTYLE">BLUE</a><br>
<a href="SWITCHER.PHP?set=REDSTYLE">RED</a><br>

Where it says SWITCHER.PHP, put the name of your page from step 2.

Where it says BLUESTYLE and REDSTYLE, put the name of your own stylesheets. They should NOT end in ".css". The code you copied will add that part by itself.

Where it says BLUE and RED, put the text you want the user to click on.

When you're done replacing words, the page should look like this:

HTML:
<html>
<head>
        
 <title>Untitled</title>

<link rel="stylesheet" type="text/css" href="bluestyle.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo (!$_COOKIE["sitestyle"])?'default':$_COOKIE["sitestyle"] ?>.css" />

</head>
<body>


la la la I'm a piece of text

<a href="http://fake.link">hi I'm a link</a>

<br><br>

<a href="switcher.php?set=bluestyle">click here to go blue!</a><br>
<a href="switcher.php?set=redstyle">click here to go red!</a><br>

</body>
</html>

Step 7: more trouble-shooting

1. Did you remember to change YOURPAGE.php in step 2? If you end up at a 404 when you click one of the links, this is probably what happened.
2. Did you remember to replace everything in caps in step 6?
3. Did you remember to put the code from step 6 between <body> and </body>?
4. Check your casing. Did you accidentally write Redstyle instead of redstyle?
5. Did you delete a quotation mark from the links in step 6?
6. In the step 6 links, did you write "bluestyle.css" or just "bluestyle"? It should be just "bluestyle".

End

You can add as many links to as many style sheets as you want, and on any page (remember that the links will always redirect to YOURPAGE.php no matter what page they're actually on).

If you want to put all your style sheets into their own folder, just change the links from step 6 like this:

HTML:
<a href="switcher.php?set=STYLEFOLDER/bluestyle">click here to go blue!</a><br>

Congratulations on your new style switcher!
 
Last edited:
I'm not sure if it's because my computer can't preview PHP locally, but it isn't working. Here's the code, if there's something wrong, please tell me.

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="reshiram_style.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo (!$_COOKIE["sitestyle"])?'default':$_COOKIE["sitestyle"] ?>.css" />
<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA////AIJqTwCMgncAAIUqAAD/UQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACIiIiIiIgAAIzMzMzMyAAACMzMzMyAAAAIzAzAzIAAAAjAwAwMgAAACMzMzMyAAAAIwMzMDIAAAAgEDMBAgAAACMDMzAyAAAAIzMzMzIAAAIzMzMzMyAAAjMjMzIzIAACIkIiJCIgAARVRFVEVUAARVRFVEVUAAAEQARABEAADAAwAAwAMAAOAHAADgBwAA4AcAAOAHAADgBwAA4AcAAOAHAADgBwAAwAMAAMADAADAAwAAwAMAAIAHAADMzwAA" rel="icon" type="image/x-icon" />
<title>Mohacastle
</title>
<a href="Index.html">
<div id="logo">
<img src="Mohacastle Logo.png">
</div>
</a>
<a href="styleswitcher.php?set=reshiram_style"><img src="Reshiram Bullet.png" title="Switch to Vast White style" alt="Switch to Vast White style"></a>
<a href="styleswitcher.php?set=zekrom_style"><img src="Zekrom bullet.png" title="Switch to Deep Black style" alt="Switch to Deep Black style"></a>

There's stuff after that, but it's irrelevant.
 
Your computer in all likelihood can't preview PHP locally (you would need to have installed a web server and PHP). Upload it to a server that supports PHP to see if it works.
 
I'd like to revive this thread real quick.

Here's the page that I'm testing the styleswitcher on.

I just don't understand why it doesn't work. I'm pretty sure it has something to do with the <a href="#"> deal, as the error is a 404, but I'm not sure what else to change it to? I'm preetty sure that styleswitcher.js is good, as I just copied and pasted it from the guide I was using (although I read through it to make sure there were no credentials to change or anything). Is it because I'm not including all of the styles I referenced at the top in the switcher, or...?

If that is the case, I only did two because I don't really need all five styles when I'm just testing to see if it works.

Anyway, does anybody know how to fix this?

Oh, and the styleswitcher is the Reshiram/Zekrom icons just beneath the logo, if you end up looking at the page itself and not its source.
 
The styleswitcher-related quotation marks in your file all seem to be curly quotes (”), when they should be straight quotes ("). HTML attributes are optionally delineated by straight quotes, not curly quotes - if you don't have straight quotes around them, the first word of the attribute value will be interpreted as the value of the attribute and any remaining words will be interpreted as gibberish extra attributes. So when the browser sees

HTML:
<a href=”#” onclick=”setActiveStyleSheet(‘White’); return false;”></a>

it actually interprets it as an a element with the following attributes:

href="”#”"
onclick="”setActiveStyleSheet(‘White’);"
return=""
false;”=""

which is of course gibberish, causes a Javascript syntax error because the ” character isn't allowed in function names, and because of the error and because the "return false;" is missing, the normal function of the link is executed - namely to redirect the browser to a page called http://www.mohacastle.com/” (and try to find the anchor #” on it), which of course doesn't exist.

Simply fixing those errant curly quotes to be straight quotes instead should fix all that. (The link will never actually take you anywhere, because the Javascript executed on the click returns false, but if it did, it would take you to the empty anchor # on that page.) It has nothing to do with not including all the styles you link to in the head.

Odds are they're curly quotes because the site you copy-pasted the HTML from has installed something that automatically converts straight quotes to curly quotes - curly quotes look better in text, especially in a nice font, but obviously this spells disaster for code. Watch out for this kind of thing in the future - it happens an unfortunate lot.

(Don't forget to also fix the curly single quotes around the style names within the onclick attributes.)
 
Back
Top Bottom