How to create a sticky informational banner in Edit mode

[Tristan Albach]

Using a couple of the "Content Formatting for Confluence" by Adaptavist macros I was able to create an informational banner for a page. I did this by adding a "Div" macro with ID = "sticktotop." Inside the Div macro, I added a standard "Info" macro with my information inside of that. Below the Div macro, I added a "CSS Stylesheet" macro and wrote this simple markup inside of it:

#sticktotop {
	position: sticky;
	top: 0; 
}

Working with an Adaptavist developer, we discovered that this only works when the page only has one section in its layout (and you can't use the standard "section" macro at all), because this seems to override the custom stylesheet. Still, this allowed me to have a sticky informational macro on the page that looked pretty great.

The problem is the customer really wants a similar informational banner in Edit mode. Also, ideally, there wouldn't be a restriction of only having a single section, because the page in question is designed with multiple. The "Div" and "CSS Stylesheet" macros weren't designed to be applied in Edit mode. Does anybody have any ideas on how to make this happen in Edit mode without the section limitation?

[Diego]

Hello Tristan!
This might be faster to achieve than it seems. Confluence has Custom HTML section for this kind of stuff. You can find it here:

1. Click Cog Icon>General Configuration
2. Search for Customm HTML
3. You you have three sections
    - At end of the HEAD
    - At beginning of the BODY
    - At end of the BODY

We want to insert your banner content in the At beginning of the BODY text box. And example of banner is this

<!-- Message Banner -->
<div style="background-color: yellow; border: 2px solid red; margin: 4px; padding: 2px; font-weight: bold; text-align: center;">
Q U I C K S I L V E R 
</div>

We also have an article on this:

How to add a site-wide banner

This banner will be visible Site Wide and also in Edit Mode! Here are a few screenshots of the results:

Further, you can achieve something similar for a single page using the Source Editor:

Confluence Source Editor

With this, you can edit the source of the page directly. You could insert the same <div> shown above right before everything in the page. The catch is that the banner will be editable:

1. Install the Source Editor
2. Go to the desired page
3. Enter edit mode
4. Click the < > symbol in the toolbar
5. Insert the <div> content
6. Publish the page

Some screenshots of the results:

Let us know if this helps your case!

[Tristan Albach]

Hi Diego,

I really appreciate your time! We definitely do not want a site-wide banner, it would just apply to specific pages. I applied the banner to a specific page and it worked as advertised. However, the banner still disappears when scrolling down the page. Is it possible to make it sticky even when there's more than one section on the page?

[Diego]

Hello Hello Tristan, thanks for the wait!

Well, it did not came to mind at first, but you can use our HTML Macro for that!

HTML Macro documentation

But keep in mind this pretty important warning:

HTML macros are disabled by default

The HTML macro will only be available if it has been enabled by an administrator. Enabling these macros can make your Confluence site vulnerable to cross-site scripting attacks.

Well, What I have done is:

1. Place an HTML Macro at the top of the page
2. Insert the following HTML in it:

3. <div style="background-color: yellow;font-weight: bold;text-align: center; position: fixed; width: 95%; height: 100px">Q U I C K S I L V E R</div>

What did the trick here is the position css parameter. This will keep the banner visible even when you scroll down the page! I tried making it the most "visually pleasant" as possible, considering the closed sidebar. You may want to style it differently but, the position parameter is what you should keep.

Let me know if this is better!

[Tristan Albach]

Hello again,

Yes, I created something similar in my previous efforts. Unfortunately, this banner doesn't appear in edit mode. We were hoping for a way to create a banner for an individual page that appears in edit mode and also stays visible when you scroll down the page. I tried pasting the code you provided in the source code in edit mode and it worked at first. I had a banner in edit mode that was scrolling with the page. However, then I clicked on "Update" and went back into edit mode and the banner no longer scrolled in edit mode. I looked at the source code and the "position: fixed" language was automatically removed :-(

[Marinda]

@Diego Does anybody know why the HTML editor automatically removes the "position: fixed" when we press "Publish"? I am having this same problem. It worked in Edit mode but as soon as I publish the page it doesn't work anymore.