The Cave of Dragonflies forums

Go Back   The Cave of Dragonflies forums > Websites > Webmaster Help and Discussion

Notices

Reply
 
Thread Tools
  #1  
Old 09-23-2013, 09:17 PM
Nira's Avatar
Nira Nira is offline
クタ ララ スタ ララ
 
Join Date: November 1, 2011
Location: Stuttgart, Germany
Age: 17
Posts: 2,662
Pronoun: they
Nira is an unknown quantity at this point
Send a message via AIM to Nira Send a message via Skype™ to Nira
Default Style switcher.

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.
__________________
「私は光栄です, 高槻さん。」
♠ JOHARI WINDOW ♠
Reply With Quote
  #2  
Old 09-24-2013, 01:51 AM
42aruaour's Avatar
42aruaour 42aruaour is offline
Time: I come from the past. O.o
 
Join Date: July 17, 2013
Location: This Universe, Planet Earth
Age: 18
Posts: 118
Pronoun: he
42aruaour is an unknown quantity at this point
Default Re: Style switcher.

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.
__________________
"Keep looking up... After it rains." Fringe TV Show. Season 4 Episode 20: Worlds Apart.

Can't keep up with that cookie thing because of school.
Reply With Quote
  #3  
Old 09-24-2013, 02:15 AM
42aruaour's Avatar
42aruaour 42aruaour is offline
Time: I come from the past. O.o
 
Join Date: July 17, 2013
Location: This Universe, Planet Earth
Age: 18
Posts: 118
Pronoun: he
42aruaour is an unknown quantity at this point
Default Re: Style switcher.

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.
__________________
"Keep looking up... After it rains." Fringe TV Show. Season 4 Episode 20: Worlds Apart.

Can't keep up with that cookie thing because of school.
Reply With Quote
  #4  
Old 09-24-2013, 02:44 AM
Hiikaru's Avatar
Hiikaru Hiikaru is offline
Run.
 
Join Date: October 28, 2009
Posts: 445
Pronoun: vi/vir/vim; they
Hiikaru is an unknown quantity at this point
Default Re: Style switcher.

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/...leswitcher.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 Code:
<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 Code:
<?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 Code:
<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 Code:
<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 Code:
<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 Code:
<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 Code:
<a href="switcher.php?set=STYLEFOLDER/bluestyle">click here to go blue!</a><br>
Congratulations on your new style switcher!
__________________








Last edited by Hiikaru; 09-24-2013 at 05:10 AM. Reason: added style switcher files
Reply With Quote
  #5  
Old 09-24-2013, 07:43 PM
Nira's Avatar
Nira Nira is offline
クタ ララ スタ ララ
 
Join Date: November 1, 2011
Location: Stuttgart, Germany
Age: 17
Posts: 2,662
Pronoun: they
Nira is an unknown quantity at this point
Send a message via AIM to Nira Send a message via Skype™ to Nira
Default Re: Style switcher.

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 Code:
<!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.
__________________
「私は光栄です, 高槻さん。」
♠ JOHARI WINDOW ♠
Reply With Quote
  #6  
Old 09-24-2013, 07:46 PM
Butterfree's Avatar
Butterfree Butterfree is offline
Still loves Joltik, though!
 
Join Date: June 22, 2008
Location: Iceland
Age: 27
Posts: 2,393
Pronoun: she
Butterfree is on a distinguished road
Send a message via MSN to Butterfree
Default Re: Style switcher.

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.
__________________
Butterfree's Current Obsession
Ace Attorney, a series of visual novels about lawyers that I will never stop adoring.
Reply With Quote
  #7  
Old 01-08-2014, 03:44 PM
Nira's Avatar
Nira Nira is offline
クタ ララ スタ ララ
 
Join Date: November 1, 2011
Location: Stuttgart, Germany
Age: 17
Posts: 2,662
Pronoun: they
Nira is an unknown quantity at this point
Send a message via AIM to Nira Send a message via Skype™ to Nira
Default Re: Style switcher.

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.
__________________
「夢はもういい(おやすみ ハイセ)」
♠ JOHARI WINDOW ♠
Reply With Quote
  #8  
Old 01-08-2014, 09:59 PM
Butterfree's Avatar
Butterfree Butterfree is offline
Still loves Joltik, though!
 
Join Date: June 22, 2008
Location: Iceland
Age: 27
Posts: 2,393
Pronoun: she
Butterfree is on a distinguished road
Send a message via MSN to Butterfree
Default Re: Style switcher.

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 Code:
<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.)
__________________
Butterfree's Current Obsession
Ace Attorney, a series of visual novels about lawyers that I will never stop adoring.
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:10 AM.


Powered by vBulletin® Version 3.8.8
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Pokémon, Pikachu and all other Pokémon characters © Nintendo, Game Freak and Creatures Inc. The Cave of Dragonflies, content, styles, etc. © Butterfree/Dragonfree/antialiasis.
Forum now hosted by Eevee's HQ.