Nuxeo Online Services

Branding

Updated: September 18, 2017 Page Information Edit on GitHub

There are 3 steps shown by 3 tabs to brand your application:

  • The Main Pagestab will let you manage the global rendering of your application
  • The Login Page tab will let you manage the login page rendering
  • The Custom CSSwill let you define your CSS rules that will be applied on each page of Nuxeo

Main Pages Tab

The Main Pages tab is where you will specify the main elements that define a branding: the logo, the colors and the font used by the default view in Nuxeo.

Changing the Logo displayed on Header

BeforeStudio ConfigurationAfter

BeforeStudio ConfigurationAfter

Additional Branding Elements

The additional branding elements section contains all the customizable elements relative to the page contents: links colors, font family used and color of backgrounds and buttons.

Studio ConfigurationResult

Login Page Tab

This tab will let you manage the customization of the login page view.

Common Changes

Basic Studio ConfigurationSteps

  1. Select a background video or a background image. Be careful not to use an image too heavy to a quick display for the users.
  2. Define the options for the video or the image, for example to mute the video or the position (in pixel or position) of the image, if you know that it will be large enough for the huge screen resolutions.
  3. Or make the background cover all the screen (with CSS3 / recent browsers).
  4. Pick a color that will be displayed if the background image is too small and not covering all the screen.

That's it!

Most of our customers apply the following strategies for their login page background image:

  • A picture covering all the screen. This is the strategy chosen by Nuxeo.
  • Or a logo with transparency as the background image, aligned on the top left (Horizontal alignment = top, Vertical alignment = left) + a background color.

With a web designer's help, you can have many other possibilities.

Additional Options

Login page layoutStudio ConfigurationRole
To let you customize the login screen completely, the news and footer can be removed.
If you have a simple color used as the background image in the login page, you can add a color to the login box and to the button. This option must be used carefully: don't use heavy patterns or things that will make the readability difficult or hamper the interpretation. The login box style must stay very simple and light to keep the login action as a user-friendly step.

CSS Editor Tab

The CSS Editor is dedicated to web designers who know CSS and its syntax. It's the place to declare your new CSS rules or override existing rules that will be used into the Nuxeo main tabs: Home, Document Management and Admin Center.

Have a look at the Nuxeo UI Style Guide to see all the existing CSS rules used by default in your platform, and understand more about readability, usability, layout design, and user experience.

Declaring a New CSS Class and Its Rules

You can add style classes in your widgets in forms, content views, and tab layout to manage the rendering of your elements.

Let's add a background color on a widget's container:

1. Widget Editor 2. CSS Editor3. Result
Define a class in the widget editor. Declare your blue background in the CSS Editor. Enjoy your blue container.

Overriding an Existing Rule

You want to change an existing style to fit your needs? In addition to the Nuxeo UI Style Guide that explains the default set of CSS existing rules, you will need to use a browser's web inspector to understand what to override.

Let's display the main title of pages in pink:

1. Inspect the existing style2. Declare your new rule3. See the result
The pink arrows show the main title at the top of the page, the code and its CSS declaration are at the bottom, in the web inspector. Seeing this, you will need to override the default.CSS**** h1 rule that contains the color declaration. You can use the parent CSS classes, underlined here in green, to have a stronger CSS selector than the default one. Your rule contains three selectors: .content, .mainFragment and h1. That way, you're sure that your new style will be stronger than the original style declared with only two selectors: default.CSS*** and h1. Your title is pink now. You can see that your new rule is displayed at the top of the default one, and the original black color value is striked, so not used anymore.

Specifying the Default Branding, Disabling a Theme Branding

Specifying a Default Branding

Create a new branding implies that it will be the default branding used in your application. The checkbox displayed under the Common tab will be checked by default. If you created several brandings, be sure that only one of them is checked. Your branding will be used in your application everywhere except if a local theme configuration is set.

Disabling a Theme Branding

If you don't want to use your branding during a test you can disable your default branding without deleting it.

Just tick the Disable theme branding option above the tabs. The tabs and their content will be displayed under a gray overlay.

7 days ago GitHub Fix formatting
a year ago Solen Guitter 72
2 years ago Manon Lumeau 71
2 years ago Manon Lumeau 70
2 years ago Manon Lumeau 69
2 years ago Manon Lumeau 68 | Formatting
2 years ago Manon Lumeau 67 | Formatting
2 years ago Manon Lumeau 66 | Formatting
2 years ago Manon Lumeau 65
3 years ago Manon Lumeau 64
3 years ago Manon Lumeau 63
3 years ago Manon Lumeau 62
3 years ago Manon Lumeau 61
3 years ago Manon Lumeau 60
3 years ago Manon Lumeau 59
3 years ago Manon Lumeau 58
3 years ago Manon Lumeau 57
3 years ago Manon Lumeau 56
3 years ago Manon Lumeau 55
3 years ago Manon Lumeau 54
3 years ago Manon Lumeau 53
3 years ago Manon Lumeau 52
3 years ago Manon Lumeau 51
3 years ago Manon Lumeau 50
3 years ago Manon Lumeau 49
3 years ago Manon Lumeau 48
3 years ago Manon Lumeau 47
3 years ago Manon Lumeau 46
3 years ago Manon Lumeau 45
3 years ago Manon Lumeau 44
4 years ago Solen Guitter 43
4 years ago Solen Guitter 42 | Formatting
4 years ago Lise Kemen 41
4 years ago Lise Kemen 40
4 years ago Lise Kemen 39
4 years ago Lise Kemen 38
4 years ago Lise Kemen 37
4 years ago Lise Kemen 36
4 years ago Lise Kemen 35
4 years ago Lise Kemen 34
4 years ago Lise Kemen 33
4 years ago Lise Kemen 32
4 years ago Lise Kemen 31
4 years ago Lise Kemen 30
4 years ago Lise Kemen 29
4 years ago Lise Kemen 28
4 years ago Lise Kemen 27
4 years ago Lise Kemen 26
4 years ago Lise Kemen 25
4 years ago Lise Kemen 24
4 years ago Solen Guitter 23 | Removed related topics from TOC
4 years ago Lise Kemen 22
4 years ago Lise Kemen 21
4 years ago Solen Guitter 20 | Formatting and added TOC
5 years ago jballina 19
5 years ago jballina 18
5 years ago Benjamin Jalon 17
5 years ago Benjamin Jalon 15
5 years ago Benjamin Jalon 16
5 years ago Benjamin Jalon 14
5 years ago Benjamin Jalon 13
5 years ago Benjamin Jalon 12
5 years ago Benjamin Jalon 11
5 years ago Benjamin Jalon 10
5 years ago Benjamin Jalon 9
5 years ago Benjamin Jalon 8
5 years ago Benjamin Jalon 7
5 years ago Benjamin Jalon 6
5 years ago Benjamin Jalon 4
5 years ago Benjamin Jalon 5
5 years ago Benjamin Jalon 2
5 years ago Benjamin Jalon 3
5 years ago Benjamin Jalon 1
History: Created by Benjamin Jalon