Geek Answers Handbook

.NET - How to create themes for large CSS files

I am responsible for providing the functionality of the theme for the site using the large CSS file (thousands of elements) that I just inherited. Basically, we want the user to be able to change the colors on the screen.

In addition to color definition, each CSS element also has many other attributes - size, font, floating, etc. In addition, a specific color is displayed in various CSS elements.

If I use Theme functionality for ASP.NET to have a different CSS file for each theme, I have to duplicate my CSS file for all topics, and this becomes a nightmare for maintenance.

Optimally, I would like to have one CSS file (for maintenance) and be able to change only color attributes.

What are the options here?

+3
source share
6 answers

You only need to duplicate the color attributes, so if you have

a:hover { text-decoration:none; color:Black; display:block }

in your css file in your theme you only need:

 a:hover { color:Red; }

Now on your page, you want to make sure that you are still linking to the source css file and the browser will combine all the styles.

+4
source

If the differences are minor, then cascading CSS rules might be a possible approach, for example:

HTML:

 <body class="dark"> <a ...>some text</a> </body>

CSS

 /* default */ body { color:white } a { color:blue } /* dark theme */ body.dark { color:black } .dark a { color:white }
+1
source

I think that saving a single CSS file might be a bad idea, especially since the goal of those is to have several. I suggest using two CSS files, the base (what you are already using) and the current theme, which are included in / link 'd after the base and redefine what you want to distinguish from the base.

+1
source

Like TravisO, I would suggest using two CSS files ... but I would not have a base that you already use. I would extract all the color data from your base and add it to the new default theme.

This way, your location data is in one place and your themes only contain color information. Saves browser time from loading and interpreting default colors in addition to theme colors.

+1
source

Remember: elements can have several style classes. Since the layout remains static and will be separated from the coloring, you want to define the classes for the layout and color separately, in completely different files.

So what do you want to do for the themes, set several colors in a separate css file as follows:

 .DefaultBackgroundColor { background-color: white; } .PrimaryColor { background-color: #123456; } .PrimaryAsForeground { color: #123456; } .AccentColor { background-color: #654321; } .AccentAsForeground { color: #654321; } .ComplementColor { background-color: #333333; } .ComplementAsForeground { color: #333333; } .DefaultTextColor { color:black; } .HighlightTextColor { color:black; font-style:bold; } .ComplementTextColor { color:white; }

You can add more colors, but you get the idea. Then in your HTML you add these classes to the elements in addition to the layout classes. For example, using these classes, you can overlay the Nav buttons for StackOverflow as follows:

 <div class="nav ComplementTextColor"> <ul class="primarynav"> <li class="PrimaryColor"><a href="/questions">Questions</a></li> <!-- selected --> <li class="ComplementColor"><a href="/tags">Tags</a></li> <li class="ComplementColor"><a href="/users">Users</a></li> <li class="ComplementColor"><a href="/badges">Badges</a></li> <li class="ComplementColor"><a href="/unanswered">Unanswered</a></li> </ul> </div>

Obviously, these colors are made up and will not work together, but that the beauty of it is customized. This makes it easy to play and customize colors, since you don't need to define the same color everywhere. You install it once, and then you only need to make a very small number of changes to completely repaint the site.

The downside is that you are limited. For example, using the html that I posted, you couldn’t go and make the buttons here a different color from everything else, just changing the css file, because we did not configure a “hook” for it. But you can change this ugly orange color that they use here through one right edit.

0
source

I need to go with the idea of ​​TravisO on this one.

In this case, staying in one file will actually lead to an increase in maintenance costs than creating separate css files. What you need is a file for basic css in some place that applies to all themes (usually for the root / styles folder), and then a file in each theme for color information (or any other css theme specific).

0
source

More articles:


All Articles