Publishing a theme

What you need

• A Rolea account. Anyone can publish themes.
• Your minified stylesheet, as a .css file.
• At least one screenshot. It is required both when you create the theme and when you edit it later.

If you do not yet know what a theme is or what it is made of, start with What a theme is.

The form, step by step

Start from Create a theme. There are five steps, and you can move back and forth between them: nothing is sent until the last one.

1. The theme

The name and the description are what somebody reads when browsing the gallery. The name takes up to 80 characters, the description up to 500.

Every theme has a name of its own. If one already goes by the name you picked, we tell you when you submit and you can change it there. Capitals and spacing do not count: “Ravenwood” and “ravenwood” are the same name.

Up to six screenshots, in the order you want them shown. PNG, JPEG and WebP are accepted, up to 8 MB per file; SVG is not. The size to aim for is 1600 pixels on the longest edge — nothing above that is ever seen.

2. Stylesheet

Upload the minified .css file, exactly as you would ship it. Minifying strips the spaces, the line breaks and the comments: the file gets considerably smaller and loads faster on every visit to the sites running your theme, and it is also what keeps you comfortably inside the character limit.

The form checks it the moment you choose it and points at the line of any problem, so you do not have to submit to find out whether we accept it.

3. Settings

This is where you say what your theme needs from the site: a particular layout, light or dark mode, certain cards in the sidebar. Each of those settings has three possible answers, and what separates them is how much room you leave whoever installs the theme.

Leave on “No preference” anything your design survives either way, and save “Essential” for what genuinely breaks the theme: every setting you pin is a control you take away from the community. If your theme looks much better one particular way but does not break without it, “Recommended” is the answer — and you can explain it in the description.

4. Options

The colours, sizes and fonts you want to leave up to whoever installs the theme. Every option you declare shows up as a control — a colour picker, a list, a toggle — in their site’s panel, under Admin → Site → Themes, so they can tune how your theme looks without touching a line of CSS.

What they set there affects only their site: the theme you publish is the same for everybody. Options are optional, and a theme that exposes none is perfectly valid; how they are declared is further down.

5. Review

A summary of what you are about to send, as Rolea Staff will see it. Confirming puts the theme in the queue, waiting on approval from Rolea Staff.

Stylesheet rules

A stylesheet that breaks any of the following restrictions is rejected instantly, before it ever reaches the queue. The error tells you which line the problem is on.

Google Fonts

You can use them, just not through the @import Google hands you by default, since no @import is allowed. Do this instead: open that same fonts.googleapis.com URL in your browser. What you get back is a handful of ordinary @font-face blocks. Copy them into your stylesheet and the font loads just the same.

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cinzel/v26/8vIJ7ww63mVu7gt79mT7PkRXMw.woff2)
       format('woff2');
}

.site-header__title { font-family: 'Cinzel', Georgia, serif; }

Declaring tunable options

Every option you declare becomes a CSS custom property named --skin-name, and your stylesheet reads it with its own default value:

.site-header { background: var(--skin-accent, #8b0000); }

Each option carries a type, and the type decides the control whoever installs the theme will see: a colour picker, a list, a toggle.

A value that does not match its type is discarded, and your var() then uses the default you wrote right there. Every option also needs a default in the form, and your CSS has to look right with none of them set: that is how it appears in the preview, before anybody has tuned anything.

What happens when you submit

1. The stylesheet and the settings are checked. If anything fails, it comes back with every problem at once and nothing is submitted.
2. If it passes, the version goes into review.
3. You are told the decision, in your Rolea notifications and by email.

While a version of that theme is waiting you cannot submit another, and the theme does not appear in the gallery until its first version is approved. What happens from here is in Review and versions.