5 Tips On Styling Your Adapt Authoring Tool Project

How To Style Your Adapt Authoring Tool Project

One of my favorite past times is testing out new technologies that aid in designing and developing learning. Recently I tested out the Adapt Authoring Tool in more depth by changing the look and feel of the default theme. I made the style changes using CSS. Here are 5 tips to help you on your journey with stylizing your next Adapt Authoring Tool project.

Check out what one of my projects looked like before and after styling.

What is the Adapt Authoring Tool?

The Adapt authoring tool is a free and open source application which allows you to quickly build responsive eLearning content.

What you’ll need:

  • Adapt Authoring Tool.
  • Ability to read/write CSS or want to learn how to.
  • Google Chrome (Recommended) or another browser.
Discover the best eLearning Authoring Tools
Save Time & Money. Compare the Top Authoring Tools by features, reviews and rating!

1. Familiarize Yourself With HTML And CSS If You Are Not Already Familiar

Learn HTML and CSS with Codecademy, Code School, or Treehouse. Utilize the following resources for more tips, tricks, and best practices.

2. Add Classes To The Main Project Page, Titles, Articles, Blocks, And Components

You will style with the classes that are already built into the project or you will add your own classes to different parts of your project, such as, on components. Look for a text entry field titled Classes and enter your class name here. In this example I show a new class added onto an image component.

3. Use The Custom CSS/LESS Code Text Entry Field

You will use the Custom CSS/LESS code text entry field to write your CSS/LESS. You will either override an already existing class’s CSS or you will use a class you created in one of your Classes text entry fields and write some CSS to go with it. Check out how I use the class I added to the image component to change its size.

4. Use Your Browser’s Inspect Elements Feature For Testing

I recommend using Google Chrome. Navigate in Google Chrome’s Developer Tools to the Inspect Elements feature.

You can check out here where our new class is that we had added to our image component. You can even test out the changes you may want to make here in the inspector prior to adding the code into the tool. Let’s see what this image might look like if we make it even bigger.

What if we want to change something like all of the card component’s background colors? Let’s test it in the inspector first.

If we like it we can add it to the CSS/LESS text entry field like so and preview the finished output.

5. Investigate How Others Style

If you’re looking for inspiration on how others use CSS check out CodePen for code snippets.

CodePen is a social development environment for front-end designers and developers. 

Close