Adding buttons with different width and horizontal separator in CKEditor

Question

Is it possible to add several wider buttons to the CKEditor toolbar?

I know how to make all of them wider by changing width parameter in editor.css:

CSS

but I only need several buttons, in similar to "source button" style:

Source

Any hints?

UPDATE

Ok, lets say I want to widen icon of this plugin:

CKEDITOR.plugins.add( 'timestamp',
    {
        init: function( editor )
        {
            editor.addCommand( 'insertTimestamp',
                {
                    exec : function( editor )
                    {    
                        var timestamp = new Date();
                        editor.insertHtml( 'The current date and time is: <em>' + timestamp.toString() + '</em>' );
                    }
                });
            editor.ui.addButton( 'Timestamp',
            {
                label: 'Insert Timestamp',
                command: 'insertTimestamp',
                icon: this.path + 'images/timestamp.png'
            } );
        }
    } );

and former result I got by adding this:

.cke_button_insertTimestamp { width: 32px !important; }

this doesn't change anything:

#cke_11 {
    width: 32px ;
}

no matter what integer I choose, and I don't see any integers like you mentioned while inspecting. I have CKEditor build in IPBoard maybe that's the issue?

What should I add? Sorry for me being noob

UPDATE

Ok I got this at last and have identical results - half icon. Is it about this .cke_icon class which defines 16px width? Many icons share this class. Don't know how to get around or delete it

UPDATE

#cke_61 .cke_icon { width:32px; }

This code did the job thanks a million!

Final question, how do I add horizontal separator below my new icon row like other rows have:

enter image description here

Vertical one I've added in ips_config.js using this:

['Timestamp'],['-'],

but horizontal I have no idea

Use the developer tools to inspect the html structure of CKeditor and see what classes and ids are applied to your button. I guess you are close with .cke_button_insertTimestamp. I think you need the child element. — allcaps
Don't place code as pictures. Add it to your question. You can select this cke_icon with #cke_61 .cke_icon { width:32px; }. This is basic CSS. Search and read about 'css selectors'. — allcaps

allcaps allcaps · Accepted Answer · 2014-02-20T23:33:44

Every button has an unique id. A line of CSS is all that is needed to adjust the width of a button:

#cke_11 { width: 120px; }

Cut at 120px;

#cke_11 is the first button (cut) on the demo page.

All buttons contain a label. This label is a string of text and hidden with .cke_button_label { display: none; }. If you remove this line of CSS or set the value to inline. You'll get this:

All buttons with label

That is the reason the Source button is wider. Source button has a class cke_button__source_label. This class sets display to inline.

If you only want to show a single label:

#cke_11_label { display: inline; }

Cut button with label

Use your Developer Tools that come with your browser to inspect elements and fiddle with the css.

Adding buttons with different width and horizontal separator in CKEditor

UPDATE

UPDATE

UPDATE

1 Answers