Skip to content
Recipes
Inject global styles to Webflow
Features
Our Paid Post Translator (the app that processes the assets uploaded in Scoop) scopes all the styles under the #story selector, making impossible to style elements outside of it.
When required, you could target global elements injecting the styles via a JavaScript code loaded into a Webflow HTML Embed element.
How to
1) Create your script
Paste your CSS styles in this JavaScript string.
<script>
const style = document.createElement('style');
style.innerHTML = `
/* Your global CSS styles here */
`;
document.head.appendChild(style);
</script>
2) Embed your script into an Webflow HTML Embed element
Example
Set NYT wrapper defaults
<script>
const style = document.createElement('style');
style.innerHTML = `
/* Remove the template margin bottom, that normally set a blank space */
article#story {
margin-bottom: 0;
}
/* Add white background to furniture header and footer, in case of elements behind (for ex. fixed backgrounds) */
#app header:first-child {
position: sticky;
z-index: 100;
background-color: white;
}
footer[role="contentinfo"] {
position: relative;
z-index: 1;
background-color: white;
}
footer[role="contentinfo"]::after {
content: "";
width: 100vw;
height: 100%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: white;
z-index: -1;
}
`;
document.head.appendChild(style);
</script>
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.