Customizability is one of the core aspects of the Nuxeo Platform. Like most other features, the User Interface can be customized too to get the look and functionality you want your end users to have. To make things quick and easy the Nuxeo Platform provides a lot of predefined materials for customizing the UI.
The first thing you should know is that there is a “Nuxeo UI Style Guide” to help you easily make UI changes that aligns with the Nuxeo Platform branding style. Let’s take a look at some examples that will demonstrate how to make certain custom changes to your default UI.
Change the Display of Widgets by Using Predefined Classes
The Nuxeo Platform provides predefined styles that you can easily reuse. For example, in the “Messages” part of the Nuxeo UI Style Guide you have this list of classes:
Feedback messages style classes
You can use any of these classes to create your own widget display. In this example, we will take the “infoFeedback” and use it when creating a new search filter.
In Nuxeo Studio, you can create your new search filter by using a Content View and adding, for instance, the built-in widget “Container” which also contains the built-in widget “Full Text”. Edit the layout widget for the container and add “infoFeedback” for the Header Style class. Do the same for every search criteria that you want to add. Here’s what you will see:
Adding infoFeedback header style class
After adding infoFeedback header style class
You can also use the predefined class “coloredWidget” which is the default in every Summary View. So, instead of changing the header style class just put coloredWidget in the Style class:
Adding coloredWidget Style class
After adding coloredWidget Style class
Another example is to use this coloredWidget class in a creation layout:
Adding an information message on your creation layout
Change the Color of Information in a Content View Based on Lifecycle State
When displaying a folder containing a list of documents you may be interested in highlighting documents that are in different stages of the lifecycle, such as, “approved” state, “project” state, etc.
Coloring by lifecycle state
Here’s how you can manage this change.
- In the CSS, define one style per lifecycle state (we use the default lifecycle states “project” and “approved”)
.project { color: blue; } .approved { color: green; }
- Then in your Content View, edit the widget you want to color and fill the “Style class” property with: #{row.data.currentLifeCycleState}
Fill the style class
And that’s it!
Now I will show you what you can do if you are interested in using or creating your own CSS styles.
Change the CSS of the Default Summary Tab
Let’s take a simple example. You might have noticed that there are blue containers (coloredWidget class) in the default summary view for metadata and content (starting from the Nuxeo Platform 6.0).
Default View
We will try to customize the Summary View by setting the background color to none.
Customized View
All we have to change in the CSS is this: .tabsContent .summary .content_block, .tabsContent .summary .metadata_block { background: none repeat scroll 0 0 #fff; border: 1px solid #ddd; border-radius: 3px; box-shadow: none;}
As you can see, there are a lot of options you can play around with to get the look you want. So, go ahead and have fun creating your own custom designs for the Nuxeo Platform UI!