Web AppBuilder Dart Theme overrides color with !important

[GijsBoekema]

The Dart Theme uses:

.jimu-widget-frame.jimu-container * {
    color: #ffffff !important;
    outline: none;
}‍‍‍‍

  which causes strange behavior of our own color css styling:

If we remove the * and !important it looks like this:

Dart Theme is the only one causing problems like this. What can we (or ESRI) do about this?

Thanks in advance for your answer!

[RobertScheitlin__GISP]

Gijs,

   So in your code for your toolbar at the bottom of the widget you need to have a css rule with higher specificity that will use !important to override the 

.jimu-widget-frame.jimu-container *

So hopefully your toolbar as a class applied to it and you can just add a rule to it

This is not just copy and paste code, it is just an example of a higher specificity css rule.

.jimu-widget-frame.jimu-container .mytoolbar.button {
    color: green !important;
}‍‍‍

[EmilyCaruccio]

Robert Scheitlin, GISP‌, I have a similar question. Is it possible to completely remove the container so my text is black and hyperlinks will be blue? 

[RobertScheitlin__GISP]

Sure you would just set the containers background color to a color with 0 opacity.

[EmilyCaruccio]

How do I do that?

[RobertScheitlin__GISP]

.blahblah {
  background-color:rgba(0,0,0,0);
}‍‍‍‍‍‍