How can I change the colours used in my css files from codebehind?

Question

0.00/5 (No votes)

See more:

Hi,

Many of my css files (including bootstrap) use specified colours. I want to be able to change the main colours in one central place (such as the config pages I'm adding).

I have seen that css var's might be a thing soon but are currently not well supported.

Is there a more elegant way I can do this that my current idea of using the css files as templates which I will load with the colour config on page load?

Thanks ^_^
Andy

Posted 5-Jul-15 23:07pm

Andy Lanng

Add a Solution

Comments

deepankarbhatnagar 6-Jul-15 6:35am

whare is your css code?

Sreekanth Mothukuru 6-Jul-15 7:14am

I think we can achieve this by using variables concept that is mentioned in less or sass. We need to create a variable at page body level. Upon selecting the chosen color, we need to set the variable with appropriate color.

Andy Lanng 6-Jul-15 7:30am

Ha - I was looking to answer deepankarbhatnagar's question when I came across less and sass files :D - Still looking at it

Sreekanth Mothukuru 6-Jul-15 7:37am

I realized this as a base used in SmartAdmin bootstrap template from wrapbootstrap. They are changing the whole website theme just by changing the css class name at body tag and in that class they are setting the # color the variable itself.

3 solutions

Solution 1

The only supported way (I mean supported in every browser) is to load different CSS files...
Split your CSS info into two: one for the color information and one for all the rest.
Now you can make multiply CSS of color info, like green.css, red.css, yellow.css and so no...
What you have to do now is to include the right CSS in your page according to some user definition (like a cookie value)...

C#

<link href="<%=string.Format(" theme="]) ? " default=" : Request.Cookies[" rel="stylesheet" type="text/css" />

Posted 6-Jul-15 0:54am

Kornfeld Eliyahu Peter

Solution 2

You can do this easily if you pass your CSS definitions up to your Site Master page. This is the technique I'm using for my current site, and it works really well.

So for example, suppose you want to be able to choose between 2 different header colours for the title banners on your site, you would specify the CSS classes for those colours as below:

CSS

.header-purple
{
    background-color: #aab4cf;
}

.header-green
{
    background-color: #8fa9a0;
}

Then on your local page you would specify which header colour to use on that page with the following in the C# of your .aspx.cs file:

C#

// set the header colour of this page
this.Master.layoutColour = "green";

// or alternatively
//this.Master.layoutColour = "purple";

Then in the C# of your Site.master.cs page, you would define the variable that holds the colour you've just set in the code above:

C#

// default the colour to purple in case it doesn't get set by any code
public String layoutColour = "purple";

This then gets passed through to the actual HTML/CSS layout on your Site.master page, as follows:

HTML

<div class="header-<%=layoutColour %>">Some header text</div>

Posted 6-Jul-15 1:29am

Nick Fisher (Consultant)

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Andy Lanng · Accepted Answer · 2015-07-06T21:56:00

Ok so I actually went with using bootstraps .less files and compiling the css with grunt.

The idea is not to have a set number of set themes, but to be able to adjust the theme to get colour matches. For a single site this could be done by a long process of 'tweaking' the theme but I intent to use much of my site as a framework for future sites.

I followed the instructions here: http://getbootstrap.com/getting-started/[^] but a step was missing. I had to install Git-scm, which most people probably already have.

I got the windows installer here: http://git-scm.com/downloads[^]

Now all I need to do it change a few settings in Bootstraps variables.less and compile. This gives me a new bootstrap.css file with the changes applies.

Thanks for taking a look guys ^_^

Andy