Customizing the color of Bamboo banner
Platform Notice: Data Center - This article applies to Atlassian products on the Data Center platform.
Note that this knowledge base article was created for the Data Center version of the product. Data Center knowledge base articles for non-Data Center-specific features may also work for Server versions of the product, however they have not been tested. Support for Server* products ended on February 15th 2024. If you are running a Server product, you can visit the Atlassian Server end of support announcement to review your migration options.
*Except Fisheye and Crucible
This KB is deprecated
This KB article has been deprecated since the introduction of customised headers in Bamboo 7.0.0 via BAM-13311 - Customisable header styling
Please continue using the instructions below in case you are running a Bamboo version earlier than 7.0.
NOTES:
- This is a customization, and as such, it is not included in the Atlassian Support Offerings.
- This was tested in Bamboo 6.10.4. It may not work in other Bamboo versions
- This customization will be removed when you upgrade Bamboo to a later version. You will need to redo the customization.
Open <bamboo-install>/atlassian-bamboo/fragments/decorator/header.ftl and search for the below:
[#function headerItems headerSection activeKey=""] [#local webFragmentsContext = ctx.getWebFragmentsContextMapNoAction(req) /] [#local output] [#list ctx.getDynamicWebItemsForSectionNoAction(headerSection, req) as webItem] [#local webItemKey = adminMenu.getWebFragmentKey(webItem) /] [#local dropdownWebSections = ctx.getWebSectionsForLocationNoAction(webItem.section + '/' + webItemKey, req)! /] [#local triggerText = (webItem.label)!"" /] [#local triggerContents = '' /] [#local styleClass = (webItem.styleClass)! /] [#if styleClass?starts_with('aui-icon')] [#local useIcon = true /] [#local triggerContents]<span class="aui-icon aui-icon-small ${styleClass}">${triggerText?html}</span>[/#local] [#local triggerText = '' /] [#local triggerClass = 'aui-dropdown2-trigger-arrowless' /] [#else] [#local useIcon = false /] [#local triggerClass = styleClass /] [/#if] <li id="system_${webItemKey?replace('.','_')}" [#if activeKey == webItemKey] class="selected"[/#if]>[#t] [#if dropdownWebSections?has_content && dropdownWebSections?size gt 0] ${soy.render("aui.dropdown2.dropdown2", { "trigger": { "id": webItem.id!, "content": triggerContents!'', "text": triggerText!'', "extraClasses": triggerClass!'', "title" : (webItem.label)!'', "showIcon": false }, "menu": { "id": adminMenu.getWebFragmentKey(webItem, true), "content": renderDropdownSections(dropdownWebSections), "extraClasses": "aui-style-default" } })}[#t] [#else] ${renderWebItem(webItem, useIcon)}[#t] [/#if] </li>[#t] [/#list] [/#local] [#return output /] [/#function]Add the following piece of code in a new line after [#local output] (changing #cc0099 by the color of your choice):
<script type="text/javascript"> (function ($) { $(".aui-header").css("background-color", "#cc0099") })(AJS.$); </script>As a result, the function should look like this:
[#function headerItems headerSection activeKey=""] [#local webFragmentsContext = ctx.getWebFragmentsContextMapNoAction(req) /] [#local output] <script type="text/javascript"> (function ($) { $(".aui-header").css("background-color", "#cc0099") })(AJS.$); </script> [#list ctx.getDynamicWebItemsForSectionNoAction(headerSection, req) as webItem] [#local webItemKey = adminMenu.getWebFragmentKey(webItem) /] [#local dropdownWebSections = ctx.getWebSectionsForLocationNoAction(webItem.section + '/' + webItemKey, req)! /] [#local triggerText = (webItem.label)!"" /] [#local triggerContents = '' /] [#local styleClass = (webItem.styleClass)! /] [#if styleClass?starts_with('aui-icon')] [#local useIcon = true /] [#local triggerContents]<span class="aui-icon aui-icon-small ${styleClass}">${triggerText?html}</span>[/#local] [#local triggerText = '' /] [#local triggerClass = 'aui-dropdown2-trigger-arrowless' /] [#else] [#local useIcon = false /] [#local triggerClass = styleClass /] [/#if] <li id="system_${webItemKey?replace('.','_')}" [#if activeKey == webItemKey] class="selected"[/#if]>[#t] [#if dropdownWebSections?has_content && dropdownWebSections?size gt 0] ${soy.render("aui.dropdown2.dropdown2", { "trigger": { "id": webItem.id!, "content": triggerContents!'', "text": triggerText!'', "extraClasses": triggerClass!'', "title" : (webItem.label)!'', "showIcon": false }, "menu": { "id": adminMenu.getWebFragmentKey(webItem, true), "content": renderDropdownSections(dropdownWebSections), "extraClasses": "aui-style-default" } })}[#t] [#else] ${renderWebItem(webItem, useIcon)}[#t] [/#if] </li>[#t] [/#list] [/#local] [#return output /] [/#function]- Restart Bamboo