I'm trying to style the scalebar, and the only reference or example I've found so far is the color property for .esriScalebarLabel. Does anybody know of documentation for the properties for the scalebar CSS class?
- Maybe it's because I haven't done any JavaScript work in about 6 years, but I was expecting a list of CSS properties somewhere. For example, I discovered how to change the color of the scalebar label because of another post, but I haven't been successful in changing the font; is the property "font", "fontFamily", or something completely different? If I want to change other scalebar properties (like the ruler block color, which I haven't been able to figure out), where do I find those properties and the values I can plug in?
- I think the easiest way to figure out how to modify the scalebar is to run one of the existing samples with either Firebug or Chrome Developer Tools open. In Firebug you can select the css tab then choose 'Scalebar.css' from the dropdown list. This shows the styles that are currently applied to the Scalebar Widget. You can modify some of these in Firebug and view the changes. For example, I modified the background-color for the ruler block to purple using this css:
esriScalebarRulerBlock {
background-color: purple;
}
Those changes aren't persisted but its a nice way to play around with the settings until you get the look you want.
http://help.arcgis.com/en/webapi/javascript/arcgis/demos/widget/widget_scalebarExt.html
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/scalebar.htm