← All guides

Flatsome custom CSS that survives theme updates

Flatsome gives you more than one place to put your own CSS, and on a normal day they all work. The difference shows on two days: the day Flatsome updates, and the day you switch themes — including the switch most Flatsome sites make sooner or later, to the Flatsome Child theme. This guide goes through each place, what it survives, and how to keep your CSS somewhere neither day can touch.

Where your Flatsome CSS can live

The theme's own files. Anything you add to style.css, or to any other file inside the flatsome folder, is gone after the next update, because an update replaces the whole folder. UX Themes' own documentation is blunt about it: never add CSS to the parent theme's style.css (Where do I add my custom CSS?).

Flatsome's Custom CSS fields, at Theme Options → Style → Custom CSS (the same fields also appear under Theme Options → Advanced → Custom CSS). There are three: all screens, tablets and down, and mobile only. They survive updates, because they are stored in the database rather than in the theme folder. But they are theme options, and WordPress keeps theme options per theme: activate Flatsome Child and its options start empty. Moving them across means a trip through Flatsome → Advanced → Backup and Import.

Appearance → Customize → Additional CSS. WordPress' own box. It survives updates too, and it too is saved per theme — the child theme has its own Additional CSS, and it starts empty.

The child theme's style.css. The method UX Themes recommends, and it does survive updates. It means editing a file, usually without a preview, and browsers may keep serving the old file until the child theme's version number changes. It also ties your CSS to the child theme: switch away from it, and the CSS stays behind.

A plugin that keeps the CSS apart from the theme. It survives both days, because nothing about it belongs to Flatsome. That is what the steps further down set up.

Why a rule sometimes does nothing

Before moving anything, it helps to know why a rule that looks right has no effect. There are three usual reasons.

Something later wins. When two rules are equally specific, the one printed later wins. Flatsome prints the CSS its options generate (colours, fonts, sizes) into the page head, so a rule that comes before it loses without any error.

Something more specific wins. The theme's selectors are often longer than yours: .header-main .nav > li > a beats .nav a wherever both match. Match the theme's selector, or add one more class from the same element, rather than reaching for !important — which then has to be beaten with another !important.

You are looking at a cached page. Most Flatsome shops run a page cache: the host's, LiteSpeed Cache or WP Rocket. A change that is saved but not visible is usually a cache that has not been cleared.

Breakpoints matter as well. Flatsome's tablet styles start at 849 pixels and its mobile styles at 549 pixels, so your own media queries line up with the theme when they use the same numbers:

/* Tablets and down — like Flatsome's tablet field */
@media (max-width: 849px) {
	.header-main .nav > li > a {
		padding: 0 8px;
	}
}

/* Mobile only — like Flatsome's mobile field */
@media (max-width: 549px) {
	.product-small .box-text {
		padding-bottom: 12px;
	}
}

Move your CSS somewhere that stays

StyleScript is a free plugin that keeps your CSS, JavaScript and header/footer code in WordPress' database, apart from any theme, and prints the CSS at the end of the page head — after the Customizer's Additional CSS and after the CSS the theme's options generate. At equal specificity, your rule is the one that wins.

1. Install StyleScript and open Appearance → StyleScript.
2. In the CSS tab, paste what is in Flatsome's all-screens field.
3. Paste the tablet field's CSS inside @media (max-width: 849px) { … } and the mobile field's inside @media (max-width: 549px) { … }. With Flatsome active, the editor's Insert a media query for a breakpoint button offers both of Flatsome's breakpoints.
4. Press Preview to see the site beside the editor with your unsaved CSS — only you see it — at desktop, tablet and phone widths.
5. Press Save. The CSS goes live, and the page caches of the common caching plugins are cleared for you.
6. Empty Flatsome's Custom CSS fields, so the same rules do not run twice. If you also had CSS in the Customizer's Additional CSS, StyleScript's Tools tab can bring it over under Bring in code from elsewhere.

Flatsome's script fields — header, footer and body scripts — have a home too: the Header & Footer tab has a box for the <head>, one right after <body> and one before </body>.

From then on, a Flatsome update changes nothing about your CSS, and neither does a move to the child theme or to another theme: the same rules print on whichever theme is active. Recent saves are kept in each box's history, so an older version is a click away, and if a change ever breaks the layout, safe mode shows the site without your code while you fix it.

When one page needs its own CSS

Site-wide CSS suits the header, the product boxes and the footer. A landing page with a look of its own is a different case: its rules belong to that page only. You can scope them with the class WordPress puts on the page's body — .page-id-123 .banner { … } — or, with StyleScript Pro, write them in the StyleScript box of the page itself, where they print on that page and nowhere else.