How to Use Custom CSS in Adapt eLearning Authoring Tool

How to Use Custom CSS in Adapt eLearning Authoring Tool

Adapt learning is a free and simple to use e-learning authoring tool. With this tool users can design eLearning courses which are fully responsive, multi-device, HTML5 friendly. Adapt authoring tool allows the flexibility to eLearning creators to create the courses using the award-winning Adapt developer framework. In this blog we are going to show the techniques to use custom CSS.

Component:

Step 1: In Component settings, scroll down to Classes field.

How to Use Custom CSS in Adapt eLearning Authoring Tool 01

Step 2: Enter a classname. For example, here we will give “txt1” as class name

How to Use Custom CSS in Adapt eLearning Authoring Tool 02

Step 3: Go to Project settings

How to Use Custom CSS in Adapt eLearning Authoring Tool 03

Scroll down to “Custom CSS/LESS code” and add your CSS code in the textarea. For example, change the font size to 40 and text color to Blue.

How to Use Custom CSS in Adapt eLearning Authoring Tool 04

Step 4: Click Save and then preview to see the changes.

How to Use Custom CSS in Adapt eLearning Authoring Tool 05Extensions

We have enabled the Trickle extension.

How to Use Custom CSS in Adapt eLearning Authoring Tool 06

To make custom changes to the extension, follow these steps.

Step 1: Open the block or article where you want to activate the trickle.

How to Use Custom CSS in Adapt eLearning Authoring Tool 07

Step 2: Preview the course and press F12.

How to Use Custom CSS in Adapt eLearning Authoring Tool 08

By using slection tool, click on Continue button

How to Use Custom CSS in Adapt eLearning Authoring Tool 09

Copy the trickle__btn which is default class.

Step 3: Go to Project settings and then “Custom CSS/LESS code”. Paste the class “trickle__btn” and add custom CSS. Here we will resize and change positions.

How to Use Custom CSS in Adapt eLearning Authoring Tool 10

Step 4: Click Save and preview.

How to Use Custom CSS in Adapt eLearning Authoring Tool 11

How to Use Custom CSS in Adapt eLearning Authoring Tool 12

Custom elearning development

Tags: Custom eLearning DevelopmentRapid eLearning DevelopmentFlash to HTML5 Conversion ServicesConvert PowerPoint to eLearningTranslation and LocalizationLearning Management System

2 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *