Geocoder and other widget popup colors

4122
13
Jump to solution
05-30-2015 09:12 AM
JeffWard
Occasional Contributor III

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

Jeff Ward
Summit County, Utah
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Jeff,

   This is what I did in my app.

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

.esriPopup .titlePane {

  background-color: #5a6b4d;

  border-color: #777;

}

View solution in original post

13 Replies
LarryStout
Occasional Contributor III

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

JeffWard
Occasional Contributor III

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.

Jeff Ward
Summit County, Utah
StanMcShinsky
Occasional Contributor III

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.

cssfilepath.png

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

-Stan

RobertScheitlin__GISP
MVP Emeritus

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.

JeffWard
Occasional Contributor III

Stan McShinsky

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

Jeff Ward
Summit County, Utah
0 Kudos
StanMcShinsky
Occasional Contributor III

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

-Stan

JeffWard
Occasional Contributor III

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

Jeff Ward
Summit County, Utah
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

JeffWard
Occasional Contributor III

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?

Jeff Ward
Summit County, Utah
0 Kudos