CSS Custom Properties

In order to allow easy editing of design Toolbelt uses CSS custom properties. The default properties are detailed below. The properties can be filtered with PHP, or edited through some custom CSS in order to update their values.

Properties

Sizes

• toolbelt-spacing A generic size property that defaults to 1rem. This is used for margins and padding in blocks and other elements that are visible to the user.
• toolbelt-scroll-margin-top This is used to add some space to the top of the page when anchor links are clicked. The goal is to allow the content to always be visible and to avoid the admin bar. If you have a sticky header you can increase this value to ensure your content is visible when anchor links are used. There's more info on scroll-margin-top here.

Colours

I tried to keep the colours quite simple and minimal so that they will work everywhere but some themes may want to change the colours to tie things in better. This would be particularly important for dark themes that may want to reverse the colours.

• toolbelt-color-dark black.
• toolbelt-color-mid grey.
• toolbelt-color-light white.

Borders

• toolbelt-border-width 0.25rem.
• toolbelt-border-radius 0.1rem.

Editing the values

If you want to edit the values with PHP then you can use the toolbelt_css_properties filter. You will be given an array of key > value pairs. The key is the property name, and the value is the property value.

You can also edit the CSS custom properties with CSS. It all comes down to personal preference. You can read more on how to use and edit CSS custom properties.