Adjusting the width for tinymce buttons on header?

Question

i have used below code snippet to show the different features like forecolor,backcolor,bulllist etc on tinymce

 $(function() {
  appendTinyMCE();
 function appendTinyMCE(){
    tinyMCE.init({

        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "preview",
        // Theme options
        theme_advanced_buttons1 : "forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,|,formatselect,fontselect,fontsizeselect,sub,sup,|,bold,italic,underline,strikethrough",
        theme_advanced_buttons2 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true

});}

});

But when i see the tinymce on browser, around 25 percent of tinymce editor header width is taken by just two buttons i.e forecolor,backcolor which looks very odd , though i have mentioned theme_advanced_toolbar_align : "left". here is the image.

Can we adjust the tinymce buttons so that each button takes uniform width?

Answer 1

You can adjust the css of the tinymce toolbar using the tinymce init configuration paramter editor_css.