Solved

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

Forum|Forum|6 years ago
April 23, 2019
7 replies
263 views

MathFour
AIMMS Partner
57 replies

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
}

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

Best answer by mohansx

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

mohansx
Former AIMMSian
223 replies
Answer
Forum|Forum|6 years ago
April 25, 2019

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
}

code:

.tag-widget[data-widget\.uri="bar-1"] .annotation-whatever_I_name_it {
	fill: #FF0099
}

code:

.theme-custom .annotation-whatever_I_name_it {
	fill: #FF0099
}

code:

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

Hope this helps,
Mohan

Mohan

Anonymous
0 replies
Forum|Forum|6 years ago
April 26, 2019

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).

MathFour
Author
AIMMS Partner
57 replies
Forum|Forum|6 years ago
June 6, 2019

@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

mohansx
Former AIMMSian
223 replies
Forum|Forum|6 years ago
June 8, 2019

@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

Mohan

MathFour
Author
AIMMS Partner
57 replies
Forum|Forum|6 years ago
June 11, 2019

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
Former AIMMSian
223 replies
Forum|Forum|6 years ago
June 12, 2019

@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
Author
AIMMS Partner
57 replies
Forum|Forum|6 years ago
June 24, 2019

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

Sign up

Login to the community

Scanning file for viruses.

This file cannot be downloaded