SUMMARY:
In this week's session we walk through some tricks for customizing the look and feel of the Valence Portal. By injecting basic JavaScript into a special IFS file called Hook.js, we show you steps you can follow to, for example, replace the Valence logo, create a custom footer, add special text or links to the Portal control bar, change element colors, etc.
URL: https://www.youtube.com/watch?v=zQE3tc-Hlcc
dd#6.png
TIMESTAMPS AND FEATURES COVERED:
1:15 - Customizing Valence Portal - presentation with an overview
1:29 - Hook.js
3:30 - Hook.js - Portal Events (activateapp, beforelogin, closeapp etc.)
5:20 - Hook.js - Implementing a Portal Change
6:15 - Further Branding, portal-classes.txt - override.css
7:20 - Replacing the Logo at the Valence Login Page
8:18 - Uploading Image to be used in Valence Portal into Nitro Source Editor
10:30 - Changing the Hook.js example
12:10 - Image Type to be used in a Portal Branding
13:35 - Customizing Valence Portal and different themes (Dracula, Metal)
15:15 - Styling the login page (CSS)
16:15 - Portal Classes txt file overview
16:50 - Chrome Dev Tools - using inspector to check classes that are being used
19:20 - Adding and Styling a footer in Valence Portal
21:58 - Using the came colors for consistency through the Valence Portal
22:42 - Changing the background color of the control bar
29:00 - Developer Tools - reviewing components
33:00 - Using Valence API Documentation (getUser)
In this week's session we walk through some tricks for customizing the look and feel of the Valence Portal. By injecting basic JavaScript into a special IFS file called Hook.js, we show you steps you can follow to, for example, replace the Valence logo, create a custom footer, add special text or links to the Portal control bar, change element colors, etc.
URL: https://www.youtube.com/watch?v=zQE3tc-Hlcc
dd#6.png
TIMESTAMPS AND FEATURES COVERED:
1:15 - Customizing Valence Portal - presentation with an overview
1:29 - Hook.js
3:30 - Hook.js - Portal Events (activateapp, beforelogin, closeapp etc.)
5:20 - Hook.js - Implementing a Portal Change
6:15 - Further Branding, portal-classes.txt - override.css
7:20 - Replacing the Logo at the Valence Login Page
8:18 - Uploading Image to be used in Valence Portal into Nitro Source Editor
10:30 - Changing the Hook.js example
12:10 - Image Type to be used in a Portal Branding
13:35 - Customizing Valence Portal and different themes (Dracula, Metal)
15:15 - Styling the login page (CSS)
16:15 - Portal Classes txt file overview
16:50 - Chrome Dev Tools - using inspector to check classes that are being used
19:20 - Adding and Styling a footer in Valence Portal
21:58 - Using the came colors for consistency through the Valence Portal
22:42 - Changing the background color of the control bar
29:00 - Developer Tools - reviewing components
33:00 - Using Valence API Documentation (getUser)