Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
thales
New Member

How do I use custom CSS in content pages?

Jump to solution

Good morning. Or day. Or evening. Or night. Good one! 

I read on the docs that I'd need to upload a CSS file on account-level if I wanted to use custom CSS/JS. I created a file with a few classes for a simple custom image card to be used in course pages and uploaded it using the theme manager for the account that manages the course I was using to test this feature. I wasn't able to use the classes contained in that file though.

275490_Captura de Tela 2018-05-09 às 11.21.45.png

Although it's in portuguese, it says "File(s) will be included in all Canvas pages.". Theoretically, that means that courses managed by that account would be able to use features included in that CSS, right? What I'm trying to do is create an image card like this one

275491_Captura de Tela 2018-05-09 às 11.28.32.png

But what I get when I try to use the same code in the content editor is this:

275492_Captura de Tela 2018-05-09 às 11.29.20.png

Both screenshots were taken using the same CSS and HTML code, but the first one I made locally. The one I tried to create in Canvas didn't work properly. Code used for both attempts:

275493_Captura de Tela 2018-05-09 às 11.31.17.png

I know I'm missing something here, but I don't know what I'm doing wrong - in fact I might not know what I'm doing at all, haha. I'm gonna need a hand on this :smileycry:

I'm still learning Rails, so if something needs to be changed in Canvas' code, that would be a great excuse for me to practice and learn a little bit more. Sorry if I'm asking too many questions, haha. I'm eager to get the platform working so students can start using it.

EDIT: I tried sharing this question to Canvas Developers‌ but the option is greyed out Smiley Sad

1 Solution
hugo_lpz
New Member

THIS WORKED FOR US : 

Admin > Campus > Themes > Open [my custom theme] in Theme Editor > "Upload" tab > "CSS file" > "Select" button : here I upload the css file successfully > Preview > Save.

Back editing my course's page. I use the text editor in HTML mode, I add HTML and CSS code matching the previously uploaded CSS file's classes.
Horray ! After saving my changes it works for me ! The badges on the bottom are made using CSS classes.

332566_Capture d’écran 2019-12-13 à 17.28.36.png

NOTES:

- It didn't worked at first for my cowoker's screen. I suspect browser's cache. It worked 12 hours later.

- The css file and rules applies to all courses of the account / sub-account's, for which you edited the Theme and uploaded the css file.

BEST PRACTICES:

- To avoid CSS classes collisions with canvas built-in CSS classes, always use very specific CSS selectors such as with a header proper to your institution or course, to place in a root html element :

<div class="synlab">

   <h2>Learn how to grow patato</h2>

   <p>Patato are your friends, treat them with due respect until you eat them !</p>

</div>
CSS file:

.synlab h2 { color: #C10000; } /* no element in Canvas can have this ".synlab" class, so you wont change other elements of the UI */

.synlab p { font-size: 10.5px; }

- When Canvas' built-in CSS prevents your from doing legitimate styling, use forced CSS :

.synlab .modules-cell img { max-width: 100% !important;}

The following discussions were helpful:

How do I manage themes for an account? -- TL;DR: Admin > Campus > Themes
How do I create a theme for an account using the Theme Editor? -- TL;DR Admin > Campus > Themes : 1) click "+Theme" to create new theme from models ; 2) Open in Theme Editor.

How do I upload custom JavaScript and CSS files to an account? -- TL;DR:  Admin > Campus > Themes : Open in Theme Editor > "Upload" tab > CSS file > Select [.css file from your computer].

Adding Custom JS and CSS to a single Canvas Course -- TL;DR: not possible per see, needs sub-account managing its sub-account's theme, inside which the owner places a single course.

View solution in original post

5 Replies
James
Community Champion

 @thales , what a nice picture.

To be perfectly clear, when you say Code used for both attempts, you don't mean in the same file and exactly as it appears here do you? The CSS file can only include CSS definitions and not wrapped inside a <style> ... </style> element. It cannot include any HTML. The HTML needs to go into the user page.

The other comment is that the content editor does NOT load the CSS used by rest of Canvas. It's loaded inside an iframe and has a different CSS file, which is specified by the ENV.url_to_what_gets_loaded_inside_the_tinymce_editor_css variable. It doesn't include custom CSS (along with other things) and things often look different inside the editor than they do once you save the content. However, when you save it and are in view mode instead of edit mode, then it should be trying to load the CSS file.

Finally, it is usually not needed to put the bring attention to element inside a heading. Years ago, people used <b> as bold, but the current recommendation is that it should not be used for styling. 

Hello,  @James ‌, thanks for replying. I uploaded a pure CSS file to Canvas, the one on the screenshot is just a test using the same structure. I provided a link to the CSS I uploaded, you can see it here. Just checking to see if I understood it correctly: the content editor loads a different CSS file, but once the content is saved, it gets data from the main CSS file? 

And thanks for the tip, I'll switch <b> for the CSS property.

Hello Thales,

Could you clarify your approach to set a custom CSS affecting your courses :
1. "I uploaded a pure CSS file to Canvas" : where exactly did you upload your file ? via which canvas' page (url and page title please) ?

2. "I provided a link to the CSS I uploaded, such here". Ok, I understand your get a working url link to your file.

3. Then, how, where to add this link ? Are you talking <link rel="stylesheet" type="text/css" href="{css_file_url}" rel="style"> ? and where did you add it since the editor wipe this elements out ?

0 Kudos
Robbie_Grant
Community Coach
Community Coach

 @thales ,

Were you able to find an answer to your question? I am going to go ahead and mark this question as answered because there hasn't been any more activity in a while so I assume that you have the information that you need. If you still have a question about this or if you have information that you would like to share with the community, by all means, please do come back and leave a comment.  Also, if this question has been answered by one of the previous replies, please feel free to mark that answer as correct.

 

Robbie

hugo_lpz
New Member

THIS WORKED FOR US : 

Admin > Campus > Themes > Open [my custom theme] in Theme Editor > "Upload" tab > "CSS file" > "Select" button : here I upload the css file successfully > Preview > Save.

Back editing my course's page. I use the text editor in HTML mode, I add HTML and CSS code matching the previously uploaded CSS file's classes.
Horray ! After saving my changes it works for me ! The badges on the bottom are made using CSS classes.

332566_Capture d’écran 2019-12-13 à 17.28.36.png

NOTES:

- It didn't worked at first for my cowoker's screen. I suspect browser's cache. It worked 12 hours later.

- The css file and rules applies to all courses of the account / sub-account's, for which you edited the Theme and uploaded the css file.

BEST PRACTICES:

- To avoid CSS classes collisions with canvas built-in CSS classes, always use very specific CSS selectors such as with a header proper to your institution or course, to place in a root html element :

<div class="synlab">

   <h2>Learn how to grow patato</h2>

   <p>Patato are your friends, treat them with due respect until you eat them !</p>

</div>
CSS file:

.synlab h2 { color: #C10000; } /* no element in Canvas can have this ".synlab" class, so you wont change other elements of the UI */

.synlab p { font-size: 10.5px; }

- When Canvas' built-in CSS prevents your from doing legitimate styling, use forced CSS :

.synlab .modules-cell img { max-width: 100% !important;}

The following discussions were helpful:

How do I manage themes for an account? -- TL;DR: Admin > Campus > Themes
How do I create a theme for an account using the Theme Editor? -- TL;DR Admin > Campus > Themes : 1) click "+Theme" to create new theme from models ; 2) Open in Theme Editor.

How do I upload custom JavaScript and CSS files to an account? -- TL;DR:  Admin > Campus > Themes : Open in Theme Editor > "Upload" tab > CSS file > Select [.css file from your computer].

Adding Custom JS and CSS to a single Canvas Course -- TL;DR: not possible per see, needs sub-account managing its sub-account's theme, inside which the owner places a single course.