Getting Started with Custom CSS

Getting Started with Custom CSS


Pluto LMS offers a custom CSS editor which enables you the ability to add your own CSS code to customize your LMS theme. 

STEP 1: NAVIGATE TO THE EDITOR


Step 1.1: Click on "Site admin" > "Site branding" > "Primary (Site Theme)":



Step 1.2: Click on "Custom CSS":




STEP 2: UNDERSTANDING CSS


CSS is a styling language used to customize your website appearance (style an HTML document). For more help on CSS, click here.

You may require a developer to implement CSS changes for you. 


STEP 3: A BASIC EXAMPLE


Let's say you would like to change the colour of your course card background, you can use custom CSS to do this.

This is the standard Pluto LMS visual of a course card without any custom CSS applied:



Perhaps you would like a green card background instead of white as shown above. Let's show you some basic steps to achieve this. 

Step 3.1: You will need to go into inspect mode within a browser like Google Chrome:

Shortcut when on applicable browser page:

Windows and Linux: Ctrl+Shift+C
MAC: Command+Shift+C

OR right click and then select "Inspect" on your browser page.




Step 3.2: Select the element of interest:




As we can see, the HTML class (learn more) for this element is "card-body". This class will need to be referenced when applying custom CSS.

Step 3.3: Enter your custom CSS code into the code editor as shown below:



Note: Additional ID and CLASS references were made in order to isolate the CSS target. In this example, we want to isolate the custom CSS to course cards only and not ALL card across your site. By referencing multiple parent IDs and CLASSES, this can be achieved. 


This will then update your card-body background to green as shown below:




OTHER RESOURCES:


  1. W3 Schools HTML Tutorial
  2. W3 Schools CSS Tutorial
  3. W3 Schools Color Picker

SHORT VIDEO:




    • Related Articles

    • Custom Domain Setup

      UPDATE YOUR LMS DOMAIN: Step 1: Login to your LMS, click on "Site Admin", "   Step 2: Follow the prompts to make the request. ADDITIONAL HELP: REGISTER YOUR NEW DOMAIN OR SUB DOMAIN If you have an existing website, let's say "yourcompany.com", you ...