Как быстро сделать скин для CKEditor'а

Пошаговая инструкция для быстрого создания скина для чудо-редактора CKEditor В структуре каталогов редактора находим папку skins (она отмечена на скрине) открываем, это будет область нашего действия.

1. Создаем папку для будущего скина в /skins/ например у меня это ae
2. Копируем содержимое папки с готовым скином в нашу папку например /skins/v2 в /skins/ae
3. Привести пример структуры файлов и папок.
4. Если вы используете какую-либо IDE способную форматировать код то Вам бдует легче, я использую PHPStrom.
5. Создам проект "Ae skin for CKEditor" в моей среде разработки.
6. Открываем файл /skins/skins.js. Если код файла будет обфусцирован (короче говоря не читаем) то в PHPStorm можно все поправить нажав комбинацию клавиш Shift+Alt+F. Далее ищем названия старого скина (тот который мы взяли за основу) меняем его на наше. У это v2 -> ae. 
7. Так как весь редактор завернут в уникальный класс названный по такому шалону .cke_skin_[название_скина], то для ускорения работы применим тот же "грязный" прием что и для скриптового файла. т.е. зменим средствами редактора .cke_skin_v2 на .cke_skin_[название_вашего_скина] (в моем случае это будет .cke_skin_ae). 
8. Повторяем п.7 для файлов /skins/dialog.css и /skins/templates.css В итоге мы получаем клон скина, который взят за основу, но только теперь он носит имя и мы можем смело менять стили.
9. Затем грузим наш текстовый редактор с нашим скинов и вооружившись FF+firebug (или аналогом), выбираем необходимые для переделки элементы и смотрим какие css-классы им назначены, после чего находим их в наших стилевых файлах и стилизуем как нам захочится. Все должно пойти без проблем. Но вот у меня возникли трудности с фоном для области вводимого текста (попросту не удалось тупо сменить background). Пришлось править не только CSS для стиля но и наш js файл /skins/skins.js. А имеено добавил такие строчки в замыкание скина:

   for (var i in CKEDITOR.instances) {
       if (CKEDITOR.instances[i].skinClass == 'cke_skin_ae')
           CKEDITOR.instances[i].addCss('body {background: #f7fafc url(\'../skins/ae/images/editor_content_bg.png\') repeat-x left top;}');
   }
   

Что в этих строчках происходит. Это циклический перебор всех редакторов на странице и если встречается редактор с нашим скином то применяем CSS стиль для фона области ввода текста.
Ну а теперь то что было до моих стараний:

и после:

В скором времени еще будут готовы иконки. Сейчас над ними пыхтит дизайнер. Скрин скина выложу обязательно.
 А вот и финальный скин для CKEditor'a сделанный мной. Сам скин выложить увы пока не могу, надо согласовать этот вопрос. Т.к. право собственности не совсем мое, а авторское только кода касается :)