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

    • Creating a Custom Report

      OVERVIEW The Custom Reports module allows you to create custom reports to supplement the native Pluto LMS reports.  Note: This may require the assistance of a developer.  CREATE A CUSTOM REPORT Step 1: Click on "Site admin", followed by "Site ...
    • Custom Domain Setup

      SETUP CUSTOM DOMAIN Step 1: Click on "Site Admin", followed by "Site branding" and then "Setup custom domain."   Step 2: Follow the prompts to make the request. Once you have submitted your request, you will receive an email with instructions needed ...
    • Create Custom Profile Fields

      OVERVIEW Customize what information you wish to collect from your LMS users by creating new profile categories and fields. This information can then be used to auto create course groups or auto filter users to branches. NAVIGATE TO PROFILE FIELDS ...
    • Update Your Site Branding

      OVERVIEW You can customize your site's logo, favicon, brand colour and much more by updating your primary (site) and secondary theme branding settings in Site admin.  SITE BRANDING SETTINGS Click on "Site admin", followed by "Site branding", then ...
    • Webinar - Getting Started with Pluto LMS

      Recorded Session: ​ Useful Links: Site Branding Course Management Course Enrollment User Management