Display sets

A display set is a named bundle of styling that you attach to as many elements as you like. Change the set, and every element wearing it changes at the same moment.

You attach a set in the editor, from the dropdown at the top of the Display settings pane. It reads Display element as and starts out on -- Choose styleset --.

Sets are for styling that repeats. Buttons, headings, body text, menus, form fields, article cards, images. Layout that belongs to one spot (this section, this row, this column, this container) is styled directly on the element instead. A set used in one place is just a setting you've made harder to find.

The list under Design → Elements

Sets are grouped by the kind of element they style. Buttons together, menus together, typography together. Each set is a folder; open it and you see the set itself, plus its child sets: the sub-parts that element is built from.

Click any row and it opens in the Display settings pane on the right. The same pane you use in the editor, with the same screen sizes and the same default/hover/active states. Set what you want and press Save changes.

A set belongs to one element type

A button set can only be used by buttons, a menu set only by menus. That's why the dropdown on an element is often short: it's showing you the sets that fit.

It also means an element built from several parts offers several dropdowns. A menu element has one for the menu, one for its items, one for sub items and one for the sub-item container. Style each part separately, hover states included.

Making your own set

There's no blank-set button. Every new set starts as a copy of an existing one. Copy the one that's closest and change the values you care about.

1. Open the ⋮ menu next to a set.
2. Choose Copy display set.
3. Give it a name you'll recognise in a dropdown six months from now: Primary button, not Button 2.
4. Create.

The copy includes the child sets, so copying a menu gives you the items and sub items along with it.

The default sets

Every website starts with a set of defaults. Default button, default menu, default typography, default form, default publication, and so on. They can't be edited, renamed or deleted: their ⋮ menu offers Copy display set and nothing else.

Your website falls back on them. Copy one and edit the copy.

Your own sets have the full menu: Change name, Copy display set, Delete display set. Deleting a set that's still in use doesn't warn you, and the elements that used it fall back to whatever they set for themselves, which is usually not much. Check before you delete.

Sets that are applied automatically

Add a button and it already looks like a button; add a form or an article overview and the same thing happens. Those elements select the default set for their type automatically when you add them.

They only ever do this the first time. Once you've picked a set yourself, or explicitly picked nothing, ClickWhale leaves your choice alone.

Element settings override the set

A display set is the starting point. Anything you set directly on an element overrides the set, for that one element only.

If one button doesn't follow the set, it has an option set directly on it. Switch that option off on the element, which lets the set through again. See Styling elements with the Display settings panel.

Colours in a set

Pick colours from the functions tab of the colour picker rather than typing values. A function colour is referenced by name, so changing it recolours every set and every element pointing at it. Of the first eight, text goes on the text slots (2, 7 and 8, or the accent for a link) and backgrounds on the others, so each can change without the other. See The colour palette.

Common issues