/    Sign up×
Community /Pin to ProfileBookmark

Theme colors in css

Copy linkTweet thisAlerts:
Nov 24.2008

I have a page that has multiple panels, fly out menus, drop-down menus, etc. All pure css (only image is a logo). Many elements have color specifications specific to the theme like color, background-color, etc. CSS rounded corners need to be built based on the background and foreground of their location.

I would like to take this page and present it with a variety of color schemes. I.e. for a maroon scheme, the text would be maroon and the backgrounds (and other contrasting things like menu drop-downs, etc.) in a light yellow. The psuedo classes like a:hover would also be specific to the theme (usually just inverted).

But for a gray theme, I would want a different color scheme entirely.

I know I can do things like specify a color as a class (like <div class=”headerDiv maroon”> and then have css like:
.maroon.headerDiv {color:#990000, background-color:#E0E0E0; blah, blah}

I could do this programaticly by pre-processing a css file before it’s either linked into a page or embedded in the style section.

But I was curious if there is a clean way to specify different colors, background-colors and other color-related properties without duplicating all the various class definitions to do so or without having to have separate style sheets or one that is so huge it becomes unmanageable.

The layout doesn’t change nor the vast majority of the properties that govern the layout.

Is there a defined mechanism for doing this or is it a brute force operation because css is a cascading model?

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@JickNov 24.2008 — Have you considered separating the color styles from the layout styles? WordPress has a very good example of this in the back-end admin interface of their system. They have all the layout styles in one CSS file and all the styles pertaining to colors in another.

Here is a simple example:

Layout stylesheet:[CODE]/* [B]NO[/B] colors at all in this stylesheet; Purely layout styles */
body {
border: 10px solid;
}

#mydiv {
position: absolute;
top: 100px;
left: 100px;
}[/CODE]

Color stylesheet:[CODE]/* [B]ONLY[/B] colors go in this stylesheet; No layout styles */
body {
color: #0f0;
border-color: #f00;
}

#mydiv {
color: #fff;
background-color: #00f;
}[/CODE]

So basically, you take your master stylesheet and strip out any code that specifies any color. Then you take those stripped out parts and put them in their own stylesheet. Then you include them both in your page. That allows you to have several color schemes while keeping the layout the same. You just interchange the color stylesheet and don't mess with the layout one.

Hopefully you can understand what I mean... Does that help at all?
×

Success!

Help @tbirnseth spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...