Custom code integrations are not supported through the normal support channels. The Tovuti Support team does not correct, implement, or modify any custom code, including any code referenced in the Help Center. For assistance with custom code, please contact your Account Manager or contact the Tovuti Client Success team at clientsuccess@tovutiteam.com.
Custom Font Styling includes custom font size, transforming text to all-caps, and adding spacing in between characters. This article shows examples of each in the logged-in and logged-out views of the learner portal, including code samples.
This article outlines the following concepts:
Custom Font Size
Logged-In View
This customization of the logged-in view is applied in the User Portals editor.
Admins can increase the font size of the completion percentage in the course page progress bar.
The default progress percentage:
The following code is placed in the Pre CSS Styling window of the CSS Styling tab, which increases the course percentage bar font to 40 pixels:
.course-bar-percentage { font-size: 40px !important; }
Progress percentage with increased font size:
Logged-out view
Admins use custom code to customize the font sizes of a Landing Page to a specific pixel value. For example, the Admin may change the font of the Header.
Default:
The following code is placed in the Pre CSS Styling window of the CSS Styling tab, which reduces the Header font to 50 pixels (half of the default size):
.slide_text_div { font-size: 50px !important; }
Reduced font size:
Text to ALL CAPS
Logged-In View
Text within the logged-in view can be set to all-caps from the User Portals editor. For example, the progress subtitle on the Course page can be transformed to all caps.
Default subtitle:
The Progress subtitle text can be set to all caps by using the following code in the Pre CSS Styling window of the CSS Styling tab:
.lms-subtitle {
text-transform: uppercase;
}
Progress subtitle in all-caps:
Logged-Out View
Text within the logged-out view can be set to all caps from the Landing Page editor.
For example, admins may apply all caps to the Top Nav Bar text, and keep all other text the same.
Default Top Nav Bar characters:
The Top Nav Bar text can be set to all caps by using the following code in the Pre CSS Styling window of the CSS Styling tab:
.cd-primary-nav a {
text-transform: uppercase;
}
All caps Top Nav Bar characters:
Add Space Between Characters
Logged-In View
Admins can use custom code to include additional spacing between characters within the logged-in view from the User Portals editor.
For example, the “search” text within a search bar can be customized.
Default search text:
Additional spacing can be applied to the search bar text to add 10 pixels of additional distance between items by inserting the following code in the Pre CSS Styling window of the CSS Styling tab:
.form-control {
letter-spacing: 10px;
}
Search text with additional spacing:
Logged-Out View
Admins can use custom code to include additional spacing between characters of text within the logged-in view from the Landing Pages editor.
For example, the Top Header text can be customized.
Default Top Nav Bar text:
Additional spacing can be applied to the Top Header text to add 10 pixels of additional distance between items by inserting the following code in the Pre CSS Styling window of the CSS Styling tab.
.cd-primary-nav a {
letter-spacing: 10px;
}
The Top Nav Bar text with additional spacing: