Avatar paul.lemmens asked

[Tutorial] Adding new widget/module positions to Yootheme Pro

There was one thing missing in Yootheme Pro, more widget/module positions.

I figured out how to do this, but this means changing Yootheme Pro core files! As I could not find another way to do this...

First file: config.php

Around line 25-33 you can see the code below

'positions' => [

        'toolbar-left' => 'Toolbar Left',  
        'toolbar-right' => 'Toolbar Right',  
        'navbar' => 'Navbar',  
        'header' => 'Header',  
        'top' => 'Top',  
        'sidebar' => 'Sidebar',  
        'bottom' => 'Bottom',  
        'mobile' => 'Mobile',

],

Change it to

'positions' => [

        'toolbar-left' => 'Toolbar Left',  
        'toolbar-right' => 'Toolbar Right',  
        'navbar' => 'Navbar',  
        'header' => 'Header',  
        'top' => 'Top',  
        'topb' => 'Top B',  
        'topc' => 'Top C',  
        'topd' => 'Top D',  
        'tope' => 'Top E',  
        'maintop' => 'Main Top',  
        'mainbottom' => 'Main Bottom',  
        'sidebar' => 'Sidebar',  
        'bottom' => 'Bottom',  
        'bottomb' => 'Bottom B',  
        'bottomc' => 'Bottom C',  
        'bottomd' => 'Bottom D',  
        'bottome' => 'Bottom E',  
        'mobile' => 'Mobile',

],

When saving the config.php file, the positions should show up now in the widget menu or module menu. This just defines the position but won't make it show up on your site just yet.

So open your layout file, in Wordpress that's header.php and footer.php (as I can't access the Joomla files, this part is for Wordpress users only)

Find this line around line 67

<?= get_view('section', ['name' => 'top']) ?>

and change it to this

<?= get_view('section', ['name' => 'top']) ?>

<?= get_view('section', ['name' => 'topb']) ?>

<?= get_view('section', ['name' => 'topc']) ?>

<?= get_view('section', ['name' => 'topd']) ?>

<?= get_view('section', ['name' => 'tope']) ?>

Find this around line 95

<?php if ($site['breadcrumbs']) : ?>

and add this line BEFORE the line above

<?= get_view('section', ['name' => 'maintop']) ?>

In footer.php find this around line 13

    <?php if (!$theme->get('builder')) : ?>

and add this line after the line above

<?= get_view('section', ['name' => 'mainbottom']) ?>

The last part is changing this

<?= get_view('section', ['name' => 'bottom']) ?>

to this

<?= get_view('section', ['name' => 'bottom']) ?>  

<?= get_view('section', ['name' => 'bottomb']) ?>  

<?= get_view('section', ['name' => 'bottomc']) ?>  

<?= get_view('section', ['name' => 'bottomd']) ?>  

<?= get_view('section', ['name' => 'bottome']) ?>

This makes the widgets show up on your website in Yootheme Pro.

For the final part, the styling

Layout

Open the file config/layout.php and add the widget positions to the menu so this

            'site' => 'Site',  
            'header' => 'Header',  
            'mobile' => 'Mobile',  
            'top' => 'Top',  
            'sidebar' => 'Sidebar',  
            'bottom' => 'Bottom',  
            'footer' => 'Footer',  
            'system-blog' => 'Blog',  
            'system-post' => 'Post',  
            'woocommere' => 'WooCommerce',

becomes this

            'site' => 'Site',  
            'header' => 'Header',  
            'mobile' => 'Mobile',  
            'top' => 'Top',  
            'topb' => 'Top B',  
            'topc' => 'Top C',  
            'topd' => 'Top D',  
            'tope' => 'Top E',  
            'maintop' => 'Maintop',  
            'mainbottom' => 'Mainbottom',  
            'sidebar' => 'Sidebar',  
            'bottom' => 'Bottom',  
            'bottomb' => 'Bottom B',  
            'bottomc' => 'Bottom C',  
            'bottomd' => 'Bottom D',  
            'bottome' => 'Bottom E',  
            'footer' => 'Footer',  
            'system-blog' => 'Blog',  
            'system-post' => 'Post',  
            'woocommere' => 'WooCommerce',

and for each module positions added, add this block and change 'top' into other widget positions

    'top-media' => [  
        'title' => 'Image/Video',  
        'width' => 400,  
        'fields' => [

            'top.image_dimension' => [

                'type' => 'grid',  
                'description' => 'Set the width and height in pixels (e.g. 600). Setting just one value preserves the original proportions. The image will be resized and cropped automatically.',  
                'fields' => [

                    'top.image_width' => [  
                        'label' => 'Width',  
                        'width' => '1-2',  
                        'attrs' => [  
                            'placeholder' => 'auto',  
                            'lazy' => true,  
                        ],  
                    ],

                    'top.image_height' => [  
                        'label' => 'Height',  
                        'width' => '1-2',  
                        'attrs' => [  
                            'placeholder' => 'auto',  
                            'lazy' => true,  
                        ],  
                    ],

                ],  
                'show' => 'top.style == "image"',

            ],

            'top.image_size' => [  
                'label' => 'Image Size',  
                'description' => 'Determine whether the image will fit the section dimensions by clipping it or by filling the empty areas with the background color.',  
                'type' => 'select',  
                'options' => [  
                    'Auto' => '',  
                    'Cover' => 'cover',  
                    'Contain' => 'contain',  
                ],  
                'show' => 'top.style == "image"',  
            ],

            'top.image_position' => [  
                'label' => 'Image Position',  
                'description' => 'Set the initial background position, relative to the section layer.',  
                'type' => 'select',  
                'default' => '',  
                'options' => [  
                    'Top Left' => 'top-left',  
                    'Top Center' => 'top-center',  
                    'Top Right' => 'top-right',  
                    'Center Left' => 'center-left',  
                    'Center Center' => '',  
                    'Center Right' => 'center-right',  
                    'Bottom Left' => 'bottom-left',  
                    'Bottom Center' => 'bottom-center',  
                    'Bottom Right' => 'bottom-right',  
                ],  
                'show' => 'top.style == "image"',  
            ],

            'top.image_fixed' => [  
                'label' => 'Image Attachment',  
                'text' => 'Fix the background with regard to the viewport.',  
                'type' => 'checkbox',  
                'show' => 'top.style == "image"',  
            ],

            'top.image_visibility' => [  
                'label' => 'Visibility',  
                'description' => 'Display the image only on this device width and larger.',  
                'type' => 'select',  
                'default' => '',  
                'options' => [  
                    'Always' => '',  
                    'Small (Phone)' => 's',  
                    'Medium (Tablet)' => 'm',  
                    'Large (Desktop)' => 'l',  
                    'X-Large (Large Screens)' => 'xl',  
                ],  
                'show' => 'top.style == "image"',  
            ],

            'top.video_dimension' => [

                'type' => 'grid',  
                'description' => 'Set the video dimensions.',  
                'fields' => [

                    'video_width' => [  
                        'label' => 'Width',  
                        'default' => '',  
                        'width' => '1-2',  
                     ],

                    'video_height' => [  
                        'label' => 'Height',  
                        'default' => '',  
                        'width' => '1-2',  
                    ],

                ],  
                'show' => 'top.style == "video"',

            ],

            'top.media_background' => [  
                'label' => 'Background Color',  
                'description' => 'Use the background color in combination with blend modes, a transparent image or to fill the area, if the image doesn\'t cover the whole section.',  
                'type' => 'color',  
            ],

            'top.media_blend_mode' => [  
                'label' => 'Blend Mode',  
                'description' => 'Determine how the image or video will blend with the background color.',  
                'type' => 'select',  
                'default' => '',  
                'options' => [  
                    'Normal' => '',  
                    'Multiply' => 'multiply',  
                    'Screen' => 'screen',  
                    'Overlay' => 'overlay',  
                    'Darken' => 'darken',  
                    'Lighten' => 'lighten',  
                    'Color-dodge' => 'color-dodge',  
                    'Color-burn' => 'color-burn',  
                    'Hard-light' => 'hard-light',  
                    'Soft-light' => 'soft-light',  
                    'Difference' => 'difference',  
                    'Exclusion' => 'exclusion',  
                    'Hue' => 'hue',  
                    'Saturation' => 'saturation',  
                    'Color' => 'color',  
                    'Luminosity' => 'luminosity',  
                ],  
            ],

            'top.media_overlay' => [  
                'label' => 'Overlay Color',  
                'description' => 'Set an additional transparent overlay to soften the image or video.',  
                'type' => 'color',  
            ],

        ],  
    ],

To add support for the widget styling in these widget positions, open config/modules.php and add the module positions in these lines.

'show' => '$match(position, "(top|bottom|sidebar)")',

becomes

'show' => '$match(position, "(top|topb|topc|topd|tope|maintop|mainbottom|bottom|bottomb|bottomc|bottomd|bottome|sidebar)")',

Did I miss something or do you have the answer to add this without changing core files, please enlighten me!

Thanks!

  • Tutorial
  • YOOtheme Pro

Edited

5 Answers

9

Avatar sascha Yootheme answered

Thanks! Perfect tutorial!

Important note: You have to apply these changes after each update of YOOtheme Pro because during the update all files will be deleted.

Creating these module positions dynamically or something similar with solves this issue in general is high on our todo list and will come in the future.

Edited

1

Avatar maggus86 answered

I figured out how to do this, but this means changing Yootheme Pro core files! As I could not find another way to do this...

First of all, thank you for this great tutorial!

@staff: It would be great if could use all this as a child theme override so that YOOtheme core files won't be touched :-)

0

Avatar geeksonthebeach answered

This is exactly what I need, but for Joomla.

Are there tutorials out there or instructions on which files to edit for Joomla?

Basing this on your statement here: "So open your layout file, in Wordpress that's header.php and footer.php (as I can't access the Joomla files, this part is for Wordpress users only)"

Thanks,

M

0

Avatar paul.lemmens answered

Hi geeksonthebeach,

I think it's the index.php out the top of my head, correct me if I am wrong though.

It's probably the same line or a similar line for placing the positions in your theme. Perhaps Yootheme can help us out answering your question :)

Good luck!

0

Avatar kevin.cartmell answered

whhhhy cant we just create the sidebar module, top and bottom - and allow us to asign to the pages we want. cant understand why you forgot to include in the dev

Know someone who can answer? Share a link to this question via email or twitter.