HeaderController Background Colour

Question

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

ShaningYu · Answer

Got it.  Thanks.

MGSethe · Answer

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

MehulChoksey · Answer

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