Skip to main content
This is a custom warning

Does the component apply visual style — color, typography, icons, space, borders, and more — using appropriate variable tokens?

Tovuti Impacted

[8-13-24 12:00 PM MT] Our Technology team is aware of the issue with Interactive Content and is working on a resolution. In the meantime, we do not recommend attempting to edit this content, as it will not resolve the issue.

Please check back here for updates.

Email support@tovutiteam.com if you have any questions.

Unlock the power of AI-generated content creation with Dizi

Dizi is an AI-powered LMS content creation assistant that creates quizzes and lessons in seconds and entire professional-looking courses in just minutes. Turn weeks of research, planning, and lesson-building into a click of a button.
Reminder! Tovuti Weekly Maintenance Window!

Tovuti's scheduled weekly maintenance window is every Saturday between 8:00 AM and 12:00 PM, US Mountain Time.

There may be downtime during this period.

Certificate Designer - Custom CSS Options

  • Updated

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.

The Tovuti Certificate Designer includes a variety of in-app customization options. Administrators may also use custom code to uniquely modify the certificate to match the use case. 

This article outlines just some of the unique modifications as well as the code snippets that Admins may apply to certificates. These modifications include:

 

Hide Elements

Any of the customizable elements in the Details tab can be hidden using custom CSS. 

For example, the icon overlay on the seal of the certificate can be hidden.

Default:

content-creation_certificate-designer_custom-css_01.png

 

Each element is represented by a nav item. To remove the icon overlay element, use the nav item code:

.cert-badge-icon

 

Combine the nav item code with the following “hide” code and enter it into the CSS Styling field in the Custom CSS tab:

.cert-badge-icon { display: none; };

content-creation_certificate-designer_custom-css_02.png

 

Certificate with removed element:

content-creation_certificate-designer_custom-css_03.png

 

Move Elements

Custom CSS can be used to move fields to exact positions on the certificate. This supports Admins who need to perfectly match 3rd party accreditation elements. 

For example, the sponsor logo can be moved. 

Default:

content-creation_certificate-designer_custom-css_04.png

 

Each element is represented by a nav item. To move the sponsor logo element, use the nav item code:

.cert-logo-image

 

Combine the nav item code with the following “move” code and enter it into the CSS Styling window of the Custom CSS tab:

.cert-logo-image {

  position: absolute;

  top: 0;

  right: 0;

}

 

Use the desired values for top and right, and include bottom and left values to customize the item position. 

content-creation_certificate-designer_custom-css_05.png

 

Certificate with the moved element:

content-creation_certificate-designer_custom-css_06.png

Related articles