Custom HTML Banner in Confluence Server making causing [Update] button (div) to be hidden
Asked by Darryl Lee:

Hi - Confluence Server 7.13.0. I've been inserting announcement banners on the site just like always: [How to add a site-wide banner](https://confluence.atlassian.com/confkb/how-to-add-a-site-wide-banner-165609599.html)

Users noticed something odd last time around. When editing a page, the div for the banner appears to be causing the div for "savebar-container" (which contains the \[Update\] and \[Close\] buttons) to not show up.

Scrolling down with a mouse or touchpad can make it appear, but it's an annoyance.

Any ideas? I did try adding [extra height to a custom footer](https://confluence.atlassian.com/confkb/how-to-add-extra-height-to-a-custom-footer-221449777.html) but that didn't seem to help.

I'm thinking there's some CSS fix for this, but it's certainly beyond me.


Answers:
author: Rilwan Ahmed
body: [@Darryl Lee](/t5/user/viewprofilepage/user-id/1365322) ,

Please try this

```
Custom HTML  --> At beginning of the BODY<div class="aui-message warning" style="text-align:center">Your Message Here</div>
```

comments: author: Darryl Lee
body: Thanks yes as I mentioned below,

Barbara @ Atlassian Support figured out that I had my banner in the wrong place "At the end of the HEAD" instead of "At beginning of the BODY".

Once I moved my banner to the right place (which is where the documentation **says** to put it. DOH!), it worked just fine!


author: Darryl Lee
body: Barbara @ Atlassian Support figured it out for me!

I had my banner in the wrong place "At the end of the HEAD" instead of "At beginning of the BODY".

They figured that out without me telling them I had it in the wrong place. Amazing!

Once I moved my banner to the right place (which is where the documentation **says** to put it. DOH!), it worked just fine!

comments: author: Rilwan Ahmed
body: [@Darryl Lee](/t5/user/viewprofilepage/user-id/1365322)

I had given my suggestion. Seems you did not see it in my earlier comment.


author: Darryl Lee
body: Ah yes didn't see that. Thanks.


author: Bill Bailey
body: If you are using what was suggested in the article:

    <div class="aui-message closeable">

I would suggest adding a custom class to the div tag to allow you to control the format that way. You may have a conflict between your styling and the default aui-message.

I also suggest NOT using inline sytling, but adding the code to your site's CSS.


author: Pramodh M
body: Hi [@Darryl Lee](/t5/user/viewprofilepage/user-id/1365322)

How about we use announcement banner in MARKDOWN Format?

Or format the announcement banner as given in the doc below

<https://confluence.atlassian.com/confkb/how-to-add-a-site-wide-banner-165609599.html>

They have also mentioned in the note about scrolling down to see the footer!!

Let me know what you think about it?

Thanks,

Pramodh

comments: author: Darryl Lee
body: Heh, no Markdown does not work for Banners.![Screen Shot 2022-01-26 at 8.16.42 PM.png](https://community.atlassian.com/t5/image/serverpage/image-id/180136iC57FC8BD34CEA187/image-size/large?v=v2&px=999 "Screen Shot 2022-01-26 at 8.16.42 PM.png")


author: Pramodh M
body: Oops My bad, but I did a testing on the version exact to your version and I did not get any error

Try adding it to the body

    <!-- Message Banner --><div style="background-color: yellow; border: 2px solid red; margin: 4px; padding: 2px; font-weight: bold; text-align: center;">Your important message...</div>

![Banner.png](https://community.atlassian.com/t5/image/serverpage/image-id/180360iEBEBC3B25BDF00E2/image-size/large?v=v2&px=999 "Banner.png")

Thanks


author: Darryl Lee
body: Hi thanks [@Pram](/t5/user/viewprofilepage/user-id/1801845) - can you watch my video below:  
<https://photos.app.goo.gl/LtCqMHPbfBYMG2nA6>

If you edit an existing page with enough content that you need to scroll through it, does the "Savebar" stay pinned at the bottom of the window?


author: Fabian Lim
body: Hi [@Darryl Lee](/t5/user/viewprofilepage/user-id/1365322)

Can you share your banner with the formatting to see if we can reproduce it?

Cheers

comments: author: Darryl Lee
body: Oooh, good idea. Here was my banner:

```
<!-- Message Banner -->
<div style="background-color: yellow; border: 2px solid red; margin: 4px; padding: 2px; font-weight: bold; text-align: center;">
CONFLUENCE STAGING
</div>
<style type="text/css">
#com-atlassian-confluence #main {
padding-bottom: 200px;
}
</style>
```

So that's pretty much straight out of the [the Atlassian docs](https://confluence.atlassian.com/confkb/how-to-add-a-site-wide-banner-165609599.html) with the [addition about footer size.](https://confluence.atlassian.com/confkb/how-to-add-extra-height-to-a-custom-footer-221449777.html)

I wonder if it might be browser-specific. I'm seeing it in the Chrome variant Brave, and I believe my users were also using Chrome.


author: Darryl Lee
body: Here's what a Create Page looks like with the banner above vs without, before I touch the mouse to scroll.

WITH:![banner.png](https://community.atlassian.com/t5/image/serverpage/image-id/180139i8D4C8A683D37B6C6/image-size/large?v=v2&px=999 "banner.png")

WITHOUT:![nobanner.png](https://community.atlassian.com/t5/image/serverpage/image-id/180138i1B39E25B3068B799/image-size/large?v=v2&px=999 "nobanner.png")


author: Fabian Lim
body: Hi [@Darryl Lee](/t5/user/viewprofilepage/user-id/1365322)

Not sure what you are trying to accomplish with the footer padding. I don't think it belongs in the announcement banner.

We use the following and we have no issues in our banner and looks cleaner.

```
<div class="aui-message warning">
<p class="title">
<span class="aui-icon icon-warning"></span>
<strong>Jira Maintenance:</strong> We are currently running performance tests. DO NOT Change any configurations!.
</div>

```


author: Darryl Lee
body: Ah, that's a nice styling, thanks. The footer padding was an attempt to try to address the issue where the savebar doesn't show up unless you scroll the mouse, and when editing a page with a lot of content, sometimes you have to scroll multiple times to somehow force it to load.

Is your banner on **Confluence**? It mentions Jira.

If you edit a page when you have a banner in Confluence, do you see the **savebar** at the bottom, without scrolling?

This is especially an issue with pages with a lot of content. Without a banner, that **savebar**stays at the bottom of the window, always visible.

When the banner is set, the **savebar** only shows up when you scroll all the way to the bottom of the editing window.

I will try to record a video to demonstrate.


author: Darryl Lee
body: Here's a quick video I took demonstrating the issue. I think the right terminology is that the Savebar is usually "pinned" to the bottom of the window (as a "fixed footer"), and the banner div is somehow breaking that.

<https://photos.app.goo.gl/LtCqMHPbfBYMG2nA6>


Tags: confluence-server

server