Release of MotoPress 1.5.0 – Introducing New Style Manager

After almost a month of development MotoPress team released the Content Editor version 1.5.0 with many new features and improvements.

Without a doubt this release is the really expecting update. Taking users’ feedback into consideration we’ve rolled out these exciting MotoPress capabilities for you:

• new approach to style objects
• new style manager for rows and columns
• object styles has been transferred to ‘Styles’ tab
• added new ‘Social buttons’ object to link to social profiles

The appearance of your website has always been in our priority list when we develop our content editor. With our new release we’ve made a great improvement on how your pages and posts are displayed.

We are pleased to announce that now MotoPress Content Editor makes it possible to apply the custom style to rows and columns by selecting them from the predefined styles.

Only with one mouse click you can fulfill you row or column with the background color you need.

By using the “Full Width” option you are able to extend the background of the row to the full site width. Note: this feature isn’t displayed in the editor it works at the website only.

Thanks to ‘Full Width’ option it’s possible to create such beautiful pages

Thanks to the MotoPress Style Manager it’s really quickly to modify widgets, as each built-in object has three new style properties:

• Basic class
• Default class
• Predefined class

Basic class provides the minimum options for the content stylization.

Main features:

1. Class can’t be changed or deleted in the editor.
2. Basic class  will be changed both in new and previously created objects.

Default classes are intended for the new object. It’s the set of classes for the initial stylization while adding new object.

Main features:

1. Classes are added automatically when you create a new object.
2. Can be removed in the editor.
3. Generally, can be chosen from the predefined set of class names.

Predefined classes are aimed to be used for object stylization. This set of classes allows users to set or fully change the appearance of the object.

Main features:

1. Can be added or removed in the editor.
2. Can be grouped in the editor.
3. 3.When you choose a class from the group it’s possible to setup whether the class will be added to an object or replaced with the already added class from this group.

It’s easy to change all three parameters. You can modify them right in the theme or in the plugin using the API.

The example with the ‘Button’ object shows how this works:

The base class ‘motopress-btn’ and the default classes ‘motopress-btn-color-silver’, ‘motopress-btn-size-middle’, ‘motopress-btn-rounded’ are automatically applied to the button when you add it.

If we delete all default classes we’ll get the button with the base class which is applied automatically.

To style the button we need to choose the class from the list of the predefined class names. These class names can be selected from the dropdown menu. To preview the style just hover the ‘Eye’ icon.

The example below shows how we’ve applied new styles to the button –  the color is changed to blue, the size turned to big and the button is not rounded anymore.

To style the object use the “addStyle” method.

$serviceObj->addStyle(array(
    'mp_style_classes' => array(
        'basic' => array(
            'class' => 'service',
            'label' => __('Service', 'domain')
        ),
        'predefined' => array(
            //group
            'background' => array(
                'label' => __('Background', 'domain'),
                //allow select multiple values
                //'allowMultiple' => true,
                'values' => array(
                    'green' => array(
                        'class' => 'bg-green',
                        'label' => __('Green', 'domain')
                    ),
                    'red' => array(
                        'class' => 'bg-red',
                        'label' => __('Red', 'domain')
                    )
                )
            )
        ),
        'default' => array('bg-red'),
        'selector' => '> span'
    )
));

The ‘selector‘ option is used to set the HTML tag with $mp_style_classes variable.

The example below shows how to edit classes/styles of the object:

function extendStyleClasses($motopressCELibrary) {
    if (isset($motopressCELibrary)) {
        $serviceObj = &$motopressCELibrary->getObject('service');
        if ($serviceObj) {
            $styleClasses = &$serviceObj->getStyle('mp_style_classes');

            //change basic class
            $styleClasses['basic']['class'] = 'my-service';

            //add blue predefined class
             $styleClasses['predefined']['background']['values']['blue'] = array(
                'class' => 'bg-blue',
                'label' => __('Blue', 'domain'),
             );

            //remove green predefined class
            unset($styleClasses['predefined']['background']['values']['green']);
        }
    }
}
add_action('mp_library', 'extendStyleClasses', 11, 1);

To highlight the style priority level you can use the class of parent element . For the button it is motopress-button-obj, so the style should be written as on the example below:

.motopress-button-obj .motopress-btn {
    color: #fff;
}