cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

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

Jump to solution

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. 

21 Replies
Highlighted

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

Highlighted

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.goldsworthy@sydney.edu.au‌ 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).

Highlighted

sonya.corcoran@sydney.edu.au‌ 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. 

Highlighted
Learner

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.

Highlighted

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!

Highlighted
Surveyor

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.

Highlighted

jacob.standish@cms.k12.nc.us‌ 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. 

Highlighted

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

Highlighted

jacob.standish@cms.k12.nc.us, 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