Video editing tools

Customizing your Video Quiz using CSS

Last Modified on 01/12/2025 2:49 pm IST

About

This article describes how to customize the Kaltura Video Quiz Player look and feel via CSS. The Kaltura Video Quiz text strings may be modified and translated into the same languages that are supported for KMS and KAF. See What are the supported KMC, KMS & KAF languages. The pre-created strings/plugins are uploaded and configured in the Kaltura Management Console in the Player Studio under the UI Variables.

Create your CSS

To create a CSS file you will need some basic understanding of CSS files and access to the KMC and KMS/KAF. For ease of use, following you may find a CSS code example that contains the list of assets that you can modify and then copy and paste into your CSS file. After the CSS is modified, you will need to make it available online, and prepare a link to it.

CSS example

/*	Main background image*/
.videoHolder .screen.quiz {
  background-image: ;
}
/*	Color of left footer text */
.ivqContainer .ftr-left {
  color: #;
}
/*	Buttons in welcome screen and completed screen*/
.ivqContainer .confirm-box,
.ivqContainer .button-box-attr {
  border-radius: 0;
  background-color: #;
  color: #;
}
/*	Buttons hover in welcome screen and completed screen*/
.ivqContainer .confirm-box:hover,
.ivqContainer .button-box-attr:hover {
  color: #;
  background-color: #;
}

/*	Quiz download background image */
.ivqContainer .pdf-download-img {
  background-image: ;
}

/*  Quiz answer background image  */
.ivqContainer .single-answer-box-bk {
  background-image: ;
}

/*	Quiz answer background image on hover */
.ivqContainer .single-answer-box-bk:hover:not(.wide) {
  background-image: ;
}
/*	focused answer box*/
.ivqContainer .single-answer-box-txt-wide {
  color: #;
}

/*	Quiz answer background image when applied  */
.ivqContainer .single-answer-box-bk-apply {
  background-image: ;
}

/*	Quiz button when applied background image  */
.ivqContainer .qApplied {
  background-image: ;
}

/*	Quiz button background image */
.ivqContainer .qContinue {
  background-image: ;
}

/*	Quiz hint background image */
.ivqContainer .hint-why-box {
  color: #;
  background-image: ;
}

/*  Quiz bubble done large  */
.ivqContainer .q-box {
  background-image: ;
}

/*	Quiz done  */
.controlBarContainer .quizDone-cont {
  background-image: ;
}

/*	Quiz bubble hover	*/
.bubble-cont .bubble-un-ans:hover {
  background-image: ;
}

/*	Text color of welcome text	*/
.ivqContainer .welcomeMessage{
  color: #;
}

/*	Text color of welcome title */
.ivqContainer .welcome{
  color: #;
}
/*	Text color of tips title */
.ivqContainer .InvideoTipMessage{
  color: #;
}
/*	Text color of PDF text */
.pdf-download-txt{
  color: #;
}

Associating the CSS File with the Player

  1. Login to the KMC and go to the Studio Tab.
  2. Select a quiz player from the Players List. Be certain to update your player to the latest version.
  3. In the Plugins section > UI Variables,  add the following key and value:

    Key = IframeCustomPluginCss1
    Value = your CSS url 

Locate the quiz player ID in KMS and KAF

To find the right player ID of the quiz, go to the KMS/KAF administration page and search for “quizPlayerId” in the top left search bar.

 

Related Articles
Was this article helpful?
Thank you for your feedback!
User Icon

Thank you! Your comment has been submitted.

In This Article
Back to top

Never miss a thing!

Subscribe to our customer newsletter and our release notes updates, so you always get the best out of Kaltura.
Newsletter