Adding Custom CSS Classes to Blocks, Areas and the Editor

(Note: the full HD video is available at YouTube)

We've concrete-tized our theme, enabled a grid, added some custom block classes, and worked with assets. Now let's get into some custom block, area, and Redactor editor CSS.

Custom Templates

We've had custom templates in concrete5 for a very long time. These give you alternate views for blocks. But sometimes you don't need that. Sometimes you just want to add a custom class to a block or area. We've had the ability to do this in a free-form way – but 5.7 let's you specify these in a PageTheme file so that they show up in an easy to use select menu.

Area Classes

Adding this method to the PageTheme class:

public function getThemeAreaClasses()
{
    return array(
        'Welcome' => array('templatemo-team')
    );
}

will make it so that any area named "Welcome" will have the "templatemo-team" class available in the advanced dropdown of the Custom Design toolbar.

Block Classes

Adding this method to the PageTheme class:

public function getThemeBlockClasses()
{
    return array(
        'image' => array(
            'img-thumbnail'
        ),
        '*' => array(
            'highlighted'
        )
    );
}

will make it so that any Image block will have the "img-thumbnail" class available in the advanced dropdown of the Custom Design toolbar. The '*' is treated as a wildcard and will make "highlighted" class available to all blocks.

Adding this method to the PageTheme class:

public function getThemeEditorClasses()
{
    return array(
        array('title' => t('Orange Button'), 'menuClass' => '', 'spanClass' => 'btn btn-orange'),
        array('title' => t('Green Button'), 'menuClass' => '', 'spanClass' => 'btn btn-green')
    );
}

Will make those classes appear in the rich text editor.

It's just that easy to add lots of custom CSS without having to worry about custom templates.