Styling | Kirby Email Manager

Class Prefix

The class prefix (default: 'em-') can be customized or disabled completely:

// Custom prefix
return [
    'philippoehrlein.kirby-email-manager' => [
        'classConfig' => [
            'classPrefix' => 'custom-'
        ]
    ]
];

// Disable prefix
return [
    'philippoehrlein.kirby-email-manager' => [
        'classConfig' => [
            'classPrefix' => false
        ]
    ]
];

Class Names

You can customize the base class names for each element type:

return [
    'philippoehrlein.kirby-email-manager' => [
        'classConfig' => [
            'classes' => [
                'button'  => 'button',
                'error' => 'error', 
                'field' => 'field',
                'form'  => 'form',
                'grid'  => 'grid',
                'help' => 'help',
                'input' => 'input',
                'label' => 'label',
                'select'  => 'select',
                'textarea' => 'textarea'
            ]
        ]
    ]
];

Additional Classes

You can add additional classes to the form elements:

return [
    'philippoehrlein.kirby-email-manager' => [
        'classConfig' => [
            'additionalClasses' => [
                'button'  => '',
                'error' => '', 
                'field' => '',
                'form'  => '',
                'grid'  => '',
                'help' => '',
                'input' => '',
                'label' => '',
                'select'  => '',
                'textarea' => ''
            ]
        ]
    ]
];

Class Modifiers

The modifier names of the buttons can be changed as well:

return [
    'philippoehrlein.kirby-email-manager' => [
        'classConfig' => [
            'classModifiers' => [
                'button'  => [
                    'primary' => 'primary',
                    'secondary' => 'secondary'
                ]
            ]
        ]
    ]
];

Results

Here's how different configurations affect the output:

<!-- Default configuration (prefix: 'em-') -->
<div class="em-field">...</div>

<!-- Custom prefix -->
<div class="custom-field">...</div>

<!-- Custom class names -->
<div class="em-form-field">...</div>

<!-- Custom prefix + custom class names -->
<div class="custom-form-field">...</div>

<!-- No prefix + custom class names -->
<div class="form-field">...</div>

<!-- Addional class -->
<div class="em-field mb-6">...</div>

<!-- Custom class modifier -->
<button class="em-button em-button--filled">...</div>