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
- Login to the KMC and go to the Studio Tab.
- Select a quiz player from the Players List. Be certain to update your player to the latest version.
- 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.
