Design Tools Default Setup and Customizations

There are a variety of aspects within the Design Tools portion of DesignPLUS that can be customized. When the tools are installed these customizations are added at an account level with the help of:

Custom CSS
Custom JavaScript
A Primary Customizations course

Let's take a quick look at each of these pieces.

Custom CSS

This is where all of the style comes in for the content you create. The custom CSS file that is uploaded to Canvas does the following:

Brings in the core styles behind the Design Tools preconfigured themes and other components
Lists the institution specific colors that will be used for the content

What Cidi Labs Adds

The CSS added by Cidi Labs contains color variables that set institutional branding colors and then it points to the main Cidi Labs CSS files that are housed on our AWS server. This enables us to provide fixes and updates to the core files without the need for the file to be modified at the institution level.

Custom JavaScript

This is where all of the functionality for the Design Tools sidebar is brought into Canvas. The custom JavaScript file that is uploaded to Canvas does the following:

Builds the Design Tools sidebar
Adds/Edits/Removes content in the rich content editor
Transforms things like accordions and progress bars
Identifies the Primary Customizations Course
Limits access to the DesignPLUS tools (optional)

What Cidi Labs Adds

The JavaScript added by Cidi Labs contains any institutional settings for limiting access to the tools and enabling some optional features and then it points to the main Cidi Labs JavaScript files that are housed on our AWS server. This enables us to provide fixes and updates to the core files without the need for the file to be modified at the institution level.

Primary Customizations Course

The Primary Customizations course is where you can define some of the content you can add into the theme editor like:

What themes users can choose
Content block templates
Syllabus policies
Banner images
Template pages
Local support information
Default Color palettes for the color pickers
Objectives/Outcomes

The functionality for this course is the subject for the Institutional Customization Training.

Over the next few pages we will look a little deeper into using these pieces to extend the Design Tools functionality.