This Guide is for the legacy DesignPLUS sidebar (installed before July 2023). Visit the Current Admin Guide Links to an external site. for information for newer installations or those who have upgraded.

Design Tools Default Setup and Customizations

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:

  1. Custom CSS
  2. Custom JavaScript
  3. 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:

  1. Brings in the core styles behind the Design Tools preconfigured themes and other components
  2. 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:

  1. Builds the Design Tools sidebar
  2. Adds/Edits/Removes content in the rich content editor
  3. Transforms things like accordions and progress bars
  4. Identifies the Primary Customizations Course
  5. 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.