Your website
Custom CSS: style your website and single sections
Custom CSS lets you change how your website looks beyond the theme's settings: a different font, a thinner weight, text over an image or your own layout for a section. Every plan can use it. You add it under Design → Custom CSS, save it as a draft, preview it and publish it with Branding.
Reviewed · English guide
What custom CSS is
- Your CSS is added to every page of the website, after all of the theme's stylesheets, so your rules win without !important.
- Each theme keeps its own stylesheet. The CSS you write for one theme is not applied to another.
- Custom CSS is available on every plan, including free websites. It counts toward your database storage.
- Uploaded custom themes can have custom CSS too, on top of the theme's own CSS. All versions of one uploaded theme share the same stylesheet.
Add or edit your CSS
- Open your website, choose Design and then the Custom CSS tab.
- Write your CSS in the editor and choose Save draft. Saving never changes the live website.
- Use Preview with custom CSS to see the draft on your website before anyone else does.
- Choose Publish Branding at the top of the Design page to make the draft live. If you have also staged a new template, the template and its CSS go live together.
- A stylesheet can be up to 64 KB.
Style a single section with class names
- In the page editor, open a section's settings and fill in CSS class names, for example hero-dark wide-title.
- Use up to 5 class names, 200 characters in total, separated by spaces.
- Each name starts with a letter or "_" and uses only letters, digits, "-" and "_". Names starting with eyivo- are reserved.
- Class names apply to the section in every language and stay on the section when you change theme.
- On a published page, class names are saved with the page draft and go live when you publish the page.
- Example: a section named promo-band can be styled with .promo-band { background: #0f172a; color: #fff; }.
Fonts and images
- Load a font with @import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;700&display=swap"); or an @font-face rule whose src uses an https: address.
- Use background images from any https: address, or inline images as data:image/png, jpeg, gif, webp, avif or svg+xml.
- Addresses starting with http:, relative addresses such as /images/a.png, and addresses written with escape characters are refused, so a page never mixes secure and insecure content.
Examples
- Custom font: after the @import above, body { font-family: "Inter", sans-serif; }.
- Thin weight: .my-hero h1 { font-weight: 200; } works when the font includes weight 200.
- Text over an image: .photo-band { position: relative; background: url("https://images.example.com/photo.jpg") center / cover; min-height: 24rem; display: grid; place-items: center; color: #fff; }.
- Section in a grid: .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }, with a smaller column count inside a @media rule for phones.
- Gradient heading: .brand-title h2 { background: linear-gradient(90deg, #2563eb, #db2777); -webkit-background-clip: text; background-clip: text; color: transparent; }.
- Colouring just one word of a heading isn't possible with CSS alone, because the word needs its own element. ::first-letter and ::first-line can colour the first letter or line.
CSS and theme changes
- When you stage another template, the editor switches to that theme's stylesheet: the one you used before with it, or an empty one.
- Stylesheets for other themes lists the CSS kept for themes your website used before. You can view it, copy it into the current theme's draft, or delete it.
- Switching back to a theme brings its CSS back when you publish Branding.
- Retiring or deleting the last version of an uploaded theme on a website deletes that theme's CSS for the website, because a new upload is always a new theme.
Fixing problems
- Preview without custom CSS shows your website with the theme alone, so you can tell whether a broken layout comes from the theme or from your CSS. It works only in the preview.
- Earlier versions lists the last 10 published versions of the stylesheet. Restore to draft puts one back in the draft; publish Branding to make it live again.
- Errors name the line they start on: text in quotes or a comment that is never closed, a "{" or "(" without its partner, a URL that isn't https: or a data: image, or a stylesheet over 64 KB.
- The "<" character, expression(), javascript:, vbscript:, behavior, -moz-binding and @charset are not allowed, because they could run code or break out of the stylesheet.
What custom CSS can't do
- Custom CSS never runs JavaScript.
- The "Powered by Eyivo" badge, the cookie consent banner and the owner bar always stay visible.
- Selectors that depend on a theme's inner markup may stop matching when the theme is updated. Use the stable hooks instead: body.theme-{key}, layout-{name}, and the class names you give sections.
Using the API or MCP
- The Content API and MCP have list-custom-css, get-custom-css, update-custom-css and delete-custom-css. update-custom-css saves a draft; publish-theme-settings publishes it with Branding.
- create-page-component and update-page-component accept css_class.
- The AI page assistant doesn't change custom CSS and keeps a section's class names when it rewrites the section.