Custom styling (CSS)

Introduction:

The Custom CSS feature enables you to add your own personal touch to your H5P content. This way you may for instance replace default H5P colors and fonts with your organization's own brand, giving you even more control of the look and feel of your content.

How the Custom CSS feature works

The Custom CSS feature allows administrators to add CSS overrides. Administrators may add overrides in a preview mode first - where the changes are only visible to the administrators. When you're satisfied with testing the styles on your content, you may apply the previewed CSS overrides for the entire organization's content.

The CSS overrides when applied to the entire organization affect all H5P content for all users.

Activating the custom CSS feature

By default the custom CSS feature is disabled and customers are to reach out to their customer representative to get access to this feature.

Warnings

The reason the custom CSS feature is disabled by default is that when used incorrectly the feature may damage the look, functionality, and accessibility of the content. Even if the content seems to be working after adding the CSS a future update of H5P that isn't compatible with the CSS changes may damage the look or behavior of the content. Access to the CSS feature also introduces security problems. It opens up some attack vectors for someone with access to a customer's administration accounts.

Recommended workflow

H5P uses massive amounts of CSS. Reading up on the CSS and DOM structure line by line is not practical. Instead, we recommend the following workflow when working on the H5P.com CSS:

1. Use your browser's development tool and create CSS overrides in your browser.
2. Copy the CSS overrides from your browser into a file or directly into the CSS overrides field in the H5P.com admin interface. (The interface is under Manage Organization > Settings > Custom CSS)
3. Prefix all your CSS selectors with .h5p-content
4. Test all types of content that may be affected by the overrides and make sure they work as expected in all browsers. Do note that if you make overrides to Multiple Choice, for instance, Multiple Choice is used within Course Presentation, Question Set, Interactive Video, and Column. You should ideally check that your overrides work as expected within all these different contexts.
5. Apply the changes to your organization using the H5P.com admin interface when you feel certain that your changes have the desired effect.

What to change and what not to change

All CSS overrides do come with a risk. The H5P.com content types are updated regularly and there is always a chance that an update might make your CSS overrides stop working. Colors are the safest thing to change. The riskiest things to change are things that affect the positioning or size of objects. Such changes might both ruin the content when it is updated and ruin the content if it is exported from H5P.com and imported into a site that does not have the same CSS overrides.

Overriding fonts

In CSS, you have the possibility to load and use other fonts than the default provided by H5P. Because of the strict CSP (Content Security Policy) on h5p.com, the only option is to use fonts served by Google Fonts (https://fonts.google.com/).

CSS specificity

It's important to have a good understanding of how CSS works before creating your own customizations. There are many good resources online, and we're not gonna duplicate that here. But we're gonna look a bit into how CSS specificity works. I.e: how does the browser select which properties to apply when there are several selectors for a DOM element with the same property. We'll start off with an example:

button {
  /* Will be applied to all buttons */
  background-color: red;
}

button.retry {
  /* For all buttons having class="retry", the background color
     above will be overriden */
  background-color: green;
}

In the example above "button.retry" gets a higher weighting (since it is more specific), and then it will use this background-color property for all buttons having class="retry".

Here's another example:

.h5p-joubelui-button {
  background-color: green;
}
.h5p-joubelui-button {
  background-color: red;
}

These two declarations have equal specificity. In this case, the last declaration found is applied to the element, i.e.: the background color will be red. This is relevant for h5p.com since the Custom CSS is loaded after the default CSS provided by h5p.com.

Read more about CSS Specificity here:https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Best Practices

1. Only override the things you want to be changed. I.e: don't add CSS that does not change anything.
2. Be specific when creating the CSS selector rules. For example: if you want to change the color of a button inside Multiple Choice only, you need to make sure your selector reflects that, ref. the examples below.
3. Add comments to your CSS customizations, so it is easy to figure out later what you actually are changing. In CSS, comments need to use the following format: /* Here's a comment */

.h5p-joubelui-button {
  background-color: #000;
}
/* Hover and focus effect */
.h5p-joubelui-button:hover,
.h5p-joubelui-button:focus {
  background-color: #444;
}
/* Click effect */
.h5p-joubelui-button:active {
  background-color: #222;
  box-shadow: none;
}

.h5p-blanks .h5p-joubelui-button {
  background-color: #000;
}
/* Hover and focus effect */
.h5p-blanks .h5p-joubelui-button:hover,
.h5p-blanks .h5p-joubelui-button:focus {
  background-color: #444;
}
/* Click effect */
.h5p-blanks .h5p-joubelui-button:active {
  background-color: #222;
  box-shadow: none;
}

.h5p-course-presentation .h5p-blanks .h5p-joubelui-button {
  background-color: #000;
}
/* Hover and focus effect */
.h5p-course-presentation .h5p-blanks .h5p-joubelui-button:hover,
.h5p-course-presentation .h5p-blanks .h5p-joubelui-button:focus {
  background-color: #444;
}
/* Click effect */
.h5p-course-presentation .h5p-blanks .h5p-joubelui-button:active {
  background-color: #222;
  box-shadow: none;
}

.h5p-content[data-content-id="1291454716549314006"] .h5p-joubelui-button {
  background-color: #000;
}
/* Hover and focus effect */
.h5p-content[data-content-id="1291454716549314006"] .h5p-joubelui-button:hover,
.h5p-content[data-content-id="1291454716549314006"] .h5p-joubelui-button:focus {
  background-color: #444;
}
/* Click effect */
.h5p-content[data-content-id="1291454716549314006"] .h5p-joubelui-button:active {
  background-color: #222;
  box-shadow: none;
}