Собственная палитра цветов для форума

Данный скрипт позволяет создать собственный набор цветов для использования на форуме. Количество добавляемых цветов ограничено только размером js-файла.

Работает на всех движках, в режимах WYS и bb-кода, в быстром и развернутом ответе.

Как это выглядит (для примера):



1) В ПА > Общие > Сообщения и E-mail — Конфигурация > Вид палитры цветов в форме ответа : укажите простая и сохраните настройки.

2) В ПА > Модули > Управление кодами JS укажите Активировать управление кодами JS : да
Создайте новый файл и заполните следующим образом:
Название: любое, например, Моя палитра
Расположение: на всех страницах
Код:

Код:

$(function(){$(function(){

   if ($("#text_editor_textarea").length != 0) {
     $.sceditor.command.get('color')._menu  = function (editor, caller, callback) {
       var mColorBasic = [],
         html = $('<div />');
        
// добавьте свои цвета в данный список по указанному шаблону
      
       mColorBasic["черный"] = "#000000";
       mColorBasic["темно-синий"] = "#00008B";
       mColorBasic["чирок"] = "#008080";
       mColorBasic["темно-зеленый"] = "#006400";
       mColorBasic["индиго"] = "#4B0082";
       mColorBasic["малиновый"] = "#DC143C";
       mColorBasic["апельсиновый"] = "#FF4500";
       mColorBasic["коричневый"] = "#663300";

       mColorBasic["темно-серый"] = "#666666";
       mColorBasic["королевский синий"] = "#4169E1";
       mColorBasic["темная бирюза"] = "#00CED1";
       mColorBasic["зеленый"] = "#008000";
       mColorBasic["фиолетовый"] = "#9400D3";
       mColorBasic["красный"] = "#FF0000";
       mColorBasic["оранжевый"] = "#FF9933";
       mColorBasic["сиена"] = "#A0522D";

       mColorBasic["светло-серый"] = "#D3D3D3";
       mColorBasic["небесный"] = "#87CEEB";
       mColorBasic["циан"] = "#00FFFF";
       mColorBasic["лайм"] = "#32CD32";
       mColorBasic["орхидея"] = "#DA70D6";
       mColorBasic["лосось"] = "#FA8072";
       mColorBasic["золотистый"] = "#FFD700";
       mColorBasic["перу"] = "#CD853F";

       mColorBasic["белый"] = "#ffffff";
       mColorBasic["бледно-бирюзовый"] = "#AFEEEE";
       mColorBasic["аквамарин"] = "#7FFFD4";
       mColorBasic["бледно-зеленый"] = "#98FB98";
       mColorBasic["розовый"] = "#FFC0CB";
       mColorBasic["персик"] = "#FFDAB9";
       mColorBasic["желтый"] = "#FFFF00";
       mColorBasic["древесина"] = "#DEB887";
      
// конец списка цветов
      
       for(key in mColorBasic) html.append('<div class="color-option" title="' + key + '"><span color="' + mColorBasic[key] + '" style="background-color: ' + mColorBasic[key] + ' !important;"></span></div>');
      
       html.find('span').click(function(e) {
         callback($(this).attr('color'));
         editor.closeDropDown(true);
         e.preventDefault();
       });
      
       editor.createDropDown(caller, "color-picker", html);
     }    
   }
})});

Чтобы добавить новый цвет, добавьте в скрипт строку, оформленную по следующему шаблону:

Код:

mColorBasic["название_цвета"] = "#123456";

- вместо текста название_цвета подставьте название, которое будет показываться при наведении на иконку
- вместо цифр #123456 подставьте код желаемого цвета

Пожалуйста, будьте внимательны! Проверяйте правильность написания каждого кода!
Все предложенные цвета можно удалить или переставить в другом порядке.

Когда список новых цветов будет готов, сохраните скрипт.

3) В Па > Оформление > Цвета > Каскадная таблица стилей CSS добавьте настройки для иконок:

Код:

/* иконки цветов */

.color-option {
display: inline-block !important;
width: 15px !important;  /* ширина иконки цвета */
height: 15px !important;  /* высота иконки цвета */
border: 2px solid #fff !important;  /* белая рамка вокруг ииконки */
margin: 3px !important;   /* расстояние между иконками */
box-shadow: 0 0 2px #778899;   /* тень */
cursor: pointer !important;
}
.color-option span{
display: block !important;
width: 15px !important;  /* ширина иконки цвета */
height: 15px !important;  /* высота иконки цвета */
}
.color-option, .color-option span {
border-radius: 2px;  /* закругленные уголки */  
}

/* палитра с иконками — от её ширины зависит, сколько иконок будут стоять в одном ряду */
.sceditor-dropdown.sceditor-color-picker {
width: 200px !important;  /* ширина всей палитры */
height: 100px !important;  /* высота всей палитры */
padding: 5px !important;
border-radius: 5px !important;
}