CSS Variables (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

SerenityNet -> CSS Variables (11/16/2005 9:29:39)

I don't know what else to call them, so I'll use the word variables for the moment.

I thought I saw one time where you could define, at the start of your sheet, things like:
  background-color:#FFFFFF;
  color: #CCCCCC;
Then further down in your sheet, when you want to define a color then you could just reference the "variable" defined at the beginning.

The purpose would be, by just changing the "variables" defined at the beginning, you could effectively change the whole sheet.

Am I having hallucinations or did I really see this somewhere? If so, can someone point me in the right direction?

Thanks,
Andrew

PS. And of course, if I'm not hallucinating, the next question will be, "Can I define the variables in a page and not just on the sheet?"



kopythat -> RE: CSS Variables (11/16/2005 9:59:44)

are you meaning as just changing the background of tables, cells (certain areas) or changing the whole style of the page, as in chick here to change the background to blue instead of white, or click here to change all the font colours to red.

or are you meaning something else all together?

Kopy



SerenityNet -> RE: CSS Variables (11/16/2005 10:54:32)

Something else alltogether.

For instance, in a CSS sheet, I might have "background-color:#FFFFFF;" stated a half-dozen times or more. When I want to change it to #FF0000 then I have to go to each place and change it. I don't want to do that. I just want to change it once, at the top of the CSS sheet.

It's kind of like what I would do with ASP. At the start of the page I would set a variable and then I could use that variable as many times as I wanted throughout the page (or site). Can I do a similar thing with CSS?

Thanks,
Andrew



Donkey -> RE: CSS Variables (11/16/2005 11:33:05)

Never heard of that but you could try grouping all the "variables" together at the start. i.e.
html,
body,
h1,h2,h3,
p,
container{
background-color:#FFF,
color:#CCC,
}

but as some values are inherited anyway it may not always be necessary if you don't specify a value in the child element.



bobby -> RE: CSS Variables (11/16/2005 12:03:31)

Nope, can't do that.

You can put your CSS into an "inline" sheet at the top of each .asp page. Then take the whole thing and put it into an include file (so you can still manage it from a single file) and define ASP variables that way...

I've done it before and it works great.

[;)]



SerenityNet -> RE: CSS Variables (11/16/2005 12:31:47)

quote:

ORIGINAL: bobby
You can put your CSS into an "inline" sheet at the top of each .asp page. Then take the whole thing and put it into an include file (so you can still manage it from a single file) and define ASP variables that way...


Aaaah, I like that.

Of course that begs the question, "Why doesn't everyone do it that way?" It would allow you to make a template and then change it at will by just re-defining the variables. If you have a customer that wants goldenrod instead of gold then BAM! it's done.

Andrew



Tailslide -> RE: CSS Variables (11/16/2005 12:52:10)

'xactly - wonderful isn't it!



d a v e -> RE: CSS Variables (11/16/2005 13:26:27)

quote:

If you have a customer that wants goldenrod...
and who wouldn't want that ;)



bobby -> RE: CSS Variables (11/16/2005 14:27:57)

I used it originally for a script that allowed custom styles... you could even define your own colors and styles and it would save your choices in a database, and in a cookie.

When you came back the site would remember you and your custom style...

[;)]



womble -> RE: CSS Variables (11/16/2005 16:39:53)

Are we talking about classes here, or have I misunderstood the question?

You can give each instance of your 'variable' a class, which you define in your stylesheet, and then use the same class however many times you want on the page and change the colour of all by simply changing the color in your stylesheet, either embedded or external.



bobby -> RE: CSS Variables (11/16/2005 18:53:19)

Nope, we're talking about dynamically changing all instances of say #ffffff in your CSS to #000000 with changing a single line of code, rather than going thru the sheet and changing each one...

So if you set a variable... say:

<%vMainColor="#fffff"%>

then in the body of the CSS everywhere you want white as the color you use <%=vMainColor%>

If you change the color in the variable it will reflect throughout the page...



rdouglass -> RE: CSS Variables (11/16/2005 19:19:34)

I never use style.css anymore. I always use style.asp and here's a typical chunk:

.......
body
{
background-color: <%=themeBody%>;
}

.myHeaderBackground:link
{
background-color: <%=themeLinkBackColor%>;
border-top: 1px solid <%=themeSeparatorColor%>;
border-left: 1px solid <%=themeSeparatorColor%>;
border-bottom: 3px solid <%=themeSeparatorColor%>;
border-right: 3px solid <%=themeSeparatorColor%>;
}

.myDarkBackground
{
background-color: <%=themeDarkBackColor%>;
}

.myMedBackground
{
background-color: <%=themeMedBackColor%>;
}

.myLightBackground
{
background-color: <%=themeLightBackColor%>;
}

.myLineColor
{
background-color: <%=themeSeparatorColor%>;
}

.myMainTableColor
{
background-color: <%=themeMainTableColor%>;
}


.....

Is that what you mean?

In fact, one of my Content Management solutions uses this exact thing with a few "themes" in a database with pre-defined color schemes as well as a copy/paste form to build / edit the themes.



SerenityNet -> RE: CSS Variables (11/16/2005 22:49:02)

quote:

Is that what you mean?
Yes! At least what you have illustrated is what I understood when Bobby suggested...
quote:

You can put your CSS into an "inline" sheet at the top of each .asp page. Then take the whole thing and put it into an include file (so you can still manage it from a single file) and define ASP variables that way...

And using this in a Content Management solution is exactly my intention. To date, themes (skins) have always included both layout and color scheme. My question was prompted by my desire to just have a few themes (skins) that govern only layout - then have the color schemes defined as we've described here.

I'm just coming back (a little bit) from a relatively long break from web work.  I thought I recalled that it could be done, but I just couldn't remember how.  (brain cramp)  This thread got me back on track.

Thanks,
Andrew



bobby -> RE: CSS Variables (11/17/2005 0:16:19)

exactly

[:)]



Tailslide -> RE: CSS Variables (11/17/2005 5:08:32)

Another thing you can do is to give each page a specific id so that, if as Womble mentions you give each section of the page a different id too then you can be page specific in your external stylesheet.

So you could have: 
#homepage img {float:right;}


or my personal favourite is to give each nav item in the nav menu a different id and then you can refer to it from the CSS stylesheet allowing you to highlight the active nav item etc and then remove all the nav to a seperate include file.

so: 
#homepage #nav-home {color:blue; font-weight:bold;}


or whatever.

I used to put my stylesheet "calls" into an include but it was a PIA for changing stuff locally because there was no style applied. What I do now is to have a link in head section to a stylesheet which then has a @import link to the actual stylesheet. Same end result as having an include - you can swap and change the stylesheet in the linked-to stylesheet without having to go through every page. The added benefit is that NN4 doesn't like @import so it dumps that out leaving it to see a "plain page"



drogers -> RE: CSS Variables (1/19/2006 21:31:06)

I know this is an older post, but I had a question.

How/where do you need to insert an asp based "style" sheet? Would you include it as an inline style sheet or as an embedded style sheet? Do you reference it the same way you would a regular style sheet? How is it for positioning of elements?

I know that's a lot of questions, but I have a large, complex piece of web software I'm developing and this kind of on the fly customization is exactly what I need...I think.



dpf -> RE: CSS Variables (1/20/2006 6:57:55)

quote:

insert an asp based "style" sheet
define asp based style sheet



drogers -> RE: CSS Variables (1/20/2006 9:04:38)

From Above:

quote:

ORIGINAL: rdouglass

I never use style.css anymore. I always use style.asp and here's a typical chunk:

.......
body
{
background-color: <%=themeBody%>;
}

.myHeaderBackground:link
{
background-color: <%=themeLinkBackColor%>;
border-top: 1px solid <%=themeSeparatorColor%>;
border-left: 1px solid <%=themeSeparatorColor%>;
border-bottom: 3px solid <%=themeSeparatorColor%>;
border-right: 3px solid <%=themeSeparatorColor%>;
}

.myDarkBackground
{
background-color: <%=themeDarkBackColor%>;
}

.myMedBackground
{
background-color: <%=themeMedBackColor%>;
}

.myLightBackground
{
background-color: <%=themeLightBackColor%>;
}

.myLineColor
{
background-color: <%=themeSeparatorColor%>;
}

.myMainTableColor
{
background-color: <%=themeMainTableColor%>;
}


.....

Is that what you mean?

In fact, one of my Content Management solutions uses this exact thing with a few "themes" in a database with pre-defined color schemes as well as a copy/paste form to build / edit the themes.




drogers -> RE: CSS Variables (1/20/2006 9:13:35)

I found this which, I believe answers my question:

http://www.4guysfromrolla.com/webtech/tips/t071201-1.shtml



Galdelonian -> RE: CSS Variables (1/27/2006 20:15:07)

The reason I don't usually do that is because some people like odd colors when I'm designing a page or site for them and they like changing the color of different things. Thus no theme, but still it's how they want it, not to mention I hand script everything and doing it all by hand is actually alot easier without that code. Though CSS ain't long, when you try to script alot of it in a row you sorta miss a ; or two and that's just not exceptable. Though I do like the idea. Knew about it before, but never knew how to do it till just now. :D



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375