topic Re: Geocoder and other widget popup colors in ArcGIS Web AppBuilder Questions

Geocoder and other widget popup colors

JeffWard — Sun, 12 Dec 2021 00:34:39 GMT

Hello again AppBuilders,

I thought I had seen this question answered already but I couldn't find it. The geocoder results popup - I can't find where to change the color of the title pane. I deleted the following entry in the style.css file in \stemapp\widgets\Geocoder\css\ folder.

.esriPopup .titlePane {
  background-color: #5491B8;
  border-color: #777777;
}

And I added my own entry in the style.css in my custom style I created that matches my organization's color scheme. I thought this css entry would override anything else. Here is my entry in that file:

.jimu-widget-geocoder .esriPopup .titlePane{
  background-color: #6f2a2a;
  border-color: #777777;
}

I tried it without the jimu-widget-geocoder reference and that didn't work either.

Any help would be much appreciated.

Thanks,

Jeff Ward

Re: Geocoder and other widget popup colors

LarryStout — Sat, 30 May 2015 19:18:17 GMT

Jeff,

This is more of a technique than an answer. I use the Chrome Developer Tools to play around with CSS styles until I find what works. Then it's a simple matter of editing the appropriate CSS file. IE and FireFox have similar functionality, but I prefer Chrome.

Larry

Re: Geocoder and other widget popup colors

RobertScheitlin__GISP — Sun, 31 May 2015 18:26:13 GMT

Jeff,

This is what I did in my app.

In the Geocoder widgets widget.js @ line 501 I commented out the 'class': 'blueTheme'
In my custom theme color style.css I added

.esriPopup .titlePane {

background-color: #5a6b4d;

border-color: #777;

}

Re: Geocoder and other widget popup colors

JeffWard — Mon, 01 Jun 2015 15:49:55 GMT

Thanks again Robert.

Re: Geocoder and other widget popup colors

JeffWard — Mon, 01 Jun 2015 16:01:53 GMT

Larry,

Thanks for the tip. I have been using the developer tools to make "live" changes, but my problem is locating the correct file in the file structure to modify. There are a ton of CSS files and then (like in this case) there are style changes in the .js files.

Is there a way to find the file the element is styled in using the developer tools? I'm fairly new to CSS and web development, so any tips or links to resources would help me out a lot.

Re: Geocoder and other widget popup colors

StanMcShinsky — Mon, 01 Jun 2015 16:15:02 GMT

Jeff Ward

In the developer tools elements tab where you see the css. you can hover over the file name (in this case style.css) and it will tell you where the file is located. The :1 tells you what line in that file to look for.

I am not sure how Robert Scheitlin, GISP found the one in the js file besides just digging around.

-Stan

Re: Geocoder and other widget popup colors

RobertScheitlin__GISP — Mon, 01 Jun 2015 16:40:15 GMT

I found that even after changing the css that the bluetheme class was getting applied to the element and that lead me to search for where the class was being applied.

Re: Geocoder and other widget popup colors

JeffWard — Mon, 01 Jun 2015 19:48:01 GMT

Stan McShinsky

Are you using firefox or Chrome? Nothing shows up when I hover over elements.

Re: Geocoder and other widget popup colors

StanMcShinsky — Mon, 01 Jun 2015 20:09:55 GMT

Chrome. I get that when I hover over the word "style.css" in the top right of that image.

-Stan

Re: Geocoder and other widget popup colors

JeffWard — Tue, 02 Jun 2015 00:31:47 GMT

Is there a way to get firefox to do the same thing? IT doesn't like Chrome at our shop.

Re: Geocoder and other widget popup colors

RobertScheitlin__GISP — Tue, 02 Jun 2015 02:14:57 GMT

Jeff,

I primarily use FF as my dev browser and once you right click on any html element in your browser and choose inspect element you are shown the Inspector tab in FF dev tools and hen you can hover over any element in the dev tools window (not hover over element in the main browser window) and the element will be highlighted in the main browser window. Hope this clears things up.

Re: Geocoder and other widget popup colors

JeffWard — Tue, 02 Jun 2015 19:37:15 GMT

Okay, it turns out I wasn't hovering long enough. So Robert Scheitlin, GISP forgive me for a newbie question, but what method did you use to determine where that bluetheme class was applied?

Re: Geocoder and other widget popup colors

RobertScheitlin__GISP — Tue, 02 Jun 2015 19:45:28 GMT

Jeff,

Once I saw that the element had the class 'blueTheme' and I knew that I did not apply it I just did a text search in the files to find that text. I use Brackets as my IDE and I can search all files in my workspace folders for a string.

Re: Geocoder and other widget popup colors

JeffWard — Tue, 02 Jun 2015 20:25:58 GMT

I really appreciate everyone's input. I'm grateful for your tolerance for such rookie questions. I have downloaded Brackets and will be trying that out. My search method using the windows search wasn't cutting it.

Thanks Robert Scheitlin, GISP, Stan McShinsky and Larry Stout.