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; } } }

Editing stylesheets

MattSmith

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

Encontre mais publicações marcadas com

Accepted answers

All comments

MattSmith

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! 😉

BjornSvensson

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

MattSmith

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.

BjornSvensson

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.

RobertScheitlin__GISP

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";
}

MattSmith

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,

MattSmith

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!

RobertScheitlin__GISP

Matt,

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

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

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