I am working on a theme for the user dashboard. Styles are written with Sass (modules).
There is a default theme for all customers but some of the would have a custom theme. Custom theme would include different colors but also changes to padding and other attributes.
I am considering my options and I am not sure whether I should just create a stylesheet that would be imported in master.scss conditionality (e.g. if customThemeUser import style sheet with overwrites). If it was only colours that are changing I would just swap color variables but how to go about theming layout? Alternatively, should I create mixins that would conditionaly render different styles based on the theme? What would be the advantage of this (adding mixins across all dashboard) vs. stylesheet with overwrites? I am looking for a solution that could be easily maintainable.
Thanks
Related
Is there any way to change material design theme colors just by button click?
Lets say I want my app to support personalization so every user can pick predefined theme color palette. Something similar to this: http://www.getmdl.io/customize/index.html. Is there any way to do that?
This Demo on MDL's website actually generates a brand new stylesheet whenever you pick two new colors for your theme. So you can generate different stylesheets for different themes. When the theme changed, you can remove the old style and dynamically add new style tag with the new styles in it.
Or if you use some library like react, you write your css in JS so you can change theme by change the css object in JS.
I'm trying to find default wordpress styles for default color schema.
I'm able to find css styles for all other color schemas like (light, blue, coffee etc.) but I'm not able to find the file with the "default" color scheme.
Does anyone know where is it located?
These admin styles are actually dynamically built from files in the /wp-includes/css/ and /wp-admin/css/ directories.
However, if you need to add or modify styles, you should consider enqueueing a custom stylesheet, instead of touching the core CSS files.
the answer actually is no, there is not a compiled list of css styles for wordpress(admin). at least that I can find...
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 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.
1) If I create a theme and a skin file and a css file to go with that theme, does the skinfile automatically pickup the css file I created? What happens if you have multiple css files under a theme?
2) Do css files in themes override global css files? I created a global one and the theme that had a css file did not change the background color to the one I had in the theme, but the theme that did not have a css file, did change the background color to the one in the global css file.
3) It appears that skins and css files are the same? Can't I just create a theme and use css files within the themes instead of skins? Are skins just for asp.net server controls?
I dont like skinning and prefer to just use plain ol CSS. Thats precisely what a skin is but very limited. I say drop the skin and stick to CSS files.
You can have many theme folders within the App_Themes folder. An ASP.Net Theme can consist of many skin files and many css files.
Yes, the Skin file is aware of the CSS file. When you apply a Theme, your page is made aware of all of the .css files in the Theme automatically.
I'm not sure. Testing is the only way to go.
No, .skin files are different than .css files. Yes, you can just use css files in a theme and skip the skins. Yes, skins are just for asp.net server controls.
Themes vs. Cascading Style Sheets
Themes are similar to cascading style sheets in that both themes and style sheets define a set of common attributes that can be applied to any page. However, themes differ from style sheets in the following ways:
Themes can define many properties of a control or page, not just style properties. For example, using themes, you can specify the graphics for a TreeView control, the template layout of a GridView control, and so on.
Themes can include graphics.
Themes do not cascade the way style sheets do. By default, any property values defined in a theme referenced by a page's Theme property override the property values declaratively set on a control, unless you explicitly apply the theme using the StyleSheetTheme property. For more information, see the Theme Settings Precedence section above.
Only one theme can be applied to each page. You cannot apply multiple themes to a page, unlike style sheets where multiple style sheets can be applied.
Quoted from: ASP.NET Themes and Skins Overview
My Opinion:
Generally, if you've got a good understanding of CSS you don't really need .Skin files but Themes are still useful.
The Themes in asp.net are a bit confusing, they are somewhat css and a somewhat finicky.
Stick to normal css and create your own skin framework (eg: configured css folder)
It will be much easier to use things like jQuery plugins with normal css and it will easier to work with designers who know normal css for cross browser development.