Buttons, links, headings, form fields and other small blocks take their look from one shared place, the Blocks panel. Change how a button looks there, and every button on every page of your theme changes with it. Your Ghost site shows the change after you publish the theme to Ghost, or download it and upload it in Ghost Admin.
The Blocks panel
Open the Blocks panel with the shapes icon, Blocks, in the icon rail. It lists two kinds of entries:
Under Custom, the custom blocks of your project, which are blocks you made reusable, such as a card. Create a custom block explains them.
Under Text, Actions, Navigation, Social, Decoration, Recommendations and Forms, the blocks that come with Fantasma and have a shared look, such as Heading, Button, Menu Link and Input.
Click a block to show its look on the canvas, with every variant and state at once. The right sidebar lists, under Used by, the pages and sections where the block is used.
Variants
A variant is one look a block comes in, such as Filled, Secondary, Outline and Link for a button. On the canvas each variant is a column. Each block on a page picks one variant, and shows its colors, borders, corners, fonts and shadow.
Change a variant, and every block that uses it changes. To make a button stand out on one page, pick another variant for it instead of changing its colors by hand. When you remove a variant, the blocks that used it take the first one.
States
A state is how a variant looks while a visitor interacts with it. On the canvas each state is a row under the variant's Default row, and in the Blocks panel the states are listed under each variant. A variant has only the states you add to it:
State
When it shows
Hover
While the pointer is over the block
Pressed
While the block is clicked or tapped
Focus
While the block is selected with the keyboard
Current
On menu links only: the link to the page the visitor is on
A state changes only some settings: Background, Text color, Border, its color, Shadow, Opacity, Transform and Transition. Everything else stays as in the variant's default look.
Formats
A format is a size. Each block has its own formats, listed under Formats in the Blocks panel, below Variants. The first one, also named Default, is what blocks use unless they pick another. A button can also come in Small, Extra Small, Large or Extra Large, or in a custom size. A format holds the padding and the text size, and for icons the icon size. The colors and borders come from the variant.
What you set on one block
When you select a block on a page, the top of the right sidebar shows the choices its look offers:
Variant, when the block has two or more variants.
A switch named after the second format, such as Small, when the block has two formats. With three or more, a Format row lists them.
You can still change a block's own settings on the page, such as its background color. That changes that one block only, and its own settings win over the variant, even when the variant changes later. To go back to the variant's look, click the block's name at the top of the right sidebar and select Reset to, followed by the variant's name, such as Reset to Filled.
Variants and custom blocks
You cannot rename or delete the blocks that come with Fantasma, such as Button, only change their variants and formats. To start over, open the block in the Blocks panel, click its name at the top of the right sidebar and select Reset to theme. That undoes every change to the block's variants, states and formats, on every page.
A custom block has its own variants and states too, and you can rename, duplicate or delete it.
Buttons, links, headings, form fields and other small blocks take their look from one shared place, the Blocks panel. Change how a button looks there, and every button on every page of your theme changes with it. Your Ghost site shows the change after you publish the theme to Ghost, or download it and upload it in Ghost Admin.
The Blocks panel
Open the Blocks panel with the shapes icon, Blocks, in the icon rail. It lists two kinds of entries:
Click a block to show its look on the canvas, with every variant and state at once. The right sidebar lists, under Used by, the pages and sections where the block is used.
Variants
A variant is one look a block comes in, such as Filled, Secondary, Outline and Link for a button. On the canvas each variant is a column. Each block on a page picks one variant, and shows its colors, borders, corners, fonts and shadow.
Change a variant, and every block that uses it changes. To make a button stand out on one page, pick another variant for it instead of changing its colors by hand. When you remove a variant, the blocks that used it take the first one.
States
A state is how a variant looks while a visitor interacts with it. On the canvas each state is a row under the variant's Default row, and in the Blocks panel the states are listed under each variant. A variant has only the states you add to it:
A state changes only some settings: Background, Text color, Border, its color, Shadow, Opacity, Transform and Transition. Everything else stays as in the variant's default look.
Formats
A format is a size. Each block has its own formats, listed under Formats in the Blocks panel, below Variants. The first one, also named Default, is what blocks use unless they pick another. A button can also come in Small, Extra Small, Large or Extra Large, or in a custom size. A format holds the padding and the text size, and for icons the icon size. The colors and borders come from the variant.
What you set on one block
When you select a block on a page, the top of the right sidebar shows the choices its look offers:
You can still change a block's own settings on the page, such as its background color. That changes that one block only, and its own settings win over the variant, even when the variant changes later. To go back to the variant's look, click the block's name at the top of the right sidebar and select Reset to, followed by the variant's name, such as Reset to Filled.
Variants and custom blocks
You cannot rename or delete the blocks that come with Fantasma, such as Button, only change their variants and formats. To start over, open the block in the Blocks panel, click its name at the top of the right sidebar and select Reset to theme. That undoes every change to the block's variants, states and formats, on every page.
A custom block has its own variants and states too, and you can rename, duplicate or delete it.
Related tasks