Welcome to this article where we will discover how your Nudgis platform can be branded to reflect your visual identity.
Nudgis has customisation features that allow you, among other things, to apply your company's graphic charter. The first part will show you how to adjust the site's home page, then we will have a look at the global customisation settings, and finally, we will see how you can personnalise the video player appearence.
To access these settings, your user account must have the global "Can edit site appearance" permission
Table of content
Home page
Since version 14, the new Nudgis home page is enabled by default. To discover it, please consult our dedicated article.
Graphic customisation
The global graphic customisation settings can be found in Menu > Administration > Site settings > Customise appearance.
The first tab allows you to set the platform colors. You will notice an insert on the right-hand side of the page. This shows the changes you make live :
The changes are also visible on the rest of the appearance configuration page but will only be applied when you save your changes
Colors
First we will look at how the color buttons work. They are identical for all the color modification parameters.
Each parameter is made up of two blocks : the active color (1) and the default value (2).
To modify the active color, you can enter a code in the text field or click on the corresponding block and select a shade from the choices offered.
To return to the default value, simply click on the corresponding color block.
Remember to save your changes so that they can be applied.
Let's take a look at the signification of each element.
- Theme : You can choose between a dark or light theme to start your settings, which was only possible in prior versions (< 12.1) by using custom CSS. The site theme is applied to all users
- Primary color : Changes the color of the main Nudgis buttons, a sample of which is shown below (in blue)
- Main contrast color : Changes the color of the text on the main buttons, shown below in white
- Primary text color : Changes the color of links and icons (here in blue)
- Secondary color : Changes the color of the information messages, the save button and the storage indicator used by the user (in green below)
- Secondary contrast color : Changes the color of the text in the elements in the previous section (in black here)
- Secondary text color : Changes the color of the media restore button in the recycle bin
- Error color : Changes the color of errors, in particular the transcoding progress bar when transcoding fails (in red below)
- Contrast error color : Changes the color of error text when they are highlighted with the error color (in black below)
- Error text color : Color of the error or warning text when no highlighting is present. It can be found on the Delete button in the media actions menu when browsing the catalogue, for example
Logo
This tab lets you modify the site logo and favicon by replacing the existing ones. Import your image (the recommended format is PNG), which should be no more than 300 pixels wide and 55 pixels high.
Once you have added your image file, the preview won't work immediately. You will need to save the changes for the new logo to be displayed
To return to the default logo, tick the "Delete current image" box and save.
You can also change the size of the logo (from three choices: small, standard and big), which will also affect the size of the page header.
Fonts
You can use different types of font, picking from your web browser's font library. The default fonts are Lato, Arial and Sans-Serif.
Advanced (CSS)
On this tab you can add files such as images or fonts that you can use in your custom CSS.
In the Override style section, you can add custom CSS code that will allow you to adjust elements that are not available in the menus seen above.
UbiCast player colors
The last tab on the appearance settings page concerns the Nudgis player. We will look at the different elements that can be modified below.
To better visualise the changes, we will use the color orange for the screenshots in this section.
- Player background color : this is the background of your video, the one that will be visible between sources in Dynamic RichMedia mode
- Controls background color : This setting changes the color of the control bar (at the bottom of the player) and the play button
- Control hover color : This is the color of the playback control buttons when hovered over with the mouse cursor
- Control font color : this is the color of the control icons and the time indicator
- Scroll bar color : This is the playback progress bar located in the player controls
It is also possible to apply these settings to individual channels or media. This will not affect the appearance of the rest of the site
Thank you for following this article, you can now modify the appearance of Nudgis as you wish. Don't hesitate to consult the Nudgis section of our documentation to learn more about our solution.
Comments
0 comments
Please sign in to leave a comment.