Skip to main content
Solved

What's the difference between similar CSS classes in WebUI?

  • 23 April 2019
  • 7 replies
  • 247 views
So I have seen (and used) things like .tag-ganttchart as well as .ganttchart, but what's the difference?



Also sometimes .aimms-widget works and sometimes I need to use .theme-aimms. What's up with these?



The only one I seem to understand is the .annotation-whatever_I_name_it class. But then I'm unsure if it needs to be



code:
.aimms-widget .tag-widgetname .annotation-whatever_I_name_it {
	fill: #FF0099
}




or



code:
.theme-aimms .widgetname .annotation-whatever_I_name_it {
	fill: #FF0099
}


or merely



code:
.annotation-whatever_I_name_it {
	fill: #FF0099
}




Everything works fine, but I feel like my CSS is just a scrambled mess with all these different bits. I don't want to be THAT developer. Please help.



Thanks!

~Bon

7 replies

mohansx
Userlevel 5
Badge +5
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
Mohan
Gertjan
Rank
Userlevel 6
Badge +6
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).
Gertjan, AIMMS
mohansx
Userlevel 5
Badge +5
@mohansx, in trying to apply what you have above, I'm hitting a wall.

My question was with the assumption that
code:
whatever_I_name_it
is 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

3 Attachments
Mohan
MathFour
Rank
Userlevel 4
Badge
@mohansx, in trying to apply what you have above, I'm hitting a wall.

My question was with the assumption that
code:
whatever_I_name_it

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
~Bon Crowder, Data Scientist
MathFour
Rank
Userlevel 4
Badge
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?
~Bon Crowder, Data Scientist
mohansx
Userlevel 5
Badge +5
@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
Mohan
MathFour
Rank
Userlevel 4
Badge
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
~Bon Crowder, Data Scientist

Reply


Terms & Conditions

Didn't find what you were looking for? Try searching on our documentation pages:

AIMMS Developer & PRO | AIMMS How-To | AIMMS SC Navigator