Learn how to manually stylize interactive content using CSS.

There are different style presets available for different interactive content (i.e. video, audio, images, galleries, questions). These presets are accessible through the color wheel control when hovering over the interactive content.

There are around 5 style presets for each interactive content. In some cases, however, you would want to create your own custom style, following your own brand theme. This is where CSS proves to be most useful. Using CSS, you can customize the design (and even the layout) of the interactive content. Of course, a prerequisite of doing this is knowing some basics of CSS.

Specific VS Generic Styles

Your CSS code can target a specific interactive content, or a general type of interactive content. If you are targeting a specific interactive content instance, then the Class specified in the dialog options is very important as it will be used in the CSS code.

Finding the CSS Class Path

The real challenge behind using CSS to stylize your own interactive content, is finding the class names you need to style. A tool available in the control bar here proves useful. That is the "CSS Classes" tool.

Clicking this button will toggle the display of the specific class path for every single element inside the respective interactive content. For example, here is what it will look like for a question block.

The same color boxes represent elements that have the same HTML parent. Clicking on the small icon to the left of each class path, will copy that entire class path to the clipboard.

Now in your global CSS file, you can paste the class path you had just copied, then add your own styles as follows:

.kInteractive.questions.questions678 input.btn.ki-btn.ki-mcq {
    background-color: red;
}

In case this does not take effect, you may sometimes need to add the !important rule to override the existing rule:

.kInteractive.questions.questions678 input.btn.ki-btn.ki-mcq {
    background-color: red !important;
}

These previous examples target a specific question block having the class "questions678". In order to apply that same style to all question blocks in the book, the questions678 class will need to be removed from the rule, as follows:

.kInteractive.questions input.btn.ki-btn.ki-mcq {
    background-color: red !important;
}

Finding Complex Class Paths with Web Inspector

You can find complex class paths through the browser's web inspector tools as well. Google Chrome and Firefox both have excellent web inspectors (aka DevTools). In the following details we will be using Google Chrome as our example.

Firstly, you will need to temporarily host your ebook online, either on Kotobee's servers using the 30 day free trial, or freely on your own server. Once the web app is open and the interactive content is rendered, follow these steps.

  1. Right-click over the element you want to style and select Inspect from the context menu. The web inspector will open. Note you may select which side the web inspector opens in the browser, from the inspector settings menu.
  2. Under the Styles tab in the web inspector, you will find a listing of all the CSS styles applied to that element, ordered by precedence. If a certain style is overridden it will be crossed out with a line (as in the above screenshot).
  3. Web inspector serves as a great testing environment for your styles. This means inside the styles panel you can start modifying properties (e.g. colors, numbers) by clicking on them and typing your new values. You will see changes to the interactive content instantly. Of course this does not do any permanent changes. Upon refreshing the browser, everything will reset back to normal.
  4. Once you are sure about the styles you want to apply, copy the class path containing the current property (e.g. in the above screenshot it would be .kInteractive.questions > ._style4 h4) and paste it in your global CSS file along with the new property. For example, to change the background color of the above class to red, the global CSS file should contain the following:

    .kInteractive.questions > ._style4 h4 {
        color: red !important;
    }

    Note that adding !important will avoid rules from being overridden elsewhere.