nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Modernized Content Topper - Beautiful & Dynamic Titles

Arshia Elahi

Introducing The All-New Content Topper!

Hello Confluence Community 👋

I’m Arshia Elahi, a Software Engineer on the Confluence Create team. I’m excited to announce a new enhancement to Confluence title areas! We’ve redesigned the top third of pages to have a more modern feel with a more expansive and dynamic cover image, larger title emoji, and the ability to center align the page title. Say hello to a more engaging feel to your pages!

Before	After

Now you can center your page title:

Before	After

Now your selected cover image spans the full page:

Before	After

The cover image height adjusts to its width for consistency:

Try our updated cover image selection:

Before	After

Your selected emoji 😎 is now more prominent and responsive on the page:

Before (Smaller, Static Emoji):

No Cover Image	With Cover Image

After (Larger, Dynamic Emoji):

	No Cover Image	With Cover Image
Left-Aligned
Center-Aligned

Check out Content Topper on Presenter Mode:

Before	After

Who is this for and why are we doing it?

We want to give our creators a more customizable experience so that they can make pages more engaging!

How do I use it?

To customize the content topper, you can add a cover photo/emoji/change title alignment by hovering over the page title area and using the floating toolbar that pops up. See below for an example:

Hover over the title section to trigger the toolbar, then click the alignment buttons to change title alignment or choose an emoji 😁
To add a cover image, click the "Header Image" button and query relevant images from Unsplash, or upload your own image:
Select a cover image of your choice to observe the new, full-width header image:
Click the header image again to change cover image 📷
Publish or update your page!
Try presenter mode to view your changes full-screen:

I want to try it! When will I be able to use it?

We are rolling this feature out over the next couple of weeks, starting Monday (02/12/2024). If you don’t see it on your Confluence cloud instance on Monday, it should come to your site soon. We hope you enjoy it!

Please leave any feedback below in the comments. We are continuing to improve the experience and iron out any remaining bugs. Thank you!

Comments

Jacob Zhang_aj3otv

This is so cool! 🤩

Bryan Guffey_7wc7xl

All images show as broken to me

Heather Blue_dmte1w

The images in the before/after tables also do not work for me in either Chrome or Safari, but the gifs do. Looks like some great updates though!

Arshia Elahi

@Heather Blue @Bryan Guffey Are you able to see the images now?

Filip Callewaert_a5ele2

Great Workplace Experience!!

Tomislav Tobijas

Really cool look&feel touches! 🤩

On a first glance, I'm a bit 'worried' of this page emoji overlapping with page header image but this would need some actual testing. Are there any considerations for adding more image tools/functionalities (for example, defining image transparency; including header image)?

Barbara Szczesniak

Does this work with custom emojis? I don't see this in my instance yet, but I'm already making plans to use it!

Heather Blue_dmte1w

@Arshia Elahi yes I can see the pics now. Thanks!

Arshia Elahi

@Tomislav Tobijas Thanks for the feedback! So the emoji currently sits at the bottom of the cover image, as per our design. This is something you can tryout and give us more feedback on when you receive the feature. As for the suggested functionalities you mentioned, that is not something we have planned yet, but I've noted it down as something to discuss internally. Thank you again!

Andy Gladstone

I'm excited about the page title being moved to the center. The current offset default has always bothered me. A page title should be centered, headings should be offset. My universe is now properly aligned.

Arshia Elahi

@Andy Gladstone Yep! I also prefer the centered title, however the option is still there to keep your page left-aligned. You can toggle the alignment with the toolbar buttons.

Amanda Barber

Well this is amazing news!

hannah.ryan

I really like this update; however it is playing a little havoc with some of our old page headers! Can you confirm what the optimal image size is for the new content toppers? Thank you!

Arshia Elahi

@Barbara Szczesniak Yes, it should work with custom emojis as well!

Si_nhxyv6

Looks like there was also a change so that when editing a page, the sidebar still appears on the left: that's so useful!! It was quite frustrating when that used to disappear

Arshia Elahi

@hannah_ryan Thanks for the feedback! Yes, that is something we are aware of. When I have more details, I will let you know!

Trent Murray

Another poorly thought out update. All of my page headers look pixelated and stretched now. Didn't think to make this optional functionality instead of forcing page headers to stretch the width of the browser (which on some resolutions can be 4K!) ?

Edit: The update itself is not bad - sure, some people will love it. But the unilateral decision to force updates across all sites without doing the analysis of existing header image sizes being used is appalling. So glad Atlassian isn't making medical software.

Alexis Marticorena

@Arshia Elahi Just hopping on here to ask (as another user previously did) what the ideal image size should be for custom page banners so I can get our organization's Confluence spaces looking pretty again. Thanks!

Arshia Elahi

Hi @Trent Murray , this is Arshia, the lead engineer for the Content Topper update. I totally understand your frustration, and appreciate you sharing it. We do have a fix we're working through right now, and we'll update things here once finalized!

Lee Schneider

This has been a disruptive change for us, and the implementation is frankly lacking.

The feature should include the option to enable/disable scaling.
The documentation should indicate what the optimum image size is.
Atlassian should acknowledge the requests in the comments regarding image size.

Were customers actually asking for this? If we could revert to the previous functionality for header images we would without hesitation. I encourage anyone who feels the same way to vote for this issue: [CONFCLOUD-77693] Provide option to retain the old header image feature. - Create and track feature requests for Atlassian products.

Arshia Elahi

Hello everyone, we are currently working on the fix and trying to get it out ASAP. I will circle back here once the update is done.

Matthew East

i cant centre the Title or Emoji, am i missing something or is this just waiting for rollout?

Maybe some display options for the headers, like tile or wrap or add a background would placate some of the people who have an issue with this update. Look forward to having a bit more fun with the page design, thanks @Arshia Elahi

Arshia Elahi

@Matthew East Yes, if you currently don't see the floating toolbar, full cover image, & the ability to center your title, you haven't had the update rolled out to you yet.

Arshia Elahi

Hello everyone,

Thank you for your feedback regarding the full-width cover images. We have implemented updates to ensure the aspect ratio of your original header images is maintained across various screen sizes, ranging approximately from 760px width to 4096px width.

To guarantee the best visual experience, we highly recommend uploading high-quality images for future cover images.

Please continue to leave feedback in this thread.

Thank you!

@Hannah.Ryan @Trent Murray @Alexis Marticorena @Lee Schneider

Trent Murray

@Arshia Elahi - how does this solve our problems? In fact, maintaining aspect ratios has just made our pages look even worse as they are now pixelated and twice the height!

In case Atlassian team has forgotten one of its core values - here it is.

The fix that needed to be made was not to maintain aspect ratios, but to give us the ability to only show fixed width headers (the old functionality that was perfectly fine and in fact better, less cluttered and didn't look crap).

Fix this please - it's broken.

Screenshot 2024-03-19 at 9.20.34 AM.png

Alexis Marticorena

For those who are creating custom page headers for your Confluence spaces, I have found that 2000 x 350 px works pretty well. I did have to move some text closer to center, as it was getting cut off, so that size is not totally precise but a good starting point.

Steven Gold

Is this already available? I dont seem to be able to use this, does it require an admin setting?

Steven Kent_sm90mf

It's mid-late March and I still seem to have only Add Emoji | Add header image | Add Status, as I've had for many months. Am I missing something?

Cortlandt _

Can we get centered page titles without also adding the cover image?

Arshia Elahi

@Steven Kent @Steven Gold If you don't have the ability yet to center your title and don't see a full-width cover image, this means you haven't got the update yet. We are currently rolling out the feature to customers.