CSS for your LMS: Customize Your Learning Theme’s Look And Feel With These 7 Savvy Tips

CSS is the visual language of the internet, and Learning Management Systems are no exception. In this list, we hope you find inspiration, simple ideas worth trying out, and perhaps lay the groundwork for bolder ideas about user interface and experience. After all, the best UI\UX out there starts with some CSS.

№0. Before we get started—What eLearn professionals need to know about CSS

Cascading Style Sheets is the name of a syntax that lets you determine visual aspects of a web interface. A simple structure includes a selector, which is something you can, well, select or identity and name in the code of the site; a property of the selector and an attribute, which is what sets the appearance of the selector’s property.

When you look at a style sheet or .css file, you will find the common pattern repeatedly:

selector {
    property: attribute
}

With the syntax, you can determine sizes, heights and widths, colors, placement of elements in relation to the browser window or one another, and even animation.

But what is apparently simple —and to be clear, can remain simple—, underlies a rich world of properties, logic and math.

№1. Locate the safe places where you can edit CSS

If you are interested in making any change to the way your LMS looks, no matter how well-intentioned you are, it’s always recommended to test everything before you make even the smallest changes. Lines of code that might look simple or insignificant could be relied on by multiple other components. So it’s best to just be safe.

Modern LMS like Open LMS or Moodle™ provide themes, which you can select to get a completely unique, branded look and feel to your environment. The best themes —many of which are free— allow you to provide additional CSS instructions in a “sanitized” way. You can usually find these fields under Appearance › Advanced Settings.

The Best Free Themes For Your Moodle™-Based eLearning

If you find more than one field to edit, try to always go with the one that says “initial” or makes it clear that the code is added at the top of the site and loads first. CSS is a “last-in-first-out” type of system, meaning the last edits are the ones that end up on the screen. Generally speaking, you want your CSS customization to be a basis for your pages, which themselves can have custom attributes.

№2. Leverage your LMS theme CSS and frameworks

Pretty much all the popular themes for open source LMS, including Open LMS and Moodle™, are built using frameworks, which provide developers and designers a set of ready-made tools and elements. Its use reduces duplication of efforts, making the work speedier and perhaps more readable. The popular theme “Boost” for example owes its name to the ubiquitous Bootstrap framework.

Having a theme that runs a framework means that you can leverage the framework components in your CSS customization, or just use them in the site without any CSS editing. For example in Bootstrap, you can take advantages of pre-made properties to do things like add faded text or make images fill up a width.

6 Cool Theme Hacks For Your Moodle LMS

Of course, you don’t need to rely on a theme to have access to a framework of your interest in your LMS. Right underneath Bootstrap, Tailwinds appears second in usage with the best growth rate, according to the 2023 edition of the State of CSS survey. Other interesting tools mentioned by the nearly 10 thousand respondents in the worldwide canvass include Open Props, UnoCSS and PureCSS.

If you can, you can install the framework on your LMS codebase. But if you don’t have the permissions, or just want to keep thing simple and smooth, you may use an external library repository or CDN like cdnjs.com. If you want to try out Tailwinds, for example, just search for it and click on the “copy link tag” icon. Then paste the tag atop your HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" referrerpolicy="no-referrer" />

Now you’re ready to include all the CSS from Tailwinds in your LMS, to make something really special.

№3. Befriend your browser console

Whether you use Firefox, Chrome or a similarly featured web browser, you have a powerful tool called the console. Open it using Ctrl+F12 (CMD+F12 on a Mac) or by selecting a place you would like to edit on your LMS, then right-clicking and selecting Inspect from the pop-up menu. A panel to the side or bottom of your browser will open with a lot of tools and code.

The console is actually a powerful companion for any designer or developer, from where you can analyze a website, its speed and behavior, and of course the final display and layout of visual elements.

Go to the Elements section as listed at the top, then look for Styles in the secondary menu to find all the selectors, properties and attributes available for the page. You can filter and search to find the element you want to tweak. If you opened the console using the Inspect option after selecting the element you wanted to edit, the console will highlight the element, so you can go to it directly. You can also do this by clicking Ctrl+Shift+C (CMD+Shift+C) and then on the element you want to play with.

You can also create new elements and properties. Every change you make in the console will be reflected automatically on the page. Beware: You can be safe that none of the changes you make in the console will remain on the site, and they will not survive a refresh. So make sure you don’t have any unsaved work on your LMS. Also make sure to grab a copy of any changes you do want to make on your LMS later on.

№4. The virtues of a CSS policy or dictionary

This ones comes courtesy of a Product Manager mindset: Be as tidy as you can. A seemingly simple and obvious piece of advice, but one I cannot emphasize enough. Files can grow long quickly, and so could properties. There are lots of advice out there on best CSS organization systems and naming conventions. Make sure you’re acquainted with them, but never forget that the system that works is the one you use. The one you find intuitive, easy to understand, that saves you time and helps you.

CSS offers a few alternatives to structure elements. Perhaps the most notable divergence you will find in CSS is whether to apply nesting or not. Nesting allows you to group sub-elements of selectors. In CSS, you can take advantage of parent and child relationship, which allows you to create selectors based on parent (an element your selector is inside of) and child or children (elements contained inside your selector) relationships.

If you want to set the properties for a couple of child elements that have a given parent, these two alternatives are equivalent:

1.›
parent-selector child-selector-a { property: attribute }
parent-selector child-selector-b { property: attribute }


2.›
parent-selector {
    child-selector-a { property: attribute }
    child-selector-b { property: attribute }
}

Which is best? The one you use. If you prefer to organize your code by parent, the second one certainly looks cleaner. But what if you prefer to see all the different ways you are tweaking a the same child selector, regardless of parental status? In this case your organization method might benefit from syntax #1.

№5. Use CSS extensions as long as they do good and not harm

CSS is what is called a scripting syntax, which differs from a programming language in key ways. Aside from simple operations, it is not possible to create functions, respond differently to different conditions, or create variables that you can reuse later. I’m with the camp that believes this was a right design choice. Like HTML, we can focus on creating “static” elements in ways that are simple and readable, and then we separately create any behavior or interactivity with tools intentionally built for it, like the JavaScript language.

It is true that for large, complex design projects —especially if you don’t have a good dictionary— CSS can become complicated quickly. But here is where CSS preprocessors come in, the most commonly used being SCSS, Sass and Less. (Open LMS and Moodle™ support SCSS.) Following a syntax very similar to CSS, you have some logic, including variables, conditionals, loops and functions.

Imagine you want the user to update a color or color set with the click of a button. With only CSS you would have to create functions that update every selector in your sheet, probably using JavaScript. With a preprocessor, you can store the values for colors in variables, and use those variables in your CSS. Turning the colors would just be a matter of updating the variables, keeping your CSS basically intact.

№6. Success in CSS editing (and life) is all about refactoring

I strongly believe Refactoring should be mandatory first semester class for all CS students. (Perhaps web design students as well. Or everybody?)

Whether you’re working on a project by yourself over the course of weeks, months or years; or you’re standing in the shoulder of giants —which is the case if you’re customizing the CSS of your LMS or working with a framework— one Product Management concept you should always be ready to face goes by the name of Technical Debt.

Often tied to code that’s poorly written, hard to read or non-compliant, technical debt also appears in a broader number of more subtle and benign scenarios. After all, it takes years to develop better documentation skills and to actually be able to articulate in plain English what your code intends to do. Other times your code just became outdated due to an update of a library, language or browser.

CSS itself constantly comes with new features and abilities. Browsers create, adopt and support those while making old ones obsolete. Much like the accounting concept of amortization, the idea or principle is useful as a reminder that any and all investments once made will eventually cease to add value. If we properly prepare and budget for new investments —namely time and resources to check things we’re currently using— the debt will be manageable. If ignored, the debt will compound, making operations increasingly harder to manage. An all too common, yet capital mistake made among developers and teams large and small is not allocating people, time or resources for refactoring on an ongoing basis.

So even if you’re tweaking some code by yourself, it’s important to keep a couple refactoring principles in mind. It might just save your life:

1. Give every code you write an expiration date.
2. It’s fine to follow your LMS release schedule as a reminder to look over your code. In fact, you can schedule refactoring actions following every other major release.
3. Make sure you keep track of new releases of CSS as well as the frameworks or tools you use, and use them as guiding moments for refactoring decisions.
4. Regardless of your refactoring schedule, set regular times for site performance testing. Notable performance decreases can signal urgent refactoring needs.
5. Regressions, or scenarios where the best decision is thought to revert things back to a previous state, are to be avoided as much as possible, but often the last recourse you have to solve an issue.
6. Enforcing adherence to coding styles and standards can make any refactoring activities significantly more enjoyable and effective.
7. Last but not least: Simplicity does trickle down from the top. If your development follows a policy or dictionary, begin the refactoring there. Complicated documentation often precedes or foretells refactoring nightmares.

№7. Where to learn more

To be clear, CSS development is a large beast. We encourage you to keep on learning and getting up to date on the many topics and capabilities of the language.

• If you run an Open LMS site, you may need not to bedevil yourself with CSS. Check out the Appearance & Accessibility community for help from other users and Open LMS staff. And of course, you can always submit a ticket.
• If you are running Moodle™ by yourself, check out the forums, and documentation sites like the Moodle™ Developers coding style guidelines.