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; } } }

Theme : add page header

Kahlua_

Hello,

I would like to add a header in the document management pages. By header I mean a new DIV positionned above the table containing the "headers" views (Nuxeo DM logo (Galaxy Theme) / Nuxeo header / nuxeo5 includes).
/> The main idea is to append a "banner" at the top of the page and just after having the nxHeader.

Updated : The new div will contain one image : horizontal logo big size (a quarter of the width I would say) with a embedded text (inside the image with aweson fonts, color and everything Gimp or whichever graphics softwrae allows). I'm currently searching if I can override the theme view. Basically I would have prefere somehting like the nxFooter view : an unique block easily extensible.

If possible I would like to update the galaxy / default theme : it's easier for me to maintain if I stay on the "standard" in place of writing a full theme (which can break in the future).

Any ideas ?
/> thanks
/> François

Find more posts tagged with

Accepted answers

Anahide_Tchertc

Hi,

There are several options:

override this xhtml template that's common to default themes in the application (as Lise explained) using CSS or JavaScript tricks to make it cover the top of the page (as it'll be rendered in a table in the DOM, between the logo and the "includes" fragment). Default themes include the Document Management, Home, Admin Center, DAM views for instance. This template is quite stable (and has been made easier to override partly or completely over the time).
override the default document management theme layout. This layout does not support merging, so as you said, there can be surprises when upgrading. It should not be too hard to upgrade/migrate, but this change will have to be done on each of the themes. There, the custom banner can be placed above the table in the header, in a new section for instance.
another option is to change the main HTML templates used by the theme system, by contributing to the theme extension points. But this will require changing the theme layouts anyway (although with a smaller diff). This may be deprecated in the future, but should be easy to migrate to a newer model. You can search for "section frame" in document-management.xml, and look it up in nxthemes-jsf-contrib.xml to understand where the table comes from, for instance: section-frame.xml.

At some point, the theme layout system may be made closer to the other layout system (handling forms, listings and summary pages), in which case you may need to follow changes around it when maintaining your customization.

Hope this helps

All comments

Lise_Kemen

Hi Kahlua,

Kahlua_

Update done. Thanks

Lise_Kemen

Hi François,

I think the better way to customize the header is to override only the nuxeo_header.xhtml file instead of review all the theme.

The original file is here but you can override it by a new nuxeo_header.xhtml with something like:

<div xmlns:ui="http://java.sun.com/jsf/facelets">
  <!-- here my div with my awesome banner etc... -->
  <ui:decorate template="/incl/nuxeo_header_template.xhtml" />
</div>

This way, you won't modify the theme and the maintenance will be simple. Thanks for the update.

Kahlua_

Thanks I will try that.

Lise_Kemen

Yes but i guess you don't want to hide the tabs and search in Header, right ?

Kahlua_

Something quite not clear for me at this moment.

Anahide_Tchertc

Hi,

There are several options:

override this xhtml template that's common to default themes in the application (as Lise explained) using CSS or JavaScript tricks to make it cover the top of the page (as it'll be rendered in a table in the DOM, between the logo and the "includes" fragment). Default themes include the Document Management, Home, Admin Center, DAM views for instance. This template is quite stable (and has been made easier to override partly or completely over the time).
override the default document management theme layout. This layout does not support merging, so as you said, there can be surprises when upgrading. It should not be too hard to upgrade/migrate, but this change will have to be done on each of the themes. There, the custom banner can be placed above the table in the header, in a new section for instance.
another option is to change the main HTML templates used by the theme system, by contributing to the theme extension points. But this will require changing the theme layouts anyway (although with a smaller diff). This may be deprecated in the future, but should be easy to migrate to a newer model. You can search for "section frame" in document-management.xml, and look it up in nxthemes-jsf-contrib.xml to understand where the table comes from, for instance: section-frame.xml.

Hope this helps

Kahlua_

Thanks for your answers ; both of you. I chose the first option like I said to Lise. I put out the html flow the Nuxeo galaxy Theme logo content (after overriden it) using absolute postionning (0,0). I didin't want to hide the tabs and search so I add a margin top equals to the size of my logo div content. That did the tricks. I think the JS hack will be less effective : perhaps a blink when the div is moved to its new position. The CSS hack seems fine and well supported by all the browsers (and it is basic css features).

So if I well understood Anahide answer I chose the first option. In the future it can easier to have a empty div as pre-header which can be overriden. This div will live outside the table marked with the nxHeader css class and can be overriden. The problem with the layout is : if I add something at the top of the layout tree then all the indexes are shift.

Hope I'm clear.
/> Thanks again 🙂

François

Lise_Kemen

Hi,

Kahlua_

I didn't try because the css hack is OK for the users but I keep your solution in my head (can be useful and will work in my opinion).