I use less for theming. I have a couple of themes of different colors.What i do now is comment other variables definitions , leaving out variables for one theme and compile less to css. I generate the css for all others themes repeating this for other themes. Is there any other way where I could generate all theme css at once ?
I am even ready to change the structure of my less files.
You can always divide your stylesheets into two -- variables and then the theme. Say variables.less and theme.less
If you make the general theming variables abstract enough (say #primary and #secondary for colors), you can write as many variable.less sheets you would like, and decide which to show dynamically through jquery. Then the theme.less will stay constant, and the variables which populate it will be placed dynamically in there by how you decide to do so using jQuery.
Yes,
Based on that theme name you have to create the css file like theme1.css,theme2.css .
So based on that you check with which theme you currently running and based on that theme.css you can load.
Related
New to sass I stuck with the problem how to enable the dynamic change of a website theme - lets say a dark and a light theme - through user interaction. The template I use as a base (coreui) has a _custom.scss file in which various variables are defined
...
$navbar-bg: #fff;
...
The values of these variables would need to be set dynamically depending on the user choice of the theme and I have no clue how to get this done. Any pointer how to implement this would be highly appreciated.
SASS is a preprocessor which means essentially it gets compiled down into regular CSS and then shipped to the client. If you want to change themes you'll have to dynamically load different stylesheets using javascript.
Case 1
In the case that you want the user to pick between multiple prepackaged themes. This can easily be done with multiple "theme" style sheets which import the various parts of your style. First import the different colors, then import the main bodies of your sass. For example:
theme1.sass:
#import 'theme1';
#import 'base';
#import 'other';
theme2.sass:
#import 'theme2';
#import 'base';
#import 'other';
Then in javascript you could remove the old stylesheet and add the new one when the user does whatever is needed to change the theme. For example inside the onclick of a button you could put:
document.getElementById('cssTheme').setAttribute("href", "/path/to/theme");
It's probably best to take a bit of care and put the element in the head of the document, but this is a good starting point. That could be made to look a lot nicer with Jquery, but I didn't want to assume you'd have that.
Case 2
In the case that you want the user to dynamically change colors of individual element colors it might be worth looking into CSS Variables. Current support in IE/Edge is crumby but it is pretty interesting. Then as the user changes the fields you could just be changing the css variable in a <style> tag somewhere on the page and it should propagate through the document.
If you want more browser support then I think really the best way would be with OK sure's answer. This one gives you the benefit of just changing a variable and not having to reset each element style that uses that variable.
You have 2 options I think.
Option 1) Recompile the styles whenever a change is made by running a command serverside to generate a new CSS file for the user. This will be potentially very resource hungry and probably not recommended.
Option 2) Take the variables you want to be accessible, find where they are mentioned in the bootstrap source and either generate a file or just inline these styles after the stylesheet is included in the template.
So for your example here, depending what language you're coding in, or templating (this is a twig example) you're using, you could inline the following in the head of your template:
<style>
.navbar {
background-color: {{ user_theme.navbar-bg | default('#eeeeee') }}
}
</style>
It's tough to tell you exactly how to do this without knowing what frameworks/languages/infrastructure you're using.
If you were using Twig & PHP for example, you could send a user_theme object to the template, and have an include file which contains all the styles that need modifying with default values as above.
I am working on theme changer with angularjs and I can't seem to find a way how to replace one sass file with another (both of them contains variables) when user changes his theme. I know that when sass is compiled to css the variables are gone. Is there a way to switch up those files and recompile whole css? I have managed to find that it should be somehow possible to do by calling server to recompile css, but I couldn't find more information. Thank you.
One way we are doing these things is having multiple files for different themes. Example content =
variables ...
primary: '#smtng'
.themeName{
.header{
background-color: primary
}
}
And in your app.html you can add class to your html tag which will represent themeName. You can hold theme name in some storage and load it from there.
Basically you are loading all themes, but only rendering css for active theme
Twitter Bootstrap comes with its source code in the form of Less files. So if I want to change the default size of the top navbar for instance, then I'd have to (as far as I understand) do this in the theme.less.
But what if I'd like to change some default colors as well. These are defined in the variables.less file. Should I alter that file? Or should I (in the form of good practice) override them (if that's even possible) in the theme.less file as well?
I'd like to know the good approach for this, because I'd like to create my own Bootstrap theme.
What we do at our team (and best practice) is to include a custom variables files at the bottom of all bootstap's imports. This way, all variable you declared will overwrite bootstrap's default and you will not being overwriting bootstrap, what will give you the possibility of update without conflicts.
i want to create some css styles for my Django templates. Each view will have a css associated, but there will be zones that are not associated to any views in my template.
How can i load the css files? is there enough having them declared in the Media of my view, and loading them in the header of the html?
Also, is it a correct approach to have styles associated to the divs that are not associated to a certain view?
Thanks!
If you use a word view for a typical django view (a method) it is not good idea to create separate css file for each view (unless you have very specific application).
In general you need to create you css files in such way that:
general styles that can be applied in many templates are not repeated in multiple css files
it is easy for you to manage styles in couple of css files
There is no strict guideline to create css file per view or css file per template in Django as far as I know.
Basically pointing to some css file in head, which contains styles appropriate to a template is enough here. Of course you need to make sure that you provide correct path to this file.
You can make one general css with styles that are used by most of your templates and a series of specific css files that are valid only in some specialized templates.
I also advice to take a look at django-compress if you want to go with your site to broader audience - this app makes your static files (like css) smaller and also it helps to concatenate group of css and js files. This has some positive impact on performance without decreasing readability of your code.
I'd been reading up on themes in my ASP.NET book and thought that it could be a very handy solution, then I met some problems.
The theme picks up every single CSS file in the folder
If you want to use reset styles (where ordering is important) the order of imported stylesheets is not guaranteed
Your master page would not explicitly indicate what style is being used, only the rendered page can tell you that unless you dig into your web.config
Styling web controls using the theme file is... well... stupid? You can simply do this in your stylesheet. Granular control should be at the HTML level, should it not?
How do you specify print stylesheets without having all styles in a single stylesheet?
I'm wondering as to whether they're actually worth using at all. Is there any benefit? Are there any major sites using them?
EDIT
Just to clarify slolife's last point. If I had two stylesheets, one called print.css and one called main.css and I used ASP.NET themes, how would it know that print.css was a print stylesheet? In regular HTML you use the media type in the tag itself (i.e. <link rel= ...>) but the themes wouldn't know this, so it would just get included as a regular stylesheet.
I like using themes, but as Raj pointed out in his answer, URL rewriting can cause problems. My search for some solutions to that is what led me to your question. But I'll add my opinions in anyway.
I'll address some of your bullets from above as to why I think themes are good:
- The theme picks up every single CSS file in the folder
I guess you are looking to apply only certain stylesheet files to certain pages. Yes, themes takes the shotgun approach here, so that's a problem. But you don't have to put all stylesheets in the the theme folder. Put your specialized ones outside of it and they won't be included automatically. But I think it is nice feature to have the common/site wide ones included automagically.
- If you want to use reset styles (where ordering is important) the order of imported stylesheets is not guaranteed
I think you can guarantee the order by the way you name the files, so they are numerically and alphabetically ordered. Maybe not an elegant solution, but not horrible.
Personally, I have a build step that combines and compresses all of the *.css files in my theme folder into one single style.css file, and since I control that build step and the order that the files are combined, that doesn't affect me.
- Your master page would not explicitly indicate what style is being used, only the rendered page can tell you that unless you dig into your web.config
You can change the theme via code and in the <%#Page directive
- Styling web controls using the theme file is... well... stupid? You can simply do this in your stylesheet. Granular control should be at the HTML level, should it not?
I agree that applying style attributes to controls via the theme doesn't seem to be a best practice. But I love the fact that I can define image skins in the theme's skin files and don't have to cut and paste Width,Height,AlternativeText,Align attributes for common images that I use lots of places throughout the site. And if I ever change one of those images, I can fix the attributes in one place, rather than all over. I also can created skinned controls with a certain list of css classes applied, which seems handy to me.
- How do you specify print stylesheets without having all styles in a single stylesheet?
I have a Print.css file that starts with #media print and that defines print styles for my site. Why do you need to put them in one stylesheet?
IMHO, asp.net themes are absolutely USELESS
try implementing url rewriting with an app which uses themes and see them break straight away
basically, you can achieve the same thing writing few lines of code in asp.net and multiple css folders. i am yet to come across any developer / company who has been using themes
when asp.net 2.0 was launched, there was a big hype around themes but my personal opinion is its simply not worth it :-)
Use themes to change control attributes ONLY.
They were bad designed for working with css.