I am constucting a site using CSS that needs to be skinnable / brandable. In technical terms, for each "brand" I have a set of five color values in a database.
What I want to do is construct CSS files so that the color scheme of the entire site is unified and the colors are reused, so I can change the value in one place and it changes the entire site. The concept would look like this:
.SiteBaseColor {color:sienna;}
p {font-size: 50; color:SiteBaseColor;}
Is there a way to accomplish something like this?
Why don't just write 6 css files? One for all the content (without the scheme-color) and one per color.
Then you just include the one you need.
The same if you generate it by php, just make 5 different entry-point for schemas and include the right one...
Sadly, CSS does not support variables. You would have to use a CSS pre-processor like Less or xCSS, or use PHP snippets:
<? $ourColor = "#FF0000"; ?>
.....
div.content { color: <?php echo $ourColor; ?> }
If you want to investigate the preprocessor choice ( my favourite for this case) I agree with Pekka, but my choice would be sass which, i think, is powerful than less..
Using a css preprocessor you can write one sass file ad than compile it in 6 different css files just changing color variables each time...
But, if you've to pull the colors from a database maybe it simpler to use php snippets in the css file..
Related
I am using Angular-material-6. I am using an angular-material stylesheet and my own custom less stylesheet as a master stylesheet. I have a select box in header which shows theme color name like Red, Green, Blue etc. Now my task is to change a less variable as per user choice theme.
for example, by default my application primary color is red and if a user changes it to blue from header select box then it will automatically change my primary variable color to red.
I tried simple way solution like CSS switching from index.html using javascript but I am not sure how to do it with less and less variables.
Thanks in advance.
Less can compile at run-time and is one of the few CSS processors (If not the only one) that can do this and modify CSS vars programmatically at run time.
Check out this SO post: How to use less in Angular component without CLI
Less is a CSS preprocessor which means that it produces CSS at compile-time, not runtime. Therefore you can't do what you are aiming to do.
You can have a look at css variables if you want to dynamically override it. You can also use a CSS in JS or make smart use of the CSS cascading model.
I am making a form using bootstrap and I would like to make some of the text a "brand color" like you see in the buttons. I know about the text colors available using text-primary etc.
However, I would like to use the button colors for the text.
I tried this
<style>
em {
background-color: #brand-danger;
}
</style>
Also I found the default values for bootstrap colors here http://getbootstrap.com/css/#less but i just want to use their variable or class without manually using the hex value.
What is the way to use their color?
You'll need to create your own LESS/SASS source, tie it in with bootstrap, create your custom styles, then run it through the compiler. The variables, such as #brand-primary/$brand-primary, are only meaningful in the LESS/SASS languages.
And, since BS4 is going SASS, I suggest (if you're going down that path) you do as well.
Example (I'll use LESS since it's more common):
Download the Bootstrap LESS source
Create a new LESS stylesheet for your project and place it along side the others (such as bootstrap.less, mixins.less, etc.)
Add a reference to your new stylesheet within bootstrap.less (this can be done using the #import directive, but make sure to place it towards the bottom).
Compile your new styles.
Is it possible to pass variables in CSS files, like in HTML file. Example:
In views.py:
def home(request):
bgcolor = "#999"
...
...
In the CSS file:
body {
background-color : {{bgcolor}};
}
If yes, can you please guide me how to achieve this? I would really appreciate. Thank you!
Edit: Ok, my bad. What I meant was, how do let users customize their page if they wanted to? I suppose I could have done this without using external stylesheet, but I think CSS is served fastest if it's static and on a CDN and not using a template and CPU resources to render. Please guide me if there's a way to achive this.
This is a old question but I thought I'd help others as I also wanted to do this and I found a solution.
Instead of using a normal link tag specifying your stylesheet, use style tags and include your css file inline.
<style>{% include 'my.css' %}</style>
Then you can put jinja code in your css file and it will render the variables. Useful if you want to allow users to customize colors etc.
That's not the way to do this sort of thing. You should define different classes in the CSS file, then use then in your template dependent on the variables there.
you can pass the css style attribute adding the following line in your html page.
<div class="profile-cover" style="background: url('{{ cover }}')">
added attribute to css class provile-cover style="background: url('{{ cover }}')"
{{ cover }} is the variable rendered from views.py to the HTML page using the urls.py
I agree with Daniel Roseman's answer, but if you -really- need to do this you can just define your CSS in the template and use the python variable as shown there.
Another option is to see if you can use mako templating if you can get it to work with Django.
But, unless you have some unusual compelling reason you need to do this, define your own CSS classes.
In visual studio I can type "blue" in a CSS value for instance and it will translate it to the appropriate RGB. Is it possible to define custom colors? I'd love to be able to define "companyBlue" or "companyOrange".
Since you're using a CSS file then you shouldn't be using any colornames like Blue, Green,... Because browsers decide for themselves which color value they give to these colors. The color Green might be a completely different color in IE when comparing to Google Chrome.
I'd recommand using hex values instead like:
#000 /* Black */
#fff /* White */
#f00 /* Red */
You can easily get hex values, with this photoshop-like color selector: http://www.2createawebsite.com/build/hex-colors.html
Now, back to your original question, how can you use variablese like companyOrange in CSS? Simply put... with only CSS you cannot use any variables. You however can "store" the value at the top of your CSS file in a comment like so:
/*
COLORS
Black: #000
Company Orange: #f64;
Company grey: #444;
*/
If you really want to use variables instead, you can use a CSS pre-processesor such as SASS, LESS, Stylus,... All of these use variables.
Read more:
http://sass-lang.com/
http://lesscss.org/
http://learnboost.github.com/stylus/
I found this, but don't really love the solution: http://24ways.org/2006/faster-development-with-css-constants/
To truly achieve constants you will need to use something other than
CSS to process the file before it is sent to the browser. You can use
any scripting language – PHP, ASP, ColdFusion etc. to parse a CSS file
in which you have entered constants. So that in a constants section of
the CSS file you would have:
$darkgrey = '#333333';
$darkblue = '#000066';
The rest of the CSS file
is as normal except that when you come to use the constant value you
would use the constant name instead of adding the color:
p { color: $darkgrey; }
Your server-side script could then parse the
CSS file, replace the constant names with the constant values and
serve a valid CSS file to the browser. Christian Heilmann has done
just this for PHP however this could be adapted for any language you
might have available on your server.
Shaun Inman came up with another way of doing this that removes the
need to link to a PHP script and also enables the adding of constants
using the syntax of at-rules . This method is again using PHP and will
require you to edit an .htaccess file.
A further method is to generate static CSS files either using a script
locally – if the constants are just to enable speed of development –
or as part of the web application itself. Storing a template
stylesheet with constant names in place of the values you will want to
update means that your script can simply open the template, replace
the variables and save the result as a new stylesheet file.
While CSS constants are a real help to developers, they can also be
used to add new functionality to your applications. As with the email
address example that I used at the beginning of this article, using a
combination of CSS and server-side scripting you could enable a site
administrator to select the colours for a new theme to be used on a
page of a content managed site. By using constants you need only give
them the option to change certain parts of the CSS and not upload a
whole different CSS file, which could lead to some interesting
results!
As we are unlikely to find real CSS constants under the tree this
Christmas the above methods are some possibilities for better
management of your stylesheets. However if you have better methods,
CSS Constant horror stories or any other suggestions, add your
comments below.
A client asks for an admin table and one column will have different cell colors based on some rules.
My problem is : what is the best css practice for this.
we know inline is bad from the start
we could do some css classes for each color and give them a good name but this will just clutter then main css file with classes that will probably never be used again.
So what would be a good approach for this simple problem ?
So what would be a good approach for this simple problem ?
You have essentially already outlined your two options. It's your choice.
I would always go with classes, and never with inline CSS. If you're worried about cluttering, you could add some order using comments:
/** Table highlight styles **/
table.data td.highlight { background-color: #CCCCCC }
table.data td.total { background-color: #ABCDEF }
You could theoretically put these into a separate CSS file, but the number of style sheets should be kept as low as possible. To do this right, you could use a CSS preprocessor as suggested by #Ian.... but that is an entirely different and new can of worms.
Personally, I would recommend using something like dotless(DotNet) or less (Ruby).
Here you can define a colour like #MyMainColour and then have div.SomeBackground { background: #MyMainColour; }
These tools will allow you to "compile" your CSS compress and turn out customer specific themes.
You might consider:
Keep a separate css file for specific adjustments. This might be a good compromise between keeping a main style file uncluttered, but still be able to target specific GUIs with adjustments.
Let a GUI have an id. This way you can let GUI specific adjustments only affect that GUI with styles given in context.