nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Web AppBuilder Dart Theme overrides color with !important

GijsBoekema · 2017-03-28T10:43:03+00:00

The Dart Theme uses: .jimu-widget-frame.jimu-container * { color : #ffffff !important ; <SPAN…

GijsBoekema

The Dart Theme uses:

<SPAN class="selector token">.jimu-widget-frame.jimu-container *</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> #ffffff <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">outline</SPAN><SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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!

Najděte více příspěvků označených jako

Accepted answers

All comments

RobertScheitlin__GISP

<SPAN class="selector token">.blahblah</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>0,0,0,0<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

EmilyCaruccio

How do I do that?

RobertScheitlin__GISP

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

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

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

<SPAN class="" style="color: #669900; border: 0px; font-weight: inherit; font-size: 14px;">.jimu-widget-frame.jimu-container *</SPAN>

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.

<SPAN class="selector token">.jimu-widget-frame.jimu-container .mytoolbar.button</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> green <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.