Member Avatar for boohoo

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
  • 322 Views
  • 10 Months Discussion Span
  • Latest Post Latest Post by SMterminator
Member Avatar for Dani

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.

Member Avatar for samaru

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.

Member Avatar for Kristoff

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!

Member Avatar for 72dpi

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...

<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>
Member Avatar for 72dpi

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.......

=)

Member Avatar for Gary King

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! :)

Member Avatar for SMterminator

or you could use a skin changer, which would require you to code several styles.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.