topic Re: Editing stylesheets in ArcGIS API for Flex Questions

Editing stylesheets

MattSmith — Mon, 02 Aug 2010 04:32:04 GMT

Hi,

I'm currently in the early stages of developing a web map, but am having trouble with stylesheets - I'd like to have a white background as I have transparent layers in my map service.

I've read a bit about editing CSS files, but I'm using ArcGIS Viewer for Flex 2.0 beta 2 (I don't see any point having to re-invent my web map) but there don't seem to be any CSS files there, only SWF's. I also downloaded Flex Viewer 1.3 but couldn't find anything in there either.

There's got to be something I'm missing.

Also, the samples section at says:

You can use different stylesheets:

blackgold.swf - gold color title texts on black background, with most text being white.

darkangel.swf - white text on a dark background.

lighterside.swf - black text on a light grey background

or create your own stylesheet in Flash Builder

But doesn't go any detail about how to build one in Flash Builder. Not that I'd expect it to, but it kind of leaves me at a dead-end.

If anyone can point me in the right direction it would be greatly appreciated.

Thanks.

Matt Smith

Re: Editing stylesheets

RobertScheitlin__GISP — Mon, 02 Aug 2010 11:03:59 GMT

Matt,

The CSS files are under src/default package folder in the package explorer tree in flash builder.

Re: Editing stylesheets

MattSmith — Mon, 02 Aug 2010 22:12:46 GMT

Thanks a heap Robert.

As I've been working with the beta version of flexviewer, turns out I hadn't unzipped flexviewer-src-1.3.zip. Found them in there!

Re: Editing stylesheets

MattSmith — Tue, 03 Aug 2010 04:04:14 GMT

I'm now having a little trouble compiling back to SWF in Flash Builder. I've made a few basic changes, but I'm getting errors regarding namespaces & CSS selectors, e.g.:

Type 'Alert' in CSS selector 'Alert' must be qualified with a namespace.

...pretty much for the whole document.

Does anyone know the reason stylesheets are now pre-compiled to SWF in Flex Builder 2.0 Beta? Have there been changes to CSS and/or Flex 4 (as my CSS works perfectly with the Flex Viewer 1.3)?

Or (and this is much more probable), am I missing something really simple?

Thanks,

Re: Editing stylesheets

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:36:56 GMT

Matt,

You are definitely missing something simple as CSS has always need to be compiled to a SWF. Just right click on the CSS file and choose compile to SWF if you have not already. There has been some minor changes to CSS in Flex 4 and that is what you are running into with the namespace issue. If you are attempting to use a CSS file that you had working in Flex 3 now in Flex 4 than you have to add namespaces like this at the beginning of the file

/* CSS file - Standard Stylesheet */
@namespace "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace esri "http://www.esri.com/2008/ags";
@namespace viewer "com.esri.viewer.*";
@namespace MapSwitcher "widgets.MapSwitcher.*";
@namespace components "com.esri.ags.components.*";

and then use those name spaces like this:

mx|Alert
{
    background-alpha: 0.8;              /* same as for viewer|WidgetTemplate */
    background-color: #000000;          /* controls the panel content area. */
    color: white;                       /* main text color */
    corner-radius: 10;
    title-style-name: "myAlertTitle";
}

Re: Editing stylesheets

BjornSvensson — Tue, 03 Aug 2010 14:15:10 GMT

Matt, the CSS files used are very different between the Sample Flex Viewer and the 2.0 beta of the ArcGIS Viewer for Flex. You will be much better of using the appropriate CSS files than taking 1.x SFV CSS files and trying to "fix" them for the 2.0 beta.

Re: Editing stylesheets

MattSmith — Tue, 03 Aug 2010 21:59:50 GMT

Matt, the CSS files used are very different between the Sample Flex Viewer and the 2.0 beta of the ArcGIS Viewer for Flex. You will be much better of using the appropriate CSS files than taking 1.x SFV CSS files and trying to "fix" them for the 2.0 beta.

Thanks Bjorn, but there don't seem to be any CSS files supplied with the 2.0 beta, only pre-complied SWF's. (I'm not sure if that's what you meant or not). I desperately need a white background for my web map, thus why I can't use the supplied blackgold, darkangel or lighterside SWF's (lighterside comes close but still nowhere near ideal).

@Robert thanks for your assistance, I might try putting that stuff in.

I'm purely a cartographer, so all this is a pretty steep learning curve for me. I appreciate both of your assistance.

Re: Editing stylesheets

BjornSvensson — Tue, 03 Aug 2010 22:09:36 GMT

Matt, the CSS requires compilation into SWF.

There are two different downloads for Flex Viewer: the ready-to-use, pre-compiled version, and the "source code" (which requires the code to be compiled). The CSS files are only included in latter because they need to be compiled into SWF files.

On http://help.arcgis.com/en/webapps/flexviewer/index.html the box on the right side has download links for both.

So to summarize, in order to change the CSS you need the "source code" as well as a way to compile that source code. The easiest way is to use Flash Builder. If you're not a developer or "techie" this might be a bit challenging, but still possible 🙂

Hope this helps,
Bjorn

Re: Editing stylesheets

MattSmith — Tue, 03 Aug 2010 23:10:20 GMT

Matt, the CSS requires compilation into SWF.

There are two different downloads for Flex Viewer: the ready-to-use, pre-compiled version, and the "source code" (which requires the code to be compiled). The CSS files are only included in latter because they need to be compiled into SWF files.

On http://help.arcgis.com/en/webapps/flexviewer/index.html the box on the right side has download links for both.

So to summarize, in order to change the CSS you need the "source code" as well as a way to compile that source code. The easiest way is to use Flash Builder. If you're not a developer or "techie" this might be a bit challenging, but still possible 🙂

Hope this helps,
Bjorn

AH, wonderful thanks Bjorn. Now, I understand! With the help of Robert's presentation at the user conference, I've been able to change the CSS files for 1.3 and make them apply, so the changes won't be too much of a drama I don't think.

Hopefully this is the last you hear from me! Well, on this topic anyway! 😉