Skip to main content

Using Themes to style your forms

G
Written by Gavin Zuchlinski

What a theme is

A theme is a named look you can put on as many forms as you like. Style one form the way you want it, save that as a theme, and every other form can wear the same thing.

A theme carries these things:

  • Accent color

  • Font and font size

  • Input shape

  • Button shape

  • Custom CSS, if you use it

Everything else stays with each form: its header image, logo and header height, its name, and its settings like whether the submit button shows or the form is embed-only. That is deliberate — those are what make a form itself, not part of a look you share around.

The important part is that a form points at a theme rather than taking a copy of it. Change the theme and every form using it changes with it, immediately, with nothing to go and update one by one.

You find all of this under Form → Styles → Theme.

Private and public themes

Every theme starts private. The theme picker labels each one, so you can always tell which is which.

Private

Public

Who can use it

Only your business

Every business on Breely

Who can edit it

You

Nobody, including you

Can it be deleted

Yes

No

Can it go back

—

No

A private theme is the normal case, and most themes stay private forever. It is yours, it works across all your forms, and you can change or delete it whenever you like.

Publishing is for when you have made something you want to offer to everyone else on Breely — and it is permanent. See Publishing a theme below before you do it.

Making a theme

Style a form the way you want it first — color, fonts, input and button shapes. Once you change anything, the styles panel offers to keep it:

  1. Press Save as New Theme.

  2. Give it a name and an author. Both are required; the author is your business name to start with, so you can usually leave it.

  3. A description is optional. It helps when you have a few themes and are deciding between them, and it is what other businesses read if you ever publish it.

  4. Save.

The theme is created from how the form looks right now, and that form is moved onto it. Nothing about the form changes on screen — it is simply following a theme from here on.

Using a theme on another form

Open the form, go to Styles → Theme, and you will see every theme you can use: your own, plus every theme published by other businesses. Each one shows a small preview of a form in that style, so you can tell them apart at a glance. There is a search box when the list gets long.

Hover a theme and press Use theme. The one the form is already on is marked Current theme.

Applying a theme replaces the look the form had. Its color, fonts and button shapes are taken from the theme. The header, logo and form name are untouched.

If you were part way through styling that form, save your work as its own theme first — otherwise those changes are what you are replacing.

Changing a form that uses a theme

You can restyle a themed form freely. Changes land on that form alone — nudging a color here never reaches the other forms on the same theme.

Once you change something, the panel tells you so and offers two ways to keep it:

What it does

When to use it

Save as New Theme

Makes a new theme from how this form now looks, and moves this form onto it

This form is becoming its own thing

Update <theme>

Pushes the change into the theme, so every form on it follows

You meant to change the look everywhere

Update only appears for a private theme of your own. A public theme can't be changed, so there you will only see Save as New Theme.

You can also ignore both. The form simply stays as you have it — still on the theme, but doing its own thing on the bits you changed. The panel keeps offering the choice whenever you come back.

Renaming a theme

Hover a theme in the picker, open the … menu and choose Edit. You can change its name, author and description.

This only ever touches those details — it never changes the look. To change how a theme looks, apply it to a form, restyle that form, and press Update <theme>.

Only your own private themes can be edited.

Publishing a theme

Publishing offers one of your themes to every business on Breely. They will see it in their own theme picker, credited to the author on it.

Hover the theme, open the … menu and choose Make Public. You will be asked to confirm, because this cannot be undone.

What becomes permanent

From the moment a theme is public:

  • Anyone on Breely can apply it. Their forms may come to depend on it.

  • It can no longer be edited — not its look, not its name, author or description. Not by you, not by anyone.

  • It cannot be deleted.

  • It cannot be made private again.

  • If you've made a mistake and need to remove a public theme please file a bug report with details on the theme and reason

That is the point rather than a limitation: other people are building on it, and their forms can't have the ground move under them. Get the name, author, description and look right before you publish.

You can still use a public theme on your own forms and restyle those forms afterwards. Those changes stay on the form, and the panel will offer to save them as a new theme of your own.

How many you can publish

Everyone can publish a max of 3 themes.

When you have used your allowance, Make Public stops appearing on your private themes. Experts are able to publish more than 3 public themes, become an expert to publish more.

Detaching and deleting

Detaching a form from its theme

On the theme the form is currently using, open the … menu and choose Detach Theme.

The form keeps exactly the look it has — the theme's styles are copied onto it on the way out, so nothing changes on screen. It just stops following the theme, and later changes to that theme no longer reach it.

Detach when a form is drifting away from the theme and you want it to go its own way.

Deleting a theme

Open the … menu on one of your own private themes and choose Delete Theme. You will be asked to confirm.

Every form using it is detached first and keeps the look it had, including any changes it had made of its own. Deleting a theme never changes how a form looks — it only takes the theme out of your list.

Public themes can't be deleted.


Styling beyond the color, font and shape options — writing your own CSS against a form — is covered in its own guide. Anything you write there is saved with the theme like everything else.

Did this answer your question?