Skip to content
Customer Support Portal
  • There are no suggestions because the search field is empty.

Why did the DesignPLUS sidebar/styles suddenly stop loading?

When the DesignPLUS Config code is removed from the Canvas account theme's JavaScript and/or CSS file, you can combine the previous file with the new one in order to restore sidebar functionality.

Sometimes, users edit a page in Canvas and the DesignPLUS sidebar won't load or the DesignPLUS styles don't appear. Users may even try using the keyboard shortcuts to launch the sidebar but nothing seems to work. The most common reason for these issues is that the DesignPLUS Config code has been removed from the Canvas account theme's JavaScript and/or CSS file. This may happen when an admin adds a new file to the Canvas theme without combining the previous file's code into the new file.

Check the beta environment

One way to test for this issue is to try loading the sidebar in the Canvas beta environment. Since the beta environment does not update from production instantly, you can usually see Canvas with the previous JavaScript/CSS files which contained the DesignPLUS Config code.  If the DesignPLUS sidebar will load in beta, then you know that the necessary JavaScript/CSS was removed in production.

NOTE: If your beta environment has already refreshed to production and you no longer have access to the DesignPLUS Config code, please contact support@cidilabs.com for further assistance.

If you've determined that this is the case, follow the steps below to combine the previous file with the new one.  

1. Download the production file (we'll refer to this as file A).

  • In production, go to the Canvas root account and choose Themes.
  • Select the current theme.
  • Find the Desktop file area, right-click on View File, and choose Save Link As... to download the file.

2. Copy the content from your beta file (we'll refer to this as file B).

  • While in beta, go to the Canvas root account and choose Themes.
  • Select the current theme.
  • Find the Desktop file area and click on View File.
  • Highlight and copy the content of the file.  It should include a section called DesignPLUS Config.

3. Combine the two files together into one new file (we'll refer to this as file C).

  • Open file A on your computer with any code editing software you like.  If you're not sure which program to use, try Notepad (Windows) or TextEdit (Mac).
  • For JavaScript files, paste the content you copied from file B at the bottom of file A and save it with a new name ending in a .js file extension (e.g. combined_file.js).
  • For CSS files, paste the content you copied from file B at the bottom of file A, but make sure to look for any lines of code that begin with @import and cut/paste those to the very top of the file.  CSS files do not work unless all @import statements are at the top of the file.  When you're done, save the file with a new name ending in a .css file extension (e.g. combined_file.css).

4. Upload file C to the production Canvas theme.

  • In production, go to the Canvas root account and choose Themes.
  • You can either edit your current theme directly or create a new theme by clicking on the +Theme button in the top right and choosing to base it on the current theme.
  • Once you're in the Theme editor, go to the Upload tab in the top left of the screen.
  • Find the Desktop file area and click Select.
  • Upload file C.

5. Save the Theme and name it however you see fit. Then apply the Theme.

6. Test to make sure that the DesignPLUS sidebar and/or styles work now, and that the other applications that depend on your JS/CSS are still working properly too.

    If you'd like any assistance with this process, reach out to support@cidilabs.com and we can walk you through it on a Zoom call.