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

3466
4
Jump to solution
05-25-2015 03:04 AM
HumzaAkhtar
Occasional Contributor II

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

1.PNG

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

0 Kudos
1 Solution

Accepted Solutions
StanMcShinsky
Regular Contributor

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

View solution in original post

4 Replies
RickeyFight
MVP Regular Contributor

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.

0 Kudos
HumzaAkhtar
Occasional Contributor II

Thanks Rickey.

0 Kudos
StanMcShinsky
Regular Contributor

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
Occasional Contributor II

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

0 Kudos