Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal


  • Give kudos
  • Received
  • Given


  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Confluence with custom header breaks edit preview on

Confluence 5.9.7, using Firefox/IE/Chrome

Default Theme with Sidebar, using a header of any type, even just simply 'x'

Open a Confluence page, edit it, press preview.  Some crazy page is displayed where the Confluence menus are on the left half of the screen at the top with blank underneath, and the preview page appears crammed on the right side of the page.

This happens with any type of custom header applied.  Clearing the header customization makes the problem go away.

I have no customization on the site in terms of CSS/HTML/Stylesheets/Layouts/Themes/Color, etc.  I went through all of the theming options to make sure they were all set to defaults.  I have tried this on several different machines so I don't think it is a problem with my version of browser or any of my browser extensions or caching, etc.

This seems pretty repeatable with any page on our site that I try to edit.  The only thing notable about my site is that I recently upgraded from 3.5 to 5.0, then to 5.4, then 5.9.7.

Some parts of my site we are still using the Documentation theme.  There are no problem with Preview mode there.

5 answers

Confluence CSS hides the sidebar in edit mode, but it appears the custom header and footer have been neglected.

The following CSS code can be added to space or global CSS to handle this.

Styling Confluence with CSS

body.contenteditor #custom-content-header {display:none;}
body.contenteditor #custom-content-footer {display:none;}

I have found a work-around for those who don't have access to the CSS overrides, but have the HTML Macro plugin. In The header/sidebar/footer add the following:


{html}<style>body.contenteditor #custom-content-header {display:none;}</style>{html}


{html}<style>body.contenteditor #custom-content-footer {display:none;}</style>{html}

I will update the JIRAs with this info.

JJ, thank you for workaround. Since we do not have ability to change Confluence with CSS, and HTML Macro plugin is not available, we had to come up with the following workaround:

Edit any page and add Excerpt Macro.

Inside, add HTML Include Macro 

<style type="text/css">
  body.contenteditor #custom-content-header {display:none;}
  body.contenteditor #custom-content-footer {display:none;}  

Save page

Now, edit either footer or header and add the following:


CSS solution worked a treat. Thanks.

Here is some more information.  If after pressing Edit, you do a page reload, then press Preview, the problem does not occur.

I see this on Confluence Cloud with either Chrome or Firefox.

Edit:  Happens on IE and Chrome, too.

Bob, thanks for the reply.  Now I know it probably isn't something leftover from my version jumping.

0 votes
Thomas Schlegel Community Leader Nov 28, 2016

I have reported this problem to Atlassian support. They created an issue for that:


Suggest an answer

Log in or Sign up to answer
Community showcase
Published in Confluence

Announcing Team Calendars in Confluence Data Center

Hi Community! We're thrilled to share that Team Calendars for Confluence is now a built-in feature for Confluence Data Center releases 7.11 and beyond.  A long time favorite,  Team Cale...

198 views 0 6
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you