Customizing TinyMCE CSS Skin

Few days ago I’ve playing with TinyMCE, a popular javascript rich text editor, used by many companies and some popular CMS, like joomla and wordpress. Today I want to share a little of my experience exploring and customizing tinymce skins. In this example I’m not creating it from scratch, but modifying the existing o2k7 skin.

The core tinymce skin is on file ui.css, this file that will be modified, and this file is very well commented, it easy to guess the purpose of it style, and other files dialog.css and content.css I don’t need to make any changes.

Customizing Icons

TinyMCE using css sprite to styling each button, in the default skin you can found it on tiny_mce\themes\advanced\img\icons.gif, here I create my own icon list, the icons order is follows the default icons, and I’m using famfamfam silk icons. You can see on the image below, I opne this on gimp with grip enabled, the top is default and the bottom is my customize icons.

I following the default order to make easier placing each icons, because if you have a different icon order you have to change it by yourself in the css style, see the image below where in the css file that have to be modifed if you use your own custom icons order.

Customizing Layout

Layout is where the main content lies, this section include toolbar and statusbar style, and this is a port of the style that I have modified.

.mycustomSkin table.mceLayout {
    border:0; border-left:1px solid #ABC6DD;
    border:1px solid #ABC6DD;
    -webkit-border-radius: .4em;
    -moz-border-radius: .4em;
    border-radius: .4em;
}
.mycustomSkin table.mceLayout tr.mceFirst td {
    padding: 3px 2px;
}
.mycustomSkin table.mceLayout tr.mceLast td {}
.mycustomSkin td.mceToolbar{
    background:#b2e1ff;
    -webkit-border-radius: .4em .4em 0 0;
    -moz-border-radius: .4em .4em 0 0;
    border-radius: .4em .4em 0 0;
}
.mycustomSkin .mceStatusbar {
    background:#b2e1ff; display:block;
    font-family:'MS Sans Serif',sans-serif,Verdana,Arial;
    pt; line-px;
    overflow:visible;
    color:#000;
    px;
    -webkit-border-radius: 0 0 .4em .4em;
    -moz-border-radius: 0 0 .4em .4em;
    border-radius: 0 0 .4em .4em;
    padding-left: 5px;
}
.mycustomSkin .mceIcon {"">
/* Button */
.mycustomSkin .mceButton {display:block; px; px; margin: 0 1px;
    border: 1px solid #0099cc;
    border-bottom-px;
    position: relative;
    background: #b2e1ff; /* Old browsers */
    background: -moz-linear-gradient(top, #b2e1ff 0%, #66b6fc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2e1ff), color-stop(100%,#66b6fc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #b2e1ff 0%,#66b6fc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #b2e1ff 0%,#66b6fc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #b2e1ff 0%,#66b6fc 100%); /* IE10+ */
    background: linear-gradient(top, #b2e1ff 0%,#66b6fc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1ff', endColorstr='#66b6fc',GradientType=0 ); /* IE6-9 */
    -webkit-border-radius: .1em;
    -moz-border-radius: .1em;
    border-radius: .1em;
}
.mycustomSkin a.mceButton span, .mycustomSkin a.mceButton img {margin-left:1px}
.mycustomSkin .mceOldBoxModel a.mceButton span, .mycustomSkin .mceOldBoxModel a.mceButton img {margin:0 0 0 1px}
.mycustomSkin a.mceButtonEnabled:hover {background-color:#B2BBD0;
    background: #deefff; /* Old browsers */
    background: -moz-linear-gradient(top, #deefff 0%, #98bede 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#deefff), color-stop(100%,#98bede)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #deefff 0%,#98bede 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #deefff 0%,#98bede 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #deefff 0%,#98bede 100%); /* IE10+ */
    background: linear-gradient(top, #deefff 0%,#98bede 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deefff', endColorstr='#98bede',GradientType=0 ); /* IE6-9 */
}
.mycustomSkin a.mceButtonActive, .mycustomSkin a.mceButtonSelected {
    border-bottom-px;
    top: 1px;
    background: #ffd65e; /* Old browsers */
    background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* IE10+ */
    background: linear-gradient(top, #ffd65e 0%,#febf04 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
}
.mycustomSkin .mceButtonDisabled .mceIcon {opacity:0.3; -ms-filter:'alpha(opacity=30)'; filter:alpha(opacity=30)}
.mycustomSkin .mceButtonLabeled {auto}
.mycustomSkin .mceButtonLabeled span.mceIcon {float:left}
.mycustomSkin span.mceButtonLabel {display:block; px; padding:4px 6px 0 22px; font-family:Tahoma,Verdana,Arial,Helvetica}
.mycustomSkin .mceButtonDisabled .mceButtonLabel {color:#888}

/* Separator */
.mycustomSkin .mceSeparator {display:block; px; px}

Well that’s all in this post I just try to explore and customizing a little bit of tinymce css skin, and this only a little part of the skin, some other skin haven’t been explored yet, like list, menu, dialog, etc, but you can download this example css skin, and try it on your host, the sample screenshot like the image on the top post, I called mycustom skin.

Download