[ARCHIVED] How do I make a relative path in a custom CSS file to reference the file hosted in the course?

Jump to solution
denism
Community Novice
I'm creating a theme for Canvas using a customized CSS file. My idea is to create a kind of layout/template that will use an image hosted inside the files folder of each course - I want to use a "background.png" file, and each course would have a different version of this file in its files folder.
 
How do I make a relative path/link so that it would automatically reference the file hosted in the course I put the link in?
 
For example, imagine a course of id 01, and another of id 02. Both would use a background image hosted in their own files folder. Then, in my CSS file I'd have something like this:
 
Background-image: url(/files/bg.png)
 
But those two courses would print different backgrounds, since I'd have two different file names "bg.png", each in their respective files folder. Could I create this kind of relative path/link here? If so, how?
Labels (2)
1 Solution
josephclaytonha
Community Member

 if I understand, you basically want to access the files inside a Canvas course, using CSS, and move them externally. Files in Canvas are not linked to a course, they have their own unique identifier. Why? For instance, a teacher might have an exam stored in files that they don't want accessible until a certain time. If you could just go into the Files externally, anyone in the world could pull that exam out- even if they weren't enrolled in the class or a member of Canvas. 

Here's an example of what I mean: 

This is the files section of a random sandbox course. If I mouse over the "007.png" file, the second picture shows the link.

316163_Annotation 2019-06-28 155242.png

316084_Annotation 2019-06-28 155258.png

Notice there is NO attachment to course... and there's no "007.png" either. There's no .png at all, in fact, which means your idea to pull PNG files out with CSS is impossible. 

View solution in original post

0 Likes