Wordpress window manager button styling

Question

Created a custom window in wordpress looking like:

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

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

look for these id's in your css files `#hd-fancybox-button-insert,#hd-fancybox-button-cancel` — madalinivascu, Oct 27 '15 at 10:22
@madalinivascu that's right I could kind a use those IDs but the position of the button gets set via javascript. And the parent element is not `relative` or anything. So I believe it want work to position them correctly via CSS — caramba, Oct 27 '15 at 10:30

score 1 · Accepted Answer · answered Oct 27 '15 at 13:00

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:

score 0 · Answer 2 · answered Oct 27 '15 at 10:32

0

Inspect the buttons you want and add the classes to your button definition:

Example:

{
  text: 'Insert',
  id: 'hd-fancybox-button-insert',
  classes: 'button button-primary',
  onclick: function( e ) {
    insertImg(editor);
    closeBox();
  },
}

I'd only add this to the insert button, as it is the primary button of the dialog.

answered Oct 27 '15 at 10:32

Gerald Schneider

17,416
9
60
78

Thank you, but all that does is adding class names to the buttons. So problem is still the same – caramba Oct 27 '15 at 11:23
The classes define how the buttons look (and partly behave). If you want them to look like the WordPress buttons the easiest way is to use the corresponding classes. The alternative would be to recreate the style in your own stylesheet. – Gerald Schneider Oct 27 '15 at 11:25
Thanks for your time and that you are trying to help. I updated the question with some property I found somwhere in the world-wide-web ... so there is a property to trigger styles which I was looking for ... still a big pain to use it ... – caramba Oct 27 '15 at 12:37

Wordpress window manager button styling

2 Answers2