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 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> </p>) */
#dp-wrapper p:empty,
#dp-wrapper p:has(> br):only-child {
margin: 0 !important;
}
</style>
