0

Hi,

I know CSS and XHTML like the back of my hand, but am wondering how you can allow a visitor to a site change the CSS file used (like in TechTalk flat / 3d), but without having the registering system?

I would use it either from a pull down menu or a separate list of links.

Thanks In Advance

7
Contributors
7
Replies
11
Views
14 Years
Discussion Span
Last Post by SMterminator
0

The only way that I could think of doing this is via a cookie which expires ... or by using sessions which keep track of the style in use (if the site has some sort of backend web dev language).

This site is based off of phpBB forum software, and there is actually a mod/hack available @ phpBB which allows non-registered guests to change the template based on a cookie. However, the hack is very phpBB specific. You might want to take a look at it to see how it's implemented, but I doubt it would be much help.

0

Like a cscgal said, set up a cookie. I'm assuming that you don't have an application server, just a regular web server like Apache. You can make a cookie in JavaScript then read it and set up whichever style they choose.

0

if you're going to use PHP for this without any backend DB support (ie mysql, or postgrep) you can use something like

// Set it all up

$cookie_name = 'cookiename'; // Name the cookie
$css = 'layouta'; // Cookie Value
$days = 365; // Cookie Life
$cookie_time = time() + ( (3600*24) * $days);

setcookie ($cookie_name, $css, $cookie_time);

// Suck it all out

$cookie_name = 'cookiename';
$css = $HTTP_COOKIE_VARS[$cookie_name];

YOu should obviously do some kind of check at the top of your file to see if it the cookie exists, if not, then install it with a default profile to start ... and then update it accordingly when the user selects the setup he or wants.

Hope that helps!

0

hi, I know this is a late post, but I just did the same and it works well..
This code, unfortunately, is javacsript, but there is a php code for it.

basically, get your different css styles ready, then
post this in your <head>


[edit] script removed and added as attachment. peterska2. [/edit]

is this what you want?
You can turn the links into a drop down nav easy. Mine are just links.

Hope it helps...

Attachments
<link rel="stylesheet" type="text/css" href="style_scripts/footprint_grey.css" title="grey" />
<link rel="alternate stylesheet" type="text/css" href="style_scripts/footprint_blue.css" title="blue" />
<link rel="alternate stylesheet" type="text/css" href="style_scripts/footprint_brown.css" title="brown" />
<link rel="alternate stylesheet" type="text/css" href="style_scripts/footprint_fuchia.css" title="fuchia" />
<link rel="alternate stylesheet" type="text/css" href="style_scripts/footprint_green.css" title="green" />
<link rel="alternate stylesheet" type="text/css" href="style_scripts/footprint_orange.css" title="orange" />
<script language="JavaScript1.2">
<!--
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}

function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}

function createCookie(footinthedoor,stylechanger,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+stylechanger+expires+"; path=/";
}

function readCookie(footinthedoor) {
var nameEQ = footinthedoor + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

window.onload = function(e) {
var cookie = readCookie("stylechanger");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}

window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("stylechanger", title, 365);
}

var cookie = readCookie("stylechanger");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);


//-->
</script>


</head>


Then In your body, call as such:

<a href="java_script_:void(0);" onclick="setActiveStyleSheet('grey'); return false;"> Grey</a><br> 
<a href="java_script_:void(0);" onclick="setActiveStyleSheet('blue'); return false;"> Blue</a><br>
<a href="java_script_:void(0);" onclick="setActiveStyleSheet('orange'); return false;"> Orange</a><br>
<a href="java_script_:void(0);" onclick="setActiveStyleSheet('fuchia'); return false;"> Fuchia</a><br>
<a href="java_script_:void(0);" onclick="setActiveStyleSheet('brown'); return false;"> Brown</a><br>
<a href="java_script_:void(0);" onclick="setActiveStyleSheet('green'); return false;"> Green</a>
0

Forgot to add, change the words footinthedoor with the name of your cookie, also, maybe someone can tell you how to set the days cookie, cos I don't think it is set correctrly.......

=)

0

Maybe use PHP instead for this instead :)

You can learn about the setcookie() function in PHP by going here: http://ca.php.net/manual/en/function.setcookie.php

So, when a user first visits your site, have an option somewhere where they can select which style/CSS they want (using a dropdown maybe) and then when they submit that, then it will drop the cookie on their computer. So the next time they visit, the website checks their cookie to see what style they prefer to use :)

Let me know if you need some more info! :)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.