Getting Started with Custom CSS

Getting Started with Custom CSS

OVERVIEW

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

Custom CSS refers to the practice of adding your own Cascading Style Sheets (CSS) code to a website or web application to modify its visual appearance and layout. CSS is a stylesheet language used to define the presentation of web content, including aspects like colors, fonts, spacing, and positioning. Custom CSS allows developers and designers to override the default styles of a website and tailor its look to match specific branding, design preferences, or functional requirements. It's often used to achieve unique and personalized design elements that aren't achievable through standard settings or themes provided by a content management system or web platform.

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) theme settings in Site admin. This will make your site more customized to fit your specific brand. The above settings are standard ...

    • Custom Domain Setup

      OVERVIEW If you would like to avoid your end-users accessing a "plutolms" domain, you can add a custom domain to your LMS site. This will become the new URL to which your LMS can be accessed. SETUP CUSTOM DOMAIN Step 1: Click on "Site Admin", ...

    • Home Page Settings

      OVERVIEW This guide will show you how to setup your home page for users and what they will see whether they are logged in or not. HOW TO SETUP YOUR HOME PAGE SETTINGS Click on (1) "Site admin" > (2) "Site Branding" > "Home Page Layout": Configure ...

    • Home Page Display

      OVERVIEW You can edit the items that will be displayed on your site home page for logged in and non-logged in users. Select whether announcements should be displayed on your home page and whether users should see all categories and courses or only ...