topic Re: CSS Files and Skins in ArcGIS Viewer for Flex Questions

CSS Files and Skins

AshleyPeters — Mon, 09 Jul 2012 17:27:45 GMT

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

Re: CSS Files and Skins

RobertScheitlin__GISP — Mon, 09 Jul 2012 17:42:07 GMT

Ashley,

Look in the UIManager.as and that will shed a lot of light on the subject.

Re: CSS Files and Skins

AshleyPeters — Mon, 09 Jul 2012 18:51:25 GMT

That helps some, but probably confuses me more. I have absolutely no scripting background. But, I'll look around and see what I come up with.

Thanks!

Re: CSS Files and Skins

RobertScheitlin__GISP — Mon, 09 Jul 2012 18:55:16 GMT

Ashley,

Just do a search for "contentBackgroundColor" and you will find that it get set from the backgroundColor var and that comes from the configData.styleColors[1] which means the second color listed in the main config.xml:

<colors>0xFFFFFF,0x333333,0x101010,0x000000,0xFFD700</colors>

Re: CSS Files and Skins

AshleyPeters — Mon, 09 Jul 2012 18:59:26 GMT

That's easy enough. Some of the changes I need to make require me to go deeper than that though. My biggest issue is I need the color on the header and the widgets to be different. I'm hoping to make the header background black and have the widget 'title bar' be red with everything below it tan. From some of the different threads I've read, I think I will have to add a couple of other color options.

Re: CSS Files and Skins

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:08:40 GMT

Ashley,

for the widget you would look in the WidgetTemplateSkin.mxml

and find line like this:

<!-- the widget template wireframe -->
    <s:Group id="widgetFrame"
             left="0" right="0" top="0" bottom="0"
             alpha.closed="0">
        <s:Rect width="100%" height="100%"
                radiusX="5"
                radiusY="5">
            <s:fill>
                <s:SolidColor id="contentBackground"
                              alpha="{getStyle('contentBackgroundAlpha')}"
                              alpha.minimized="0.5"
                              color="{getStyle('contentBackgroundColor')}"/>
            </s:fill>
            <s:stroke>
                <s:SolidColorStroke id="border"
                                    alpha.minimized="0.5"
                                    color="{getStyle('borderColor')}"/>
            </s:stroke>
        </s:Rect>

Re: CSS Files and Skins

AshleyPeters — Wed, 11 Jul 2012 14:48:54 GMT

Thanks Robert for getting me pointed in the right direction.

I had found this thread and stepped through the instructions in it. I feel like I have a little better understanding with how the different pieces work together.

To get the color differentiation I'm looking for on the widgets, one color across the top for the title background and another for the content background, will I need to add in 2 more colors in the config.xml and make changes to my defaults.css and widget skin?

Also, I wanted the map switcher widget to be the same color as the header. I tried changing the calls in the .mxml file to the same color as the header but that didn't work. Will that be controlled by the widget skin too?

Thanks for your help!

Ashley

Re: CSS Files and Skins

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:08:43 GMT

Ashley,

Yes you will have to add the 2 new colors if they are not ones that have already been specified. The MapSwitcherWidget is a widget but it does not use the WidgetTemplate and thus does not use the widget template skin. You should be able to change it by changing:

    <s:BorderContainer id="basemapsContainer"
                       backgroundColor="{getStyle('contentBackgroundColor')}"

Don't forget to click the Mark as answer check on this post and to click the top arrow (promote).
Follow the steps as shown in the below graphic:

Re: CSS Files and Skins

AshleyPeters — Sat, 11 Dec 2021 06:08:45 GMT

Thanks Robert!

I don't have that particular call in my BorderContainer. I'm still using 2.5. Would that make any difference? Here's my code:

<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">
        <toc:TOC id="toc"
                 left="2" right="2" top="3" bottom="3"/>
    </s:BorderContainer>

Re: CSS Files and Skins

RobertScheitlin__GISP — Wed, 11 Jul 2012 17:18:57 GMT

Ashley,

Yes the versions make a difference my code was from 3.0, but that does not really matter just add the backgroundColor attribute then.

Re: CSS Files and Skins

AshleyPeters — Sat, 11 Dec 2021 06:08:48 GMT

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.

Re: CSS Files and Skins

RobertScheitlin__GISP — Wed, 11 Jul 2012 18:15:14 GMT

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.

Re: CSS Files and Skins

AshleyPeters — Wed, 11 Jul 2012 18:17:42 GMT

I've tried that as well, multiple times.

Re: CSS Files and Skins

RobertScheitlin__GISP — Wed, 11 Jul 2012 18:59:17 GMT

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

Re: CSS Files and Skins

AshleyPeters — Wed, 11 Jul 2012 19:13:13 GMT

Success!

Thank you Robert!