Why did the Design Tools sidebar / styles suddenly stop loading?

Sometimes, users edit a page in Canvas and the Design Tools sidebar won't load or the Design Tools styles don't appear.  Users may even try using the keyboard shortcuts to launch the tools but nothing seems to work.  The most common reason for these issues is that the Design Tools 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.

One way to test for this issue is to try loading the tools 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 Design Tools Config code.  If the Design Tools sidebar will load in beta, then you know that the necessary JavaScript/CSS was removed in production.

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).  
   1. In production, go to the Canvas root account and choose Themes.
   2. Select the current theme.
   3. 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).
   1. While in beta, go to the Canvas root account and choose Themes.
   2. Select the current theme.
   3. Find the Desktop file area and click on View File.
   4. Highlight and copy the content of the file.  It should include a section called Design Tools Config.
      1. NOTE: If your beta environment has already refreshed to production and you no longer have access to the Design Tools Config code, please contact support@cidilabs.com for further assistance.
3. Combine the two files together into one new file (we'll refer to this as file C).
   1. 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).
   2. 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).
   3. 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.
   1. In production, go to the Canvas root account and choose Themes.
   2. 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.
   3. Once you're in the Theme editor, go to the Upload tab in the top left of the screen.
   4. Find the Desktop file area and click Select.
   5. 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 Design Tools 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.