How to create a sticky informational banner in Edit mode

Question

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?

Marinda · Answer

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

Tristan Albach · Answer

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 :-(

Diego_88dj6o · Answer

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: * Place an HTML Macro at the top of the page * Insert the following HTML in it: *

Q U I C K S I L V E R

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!