I have built a basic theme for my Flex app. I would like to add support for additional predefined themes. By default, app has a theme and I would like it to change when user selects a theme from dropdown list. This can be done by loading a swf file using styleManager. However, all the skins have colors hard-coded in them. So, in order to achieve this I would have to duplicate skins and change value of the colors.
Is there a better way of doing this? Can I just have a skin that will change color values dynamically based on user selection?
The best way is to move all hard coded colors from skin to the css.
You will have to update your custom skins to take advantage of that.
so if you have a <SolidStoke color="0xff0000" />
you need to replace it by <SolidStroke color="{getStyle('yourCssPropertyName')} />
Another way to do it is to write your skins so they have references to their host components (see [1]). Then you extend the current host components so that they have properties for each color you want to specify (e.g. instead of using , you'd use with borderColor and fillColor as new properties).
Honestly, though, Florian's answer is probably the better way to go.
[1] - http://www.adobe.com/devnet/flex/quickstarts/skinning_components.html#host
Related
I am trying to make my Ionic Angular app's color scheme change based on events that happen while using the app. The app is quite large with many components that all need to be aware of the color change when it happens. Ideally I would like to know of a way to have my elements reference a color(s) (let's say --primary) and to be able to change that color in one place and have all the elements respond to the change.
I have not found anything in the Ionic docs that references being able to change the CSS variable definitions at runtime so I have looked at instead swapping which variable I use at runtime.
I have considered listing many different colors in the variables.scss and then using ngClass to apply a globally defined class name that can respond to the change. The downside of this is I would have to anticipate and individually declare each possible attribute that needs the color. For example, I could use [ngClass]="primary-1" to apply a class defined like this:
.primary-1 {
background: var(--ion-color-primary-1);
}
but if I wanted to use an element that needed the background-color attribute I would also need a different class for that attribute:
.primary-1-other {
background-color: var(--ion-color-primary-1)
}
My problem is that I do not want the global class definitions to be aware of the specific element attributes unless there is a concise and comprehensive way to do that.
I have also looked into using setProperty but as far as I can tell that only changes styles in the specific context rather than the app as a whole.
Any solutions/ideas are appreciated.
This worked for me:
const htmlEl = document.querySelector('html');
htmlEl.style.setProperty('--ion-color-primary', '#0000ff');
Thanks #XML for the hint.
I think what you want is to modify Ionic's Global CSS Variables. They are a bunch of runtime modifiable variables. You're in luck, because in the old days, you could only modify those variables at compile time. Now, there are methods to modify at runtime.
This guide explains how: https://ionicframework.com/docs/theming/css-variables
DNN 9.3.2 / 2sxc 10.25.2
I have a DNN theme that I use for a certain type of subportal - I will have 8 subportals ultimately. Each subportal has the same layout, but they will have different colours in their respective theme. So I will have to create a stylesheet with the CSS rules and the colours for each theme. I know there is a couple of relatively simple ways I can do this:
Modifying the portal.css of each portal to override the theme or (simple but might be hard to maintain updates)
Building a custom theme for each portal (overkill)
Using SCSS to create a template with 8 different variable files (works fine but doesn't allow modifications by the Content Editors)
So, I'm curious if there's a more clever way through 2sxc that makes it easy for not only me to maintain, but also my portal's Content Editors.
I want to create 2sxc Content module with a few different fields for colour pickers that will allow me (and my content editors) to simply open up the 2sxc edit modal (on the homepage), fill out all the colour fields, and then a razor template will output the CSS template with the colours to override the theme styles on the DNN skin. I know I can do this with inline CSS but that would mean the module would have to appear on every page, and I'd also prefer to avoid inline CSS.
So my idea is that it would work like this:
Have a 2sxc Content module on a single page on each portal
Edit modal > the fields would be something like: primary colour (rgba), secondary colour (rgba), grey colour (rgba), etc
Once save is clicked, the template modifies a portal-level theme.css file which is loaded by the skin
Any changes to the module would result in a rewrite of the CSS file.
I could update the c# razor template to add, remove, or modify rules or transform the values of the input.
Is this possible or is it too complicated? Is there a better way of going about this?
So I've been away for a long time, I hope my answer will still help...
We have a very simple solution :). If you check out bootstrap instant template you'll see that we add various classes to the <body> tag.
https://github.com/2sic/dnn-theme-bootstrap4-instant/blob/master/controls/body-css-classes.ascx#L86-L91
That way we can just use normal CSS of the theme with rules based on portal-27 etc. to vary by portal.
I have a dynamic web-app using MySQL, PHP, jQuery, JavaScript and Twitter Bootstrap.
I've created a few color theme options for the users, but I'd like to offer them the ability to setup their own color schemes. I'm not entirely sure of the best way to go about this.
I'm guessing I would allow the users to save the key colors into a database table and use a generic CSS file where I can replace the values. But I'm not sure how to do the last part of that.
How would I write into the CSS file replacing "tokens" or variables, before it's loaded by the website? Or should I use jQuery to replace the CSS at runtime?
Thanks
I'm working on a web application which is using Materialize as a front-end framework along with Kendo UI for the grid component.
I'm hitting problems in cases where both Kendo UI and Materialize have styles for the same element - for example they both override the styling on check boxes - this results in a broken layout due to the clash.
One option I realize is to pick either Materialize or Kendo UI and drop the other... however I would like to avoid this if possible as they in the most part have complemented each others weaknesses well.
If it was simply one element here or there putting specific overrides in would be an option however with the scale of the two frameworks this would be a maintenance nightmare as when one changed the overrides would possibly have to be refactored.
Are there any ways to solve this issue that I am missing?
One way to workaround such a clash is to build your MaterializeCSS to include only the parts you so need for your project.
For instance, if you do not need the buttons styling of MaterializeCSS, you could simply, via sass, compile the materialize.scss and cherry pick buttons out of the file.
If going down the path of building your custom .css of Materialize is a long short for you, you can try using materialize.khophi.co (Disclaimer: I built it).
Find more about how to customize your MaterializeCSS: http://materializecss.com/getting-started.html
I know it's usually suggested not to duplicate code, and you want to try steering away from overrides, but would it be possible to find the section of css you like (i.e. select box from materialize) and copy that in to a new custom css file, renaming the selector so you can use it seperately from Materialize/Kendo UI?
You can manually edit the stylesheet of eighter party. Take the non-minified CSS, and prepend every base path with a short prefix:
.card {
....
}
becomes
.mat.card {
....
}
That way, for every materialize style, you use .mat before anything. Or, if you mainly use materialize, do the same thing for Kendo UI.
This is a lot of pain, but would solve your issue.
I'm working on a project that requires us to be able to define a color scheme via a properties file post compile.
Currently we have a skin swc that defines our custom skins and have moved the color values to an actionscript file. This works well for centralizing the skin colors but doesn't allow us to change the values without recompiling.
I was thinking to use the ResoureManager for this task but we also have to support localization. As far as I know you can only specify one locale so we can't hack the ResourceManager for our purposes.
Anyone have an idea of how this can be accomplished?
Thanks in advance!
Put your color scheme in a style sheet and load it at runtime.
So when you change you stylesheet, you odon't recompile your application, only the style sheet.
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f8c.html