Hi, I`ve a question and I`m not sure if I`m encountering a bug or doing something wrong. I just played around with designing custom themes and I`m now ready so far. If I now choose my theme or any other and I switch to "Widgets" Tab, there I can add widgets to placeholders or controllers ... okay so far. If I do so, then on the next screen I get the option to change the widget symbol. When I now choose a PNG with transparency, the transparency will be ignored and I get a ugly background colour behind my icon. I`m using Web AppBuilder 2.2 and here`s what I found in my build_num.txt (maybe it helps you) origin/develop-a2c7d09b5fa36afca43c94191bc92697645a475c-2016/10/11-18:20:11.98-246 Can someone reproduce this behaviour? Best regards, Richard

Vatsal, Don't forget to mark replies as helpful if they were.

Yes. It is working now. I had tried using different color codes earlier. Maybe I was making some mistake. But this is working great. Thanks once again. Regards, Vatsal

Vatsal, Sorry I forgot to mention you need to change the color values in the css rules: Here is a light blue: . jimu - widget - onscreen - icon { position : absolute ; cursor : pointer ; border - radius : 4px ; background - color : rgb ( 52 , 153 , 220 ) ; - ms - filter : "Alpha(opacity=20)" ; background - color : rgba ( 52 , 153 , 220 , 0.4 ) ; } . jimu - widget - onscreen - icon . jimu - state - selected { background - color : rgb ( 52 , 153 , 220 ) ; - ms - filter : "Alpha(opacity=80)" ; background - color : rgba ( 52 , 153 , 220 , 0.8 ) ; } . jimu - widget - onscreen - icon : hover { background - color : rgb ( 52 , 153 , 220 ) ; - ms - filter : "Alpha(opacity=40)" ; background - color : rgba ( 52 , 153 , 220 , 0.6 ) ; }

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; } } }

Change widget icon colour, transparency ignored

RichardReinicke

Hi,

I`ve a question and I`m not sure if I`m encountering a bug or doing something wrong. I just played around with designing custom themes and I`m now ready so far.

If I now choose my theme or any other and I switch to "Widgets" Tab, there I can add widgets to placeholders or controllers ... okay so far.

If I do so, then on the next screen I get the option to change the widget symbol. When I now choose a PNG My transparent Icon with transparency, the transparency will be ignored and I get a ugly background colour behind my icon.

I`m using Web AppBuilder 2.2 and here`s what I found in my build_num.txt (maybe it helps you)
origin/develop-a2c7d09b5fa36afca43c94191bc92697645a475c-2016/10/11-18:20:11.98-246

Can someone reproduce this behaviour?

Best regards,
Richard

Encontre mais publicações marcadas com

Accepted answers

All comments

VatsalDave2

Robert,

I am using version 2.3 and Tab Theme. The apps theme common.css here has only one line viz. @import url("panels/TabPanel/style.css");

I had tried adding the code here taking cue from your reply to a similar query. Somehow that did not work. Could be because of my older version?

Regards,

Vatsal

RobertScheitlin__GISP

Vatsal,

The way I do this is in the apps theme common.css (i.e. [instal dir]\server\apps\[app#]\themes\FoldableTheme\common.css).

<SPAN class="selector token">.jimu-widget-onscreen-icon</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">cursor</SPAN><SPAN class="punctuation token">:</SPAN> pointer<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">border-radius</SPAN><SPAN class="punctuation token">:</SPAN> 4px<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN>88, 100, 116<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">-ms-filter</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Alpha(opacity=20)"</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>88, 100, 116, 0.2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="selector token">.jimu-widget-onscreen-icon.jimu-state-selected</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN>88, 100, 116<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">-ms-filter</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Alpha(opacity=80)"</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>88, 100, 116, 0.8<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="selector token">.jimu-widget-onscreen-icon:hover</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN>88, 100, 116<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">-ms-filter</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Alpha(opacity=40)"</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN>88, 100, 116, 0.4<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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

VatsalDave2

Robert,

Which are the specific CSS files to be edited to change the gray background to, say, light blue?

Thanks.

p.s. I edited installdir\server\apps\#\jimu.js\css\jimu-theme.css (lines 123, 125, 129 and 133) and I am getting the desired results. Am I doing things correctly?

RobertScheitlin__GISP

Richard,

On screen placeholders all have a gray background color to the div defined in the css. So that is why you are seeing that. You would have to edit the css to change that.

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

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