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