Release of MotoPress 1.5.0 – Introducing New Style Manager

Home > Blog > Product updates > Release of MotoPress 1.5.0 – Introducing New Style Manager

MotoPress updated version 1.5.0

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 on 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.

Style rows and columns in WordPress

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

Style objects with predefined classes

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 the ‘Full Width’ option it’s possible to create such beautiful pages

mp_1.5.0_page_small

As always, you can try how version 1.5.0 and all its amazing features work using our demo.

Try the Demo

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.

Style parameters

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.

Style button in WordPress

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

Button with the base style

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.

style objects in WordPress with MotoPress

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.

5. Predefined style parameters

How to add styles to your WordPress theme

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;
}

Was this article helpful?

Yes No

You have already left your review.

14 Replies to “Release of MotoPress 1.5.0 – Introducing New Style Manager”

  1. J’ai peur de pas avoir trouver ce que je cherché dans cet article donc je pose directement la question ici
    j’aimerais avoir une classe différente sur chaque image d’une page , comment faire ? il ne semble pas prendre en compte les classe donné :/
    merci à vous

    1. Question Translated with Google Translate:

      I am afraid I have not found what I searched for in this article so I ask directly the question here
      I would like to have a different class on each image of a page, how to do it? It does not seem to take into account the given classes: /
      thank you

      Reply: This guide is out of date. You can style elements using Style Editor visually and save presets for further usage.
      Anyway if you need to apply class you can still do it in this way. It still works. You can apply class to element or row. If you have difficulties you can add topic at our forum and describe what you want to achieve and what you do for this.

  2. Hi, Can i give a fixed sized to all the buttons in the button group?Currently its sized according the length of the text in button. Thanks

    1. Hi,
      The content that was created using Content Editor will be displayed as shortcodes on the preview when you remove plugin. If you did not use plugin for adding content to your website nothing will be affected while removing a page builder.

  3. Can anyone tell me how I can break up the text to give it a more magazine feel? I want to insert images and mix text like in a magazine .
    OR can anyone tell me if there is a way to put an image down and put the text over the top of it?

  4. How do I get the update? I have an outdated version now, but it says I cannot auto update. Where can I find the new files?

  5. Awesome! These are such a nice improvements, thx guys (preparing to buy it for the next project).

Comments are closed.