topic Re: How to change UI for a preexisting widget which is using style from esri.css in ArcGIS Web AppBuilder Questions

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

HumzaAkhtar — Mon, 25 May 2015 10:04:36 GMT

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

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

RickeyFight — Mon, 25 May 2015 14:55:30 GMT

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.

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

HumzaAkhtar — Tue, 26 May 2015 05:45:16 GMT

Thanks Rickey.

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

StanMcShinsky — Sat, 11 Dec 2021 08:03:20 GMT

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

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

HumzaAkhtar — Wed, 27 May 2015 06:38:24 GMT

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