How to change UI for a preexisting widget which is using style from esri.css

[HumzaAkhtar]

Forexample, the measurement widget. The existing style 'measurementDiv' taken from esri.css looks like this.

Lets say I dont like the icons and I want to change its css. Then how can I go about doing that ? I know these widgets take their style and icons from esri.css, but this file is not located in webapp builder dev edition folder. It is referenced from an Esri server in init.js. So what is the correct procedure to overwrite this file?

Thanks

Humza

[RickeyFight]

Humza,

One option would be to find the developer tools by right clicking on the icon and selecting inspect element.

Then when the image div is selected click the in the upper right hand corner  (chrome).

I just changed the image to an up arrow using the css below.

For web app builder I am not a 100% sure where to put the new css. I would try the measurement widget css first.

[HumzaAkhtar]

Thanks Rickey.

[StanMcShinsky · Accepted solution]

Humza Akhtar​

Try this.

1. open \widgets\Measurement\manifest.json and change the "hasStyle" from false to true

"hasStyle": true

2. Add new icon to \widgets\Measurement\images folder (for example call it ruler.png). As a side note here your icon needs to be 16px by 16px or you will only see the top left corner of the image. If you want a larger image then adjust the values below, just make sure the image matches the sizes below.

3. Add a new folder here: \widgets\Measurement\ called css and a style sheet inside. The path will look like this:

          \widgets\Measurement\css\style.css

4. In the style.css add this

.esriMeasurement .distanceIcon{
  background-image: url("../images/ruler.png");
  width: 16px;
  height: 16px;
}

Hope this works for you.

-Stan

[HumzaAkhtar]

Thankyou Stan... That was really what I needed.