UI/UX Customisations

Jump to solution
Community Explorer

Hello there,

I am a multimedia designer with a Canvas administrator account at a college and have been creating and uploading course content for our college along with a team of lecturers and designers. Recently, a number of fundamental modifications have been asked from me that seemed quite hard to achieve, if not impossible, without source code manipulation. I have already been utilising simple custom CSS and JS snippets for removing or altering buttons or small sections that have unique class names in Canvas. I was wondering if the following modifications can be done with the tools provided in Canvas including custom CSS and JS or they are possible only with the help of the low-level approaches such as tailored source code or writing extensions. Below are some of them:

  • Remove the initial pages of quizzes that show the title, the ‘answer the following questions’ message, time limit and due date, attempt number, and ‘begin’ button.
  • Remove confirm submission pop up window and results window (New Quizzes - essay question).
  • Fix the special characters with macron (in Māori language) such as ‘ā, ē, ī, ō, ū’ that look bold and slightly different in the quiz titles in some browsers.
  • (The assignments will be submitted online with file uploads) – remove ‘Canvas files’ option and only keep the file uploading box.
  • Remove ‘try again’ option/button in Assignments.
  • Change some of the elements in the top row: Remove attempts dropbox, change ’submitted’ to ‘successfully submitted’, etc.
  • Change the button from 'submit quiz' to 'submit survey' and show a custom 'successfully submitted' screen.

I am totally open to using any external tools you would suggest in order to have the flexibility required to achieve the desired results. Any other advice is much appreciated. Please ask for further information or screenshots if needed.

Also, could you please advise how I can contact our customer success manager in case you think I would rather communicate with them regarding these customisations?

Thank you very much.


Labels (1)
1 Solution
Community Coach
Community Coach

Hi @TaylanDogan,

i'll say your first 4 bullet points seem very challenging...  For some of the reasons @Chris_Hofer noted, I would recommend against trying to modify the quiz starting process.  I do notice the font appears to be slightly bolder with some of those examples you provided.  I'm pretty sure the Lato font Canvas uses is created and distributed by someone else (and very widely used online and in local apps), but it does seem like something that should be addressed (though I'm not sure how you would even go about asking for a change).  For the 4th item, "Canvas files" is essentially a personal uploaded file collection for each Canvas user.  While it's probably not super necessary, we haven't really seen it cause too much confusion, and it can be beneficial if a student needs to submit the same things for more than one assignment/discussion, as they could find their first upload there.

For the 5th bullet, assignment attempts are set per assignment by the teacher.  If the assignment is set up for only one attempt, I believe you won't see a try again button.  This would also take care of a couple of the items in your 7th bullet point too.

For the last bullet, i'm not sure if you're referring to Classic Quizzes or New Quizzes.  The survey function of classic quizzes is currently not being replicated in New Quizzes, though I know it's under consideration for the future.  I would definitely expect something set up as a survey to say "submit survey," but if it's set up as a quiz in classic quizzes or anywhere in new quizzes, I don't think it makes sense to change that terminology at this point.

All of that being said, you can do quite a bit of customization with css and javascript.  It's going to really come to how much time you want to spend, how skilled of a js/css person you have on your team, and also how much time you have to spend testing your customizations to make sure they still function correctly after every Canvas update.  I have some customization examples on github, but they are in general a bit simpler than most of the things you're trying to achieve here.  You could take a look to get at least a general idea of what might be involved.  One important note is that most customizations only affect the web version of Canvas, and not the ios/android apps.  I have no experience in doing any app customizations, so I don't know what's possible there.  Something to think about as you decide what direction to go with some of these ideas.


View solution in original post