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

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

Vind meer berichten getagd met

Accepted answers

rscheitlin

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

All comments

AshleyPeters

Success!

Thank you Robert!

rscheitlin

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

I've tried that as well, multiple times.

rscheitlin

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 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.

rscheitlin

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.

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>

rscheitlin

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

rscheitlin

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

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.

rscheitlin

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

rscheitlin

Ashley,

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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