{"id":2232,"date":"2019-08-28T19:24:16","date_gmt":"2019-08-28T19:24:16","guid":{"rendered":"http:\/\/sites.la.utexas.edu\/kb\/?p=2232"},"modified":"2020-06-18T16:45:54","modified_gmt":"2020-06-18T16:45:54","slug":"making-clio-site-aesthetic-handy-coding-snippets","status":"publish","type":"post","link":"http:\/\/sites.la.utexas.edu\/kb\/2019\/08\/28\/making-clio-site-aesthetic-handy-coding-snippets\/","title":{"rendered":"Styling CLIO to Visually Enhance Learning – Coding Snippets"},"content":{"rendered":"

\"\"<\/a><\/h2>\n

Introduction<\/h2>\n

This tutorial will cover how we can use CSS in order to style a CLIO page and improve students’ learning experience.<\/p>\n

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.<\/p>\n

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!<\/p>\n

What is a Card?<\/h2>\n

\"\"<\/a><\/p>\n

A\u00a0card<\/strong><\/span> 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.<\/p>\n

What We’re Making<\/h2>\n

Here’s what we start with – a plain card without a visually-supported banner:<\/p>\n

\"\"<\/a><\/p>\n

Here’s what we’ll end up with at the end of this tutorial:<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

What kind of styling is involved here? Let’s break it down.<\/p>\n

Observing the Styling<\/h2>\n

First off, we’re using a background image<\/strong> for the banner, namely this one:<\/p>\n

\"\"<\/a>

You can download it here: http:\/\/wallpaperswide.com\/download\/minimal_landscape-wallpaper-2560×1440.jpg<\/p><\/div>\n

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.<\/p>\n

We also see that the text has a larger\u00a0size<\/strong>, it’s\u00a0italicized<\/strong>, and maroon<\/strong>.<\/p>\n

\"\"<\/a><\/p>\n

Let’s dive into the CSS!<\/p>\n

Show me the CSS Code!<\/h2>\n

Every time you create a new card on an activity, it contains a header div called\u00a0card-header<\/strong>.<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

As you can see, if you don’t specify what content goes\u00a0into<\/strong> the card header (as demonstrated in the second card<\/em>), the card header will just hide itself until it has something to show.<\/p>\n

First off, let’s specify how we want card headers to be styled.<\/p>\n

\n
.card-header\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0background-position:\u00a0left;\r\n\u00a0\u00a0\u00a0\u00a0background-repeat:\u00a0no-repeat;\r\n\u00a0\u00a0\u00a0\u00a0text-align:\u00a0center;\r\n\u00a0\u00a0\u00a0\u00a0line-height:\u00a03;\r\n\u00a0\u00a0\u00a0\u00a0background-image:\u00a0url(http:\/\/wallpaperswide.com\/download\/minimal_landscape-wallpaper-2560x1440.jpg);\r\n}<\/pre>\n
What does this all mean?<\/p>\n