Custom Home Page for all Courses

[jpastorek]

My principal would like for every course at the school to look exactly the same:

1. Each course should have the custom theme applied (which is already done).
2. Each course should have a home page that looks nearly identical: the same layout, buttons, etc. but the name would be different. This is to make navigation easier on the students.

I am pretty sure I have to create a Course Template that then will be used by all faculty members; however, our courses are generated through FACTS, our SIS. I am unsure of the process that we will have to follow in order to achieve the result the principal is expecting.

On top of that I would like to use custom CSS and JavaScript to make the theme look better and create custom objects like buttons and svg's. The Canvas guide only gives details on how to upload the custom files and recommends that you have to maintain them yourself. However, I cannot find any documentation regarding classes and other information with regards to what is already in Canvas. I would like to avoid any potential issues when uploading code that could clash with what is built in already.

Can anyone point me in the right direction on how to build something like the picture I have attached? Is the page in this picture just created in the HTML editor directly in Canvas? Seems difficult as it makes you use inline styles rather than a linked file, which is quite painful.

[JeffCampbell · Accepted solution]

You might look into the use of Blueprint Courses. Our district uses this feature. All of our classes are generated through our SIS like yours, but then a Blueprint is used to provide a standardized home page much like you desire for all courses created for student use. It also used to include some basic pages like the Technology Policy, "About" the teacher page, and some other stuff. Nobody really used those and enough people complained about it that they knocked it down to just a course home page, but then put some links in to some standard pages on the district site and some place holders for us to put specific information. 

[JeffCampbell · Accepted solution]

As for a trick, I am not sure. I don't handle that end at our district. As for the difference between them, you might check out this post from the Product Blog.

The TL;DR comes down to editing the master copy. Once the course is created using a template, the course is set. If the template changes, those changes will not be seen in any courses using the template until new courses are created. In a blueprint, changes filter down to connected courses when they occur. That page goes over it in a bit better detail.

[NoahBoswell]

Hi @jpastorek !

Thank you for posting on the Instructure Community!

While I am not really an expert with custom CSS or JavaScript, I thought I’d add in something I thought of.

So yes, you’re correct, it would be best to use a course template. When your courses are imported through SIS, if you can’t manage to get the template to appear on those courses, something you can do is have the course template shared to Commons. Then, all your teachers can just import that template into all their courses all at once to make it really easy. 

If your school does not have Canvas Commons set-up, that’s okay! You or someone else can create the course template, and then export it as a zip or imscc file to your computer. Then, you can provide your teachers and staff with the file and then they can import it into their courses. That’d be another possible solution, if you can’t get it working through the SIS.

I hope this still helps in some way. Wishing you the best of luck!

- Noah

[jpastorek]

Dang. I'll make another post about the CSS.

In the meantime, sounds like I'll be testing out a Course Template for the next couple months. We do have a Commons just in case the SIS import doesn't quite work out.

[JeffCampbell · Accepted solution]

You might look into the use of Blueprint Courses. Our district uses this feature. All of our classes are generated through our SIS like yours, but then a Blueprint is used to provide a standardized home page much like you desire for all courses created for student use. It also used to include some basic pages like the Technology Policy, "About" the teacher page, and some other stuff. Nobody really used those and enough people complained about it that they knocked it down to just a course home page, but then put some links in to some standard pages on the district site and some place holders for us to put specific information. 

[jpastorek]

I couldn't quite understand the difference between Blueprint and Template. Just semantically it seems like I could use either one. Is there some sort of trick to make all courses generated by the SIS use the same Blueprint?

[JeffCampbell · Accepted solution]

As for a trick, I am not sure. I don't handle that end at our district. As for the difference between them, you might check out this post from the Product Blog.

The TL;DR comes down to editing the master copy. Once the course is created using a template, the course is set. If the template changes, those changes will not be seen in any courses using the template until new courses are created. In a blueprint, changes filter down to connected courses when they occur. That page goes over it in a bit better detail.

[JennyDruckrey]

A few other thoughts...  in your admin "Settings" menu, you should have the option to specify a course template to use for newly created courses.  I believe this applies to SIS created courses as well, though instructors will have to bring in their course content alongside of the template.  Make sure your instructors either know how to link the buttons on your homepage, or that your template buttons are pre-linked to additional pages/module headers in the course template.  We use a course template with buttons at our institution and some of our most common FAQ's are "Why are my buttons broken?" and "How can I add more buttons for my course?".  

I'm really excited to see what comes of the block editor Instructure is working on.  This might make page creation easier without having to do as much coding work.  It sounds like we'll hear more next year.  Block Editor Open Beta Announcement - Instructure Community - 628472

[JeffCampbell]

I'm excited by that Block Editor too. I have a lot of aspects of my courses that are hard coded in the HTML editor. This will make things easier. However, my courses are used by others and I am curious if pages created in the blocks editor will display correctly in the course of someone who does not have that feature turned on.

[jpastorek]

I dug through the Admin area, and I can't seem to find anything related to templating and blueprints. I definitely want to have everything pre-populated for all of our teachers to minimize the issues.

I don't mind coding, but that Block Editor looks really awesome!

[JennyDruckrey]

The course template option is almost the bottom of the admin settings, above the "who can create new courses".  Try doing a CTRL+F to find "template" on the settings page.  Note that you will need to have at least one course marked as a course template in the course settings page to have template options to choose from.

Blueprint courses need to be associated with the courses they populate either through SIS import or manually.  I know they offer locking features (preventing instructors from changing certain or all aspects of the content), but I personally don't have much experience with them.  You'll have to mark a course as a blueprint course in the course settings menu.  Blueprint Courses Overview - Instructure Community - 383201

[jpastorek]

Wow I'm blind! Thank you. 

[paul_fynn · Accepted solution]

Our approach is simply to set  a standard template as a normal course (per school, within each faculty) including any elements that we want to be refreshed/updated each year (Typically these carry a year designation so that we can spot out of date elements eg 2024/25 Homepage). If you have a new installation this might be a full blank course including week etc. For a mature installation the elements that need to be updated only would be included, and everything else would be imported from the most recent delivery of the specific course.

• When our IT team provision they import from the designated school template for all courses
  • we have javascripts that then block some teacher imports eg institutional summative assignments, settings
  • if we need to we can import manually from any of the templates or, for new courses, a full empty template and settings

NB to avoid large scale errors, a  test run needs to be used using the bulk IT process across each template to avoid populating several hundred sites with errors or broken links ....!

[jpastorek]

Thanks, Paul!

I like the idea of having a year designation to keep track of things.