Most of the blocks only consist of plain HTML tags without classes and simply inherit the styles of a theme. However, the default styling of more complex blocks like galleries, slideshows, callouts or the mail form might not match a theme out of the box. You can use CSS custom properties to style the rendered blocks in order to match the look and feel of your theme.
Custom Properties
Automad provides a set of CSS custom properties that can be overridden in the stylesheets of a theme. Since the base styles of all blocks are added to the <head> of a page before all other stylesheets, it is enough to redefine the properties on the :root element. To change for example the styling of the callout block, you can define the following custom properties in your stylesheets:
:root {
--am-callout-gap: 0.5rem;
--am-callout-padding: 0.75rem 1rem;
--am-callout-border: 2px solid;
--am-callout-radius: 6px;
--am-callout-background: #f5f5f5;
--am-callout-title-font-weight: 700;
}Custom properties can of course also reference variables of your theme, for example in order to support light and dark color schemes:
:root {
--am-border-color: var(--theme-border-color);
--am-gallery-ui-color: var(--theme-foreground);
--am-gallery-ui-background: var(--theme-background);
}Available Properties
The following list gives an overview of the available groups of custom properties. Each group shares a common prefix:
| Group | Prefix | Examples |
|---|---|---|
| Base | --am-border-, --am-caption- | --am-border-color, --am-border-radius, --am-border-width, --am-caption-space |
| Container | --am-block-, --am-container- | --am-block-max-width, --am-block-margin-top, --am-container-padding |
| Sections and cards | --am-card-, --am-layout-section- | --am-card-padding, --am-layout-section-shadow |
| Flexbox | --am-flex- | --am-flex-gap, --am-flex-min-block-width |
| Buttons | --am-button- | --am-button-padding-horizontal, --am-button-border-radius |
| Gallery | --am-gallery- | --am-gallery-ui-color, --am-gallery-grid-item-radius |
| Slideshow | --am-image-slideshow- | --am-image-slideshow-ui-background, --am-image-slideshow-caption-font-size |
| Forms | --am-form-, --am-field-, --am-input-, --am-error- | --am-input-padding, --am-input-border, --am-error-color |
| Tables | --am-table- | --am-table-cell-padding, --am-table-border |
| Paragraphs | --am-paragraph- | --am-paragraph-large-font-size |
| Quotes | --am-quote- | --am-quote-font-size, --am-quote-prefix |
| Callouts | --am-callout- | --am-callout-padding, --am-callout-background |
| Delimiters | --am-hr- | --am-hr-border |
| Code | --am-prism- | --am-prism-border-radius |
| Collapsible sections | --am-collapsible- | --am-collapsible-duration, --am-collapsible-content-space |
You can find the complete list of all properties and their default values in the variables.less file that is shipped with Automad.
Custom Templates
The pagelist, filelist and snippet blocks also support custom templates that are provided by themes and other packages. That allows you to fully control the markup of such blocks. Learn more about block templates.