define custom color names: is this possible

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

bart plessers - 11 Oct 2003 11:57 GMT

Hello,

I am making a website where the user can choose a 'skin'.
This works with asp en stylesheets.

In the stylesheet, a number of tags are (re)defined.
The main idea is to have a limited number of colors (lets say 4) and use
only these colors to color up every tag.

However, with a long list of (custom) styles, it is a lot of work to scan
every item in the stylesheet and assign the correct color definition.

So I am wondering,
is it possible to use variables or something like that to give a name to
custom color
and use this name for the rest of the style sheet?

In example:
ThemeColor1 = #012345
ThemeColor2 = #678901
ThemeColor3 = #234567
ThemeColor4 = #890123

and then
BODY
{
BACKGROUND: %ThemeColor1%
color:%ThemeColor2%;
}
etc...

can this be done in stylesheets?
can this be done in ASP?

tia

bart plessers

--

==========================================
Hyper A.R.T.
bart plessers
Paul Van Ostaijenlaan 4
3001 Heverlee
BELGIUM
tel: +32 (16) 23.40.85
fax: +32 (16) 23.41.06
==========================================

Reply to this Message

David Dorward - 11 Oct 2003 12:24 GMT

> is it possible to use variables or something like that to give a name to
> custom color and use this name for the rest of the style sheet?

> can this be done in stylesheets?

> can this be done in ASP?

Yes (just output your CSS from ASP as you would with HTML. Make sure you set
the content type to text/css as ASP defaults to text/html)

Signature

David Dorward http://dorward.me.uk/

Reply to this Message

Barry Pearson - 11 Oct 2003 12:28 GMT

[snip]

> So I am wondering,
> is it possible to use variables or something like that to give a name
[quoted text clipped - 17 lines]
> can this be done in stylesheets?
> can this be done in ASP?

I asked a similar question in another NG, and the answer was "no" in CSS:

Giving names to values in style sheets?
http://groups.google.com/groups?as_umsgid=iC_6b.198$AI2.169@newsfep1-gui.server.
ntli.net

But I use 2 techniques that you may find useful:

- I try where possible in the CSS to use rules that declare colours to
multiple selectors:
selector1, selector2, selector3 { background-color: #012345; }

So I only need to change the colour value once in the CSS if I don't like
#012345 for that theme.

- I use a class in the body tag to identify the theme (which applies to
background colour, text colour, link colours, border colours, etc). (It has
been pointed out that I could, and perhaps should, have used id). Then this
results in blocks of rules in the CSS such as:

http://www.barry.pearson.name/assets/style_photograph.css

/* Styles for photo pages with eggshell background. */

body.eggshell { background-color: #DFD4BC; background-image:
url(eggshell.gif); color: #272727; }

body.eggshell a:link, body.eggshell a:visited { color: #0000FF;
text-decoration: none; }
body.eggshell a:hover { color: #FF0000; text-decoration: none;
background-color: #FFFFFF; }

body.eggshell div.middle, body.eggshell div.inner { padding: 7px; border:
solid #554433 1px; }
body.eggshell div.middle { border-left-color: #FFF7EE; border-top-color:
#FFF7EE; }
body.eggshell div.inner { border-right-color: #FFF7EE; border-bottom-color:
#FFF7EE; }

/* Styles for photo pages with dark green background. */

body.darkgreen { background-color: #0B360B; background-image:
url(dark_green.gif); color: #C1C1C1; }

body.darkgreen a:link, body.darkgreen a:visited { color: #4444FF;
text-decoration: none; }
body.darkgreen a:hover { color: #FF0000; text-decoration: none;
background-color: #FFFFFF; }

body.darkgreen div.middle, body.darkgreen div.inner { padding: 7px; border:
solid #000000 1px; }
body.darkgreen div.middle { border-left-color: #007700; border-top-color:
#007700; }
body.darkgreen div.inner { border-right-color: #007700; border-bottom-color:
#007700; }

(I'm not sure how well those actually address your problem).

Signature

Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

Reply to this Message

Alison Stewart - 17 Oct 2003 07:54 GMT

> So I am wondering, is it possible to use variables or something like
> that to give a name to custom color and use this name for the rest of
> the style sheet?

This is a job for DHTML of some kind. CSS isn't equipped for variable
substitution... I remember wishing I could do something of the sort
myself.

I know absolutely zero about ASP, but my guess is that's where you'd want
to start. I'd use server-side includes, I think (much like the way I'd
switch stylesheets for a whole site on the fly). Either way it needs to
be outside the html/css axis.

Hope that helps.

--Alison

Reply to this Message

Parker - 30 Oct 2003 22:54 GMT

I'm not sure if you are wanting to have several different stylesheets,
but the user could pick the color scheme, assigning your variable and
call it like this:

<link rel=stylesheet href=<%=strcolor%>.css type=text/css>
<link rel=stylesheet href=<%=strfont%>.css type=text/css>

I did that one time and it worked okay. Maybe this is oversimplistic
and I've misunderstood the question? In any case you can make links to
several stylesheets as needed.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / October 2003

define custom color names: is this possible