nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Styling & Skinning

CynthiaMatney

Hello.

I am wanting to change the look of both the scalebar & the overview map. However, I am not sure how to go about this. I don't know where it is that I would change these items. I am using the Flex Viewer uncompiled version. I have also downloaded the Flex API and noticed there was a .mxml file for a different looking scalebar - however, I am not sure how to implement this (where) in my flex viewer.

Any help would be appreciated!

Thanks! 🙂

Find more posts tagged with

Accepted answers

All comments

MaxNgari

Hi Robert
Please could you direct me to a resource ( e-book, video, website ) about styling and skinning, right from the basics of drawing the mock ups on Catalyst and Adobe.
Am a GIS trainer and would highly benefit from this.

RobertScheitlin__GISP

Cynthia,

It is hard to say what is going wrong on your end, but I was able to add that css addition to the flexviewer and I saw a different styled scalebar... In Flash builder have you looked at the problems window to see if anything is listed there?

CynthiaMatney

Yes, it's the same. I totally took out the scalebar part in the css and ran it again and it shows the same thing.

RobertScheitlin__GISP

Cynthia,

Are you sure that it is the same? The only difference between it and the original is that there is no metric units on the scalebar only miles or feet which are only shown on the bottom of the scale where the default has metric on top and US on the bottom.

CynthiaMatney

Okay - I got it to not have those errors now - I think I might have had an extra character or something in it.

However, when the map opens - it still just shows the default scalebar - not the new one. Any clues as to what I'm doing wrong now?

Sorry to be so clueless 🙂

Thanks!

RobertScheitlin__GISP

Cynthia,

Than I am not sure what your error is actually saying then...

CynthiaMatney

No, I've not modified the css before. It already has the @namespace esri "http://www.esri.com/2008/ags"; at the top of it.

RobertScheitlin__GISP

Cynthia,

Have you modified the default.css for the viewer then? The default.css that is in the src folder by default has the

@namespace esri "http://www.esri.com/2008/ags";

that the css addition that I posted needs....???? I am not sure what you are doing wrong... As far as styling the overview window you need to look at the OverviewMapWidget.mxml. This will not be easy for a flex beginner to come up with anything that looks like the Greely site. In the OverviewMapComponent lines 49 and 50 control the line weight and color of the extent rectangle.

CynthiaMatney

When I add that to the default.css I get the following errors: "Namespace not found" & "Error parsing stylesheet:c:\...." I'm not sure what all that means.

I was wanting to change the overall look of the overview map on things like the colors, weight of lines, etc. Kind of like on the following link:

http://gis.greeleygov.com/origin/propinfo.html

Thanks,

RobertScheitlin__GISP

Cynthia,

For using the alternate skins provided in the API for the scalebar just add this to the default.css in flexviewer

esri|ScaleBar
{
 skin-class: ClassReference("com.esri.ags.skins.ScaleBarUSSkin");
 color: #000000;
}

What on overview map are you looking to change?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.