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.
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.
- Learn CSS: The Complete Guide: A plethora of articles, video tutorials, and more on CSS.
- CSS Tutorial: CSS tutorials, examples, sandboxes, and more.
- Specificity - CSS: An overview of specificity and what it means in the world of styling.
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.
