Ok, I would like to make a css style sheet, actually many of these, so the users of my site can choose which which template to choose. I do not even know where to begin, please help....
Custom Tailored Solutions designs the best looking, most functional customized marketing solutions from web design to brochures with a 100% satisfaction guarantee, all for a price that fits your budget.
ok, I am holding up the construction of my site to figue out how I need to do this. So if it is possible to get some major help so I can begin construction on the site, please help!
Ok... first you do not have to delay production. You can design and test all of your CSS by just changing the link statement (<link rel="stylesheet" type="text/css" href="first.css" /> to <link rel="stylesheet" type="text/css" href="second.css" />) and do this until you get all of your CSS done. Then work on the switcher.
I am using this code from one of my college instructors site:
Code:
<script type="text/javascript">
<!--
//var browserName=navigator.appName;
//var browserVer=navigator.appVersion;
//window.status="You are using " + browserName + " " + browserVer + " to view this web page.";
window.status="Last modified " + document.lastModified;
function setStyle(the_style)
{
//define expiration date as a long time from now
var the_date = new Date("December 31, 2024");
var the_cookie_date = the_date.toGMTString();
//initialize cookie and add info to it
var the_cookie = "divinentd_style=style:" + the_style;
the_cookie = the_cookie + ";expires=" + the_cookie_date;
//drop the cookie and refresh the page
document.cookie = the_cookie;
document.location=document.location;
}
//read the cookie
var the_cookie = document.cookie;
//break up the cookie
var broken_cookie = the_cookie.split(":");
var style = broken_cookie[1];
//write a call to an external stylesheet based on the cookie
//undefined defaults
switch(style) {
case 'style_1':
document.write("<link rel='stylesheet' href='styles/style1.css' type='text/css'>");
break;
case 'style_2':
document.write("<link rel='stylesheet' href='styles/style2.css' type='text/css'>");
break;
case 'style_3':
document.write("<link rel='stylesheet' href='styles/style3.css' type='text/css'>");
break;
case 'style_4':
document.write("<link rel='stylesheet' href='styles/style4.css' type='text/css'>");
break;
default:
style = 'style_1';
setStyle(style);
document.write("<link rel='stylesheet' href='styles/style1.css' type='text/css'>");
break;
}
</script>
I believe that this "should" work. You may be required to modify it.
The one I was working on wouldn't upload, but I have this, and an exact copy of it in green, thats the second style to choose from. It is in all HTML. I need to knwo what folders to make and what files etc. to make!
1) Make your HTML.
2) Make your CSS styles
3) Edit your HTML file to include the above JavaScript
4) Make certain that you've edited the JavaScript to link to your CSS files
5) Test and debug
I think I've got everything. So all you need is your HTML file, and at least two CSS files.
ok, thanks a lot, I am tweaking my 3 (so far), templates now and gearing up to upload them, I will be back to ask questions/report later on. THanks a lot, a real lot!!
Am I to put the "persistant.css" in the place i want it to show? Like, I want my navibar to be persistant, so I only change that one css and it changes on every page, so so I put:
