Skip to content

Customization

Ben Gillbanks edited this page Jul 28, 2020 · 3 revisions

Toolbelt modules are editable with filters, however there are also some global settings that can affect all/ many Toolbelt modules.

Disable CSS

There's two ways to disable Toolbelt module css. You can either disable ALL css globally, or you can disable it per module.

Disable Globally

To disable the CSS globally add the following constant in your plugin or theme.

define( 'TOOLBELT_DISABLE_STYLES', true );

Disable per module

To disable the css for a single module you should use the following filter toolbelt_hide_[MODULE]_styles. The [MODULE] parameter should be replaced with the module slug. The slug is the folder name for the module you wish to disable.

View the list of module slugs

For example:

add_filter( 'toolbelt_hide_cookie-banner_styles', '__return_false' );

--toolbelt-spacing & toolbelt_css_properties

To make it easier to edit Toolbelt css I have added a css custom property that controls the spacing of elements. This can be edited directly in your theme/ child themes css. Or it can be changed with a php filter.

Edit with a PHP filter

function my_css_properties( $properties ) {
    $properties['toolbelt-spacing'] = '10px';
    return $properties;
}
add_filter( 'toolbelt_css_properties', 'my_css_properties' );

Edit with CSS

The plugin adds the value to the :root element so if we add a new property to the body then we will definitely override it.

body {
--toolbelt-spacing: 10px;
}
Clone this wiki locally