Custom CSS is one of the most flexible tools for branding Ed lessons. Any style changes you can imagine are possible, just by adding a handful of CSS rules. Because it is such a powerful feature, it should be used with care by authors who are experienced with HTML and CSS.
In this article, we’ll explore the markup of an Ed lesson and explore ways to customise different parts of the lesson.
Lesson Structure
Understanding the structure of an Ed lesson is fundamental to getting started with Custom CSS. Once we have an idea of which elements are on the page, we can start to override the way they are rendered to make them more inline with your company branding.
This figure outlines each Ed lesson is structured. The <body /> element contains the #slides-view, which in turn houses the #slides element, #lesson-info and #slides-background-wrap.
Lesson Info
The lesson information element persist throughout the lesson at the top of the screen. It contains the lesson title and logo, the current page count, menu button and alerts the user when stars are available.
Here’s a real example. We will update the page information to have a blue background and a box-shadow. We’ll also remove the dots on the menu button and add the text “Menu”. Here’s a preview of what we’re aiming for.
So how can we achieve this effect? First we’ll add the styles for the container element, #lesson-pages-info.
#lesson-pages-info {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
background: #005b8b;
}
Then we can update the menu button like so:
/* Remove the background image and update padding around the text... */
#lesson-header-nav-menu-btn {
background: none;
padding: 0.8em;
}
/* Use a pseudo-element to insert the text where we want it. */
#lesson-header-nav-menu-btn:before {
content: "Menu";
}
#lesson-header-nav-menu-btn .icon-menu {
display: none;
}
That’s it. We now have our very own custom lesson pagination!
Slides
Below the lesson information are all the slides that you have added. There is a parent container which moves to the left as the learner progresses, and within this are the (usually) three slides: the active slide, the previous slide and the next slide.
You will notice in this diagram the slides use a dot, rather than a hash. This is because they are no longer ID’s but classes. We use classes whenever elements appear multiple times within the document. Each slide has the .slide class, as well as another class for the specific template it uses. In this example, there is a title, dial and exit slide. Most slides contain a footer which prompts the learner to take an action and allows them to continue. The content of each slide varies depending on the template that’s used.
So let’s put this to good use with another practical example. Let’s say our lesson uses a dark background image. We also user the slider template, and it’s become difficult to discern the edges of the slider bar. We will make it a bright green to match our logo. The “Touch to slide” background is also lost, so we’ll make it an indigo colour instead.
To achieve these changes, we need to understand how the slider template is constructed, and which classes to modify. Then we will be able to target our CSS to update the template. To do this, we can open the lesson in the browser and use the browser’s developer tools to inspect the document. In most browsers, it’s as simple as right-clicking on the page and choosing “Inspect Element”.
Now we can see the .slider-bar element, and add the green background. We will target the notch elements as well, all within the scope of the .slide-slider template.
.slide-slider .slider-bar,
.slide-slider .slider-notch:before,
.slide-slider .slider-notch:after {
background: #1ed760;
}
We can use the same technique to find the “Touch to slide” element and add the indigo background. We will also need to get the :after element, which adds the small triangle under the text.
.slide-slider .slider-knob-value {
background: #4b6795
}
.slide-slider .slider-knob-value:after {
border-top-color: #4b6795
}
By scoping all of our CSS changes with the .slide-slider class, we can be sure that we won’t accidentally change other parts of the lesson.
A Simpler Technique
If you are a little overwhelmed by the process above, don’t worry. You can still use Custom CSS with this simpler technique that doesn’t require you to explore the way Ed lessons are constructed.
The technique involves creating lesson-based rules which you can then activate by inserting HTML directly into your lesson. Remember that all your content is parsed as Markdown, so you can insert any arbitrary HTML into your content.
First of all, we’ll create a new rule called .my-gradient-example.
.my-gradient-example {
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.3));
padding: 0.5em;
border-radius: 4px;
}
This is a simple class that adds a gradient background, with a bit of padding and a small border radius. Now we can use this class wherever we want, simple by wrapping our text within an element like this:
<div class="my-gradient-example">
Your text goes here.
</div>
Remember to close the DIV element to avoid breaking the layout of the rest of your content. (Just use the same tag with the backslash.) Now you’re ready to start styling up any part of your lesson with complete freedom!
Hi this is great info.
I don’t suppose you could share an example for a similar problem I am having with a dark pie chart on a dark background. How do I modify the css so that instead of using dark grey in the pie chart, it will show as pale grey – or a colour?