CSS Style gets stripped out of HTML Code. How do I resolve this?

[ivamotusaga]

I'm trying to find the most efficient way to make changes to multiple pages and the best way so far is to add a CSS code to the original HTML. However it gets stripped out when I preview page. Is there a way to add the CSS code without issues occuring? This is the code:

<style>
/* Scope everything to your wrapper so it doesn’t spill into other Canvas elements */
#dp-wrapper {
--after-resources-indent-fix: 3ch; /* cancels 3 non-breaking spaces visually */
}

/* 1) Resources header (icon row) = padding 40 */
#dp-wrapper h4:has(i.fa-paperclip) {
padding-left: 40px !important;
}

/* Line right after Resources = padding 85 (and cancel &nbsp; visually) */
#dp-wrapper h4:has(i.fa-paperclip) + p {
padding-left: calc(85px + var(--after-resources-indent-fix)) !important;
text-indent: calc(var(--after-resources-indent-fix) * -1);
margin-top: 0;
}

/* 2) Instructions header (icon row) = padding 40 */
#dp-wrapper h4:has(i.fa-clipboard-list) {
padding-left: 40px !important;
margin-bottom: 0.25rem;
}

/* Plain text immediately after Instructions = padding 85 */
#dp-wrapper h4:has(i.fa-clipboard-list) + p {
padding-left: 85px !important;
margin-top: 0;
}

/* List immediately after Instructions = stand-alone with padding 75 */
#dp-wrapper h4:has(i.fa-clipboard-list) + ol,
#dp-wrapper h4:has(i.fa-clipboard-list) + ul {
padding-left: 75px !important;
margin-top: 0.25rem;
}

/* Flatten weird Canvas wrappers like <ol><li style="list-style-type:none"><ol>… */
#dp-wrapper h4:has(i.fa-clipboard-list) + ol > li[style*="list-style-type: none"] {
display: contents;
}

/* General list spacing */
#dp-wrapper ol,
#dp-wrapper ul {
margin-top: 0.25rem;
margin-bottom: 0.75rem;
list-style-position: outside;
}

/* Kill empty paragraphs (like <p>&nbsp;</p>) */
#dp-wrapper p:empty,
#dp-wrapper p:has(> br):only-child {
margin: 0 !important;
}
</style>

[JensRohleder · Accepted solution]

As a Canvas admin you can upload a Css-file in the theme editor. It can be on account or subaccount level.

https://community.canvaslms.com/t5/Admin-Guide/How-do-I-upload-custom-JavaScript-and-CSS-files-to-an...

[JensRohleder · Accepted solution]

As a Canvas admin you can upload a Css-file in the theme editor. It can be on account or subaccount level.

https://community.canvaslms.com/t5/Admin-Guide/How-do-I-upload-custom-JavaScript-and-CSS-files-to-an...

[james_whalley · Accepted solution]

@ivamotusaga That is frustrating and I have dealt with it in the past. Unfortunately, Canvas has restrictions regarding what code can be added via the Rich Content Editor. You can find the allowlist here. I believe this is probably to ensure a common experience for students across an institution's instance of Canvas.