Search code examples
wordpresstinymcetinymce-4tinymce-3

Wordpress window manager button styling

Created a custom window in wordpress looking like:

enter image description here

Now I need the buttons INSERT and CANCEL (see picture above) to be looking like everywhere else (see picture below) like CANCEL and Add Link

enter image description here

This code gave me the window but I couldn't find any options to change the buttons. There must be something, or it should be something!? Even tried to change the styles (some of the styles get added with javascript) inline styles with !important but no effect ...

( function($) {
    tinymce.create( 'tinymce.plugins.hd_fancybox_button', {
        init: function( editor, url )  {

            editor.addButton( 'hd_fancybox_button', {
                icon: 'icons dashicons-icon',
                tooltip: 'Fancybox',
                cmd: 'plugin_command',
                image : url + '/img/popup-icon.png'
            });

            editor.addCommand( 'plugin_command', function() {
                editor.windowManager.open({
                    title: 'Fancybox',
                    width: 500,
                    height: 300,
                    inline: 1,
                    id: 'hd-fancybox-button-insert-dialog',
                    body: [
                        {
                            type    : 'textbox',
                            name    : 'title',
                            label   : 'Title',
                            classes : 'selected_image_title',
                        }, {
                            type    : 'button',
                            name    : 'button',
                            label   : 'Image',
                            text    : 'Image',
                            classes : 'upload_image_button'
                        }
                    ],
                    buttons: [{
                        text: 'Insert',
                        id: 'hd-fancybox-button-insert',
                        onclick: function( e ) {
                            insertImg(editor);
                            closeBox();
                        },
                    },
                    {
                        text: 'Cancel',
                        id: 'hd-fancybox-button-cancel',
                        onclick: 'close'
                    }],
                });

                appendInsertDialog();

            });

        }

    });

Now a few hours later I found out that I can use a style property like 

{
    text: 'Cancel',
    id: 'hd-fancybox-button-cancel',
    onclick: 'close',
    style: 'background-color:orange;border:lime 1px solid;position:absolute;left:0px;top:0px;'
}

Isn't it great that you have the opportunity to add stlyes like this? Off course you can just change the colors...

enter image description here

Solution

  • Ended up using the style property which I found here: http://www.tinymce.com/wiki.php/api4:class.tinymce.ui.Button like:

    {
    text: 'Cancel',
    id: 'hd-fancybox-button-cancel',
    onclick: 'close',
    style: 'background-color:white;border:none;'
}

    and at the end of the appendInsertDialog(); function i added 

        $('#hd-fancybox-button-cancel').css({
        'position'  : 'absolute',
        'left'      : '20px'
    }).children('button').css({
        'color'     : '#a00'
    });

    $('#hd-fancybox-button-insert').css({
        'position'  : 'absolute',
        'left'      : 'auto',
        'right'     : '20px',
    });

    So it's the worst code solution you can probably find but the result looks almost like desired: enter image description here