Styling CLIO to Visually Enhance Learning – Coding Snippets

Introduction

This tutorial will cover how we can use CSS in order to style a CLIO page and improve students’ learning experience.

While styling CLIO, make sure that your visuals complement the overall material that’s trying to be taught. For example, if the page teaches about the precipitation cycle, the visuals can support it with the use of brighter colors to complement any diagrams and text. On the other hand, if your CLIO page is teaching a dense topic like war crimes, the visuals might support that through darker and modest styling.

For the sake of this tutorial, my course page will be teaching students about splash pads, so we’ll try to support the content with splashy visuals!

What is a Card?

A card is a container you, the instructor or web editor, can put content (text, hyperlinks, videos, mp3s, images) into and have represented as a physical card when a student uses your module. With a bit of fiddling, you can give each card a styled banner that helps give definition to the structure of your content.

What We’re Making

Here’s what we start with – a plain card without a visually-supported banner:

Here’s what we’ll end up with at the end of this tutorial:

What kind of styling is involved here? Let’s break it down.

Observing the Styling

First off, we’re using a background image for the banner, namely this one:

You can download it here: http://wallpaperswide.com/download/minimal_landscape-wallpaper-2560×1440.jpg

Feel free to use your own background image and be creative with your visuals! For our case, this image obviously won’t fit into the vertically-thin card banner on CLIO, so we’ll only be using a snippet of it.

We also see that the text has a larger size, it’s italicized, and maroon.

Let’s dive into the CSS!

Show me the CSS Code!

Every time you create a new card on an activity, it contains a header div called card-header.

As you can see, if you don’t specify what content goes into the card header (as demonstrated in the second card), the card header will just hide itself until it has something to show.

First off, let’s specify how we want card headers to be styled.

.card-header {
    background-position: left;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 3;
    background-image: url(http://wallpaperswide.com/download/minimal_landscape-wallpaper-2560x1440.jpg);
}

Remember, as mentioned before, you need to add content into your card header before it will show up.

Let’s do that now. We’ll need two more CSS snippets here, one that will style the banner text, and one that actually contains the text.

.card-header:after {
    color: maroon;
    font-style: italic;
    font-weight: bold;
    font-size: 1.9em;
}

.default-card .card-header:after {
    content: "A Splash of History";
}

Change background color of activity pages

Having card banners is a great way to aid visual learning, but what if you wanted to change the entire background color of your CLIO pages to match the look-and-feel of the material?

This is completely possible with just 3 small sections of CSS!

The default white background on an activity.

Modified activity background color to a cream color.

:root {
    --material-cyan: rgba(77,208,225,0.7);
    --material-cream: rgba(255,248,220,0.7);
    --the-name-of-your-color: #your-color-in-hex;
}

.content-container {
    background: var(--material-cream);
}

md-content {
    background: inherit;
}

• :root { … }: this is the area in your CSS code where you can declare global colors using rgba/hex and reference them anywhere else in your code, hence the name global.
  • The variable name HAS to begin with two dashes (--) and is case sensitive!
  • To reference it, use var(--the-name-of-your-color).
• .content-container { … }: all the activities, cards, images, text, you name it, fall under this container. Here’s a visual of what that means:
  • 
  • So, this means that content-container contains a div called md-content. As long as we set the background for content-container, md-content should inherit the background color from its parent container (content-container).
• md-content { … }: child div of content-container.
• background: the inherit keyword makes this div adapt the parent div’s background style, which we’ve already set to our cream color.

Change styling of navigation banner

Cool, now our page is styled to match the look-and-feel of our course. But wait, what about this big orange banner at the top?

School spirit is great and all, but there might be times where these colors don’t align with your course content. Can we re-style this navigation banner? Yes!

Here’s how the navigation bar divs are laid out. The entire banner is contained in a div called .nav-bar. Inside that, there’s a button to access all the activities, and that div is called .nav-element. Finally, there’s the title of the banner which is called #module-title.

First off, let’s change the background color of our navigation bar. Since my course revolves around splash-pads, I’ll color it to a tint of cyan. Using what we learned before, this should be doable!

.nav-bar {
    background: #00B8D4 !important;
}

.nav-bar #module-title {
  color: #d32f2f;
  font-weight: bold;
}

.nav-element {
  color: #d32f2f;
}