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
  • 339 Views
  • 10 Months Discussion Span
  • Latest Post Latest Post by SMterminator

Dani AI

Generated

Short answer: let visitors pick a theme, persist that choice, and apply it as early as possible. For a pure client-side site, store the choice in localStorage (simpler and less overhead than server sessions). If the server must know the theme on first load (server-side rendering, different files per theme, or cross-subdomain sharing), set a cookie and have the server emit the correct <link> on render. (developer.mozilla.org)

A minimal, reliable client-side pattern (no registration required): run a tiny inline script in the head that reads the saved preference and sets an attribute on <html> before your main stylesheet is parsed; your CSS then targets that attribute. This reduces flicker because the stylesheet sees the theme at parse time.

<head>
<script>
(function(){
  try {
    var t = localStorage.getItem('site_theme');
    if (t) document.documentElement.setAttribute('data-theme', t);
  } catch(e){}
})();
</script>

<link rel="stylesheet" href="/css/site.css">
</head>

Using CSS variables or [data-theme="..."] selectors in site.css keeps everything in one file and is easy to maintain. Testing and placing the script before the stylesheet helps avoid the flash-of-unstyled-or-un-themed content (FOUC). (developer.mozilla.org)

If you prefer separate files per skin and want zero flicker on first visit, have the server choose the href based on a safe cookie value. Example PHP-safe pattern (validate names, escape output):

<?php
$allowed = ['default','flat','threeD'];
$theme = 'default';
if (!empty($_COOKIE['site_theme']) && in_array($_COOKIE['site_theme'],$allowed,true)) {
  $theme = $_COOKIE['site_theme'];
}
?>
<link rel="stylesheet" href="/css/<?php echo htmlspecialchars($theme,ENT_QUOTES,'UTF-8'); ?>.css">

Sanitize the theme value, set cookies with sensible flags (expires, Secure, SameSite) if you set them server-side, and remember HttpOnly cookies cannot be read by JavaScript. For older/browser features like rel="alternate stylesheet", support is inconsistent — prefer explicit switching. (developer.mozilla.org)

Troubleshooting tips: bust CSS cache when switching (version query string), test in private/incognito and on throttled networks, and verify the inline script runs before style parsing. Tie the UI (links or a dropdown) to a short handler that updates localStorage and either toggles data-theme or sets the cookie and reloads. This gives the user immediate feedback without requiring registration. (css-tricks.com)

Recommended Answers

All 7 Replies

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.