Hello Bon,
This article is a good resource: https://how-to.aimms.com/Articles/49/49-webui-css-color.html
Depending on the AIMMS version you are using, .aimms-widget and .theme-aimms are not necessary in all cases. For example, most of your CSS code will work just fine if you remove the .aimms-widget class in recent versions of AIMMS.
Suppose you have an identifier p_Identifier with the annotation whatever_I_name_it in 2 barcharts - bar-1, bar-2 and a pie chart, pie-1.
code:.annotation-whatever_I_name_it {
fill: #FF0099
}
This above code with only annotation will color p_Identifier with #FF0099 in all of the 3 widgets.
If you only want this color in the bar charts, you will use the .tag-widgetname class.
code:.tag-barchart .annotation-whatever_I_name_it {
fill: #FF0099
}
This code will change the color of p_Identifier in both bar-1 and bar-2 but not in pie-1.
If you want this color applied only in bar-1, you will use the data-widget\.uri class to filter on that widget's name.
code:.tag-widget[data-widget\.uri="bar-1"] .annotation-whatever_I_name_it {
fill: #FF0099
}
There is a Theme Switch add-on for WebUI. You can ask your colleagues for it, or reach out to
@AIMMS User Support to get a copy of these add on. It is a collection of CSS files for styling and javascript objects which lets you select the WebUI theme using a drop down bar.
If you want your above CSS styling to be applied only when a particular theme is selected, then you will use the .theme- class.
code:.theme-custom .annotation-whatever_I_name_it {
fill: #FF0099
}
This above code will not have any effect in your WebUI if you do not select the theme named "custom". .theme-aimms is the default theme and the below code will not apply the colors when you select the "custom" theme.
code:.theme-aimms .annotation-whatever_I_name_it {
fill: #FF0099
}
Hope this helps,
Mohan
Hi Bon
Indeed, the CSS is not as standard as we and you like it to be. There is no easy adjustment (from a product development standpoint) and it is a matter of setting priorities on what to work on by us. For now, we have no effort planned on this. So unfortunately this is what we have and will have until we revamp it.
Btw: Despite the above, we have seen several of our customers being very creative despite; you could use this community to ask from other users ideas (several of them or member).
@mohansx, in trying to apply what you have above, I'm hitting a wall.
My question was with the assumption that
is the actual parameter identifier, NOT the annotation identifier for the parameter.
Currently I'm trying to change the css on a label and I can't seem to make your suggestion of
code:.tag-widget[data-widget\.uri="Label"]
work. I even have tried it on a button (whose color I can globally change effortlessly) and it doesn't work. (and yes, the uri is truly "Label")
Note: neither the label nor the button have text that's populated by an identifier. So there's no way to associate a webui attribute string parameter with it.
Note, I AM using the theme picker and have prefixed the above with .theme-mythemename as well as used .tag-label and .tag-button where it makes sense.
Please help.
Thanks,
~Bon
@mohansx, in trying to apply what you have above, I'm hitting a wall.
My question was with the assumption thatis the actual parameter identifier, NOT the annotation identifier for the parameter.
whatever_I_name_it is not the actual parameter here, but the data of the annotation identifier.
The actual parameter identifier name is also applied as an annotation and you can use that itself directly if you want to change the color of a parameter in a bar chart.
Currently I'm trying to change the css on a label and I can't seem to make your suggestion of
work. I even have tried it on a button (whose color I can globally change effortlessly) and it doesn't work. (and yes, the uri is truly "Label")
Note: neither the label nor the button have text that's populated by an identifier. So there's no way to associate a webui attribute string parameter with it.
If the general method of .tag-widget ... does not work, you should use Right click and Inspect to get the actual keywords there. This methodology has been explained here:
https://how-to.aimms.com/Articles/49/49-webui-css-color.html#identifying-elements
For example, see below screenshots for buttons and labels respectively
If you see the #004bff, that is the default button color. You will use below code to change that.
.theme-aimms .aimms-widget .ui-button{background:yourowncolor;}
Similarly, for label. .theme-aimms .tag-label>.label
In the project which you can
download here, I made the following changes
- default color of buttons and labels
- color of secondbutton and secondlabel
- font color and weight in secondlabel
- color of para1 in all widgets
- color of para2 in only barchart2 and legend2
Thanks,
@mohansx. Indeed I live in the inspector. That's one reason I have so many questions - the number of tags on things in WebUI is incredible.
I'm glad to know that you can use the parameter identifier itself as an annotation using ".annotation-NAME".
But I still cannot make this work:
code:.tag-widget[data-widget\.uri="Label"]
I assume I can include other tags, like this:
code:.theme-mytheme .tag-widget .annotation-sp_th [data-widget\.uri="My LineChart"]
However, this doesn't work. What is wrong?
@MathFour , you need to replace "widget" in .tag-widget with the appropriate keyword. It'll be linechart, barchart, etc - whatever is shown in the list when creating a new widget. Just wanted to confirm that you are indeed doing that ?
.tag-widget in itself will not do anything. It needs to be .tag-barchart or .tag-linechart and so on
Thanks,
@mohansx.
Turns out, though, there is even more to it.
To change the label widget, I needed
code:.theme-mytheme .tag-label[data-widget\.uri="Label"]>.label
~Bon
