form changes external stylesheet [Archive] - Lissa Explains it All: Web Design Forums

View Full Version : form changes external stylesheet

jake

09-17-2003, 08:14 PM

I am trying to add a form to my site that will allow users to change the style sheet of my page. I'm not sure exactly where to put this, but I'm putting it here in the HTML forum because I think the problem is my lack of knowledge with forms.

I started out using code found on http://www.lissaexplains.com/fun.shtml#drop:

<form ACTION=URI>
<select name=lissamenu3
onchange="location.href=(form.lissamenu3.options[form.lissamenu3.selectedIndex].value)">
<option value="0"> Choose One</option>
<option value="0"></option> (This line adds a space in your menu)
<option value="http://www.lissaexplains.com"> Home</option>
<option value="http://www.lissaexplains.com/basics.shtml"> Basics</option>
<option value="http://www.lissaexplains.com/tools.shtml"> Links</option>
</select>
</form>

However, I don't want the form to tell the browser to go to another page, I want it to reload the current page with the form variable set. I have modified my code slightly, because I am using PHP. The sent URL should end up looking something like

http://localhost/jake/index.php?variable=stylesheet1

I don't have the exact code, because the computer I am working on my site on doesn't have an internet connection, and I do not own a floppy drive.

Thanks for any help!

chichy

09-22-2003, 10:41 AM

Ok, first off, you need to have a stylesheet page, call it something like mycss1.css, mycss2.css, mycss3.css etc. Next, in say mycss1.css, put this:




Edit as required, like what you want the first stylesheet to look like. Next, save it as mycss1.css in Notepad, then upload it. Open index.html (or whatever your main page is) copy down all the information and paste it into a new file. Add this in the <BODY> tag (near the top)
<LINK REL=stylesheet HREF="mycss1 (or whatever).css" TYPE="text/css">
Save it as index1.html. This will work olny for that page, so if you have a tutorials page, you need to copy down the information in tutorials.html and paste it, add the code (the link rel one) on the <BODY> tag and save it as tutorials1.html. There might be a less-hassling way, but I wouldn't have heard of it. It's complicated, so there might be a better way...I wouldn't have a clue.

MaGiCSuN

09-22-2003, 06:15 PM

<LINK REL=stylesheet HREF="mycss1 (or whatever).css" TYPE="text/css">

that should be between the <head> and </head> and not in the <body> tag :)

but beside that, i don't think that's what the person wants to know. it wants to know how people can choose their own css style. like you have site's that have skins, well he/she wants to know how to choose the html for it.

oh wait, can't you do it with skins then? like designing the same layout in different colours etc with css.

Love,
Mirna

jake

09-23-2003, 04:50 AM

There is a far easier way, and I don't have it all finished exactly the way I want it yet. The final solution involves cookies to remember choice on return visits, but once I have time to type more than a quick post, I'll put what I have so far. Someone suggested
http://www.domesticat.net/skins/howto.php
which looks to be very useful. Also, I still need a way to ditch the submit button, the example Lissa gives doesn't work quite right in my case, and I have zilch experience with javascript. Thanks for the response!

jake

09-23-2003, 08:10 PM

I implemented the suggestions from domesticat.com, and it works wonderfully. What I was doing before that was this:

<?
$path = 'http://127.0.0.1/arun'; //URL path
$spath = '/var/www/htdocs/arun/'; //server path
if(!$style) {
$style = 'grey';
}
?>
<html>
<head>
<link rel='stylesheet' href='<? echo($path); ?>/styles/<? echo($style); ?>Style.css' />
</head>
<body>
<div id='menu'>
<strong>site menu:</strong>
<ul>
<li><a href='<? echo($path); ?>/front.php?style=<? echo($style); ?>'>front</a></li>
<li><a href='<? echo($path); ?>/wired.php?style=<? echo($style); ?>'>wired</a></li>
<li>sign!</li>
<li><a href='<? echo($path); ?>/about.php?style=<? echo($style); ?>'>about</a></li>
<li><a href='<? echo($path); ?>/links.php?style=<? echo($style); ?>'>links</a></li>
</ul>

<form action='<? echo($PHP_SELF); ?>' method='get'>
<select name=style>
<option value='grey'>grey</option>
<option value='autumn'>Autumn</option>
</select>
<input type='submit' name='b1' value='submit' />
</form>

</div>

Content

</body>
</html>

The only problem was that every time I had a URL, I had to use PHP to directly input the variable. I am of the school that says keep content very separate from style, and keep your content relatively easy to look at, so I didn't really like that. And, everytime I changed something, I had to change every single link. However, it is one way to skin a website. Domesticat.com is much better.

I modified it though to accomodate the form that shows up on every page so as to allow users to easily change the style. I would like the current style being used to be selected automatically (I think I saw a thread recently that will help) and I want to get rid of the submit button, so that the $style variable changes as soon as a style from the form is chosen. I know this has something to do with javascript and it's onChange() function, but I don't know how to do it.