HeaderController Background Colour

[ShannakaBeveridge]

Hi,

Edit: I found the where style colors are defined. For anyone else looking it's under UIManager.as.

I would like to make the header a different colour to the rest of the content, but I want to be able to configure this still in the config.xml.

<mx:HBox id="headerContent"
                 width="100%" height="{headerGroup.height - 45}"
                 backgroundAlpha="{getStyle('contentBackgroundAlpha')}"
                 backgroundColor="{getStyle('contentBackgroundColor')}"

I would like to be able to add an extra colour in the config.xml for headerBackgroundColor and replace the reference to contentBackgroundColor in the code above with this. How can I add an extra colour to the config.xml? Where is this defined?

Cheers,

Shannaka

[MehulChoksey]

Since this change is for the Header controller only, I suggest making changes to headercontroller widget only. but
See Coordinates widget source.

If you still want it through main config file, you will have to make following changes:
You will have to perform following:
In defaults.css,
add:

.HeaderStyle
{
    background-color: #FFFF00; // default Color 
}

In config.xml,
add the seventh color e.g. 0xFFFF00 (yellow) first six are used elsewhere.
e.g.

<style>
         <colors>0x4C2600,0xFFEDB8,0xB2AD81,0x6F6750,0x4C2600,0xFFFFFF,0xFFFF00</colors>
        <alpha>0.8</alpha>
    </style>

Below is the Code from UIManager.as that you will need to modify.
Add the lines that has comment "My Code" or "My Code Start"

.
.
.

        var titleFontName:String = (configData.titleFont.name != "") ? configData.titleFont.name : defaultFontName;
        var titleFontSize:int = (configData.titleFont.size != 0) ? configData.titleFont.size : 20;
        var fontName:String = (configData.font.name != "") ? configData.font.name : defaultFontName;
        var fontSize:int = (configData.font.size != 0) ? configData.font.size : defaultFontSize;
        
        var headerBackGroundColor:uint; //My Code
        
        styleAlpha = configData.styleAlpha;

        if (numberOfStyleColors > 4)
        {
            textColor = configData.styleColors[0];
            backgroundColor = configData.styleColors[1];
            rolloverColor = configData.styleColors[2];
            selectionColor = configData.styleColors[3];
            titleColor = configData.styleColors[4];
            applicationBackgroundColor = (configData.styleColors[5] != null) ? configData.styleColors[5] : 0xFFFFFF;
            
            headerBackGroundColor = configData.styleColors[6]; //My Code
        }

       
.
.
.

        cssStyleDeclarationBannerTitle.setStyle("fontFamily", titleFontName);

        topLevelStyleManager.setStyleDeclaration(".BannerTitle", cssStyleDeclarationBannerTitle, false);

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

      

Hope this helps.

[MGSethe]

Since this change is for the Header controller only, I suggest making changes to headercontroller widget only. but
See Coordinates widget source.

If you still want it through main config file, you will have to make following changes:
You will have to perform following:
In defaults.css,
add:

.HeaderStyle
{
    background-color: #FFFF00; // default Color 
}

In config.xml,
add the seventh color e.g. 0xFFFF00 (yellow) first six are used elsewhere.
e.g.

<style>
         <colors>0x4C2600,0xFFEDB8,0xB2AD81,0x6F6750,0x4C2600,0xFFFFFF,0xFFFF00</colors>
        <alpha>0.8</alpha>
    </style>

Below is the Code from UIManager.as that you will need to modify.
Add the lines that has comment "My Code" or "My Code Start"

.
.
.

        var titleFontName:String = (configData.titleFont.name != "") ? configData.titleFont.name : defaultFontName;
        var titleFontSize:int = (configData.titleFont.size != 0) ? configData.titleFont.size : 20;
        var fontName:String = (configData.font.name != "") ? configData.font.name : defaultFontName;
        var fontSize:int = (configData.font.size != 0) ? configData.font.size : defaultFontSize;
        
        var headerBackGroundColor:uint; //My Code
        
        styleAlpha = configData.styleAlpha;

        if (numberOfStyleColors > 4)
        {
            textColor = configData.styleColors[0];
            backgroundColor = configData.styleColors[1];
            rolloverColor = configData.styleColors[2];
            selectionColor = configData.styleColors[3];
            titleColor = configData.styleColors[4];
            applicationBackgroundColor = (configData.styleColors[5] != null) ? configData.styleColors[5] : 0xFFFFFF;
            
            headerBackGroundColor = configData.styleColors[6]; //My Code
        }

       
.
.
.

        cssStyleDeclarationBannerTitle.setStyle("fontFamily", titleFontName);

        topLevelStyleManager.setStyleDeclaration(".BannerTitle", cssStyleDeclarationBannerTitle, false);

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

      

Hope this helps.

Hi , I have managed to follow this, an i got the background color changed.
How do i embed a background image?

I have added the following on the default.css " background-image: Embed(source="assets/images/Banneredited.png");" for the headerstyle but i am not getting it right.

Please help.

[ShaningYu]

Got it.  Thanks.