CSS 101: Tailoring Your Very Own Custom eLearning Portal With Stylesheets
To the uninitiated, computers can seem more daunting than they really are.
If this line sounds familiar, is because I used it to introduce the first article in this series, a series where we examine various advanced configuration or customization related tasks for your eLearning portal and show that they are nothing that you should be afraid of.
It helps that TalentLMS, which is well known for its ease of use, tries hard to keep most things, even the seemingly advanced, intuitive. That said, some things, are not under its absolute control.
Last week, for example, we had a look at setting up your own domain (which involves some inevitable configuration steps at your domain registrar service). In this installment we’ll show you how to use CSS, the styling language of the world wide web, to create your own custom eLearning portal.
What Is CSS?
A companion to HTML, the markup language for web content, CSS, short for Cascading Style Sheets, is a styling language. This means that, while HTML is concerned with the structure and content of your web page (what your heading is, your paragraphs, your sidebar, etc), CSS concerns itself with how that content looks: your background colors, what should be bold or italic, how large your header should be, etc.
Note: Some people confuse CSS and HTML with programming languages. Thankfully they are not, as programming languages are quite more advanced. One key difference is that you can use a programming language to write any functionality you want, but HTML and CSS can only specify what some piece of content is and how it looks respectively.
A CSS style instruction, in it’s basic form, looks like this:
txt h2 {
2 font-family: Arial;
3 font-size: 22pt;
4 color: blue;
5 }
This small piece of CSS tells your browser that you want your section titles (h2 HTML elements, where "h" stands for "heading" and "2" stands for "2nd most important heading") to use the Arial font, and be blue colored and 22 points tall.
While the exact way to write CSS might seem unfamiliar, you probably agree that it’s not that difficult to understand when you see it, don’t you? Well, this fairly easy-to-grasp bit of "code" is the key to making your custom eLearning portal look exactly as it should.
And that’s probably the best way to learn CSS (and the most common way people do learn CSS): to examine existing CSS stylesheets (e.g. TalentLMS CSS styles), and make small changes to them, and see how they play out. If you don’t like the font used in a part of your page, switch it with another or change its size.
How TalentLMS Uses CSS
TalentLMS uses CSS as its main method of allowing custom eLearning portals.
In the Themes section of your "Account & Settings" you will find a few things you can change directly, like the color of various items (header, etc), a few ready-made themes that you can activate, and an option to "Update Theme".
This last one involves updating your "Additional CSS" -- a text file with CSS instructions that target various TalentLMS portal elements that you want to change.
You can write your desired styles in a plain text file (with e.g. Notepad or Notepad++ in Windows, or something like TextEdit or BBEdit in OS X), and load it. Any styles you have in your file will be applied on top (and take precedence from) TalentLMS already existing styles.
You then get to save any color choices you’ve made in the UI, plus your additional CSS instructions, as a new Theme. This is useful because it gives you an easy way out in case you’ve messed up or you don’t like your new theme anymore (you can always switch back to one of the default themes). It’s also handy for creating different themes for your various Branch portals --if you use the branches feature--, and even for giving your custom eLearning portal some seasonal flair (e.g. to a give Christmas look to your training portal).
But to understand which styles you should target, we will need to dive in the world of HTML elements, class names, and selectors.
Targeting Page Elements With CSS
As we’ve seen, CSS lets you specify styles for various parts of your custom eLearning portal.
Which parts are these, though, and how do you target them? This takes a little experience to answer, but we’ll do our best to give you a 101 with all you need to know to get started.
First of all, HTML websites (and your eLearning portal is one) are created by nesting a number of elements called "tags". The BODY tag defines what your whole page content will be (including headers, footers, sidebars and all). Inside a BODY tag, you’ll find tags like H1 and H2 (headers), P (paragraph of text), TABLE (a tabular listing of items), LI (a list), and DIV (a generic container of other stuff).
A (very) basic page will look somewhat like this:
txt <html>
2 <head>
3 <title>My page</title>
4 </head>
5 <body>
6 <h2>This is my page!</h2>
7 <p>Welcome to the best page on the internet</p>
8 </body>
9 </html>
When writing CSS you are only interested in the BODY element and the elements inside it. Elements outside of the body (e.g. head) are not accessible by CSS because they are not shown on the page ("title" for example only shows up in your browser’s tab bar).
To style an HTML element, you do it like so:
txt body {
2 background-color: red;
3 color: black;
4 }
This will give you a page with a red background and black text.
This rule will be applied to any other elements nested inside the body element (that’s where the "Cascading" comes from in CSS) unless a nested element has its own rule that overrides this. E.g. if there was an additional rule for h2 or p, it would take precedence over the rule for the body element.
This way we can set generic styles that apply to the whole page, and only write additional rules for any exceptions that we want (e.g. we’d like everything shown in the Arial font, except the headings, which should be in bold, large, Verdana characters).
In general, CSS rules look like this:
txt selector {
2 attribute: value;
3 }
The selector specifies which element(s) we target (see next section), the attribute is what we want to change (e.g. font size) and the value is the value we want to give it (e.g. 20px).
Some common attributes you can start with are:
- Font-family: The name of the font to use for the element’s text.
- Font-size: How big the text is in pixels or points.
- Font-weight: If the text should be bold, italic or regular.
- Color: The color of the text.
- Background-color: The background color of the element.
- Border: If/how to draw a frame around the element.
- Margin: Empty space around the element.
- Padding: Empty space between the element and its contents.
There are lots and lots of more.
CSS Classes And Selectors
Sometimes we don’t want to target all instances of an element (e.g. all paragraphs) but only specific ones. For those cases, there’s the "class" attribute, that we can add to specific instances of an element to mark it as different from other instances. We can then use that class name in our CSS to affects the elements that contain it. E.g.:
txt <p>This is a normal paragraph</p>
2
3 <p class="important">This is an important paragraph</p>
4
5 <p>This is another normal paragraph</p>
To target only the paragraphs which belong to the "important" class in our style, we write the class name present in the paragraphs we want to match (in this case "important") prefixed by a dot (to separate classes from element names) like this:
txt .important {
2 color: red;
3 }
This rule will make any element with class="important" use a red text color.
There are several other ways to target specific elements, and the code you write to specify what you want to target is called a "selector". The first selector we mentioned (for body, p, etc.) is called a "tag selector", and the one prefixed with a dot a "class selector".
There are several other types. It’s beyond the scope of this article to cover all selectors in CSS, but you can get a good idea from this article.
Knowing What To Change
We covered the basics of CSS, including how to target the elements you want to change. But how do you go about finding what those elements are, what classes they have (if any), etc?
For this, you have two friends:
- Using the "view page source" functionality in your browser to see how TalentLMS structures pages, what elements it uses, and what class names it gives them.
- Using your browser’s "Developer tools" (which are available in all major browsers) to see under the hood for the elements you are interested in.
If you want to change the TalentLMS sidebar, for example, you can move your mouse over it, right-click, and chose "Inspect Element", and Chrome’s developer tools will open highlighting the element you clicked on.
There’s also a "pointer" tool on the top left side of the Developer Tools panel, that will automatically inspect any element you hover on. For the element under inspection, Chrome will show any CSS style rules that apply to it on the Style’s tab on the left. You can then re-use and specialize those styles with your custom rules.
If for example, you want to make the course’s titles fancier in your Course Catalog page, then you can right click on a course’s title and Inspect it. You’ll then see that it’s defined like this:
<span title="Introduction to TalentLMS" class="tl-formatted-course-name">Introduction to TalentLMS</span>
This means you can write something like:
txt . tl-formatted-course-name {
2 font-family: "Comic Sans";
3 font-size: 22;
4 color: red;
5 }
in your stylesheet, to change the font used, as well as its size and color.
TalentLMS uses CSS classes that start with "tl-" to mark all important elements of a page, so you can style them separately.
Custom eLearning Portal: Unlocked
In this article, we had a look at customizing TalentLMS’ look using CSS and create a custom eLearning portal.
As the topic is vast, we mainly covered the "how to get started" part. For the rest, experimentation, experience, and some reading will make you a CSS champion in no time. Here’s a more advanced CSS tutorial to further your knowledge and a CSS reference listing all the available options from the good folks behind Firefox.
Happy styling, and stay tuned for more articles with advanced TalentLMS related tips, tricks, and tutorials.
