If you’ve ever wondered how you can customize the visual experience of your students, Front End developer of the Spanish Moodle Partner 3&Punt, Roser Pruaño, is here to help.
In her presentation, Pruaño makes a brief overview of basic design principles, HTML and CSS, before offering a detailed hands-on session. The goal is not only to create an engaging visual experience, but a process that allows you to keep your LMS up to date in functionality.
What is a Theme?
In Moodle, you can think of the theme as a template, where you can work on the visual design of your site. It’s independent of the structure and content of your site, so you can modify or change it without affecting your courses.
What is a Child Theme and what is it for?
The “Child Theme” is part of an existing “parent,” theme taking advantage of its original development and configurations.
When you start developing a child theme, it will be identical to the original. Eventually you will be able to include your details and customizations.
The level of differences between parent and child can be minimal or radical, and can include colors, fonts, menus, palettes, and more.
What is CSS (Cascade Style Sheet) ?
CSS is a syntax for visual design of websites and applications. It literally translates to “Cascading Style Sheet,” referencing the criteria for applying parameters. Those that appear at the end of the “waterfall” take precedence.
CSS is a powerful tool. In terms of software programming, it is one of the clearest languages to understand and apply.
What are the advantages of designing a child theme with CSS?
- Moodle gives you the parent theme“Boost”to start with personal design
- You save time, money and headaches, since much of the initial configurations are already developed.
- You can separate the main code from your theme and generate a new one for your own modifications. So in the future you will see no complications and you will be able to make updates more easily.
- You can create as many branches of your child themes as you want, and apply them to as many different Moodle sites as you want.
How do I get started with creating a child theme?
- You’ll need a Moodle site, preferably with the latest version. Please note that Moodle 3.6 is based on a system higher than previous versions, so your themes can only be compatible with Moodle 3.6 onwards.
- Locate the“Boost” theme that comes by default and create a copy. Renames the theme in the folder, file names, and parameters in the configuration file.
- Make the modifications you want, including CSS code. Thanks to the married scheme, you can add the properties you want to modify at the end of the file, without having to modify the original parent theme code.
For more information, watch the full video. You can see the base presentation here (In Spanish).