Anonymous Monk has asked for the wisdom of the Perl Monks concerning the following question:

Hi,

I'll keep this short and sweet. Basically, I'm the webmaster for a site that we've just finished coming up with the colour scheme for. We've got a few different ones, and one of the things mentioned was that maybe we could have a different colour scheme (ie a slightly different style sheet) selected on each page load. The overall structure and content of all the pages remains exactly the same, the only thing that's changing each time is some of the colours defined in the style sheet.

I'm not a wizard at perl, I can understand and do a little, but I'm not sure where to even start with something like this. Is it as simple as putting in an "import" type command where I link to my stylesheet, or how is it done?

Any help would be much appreciated.

Buffy

Replies are listed 'Best First'.
Re: Switching stylesheets
by pg (Canon) on Oct 17, 2004 at 21:17 UTC 
    <HEAD>
<TITLE>BLAH</TITLE>
<LINK REL=STYLESHEET HREF="styles/sitestyle1.css">
</HEAD>

    [download]

    It is a better practice to put your CSS in a .css file, and use link to import the style sheet, which will be transferred in a seperate HTTP request. It should not be difficult to ad this to your page, and have different values for HREF base on what you want.

[reply]
[d/l]
Re: Switching stylesheets
by bradcathey (Prior) on Oct 18, 2004 at 00:47 UTC

    I think what is being asked here is the ability to change stylesheets each time the page this loaded. This is really Javascript stuff. If random, then you can randomly reference a different style sheet on page-load. If you want to do it systematically, you'll need to track it with a cookie.

    The question remains, why would you want to do this? As a graphic designer by trade, I might point out that for identity and branding purposes it's best to stick to one look. Besides, it could just get "horsey" and confusing.

    Consider selectable style sheets for font size, and accessibility issue. But that is an optional choice you give your visitors. My .02

    Update: removed blockquotess

    —Brad
    "Don't ever take a fence down until you know the reason it was put up." G. K. Chesterton
[reply]
      ...and js is deprecated under US §508 accessibility guidelines... and (I suspect; did not find the reference yet) likewise deprecated under w3c g/l because of use of Lynx and other non-js enabled browsers by those with restricted vision.

      granted, that's probably not a significant issue in this particular application, but FWIW.

[reply]
Re: Switching stylesheets
by muba (Priest) on Oct 20, 2004 at 13:33 UTC
    I think you should not want this.
    One of the things I learned when learning HTML, is to keep your pages consistent. People should be able to tell they are still on your site just by the style.

    If you want your website to look like a nice attempt to make an amateuristic site, go ahead. Else, you should not make every page look different.

    Just my $0.02.




    "2b"||!"2b";$$_="the question"
    Besides that, my code is untested unless stated otherwise.
    One more: please review the article about regular expressions (do's and don'ts) I'm working on.
[reply]
[d/l]
Re: Switching stylesheets
by Anneq (Vicar) on Oct 18, 2004 at 19:54 UTC

    I use the following fragment in my wrapper template using Template toolkit (TT):

    <head>
    <title>$title</title>
    <base target="_self"/>
    <style type="text/css">
    <!--     
       @import 'path/to/main.css'; 
       [% PROCESS "path/to/color.css" %]
        .... other styles here ...
    -->
    </style>
</head>

    [download]

    main.css is my default stylesheet. color.css is a template component that uses the theme selected by the user. My application saves the theme and other user preferences and puts them in session parameters. The session parameter is passed to TT. Here is a snippet from color.css:

    p em { color: [% Css.${theme}.accent %]; }
h1 {   color: [% Css.${theme}.color %]; }
h2, h3, h4, h5    { [% Css.${theme}.accent %]; }
a:visited { color: [% Css.${theme}.accent %]; } 
table { border:thin solid [% Css.${theme}.color %]; }

    [download]

    My configuration template extracts the relevant session parameters and puts them into a template variable which is a hash that used by color.css.

    HTH,

    Anne

[reply]
[d/l]
[select]

Back to Seekers of Perl Wisdom