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

StanMcShinsky

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