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

1/ NOTES ON THE MOVE TO VERSION 12.2.0

2/ HOME PAGE

2A/ THE DIFFERENT TYPES OF WIDGET

3/ GRAPHIC CUSTOMISATION

3A/ COLORS

3B/ LOGO

3C/ FONTS

3D/ ADVANCED (CSS)

UBICAST PLAYER COLORS

 

Notes on the move to version 12.2.0

Nudgis 12.2.0 brings a number of changes, including the customisation of the new user interface (currently in beta).

Until the final version of the interface rehaul is released, you will have control over its appearance settings to ease the transition.

Once you have updated to 12.2.0, you will no longer be able to change the appearance of the old interface. However, it will still be available

The choice of using the new interface is left to the user. To activate the option, go to your profile page, tick "Use the new UI (beta)" and save.

You can also force the new interface for all users by going to the global settings ("Can edit site settings" permission is required). The setting is called "Force new user interface for everyone". The choice of whether or not to use the new interface will no longer be given to users if you activate this option.

Now let's see how the graphical customisation of your Nudgis works, starting with its front page.

 

Home page

When you first access it, the Nudgis home page is virtually empty and you will be able to add different types of widgets to enrich the layout of the page to suit your needs. Widgets are blocks containing elements that can be moved around a grid.

To activate edit mode and start customising the widget grid, click on the "Customise home page" button at the bottom of the window :

Once edit mode has been activated, you can add widgets, move them freely around the widget grid using this icon  and resize them from the bottom right-hand corner.

 

The different types of widget

In the "Add a widget" box, you will find several types of item that you can select and then add one by one to the home page :

• Channel list

This widget displays a list of the main channels on your Nudgis and allows you to unfold their tree structure.

• Custom

This widget lets you integrate personalised content using a text editor.

The rich text editor makes formatting easy :

• Element

The Element widget lets you add an item that can be accessed directly from the home page (video, channel, live, etc).

Show live inside : Displays a list of links pointing to live broadcasts in progress. This list will be the only item displayed in the widget

Big thumbnail : This allows you to use the thumbnail with the highest resolution available. This option should only be used if the standard thumbnail is too small

Thumbnail position : Choose whether the thumbnail of the selected item will be displayed on the left, right or center of the widget

Show title : Displays the title of the selected item in the widget, below the thumbnail. Note that if you keep the header display, the title will be displayed twice.

Show information : Displays information about the selected item (parent channel, speaker, creation date, etc)

Show description : Displays the contents of the description field of the selected item in the widget

Element to display : Allows you to determine which item will be displayed in the widget. This could be the most viewed video or channel (over the whole platform or just the last month), the most recently added channel or video, or a specific item that you want on the homepage

• Live streams

This type of item displays a list of current live broadcasts on the platform, if any is in progress. It is redundant with the "View list of lives inside" option in the Item widget

• Image

With the "Image" widget type you can, as the name suggests, import an image from your computer to your home page. The widget's "Alternative text" field lets you add a brief description of the image that will be seen by screen readers (used mainly by users with visual impairments) or search engines

• Title

This widget can be used to add a title bar to separate the different blocks of the page and make them easier to read

• Video list

This widget displays lists of videos divided into several tabs. You can choose which tabs are displayed. The choices are : latest videos added, most viewed videos (since always or last month), most commented videos (since always or last month), or the tag cloud (generated from keywords extracted from videos on the platform by OCR)

The Display more videos button on the Latest videos tab redirects to the Latest media page

All these item types have common options that can be set block by block
You can access a widget's settings by clicking on this icon , in the top right-hand corner of the item :

The widget settings appears, revealing options common to all block types : 

Transparent widget : Makes the widget transparent (makes the background visible through the widget)

No widget header : For a widget without a title

Visible for : Allows you to choose which types of user will be able to see this widget (authenticated, non-authenticated or both)

Display mode : Allows you to determine for which languages this widget will be displayed

Title* : Determines the title of your widget, displayed at the top of the element

Link*: Contains a link that will be opened when the title is clicked. (With the following option, you can define whether the link should open or not)

*These last two options will not work if the widget header is disabled

Now that you know how to set up your home page, let's take a look at how the site appearance settings work.

 

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.

To continue : "How to navigate in Nudgis".