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

[RobertScheitlin__GISP]

Ashley,

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

[AshleyPeters]

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!

[RobertScheitlin__GISP]

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>

[AshleyPeters]

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.

[RobertScheitlin__GISP]

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>

[AshleyPeters]

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

[RobertScheitlin__GISP]

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:

[AshleyPeters]

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>

[RobertScheitlin__GISP]

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.