You are here: Flex API > Application Framework > Using a stylesheet with your ArcWeb Explorer application

Using a stylesheet with your ArcWeb Explorer application

You can create your own stylesheet (CSS file) for your ArcWeb Explorer application. Adobe Flex 2.01 with or without HotFix 1 (newer hot fixes are not supported) allows you to use CSS stylesheets to change the look and feel of applications. Learn from Adobe about this powerful way to customize your application.

For ArcWeb Explorer, this means that you can change the look and feel of all widgets with one common CSS file. For an example, compare the default widgets with the skinned ones in the ArcWeb Explorer 4 demo application (Lab).

You can specify style definitions in several ways:

Inline style definitions take precedence over any other style definitions. For example, you can make one specific component (Buttons, Widgets, etc.) look different from other components. Learn more from Adobe about style definitions.
Style definitions can be used. For example, use a style definition to change the style of all “Button” components.
External stylesheets are the simplest method of specifying style definitions. You maintain a separate CSS file and specify its location in your MXML application. For example, if the CSS file is in the same directory as your application, use the following:
<mx:Style source="my_external_stylesheet.css"/>

Sample stylesheet

The following is an example of a stylesheet (CSS file) for Buttons, Widgets, and Containers.

/* CSS file */
FloatingWidgetContainer{
    color:#F0F0F0;
    backgroundColor:#252525;
    backgroundAlpha:0.9;
    borderColor:#D1D1D1;
    borderThickness:1;
    cornerRadius:5;
    paddingTop:7;
    paddingBottom:7;
    paddingLeft:7;
    paddingRight:7;
    dropShadowEnabled:true;
    shadowDistance:1;
    shadowDirection:center;
       contentStyleName:floatingContent;    
    infoButtonStyleName:infoButton;    
    closeButtonStyleName:closeButton;
    tabsStyleName:tabs;
}

.floatingContent{
       backgroundColor:#999999;
       navigationFillColors:#C0C0C0, #999999;
}

.tabs{
       upSkin: Embed(source='../images/tab_up.png',scaleGridLeft=10, scaleGridRight=115, scaleGridTop=12,scaleGridBottom=13);
       overSkin: Embed(source='../images/tab_up.png',scaleGridLeft=10, scaleGridRight=115, scaleGridTop=12,scaleGridBottom=13);
       downSkin: Embed(source='../images/tab_up.png',scaleGridLeft=10, scaleGridRight=115, scaleGridTop=12,scaleGridBottom=13);
       selectedUpSkin: Embed(source='../images/tab_up.png',scaleGridLeft=10, scaleGridRight=115, scaleGridTop=12,scaleGridBottom=13);
       selectedOverSkin: Embed(source='../images/tab_up.png',scaleGridLeft=10, scaleGridRight=115, scaleGridTop=12,scaleGridBottom=13);
       selectedDownSkin: Embed(source='../images/tab_up.png',scaleGridLeft=10, scaleGridRight=115, scaleGridTop=12,scaleGridBottom=13); 
       textRollOverColor:#F0F0F0;
}

.infoButton{
    upSkin: Embed(source='../images/panel_info_button_up.png');
    overSkin: Embed(source='../images/panel_info_button_over.png');
    downSkin: Embed(source='../images/panel_info_button_over.png');
    width:9;
    height:10;
}

.closeButton{
    upSkin: Embed(source='../images/panel_close_button_up.png');
    overSkin: Embed(source='../images/panel_close_button_over.png');
    downSkin: Embed(source='../images/panel_close_button_over.png');
    width:9;
    height:10;
}

/*
BaseMapWidget{
    upIcon : Embed(source='../images/maptypes.png');
    downIcon : Embed(source='../images/maptypes-down.png');
    overIcon : Embed(source='../images/maptypes-hover.png');
    disabledIcon : Embed(source='../images/maptypes-disabled.png');    
}

*/
SliderComponent{
    borderSkin: 
    Embed(source='../images/panZoom_sliderBg.png',scaleGridLeft=16,
    scaleGridRight=21, scaleGridTop=11,scaleGridBottom=12);
    thumbFillColors: #306EAC, #58A1EA, #58A1EA;
    thumbWidth:9;
    thumbHeight:15;
    minusButtonStyleName: minusButton;
    plusButtonStyleName: plusButton;
    showawxels:false;
    button-width:16;
    buttonHeight:18;   
}

.plusButton{                     
    downSkin: Embed(source='../images/zoomIn_down.png');
    upSkin: Embed(source='../images/zoomIn_up.png');
    overSkin: Embed(source='../images/zoomIn_up.png');
    disabledSkin: Embed(source='../images/zoomIn_up.png');
}

.minusButton{     
    downSkin: Embed(source='../images/zoomOut_down.png');
    upSkin: Embed(source='../images/zoomOut_up.png');
    overSkin: Embed(source='../images/zoomOut_up.png');
    disabledSkin: Embed(source='../images/zoomOut_up.png');
}

DockWidgetContainer{
    paddingBottom:1;
}

Visit the Feedback page to give comments or suggestions about the ArcWeb Explorer Developer's Guide.

ArcWeb site | ArcWeb support | support.esri.com