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":



Step 1.2: Then you select "Primary Theme Settings" under "Primary Branding"



Step 1.3: 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 turquoise 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 turquoise as shown below:




OTHER RESOURCES:


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

SHORT VIDEO:




    • Related Articles

    • 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 ...

    • Site Administration

      OVERVIEW In Site admin, site administrators can perform various tasks relating to the management and organization of user accounts, courses, site wide reports, integrations, branding and badges. The most important site admin actions when getting ...

    • Webinar - Getting Started with Pluto LMS

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

    • 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 ...

    • 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 ...