Set background color for Jira Announcement Banner

[stuartu]

I have cloned our Jira Production environment, and want to place an announcement banner with a red background.

Can anyone advise the HTML text I would use to do this.

Thanks in advance.

[Saul Perdomo]

This works for me in JIRA 6.2:

<!-- Message Banner -->
<div style="background-color: linen; border: 3px solid darkred; margin: 4px; padding: 2px; font-weight: bold; text-align: center;">
Maintenance Notification: This Jira environment will be offline today Wed Jan 21 from 12:15 to 12:30 EST for a memory upgrade.
</div>

[nikhil khedlekar]

Saul - this is great .. works really well !

[Balvant Gmail]

Thanks works greatly

[Silvia Goljerova]

I'm trying to add it in announcements without any luck?  Is there a step I'm missing?

[Paul S]

Thank you for this, it worked perfectly! Greatly appreciated. 

[Dieter]

Place the following code in the announcement banner

<script>
(function($){
   $(document).ready(function(){
      $(".alertHeader").css("background-color","red");
   });  
})(AJS.$);
</script>

[stuartu]

Brilliant! Thank you, that works.

[JamieA]

Probably easier just to place the text in a <div style="..."> isn't it? Bit easier to understand and make changes.

[Jobin Kuruvilla [Adaptavist]]

I do this:

<div class="global-warning" width="100%" align="center">Text</div>

[Dieter]

Well depends, if one already does other DOM juggling in the ready handler that single line doesn't matter anymore ... If just used for the turning the banner red it's somehow oversized. nevertheless, i have discovered jquery for me and i love it :)

[Sagar Mahajan]

If you want to refer the document in the announcement banner you can use the below one

<div style="font-weight: bold; text-align:center; color:green;">Yay! your jira is upgraded to 8.13.1, what's new? 
<a style="color:blue;"href="https://confluence.atlassian.com/jiracore/jira-8-13-long-term-support-release-change-log-1018788437.html">know more</a></div>

[Rishikesh Dugyala]

How can we update the banner with timeout?

something like below

<!-- Message Banner -->
<div style="background-color: linen; border: 3px solid darkred; margin: 4px; padding: 2px; font-weight: bold; text-align: center;">Testing</div>
<script>
(function($){
$(document).ready(function(){
$(".alertHeader").timeout:1000;
});
})(AJS.$);
</script>