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

Zen Header not used on built in pages

I've implemented a custom zen header. And it works great on content pages etc. But the header doesn't appear to show up on some of the built in site pages, like: the dashboard; page not found; search page; etc.

Since the zen header isn't being displayed universally, it is breaking my design. Is there any way to get the zen header to display universally and on all confluence pages?

A content page: it includes the correct Zen Header.

A built in confluence page: Does not include the Zen Header.

My Zen settings:

7 answers

1 accepted

0 votes
Answer accepted

Hi Eric,

Thanks for your quick reply. You should still be able to repeat an image as a background for your header --- but perhaps I am not understanding what you are after. I see from your screenshot that you have a white band that extends to the left edge of your canvas, but ends to the right of the search box. Is that what you are trying to achieve everywhere?

Also, on that search box, that is actually a bug in Zen. We have a fix coming in the next release that should take care of it, so that your repositioned Search box will appear on all pages, including system.

Correct. In the version I have now, I have actually split the header into 4 parts: 1. Left edge 2. Our company logo (on the left of the "Developer Portal" logo, not seen in above screen shots). 3. Developer Portal logo. And 4, the right end cap. This allows me to expand the site as wide as i want without having to maintain a really wide background image for the header (since I'm basically just using a small end cap, and then a repeating 1px for the center and left side). Using the designer background & header, I'm going to have to maintain a single wide image to fill the entire space. It just seems less optimal in the long run.

Oh, and can you give me an idea of when the next release will be out?

Hi Eric,

Make sure that the "Site Master Space" (in the Admin Console's Zen Foundation's Site Settings panel) is pointing to the space where you have your .zen.header defined. Also, I'm assuming your Confluence site theme is set to use Zen Foundation.

Let me know if that doesn't do it!

I've added some screen shots to better show the issue. In the confluence admin, I've got everything pointed to the correct header. And it works as expected for spaces and content pages. The header isn't included on the out of the box confluence pages though. As shown in my screen shot, it is not included on the search results page.

Okay, thanks. While I chew on this, would you do me a favor and try adding this CSS to your brand:

#wrapper #header #zen-header {
height: $zenHeaderHeight;

It's a patch we made to Zen 5.2.7 (previously the header was being cut short). I don't think that's the issue here, but thought I'd eliminate it...

Ok, I added this and nothing changed. I previously had this anyways:

#wrapper #header #zen-header
	height: 100%;

Thanks, I figured you had something in order for it to show on the space pages.

I'm going to have to bring in the the big guns (our graphic designer) for support. :-)

Stay tuned...

Hey Eric,

I'm sure we can get you sorted.

To bring me up to speed, can you tell me *how* you're bringing in that custom header? (with the brand designer? custom CSS? other?) There are a few different approaches for that in Zen, depending upon your objective, so just want to be sure I'm targeting the right thing here.



I am using a .zen.header for some markup and then I'm using a custom css file via the brand designer. When I view source, the markup from the .zen.header file is not being included.

Ah -- OK. So we normally don't use the .zen.header to bring in the background header images ... but instead use that for feature images, or login links, social links, etc. (and we expect those bits to not come in on search, dashboard, etc. -- the .zen.header is really oriented around site content.)

Have you tried using the options under Background & Header in the Brand Designer?

thanks for your patience!

Ahh, ok. I wasn't aware of that "limiation". I can't say I understand the logic of only including the header in "content" pages though. I guess I can rework my css and background images to work without using the .zen.header, but it seems more limiting this way. Using .zen.header allowed me to have a site that could basically expand to any width and still look the way I wanted because the middle section of my .zen.header had a background that could repeat. But using a single background image will impose more of a limiti on me. Another problem though is that the search box also doesn't get moved on non content pages. So I have the search box set to relocate to #header, and it works as expected on content pages, but not on "system" (like search results, dashboard, etc) pages.

Hey Eric,

That search fix will be in Zen 5.2.7, which you can expect within the next four weeks. Thanks!

Suggest an answer

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

What's New in Confluence Cloud – July 2020 Edition

Here’s another edition of “What’s New” this month in Confluence Cloud. Quickly (and more easily) adjust permission settings We know that sometimes the layers of space permissions and page restric...

6,463 views 11 30
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