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.
Throughout the logged-in and logged-out views, most header images include a default, semi-transparent dark overlay. This improves the contrast between the header image and the default white text.
The following examples explain how to remove the default overlay image in the following areas of the learner portal:
User Portals Homepage
Administrators may use custom CSS to remove the dark overlay from the top banner of the User Portals homepage.
Code Sample
Remove the banner image overlay from the homepage by pasting the following code into the Pre CSS Styling window of the CSS Styling tab of the User Portals edit view:
.header-fullwidth:before { background-color: transparent; }
Homepage without the banner overlay:
Courses Page
Administrators may use custom CSS to remove the dark overlay from the top banner of the main Courses page.
Logged-in view
Default:
Code Sample
First, find the Image Path to the header image and insert it into the following code:
.courses-hero-header {
background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0)), url('[INSERT IMAGE PATH HERE]') !important;
}
The image path is found in the File Manager.
The final code is pasted into the Pre CSS Styling window of the CSS Styling tab of the User Portals edit view:
.courses-hero-header {
background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0)), url('/images/vZJrlsHoEfk3bBQeHMT8a5MTYzMjAxMTU4Mzk4Nw/graphics/courses-header-1.jpg') !important;
}
Courses page (logged-in) without the default overlay image:
Logged-out view
Default:
To remove the header overlay for the Courses page in the logged-out view, paste the same code into the Pre CSS Styling window of the CSS Styling tab of the Landing Pages editor.
Course Page (logged-out) without the banner overlay:
Events Page
Administrators may use custom CSS to remove the dark overlay from the top banner of the main Events page.
Logged-in view
Default:
Code Sample
Remove the banner image overlay from the Events Page by pasting the following code into the Pre CSS Styling window of the CSS Styling tab of the User Portals edit view:
.tov-page-header-mask {
background-color: rgba(0, 0, 0, 0) !important;
}
Events Page (logged-in) without the banner overlay:
Logged-out view
Default:
To remove the header overlay for the Events page in the logged-out view, paste the same code into the Pre CSS Styling window of the CSS Styling tab of the Landing Pages editor.
Events Page (logged-out) without the banner overlay: