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

Changing Course Title stylings in Canvas

Hi Canvas Community.

I have been wanting to customise the course title for the courses in our account, which I understand is possible if it is not the primary account 

I have been able to get these changes working in the Chrome console with three different tweaks that being

CSS

.course-title {
color: #ec174c;
}

.header-bar h2 {
color: #ec174c;
}

Jquery

$(document).ready(function(){   
$(".header-bar h2").css({"color": "#ec174c","font-size":"2.1EM",});
});

$(document).ready(function(){   
$(".course-title.ellipsis").css({"color": "#ec174c","font-size":"2.1EM",});
});

But all these tweaks get overridden by: https://du11hjcvx0uqb.cloudfront.net/br/dist/brandable_css/new_styles_normal_contrast/bundles/common.... A common CSS file that is being applied to our instance of Canvas.

Is there a way to override stylings in this sheet and/or is there a way to edit stylings in this sheet?

Look forward to your responses.

Regards

Greg 

4 Replies
chofer
Community Coach
Community Coach

Hello there,  @greg_lawrence ...

I'm not too sure of an answer for you, so I am going to share your question with the Canvas Developers‌ group here in the Community in hopes that your question will get some additional exposure.  If you are not yet following this group, please use the link that I have provided, and you'll see two buttons on the top right corner of your screen: "Follow" and "Actions".  Click on both of these buttons.  You'll have to further select "Join group" after clicking on the "Actions" button.  I hope this will be of help to you.  Good luck to you!

Thanks Chris.

samuel_malcolm
Surveyor

Hi Greg,

You shouldnt need to change the style in the JavaScript and CSS, one or the other should work. I would do this in just CSS.
The thing to note is how the browser preferences CSS rules when rendering the document. Within the stylesheet its preference is taken on specificity. So if you had a rule that was just the class name as above, then also had another rule that showed more of the DOM sctructure like `.parentDiv > .parentDivAgain > h2.course-title`  it would take precidence. So I would try adding specificity to your CSS selector. The other pottential solution is using the !important keyword after the rule, but you should try to avoid that if possible. This is a good resource Specificity - CSS: Cascading Style Sheets | MDN 

Hope that helps

Robbie_Grant
Community Coach
Community Coach

 @greg_lawrence ,

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.

How we keep your questions flowing! 

 

Robbie