Hi Boglarka, thanks for putting this up for verification.
At first I thought your css-selector was slightly ‘off’ (it is), but then I realised that you are in fact trying to do something which is not as obvious as it seems.
So you basically want to mark the ‘entire widget’ as having a special state. It is exactly what is currently impossible to do. At least, in a direct manner.
Annotations apply to parts within the widget (i.e. child elements). As you’ve already tried. But unfortunately css-selectors cannot style a parent element. You can’t go ‘back up’ to the widget header and put on a border and change the color :-(
So with those routes impossible, we need to get creative about the solution.
- Using the title to ‘flag’ a state
- Using a piece of javascript (ASR) to ‘lift’ annotations up to the widget level
Since the title of a widget also ends up being a data-attribute on the widget, we can abuse it a little bit. But since it is only text, the ‘flag’ needs to remain invisible in text.
Let’s say we are adding two spaces after the title of a widget that needs to be ‘master’. This won’t show, but does allow us to select it from the title attribute:
.theme-aimms .aimms-widgetndata-widget\.uri='ForecastResults_Level3']-data-title$=" "] .awf-dock.top.vbox {
border-radius: 5px 5px 0 0;
background: rgba(144, 193, 204);
}
(I removed and added some spaces from your selector too, to make it correct to begin with; spot the differences...)
That adds the rdata-title$=” “] as an additional attribute that the widget element needs to have. And it says it needs to end in two spaces.
You could even leave out the whole part, since you could probably have this apply to any widget having a title ending in two spaces.
.theme-aimms .aimms-widgetsdata-title$=" "] .awf-dock.top.vbox {
border-radius: 5px 5px 0 0;
background: rgba(144, 193, 204);
}
Option 2, the script, can be done too and of course almost anything could be achieved in that way. The most difficult part I foresee is dealing with annotation / state changes after loading the page. The script would need to pick that up, which is far less trivial. Hence I don’t provide any code here now.
Finally, a bit about the styling you’re applying: border-radius is now only set on the title box. The widget area itself will remain square (and can’t be set from the title either; the same child-parent problem). So unless all backgrounds are the same, it might look less nice.
See how this works for you.
And if anyone else is using creative ways to ‘flag’ entire widgets, for styling or other purpose, please share!
@Boglarka Balogh , did Edo's reply answer your question?
