Skip to content
Gallery
nytgames
CreativeTech Wiki (internal)
creativeTECH Wiki
Share
Explore
Recipes

icon picker
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

⁠
Screenshot 2024-02-20 at 16.42.17.png
⁠
⁠

Example

<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>





Features
How to
1) Create your script
2) Embed your script into an Webflow HTML Embed element
Example
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.