CSS Files and Skins

[AshleyPeters]

All,

I need to modify the overall look of the viewer. To do this, I know I need to manipulate several (likely) of the CSS files and the skins. I'm not sure which of the CSS files I need to modify though.

When I look at the defaults.css, I see that it calls in each of the skins. After opening the skins, I see calls for different styles, such as alpha="{getStyle ('contentBackgroundColor')}". I have not been able to find where the 'getStyle' is pulling from or how I can modify the Background Color.

This is new for me, so if this is a stupid question, I apologize!

Thanks for your help!

Ashley

[AshleyPeters]

I made that addition and it still didn't change the color. Here's that portion of my .mxml if that helps.

<s:HGroup id="mapLayersContainer" gap="9">
        <s:Button id="opLayerListButton"
                  label="{opLayerListButtonLabel}"
                  rollOut="startHideTimer()"
                  rollOver="opLayerListButton_rollOverHandler(event)"
                  visible="false"/>
        <s:ButtonBar id="basemapButtonBar"
                     change="basemapButtonBar_changeHandler(event)"
                     dataProvider="{basemapList}"
                     excludeFrom="noBasemaps"
                     labelField="label"
                     requireSelection="true"/>
    </s:HGroup>
    <s:BorderContainer id="opLayersContainer"
                       width="265" height="180"
                       click="opLayersContainer_clickHandler(event)"
                       creationComplete="opLayersContainer_creationCompleteHandler(event)"
                       includeInLayout="false"
                       rollOut="startHideTimer()"
                       rollOver="hideTimer.reset()"
                       visible="false"
        backgroundColor="{getStyle('headerBackgroundColor')}"
>
        <toc:TOC id="toc"
                 left="2" right="2" top="3" bottom="3"/>
    </s:BorderContainer>

Also, where you had backgroundColor="{getStyle('contentBackgroundColor')}" I tried both content and header there since I want it to be the same color as the header.

[RobertScheitlin__GISP]

Ashley,

   Well Now that I looke at the old 2.5 code I see why. The opLayersContainer_creationCompleteHandler function sets the backgroundColor

opLayersContainer.setStyle("backgroundColor", getStyle("contentBackgroundColor"));

so you need to change it there.

[AshleyPeters]

I've tried that as well, multiple times.

[RobertScheitlin__GISP · Accepted solution]

Ashley,

   OK so I quite guessing and started testing...  In the MapSwitcherWidget make these changes:

    <s:HGroup id="mapLayersContainer" gap="9"                rollOver="{rollOverFade.play()}"               rollOut="{rollOutFade.play()}">         <s:Button id="opLayerListButton" styleName="HeaderStyle"                   label="{opLayerListButtonLabel}"                   rollOut="startHideTimer()"                   rollOver="opLayerListButton_rollOverHandler(event)"                   visible="false"/>         <s:ButtonBar id="basemapButtonBar" styleName="HeaderStyle"                      change="basemapButtonBar_changeHandler(event)"                      dataProvider="{basemapList}"                      excludeFrom="noBasemaps"                      labelField="label"                      requireSelection="true"/>     </s:HGroup>     <s:BorderContainer id="opLayersContainer" styleName="HeaderStyle"                        width="265" height="180"                        click="opLayersContainer_clickHandler(event)"                        creationComplete="opLayersContainer_creationCompleteHandler(event)"                        includeInLayout="false"                        rollOut="startHideTimer()"                        rollOver="hideTimer.reset()"                        visible="false">         <toc:TOC id="toc"                  left="2" right="2" top="3" bottom="3"/>     </s:BorderContainer>

Comment out

            protected function opLayersContainer_creationCompleteHandler(event:FlexEvent):void             {                 //opLayersContainer.setStyle("backgroundColor", getStyle("contentBackgroundColor"));                 //opLayersContainer.setStyle("skinClass", FlexGlobals.topLevelApplication.getStyle("skinClass"));             }

In the UIManager.as make this code change to what Mehul had

        //My Code Start         var cssStyleDeclarationHeaderStyle:CSSStyleDeclaration =  topLevelStyleManager.getStyleDeclaration(".HeaderStyle");                  if (numberOfStyleColors > 4)         {             cssStyleDeclarationHeaderStyle.setStyle("backgroundColor", headerBackGroundColor);             cssStyleDeclarationHeaderStyle.setStyle("chromeColor", headerBackGroundColor);         }         topLevelStyleManager.setStyleDeclaration(".HeaderStyle", cssStyleDeclarationHeaderStyle, false);         // My Code End

[AshleyPeters]

Success!

Thank you Robert!