Web AppBuilder Dart Theme overrides color with !important

864
5
03-28-2017 03:43 AM
GijsBoekema
New Contributor

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!

5 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor III

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? 

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
EmilyCaruccio
New Contributor III

How do I do that?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor
.blahblah {
  background-color:rgba(0,0,0,0);
}‍‍‍
0 Kudos