Is there really no way to apply a style sheet to a specific course?

[kevinw]

I've done some research on here and I've found some references to inline styling. But I can't find anything that suggests that a CSS can be applied only at a specific course level. 

For example, we have two courses and want two different style guidelines for both. Say in Course B we want headers 2 through 5 to be bold/italic/centered/size 14 but we don't want that in Course A. Course A is happy being non-stylized. 

There's no way to assign a stylesheet that is specific to that particular course? I understand this can be done with div containers but I don't see that being a viable solution when you need it done to every content page. 

[bneporadny · Accepted solution]

Hi  @kevinw ,

Canvas doesn't allow #css style‌ sheets to be uploaded at the course level.  It is available at the top account level as we as at the different sub-account levels.

[kevinw]

Do you know why? 

[bneporadny]

Hi  @kevinw ‌,

I don't know the exact reason, but I would think it would have to do with the complexity of code that would be required to handle allowing CSS to be upload at the individual course level, not to mention most instructor wouldn't know how to do CSS. Which is why it is best left at the account level where an Admin with knowledge of CSS be allowed to control it so not to cause issues.

My suggestion for you if you want to do this via two distinct CSS files and not utilizing different DIV's is to create two sub-accounts and put the course into the sub-account with the correct CSS loaded.

Brian

[moein_ghodrati]

Hi  @kevinw ‌

A messy but practical workaround would be to create single-course sub accounts and assign the style to the whole sub-account. Since you wouldn't be adding any other course to that sub-account, it'll simulate single course styling. 

Well, I assume you have permission to create your own sub account in the Canvas instance you're using.

Cheers

Moein

[aaron_bahmer]

 @kevinw ,

Although I'm not trying to stylize things per course, I did create a custom css file to upload as part of the admin "theme" tool. I created a single div.class with each of the desired stylized elements defined as children. Making it work requires faculty to create a single classed div around all of their content, so just one code pair around the entire page. It doesn't appear properly in the editor, but looks fine after they save.

div.ewc {etc}

div.ewc h1 {}

div.ewc p {}

...etc

If it's really necessary, you could define several of these "master" divs and related elements and tell those who need them how to make them work.

Good luck!

[jacob_standish]

An approach that I've taken with this challenge is to create template html files with the styles already added in.  I then packaged this into a Chrome extension and shared it with my staff.    Then they can just drag and drop the template and not even touch the HTML.

This was inspired by  @James   and his Canvancements - Canvas Enhancements  

<shamelessPromotion>

I put in a proposal for InstructureCon to show how you can build your own templates like this.   

</shamelessPromotion>

[kona]

What?! That looks totally amazing... is it available to try out yet??

[jacob_standish]

I don't have an extension I can share out yet.  It's on a very long list of to dos to build a generic example that the community could test out and give feedback... 

The one in my example above uses content from templates that our district purchased and the images are actually hosted outside of Canvas so I need to limit access to it.  The idea is that you design your template and then we package it into the extension.  My staff have really liked that fact that they can just drag and drop into any RCE where they are editing. 

[kona]

 @jacob_standish , if you need any beta testers once you're ready, I'm available and quite willing!! Hint, hint, hint... 😉

This is super exciting work and I look forward to attending the InstCon session (think positive, your proposal WILL get accepted). 🙂

Kona

[MattHanes]

I would totally attend that session.

[bneporadny]

 @jacob_standish ‌,

I hope to this session @ #instructurecon2018‌

[kenneth_larsen]

 @jacob_standish  I love it! Way to hack Canvas! If you get accepted, let us know. I would love to attend that session as well. Keep up the good work.

[audra_agnelly]

This is an amazing idea! I'd love to attend this session!

[tylerweldon]

 @jacob_standish ‌ This is awesome!! If this gets accepted @instructurecon2018 I will be there.  If you need any help beta testing or extra coders let me know. I would be happy to lend a hand on this project. 

[james_paradiso]

Very cool!...consider me a fan of your work and another volunteer 'beta-tester' if you'd like to get more hands on the tool!

[rebecca_goldswo]

 @sonya_corcoran ‌ This looks promising and similar to what we discussed! 

Fantastic idea and solution, Jacob! Hope you get into CanvasCon 2018 - any chances of that being to the Australian leg?! I'd be keen to test too. 

[sonya_corcoran]

YES!!! If you need help building this out - let me know. I've no idea how you're doing this but I would love to learn. Myself and  @rebecca_goldswo ‌ were thinking about building our very own LTI to do this - think ob3 meets http://canva.com/ or better yet, http://tablo.io/  (drag and drop Word documents and create HTML instantly).

[jblumberg]

I implemented a solution for this using custom Javascript.  We store the the custom CSS files in a folder on Rackspace... but you could use any external server.  I originally wrote it where you store the css in the course's files, but this broke if Files was hidden.

Basically somewhere in the document (ideally at the top) you would wrap everything in a div tag:

<div class="cc-custom-css" id="custom-css-for-bio-101">
   A bunch of cool stuff
</div>‍‍‍

Then you would add some custom JS to load the CSS...  Here is the function, you will need a bit more code to call the function after the page fully loads.

        //Load custom css from an external server if required
        function ccLoadCustomCSS() {
            if($(".cc-custom-css").length > 0){
                // Find the filename
                var idtag = $(".cc-custom-css").attr("id"); 
                var path = "https://yourserver.com/CustomCSS/";

                // Load the CSS
                $("body").append('<link media="all" rel="stylesheet" type="text/css" href="' + path + idtag + '.css' +'">');
            }
        }
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Please note:  I start all of our class tags with 'cc-' for Champlain College.  You should change this to something for your institution.  I do this so that I will never have a class tag that overlaps with a class that Instructure uses in their code.

If you don't want to have to add a class tag to every page, you could grab the course code and match this up to decide which CSS file to utlize... then just keep a lookup table on file.  I wouldn't suggest using courseID numbers as these will change every semester a course is copied.

[g_r_saward]

Hi Josh

how do you load the javascript so that you can then add in the stylesheet?  Is it possible to do this on the free teach version at canvas.instructure.com

[michael5]

We never needed it as all our styles fit perfectly into each sub-account, but if I needed to do it, I'd use JS to differentiate between courses. So basically, you'd define your CSS classes as normal and then use JS to apply to them to only one course. As each course has a unique identifier in the URL (the number in https://danes.instructure.com/courses/204 , for example) and we know these numbers before writing the script, you'd just have to refer to them and use an if-statement to differentiate.

This will require some coding skills and some time to write and test, though.

If the course 1 identifier is 204 and the course 2 identifier is 209, and you want course 1 to be styled and course 2 not to be, the progress and code would be something like:

> Upload a normal stylesheet that defines everything you want for course one (204)

> In JS, write a function that searches the current URL for the identifier number and have it return this as a global variable (this may be helpful Get the current URL with JavaScript? - Stack Overflow) 

> Write a JS if-function to check if 209 (course 2, un-styled) is present in the current URL (using the variable from the previous function for comparison)

> If true, use JS to revert your style changes back to the original (see how to alter CSS in JS here JavaScript DOM CSS)

> Both functions in JS have to be called every time the user loads a page in the entire account/sub-account.

> If you're getting really into it, you could also try to use jQuery to make sure the functions fire before anything else is visually loaded using something like $( document ).ready(){} https://learn.jquery.com/using-jquery-core/document-ready/

> Upload both the JavaScript document and the CSS document to the account/sub-account.

This is all theoretical, but if you have the coding skills or an IT guy/web-designer at hand, you could probably pull it off.

[sonya_corcoran]

Looks like there's a few Chrome Extensions for enhance Canvas:

CourseBuilder Support - www.coursebuilder.auckland.ac.nz - ISOM Canvas Tools 

GitHub - shawnr/gesso: A Google Chrome extension designed to enhance the content editing experience ...