Новый редактор сообщений: настройки CSS и JS

---

---

Код добавляется в Па > Оформление > Цвета > Каскадная таблица стилей CSS
Подходит для всех движков.

Код:

/* панель с кнопками */
div.sceditor-toolbar {
background: #111 url(http://i79.servimg.com/u/f79/17/37/83/89/hjk10.jpg) bottom center repeat-x !important;
border-bottom: none !important;
}

/* цвет текстового поля */
div.sceditor-container iframe, div.sceditor-container textarea {
background: #666 url(http://i79.servimg.com/u/f79/17/37/83/89/back210.jpg) repeat !important;
color: #C8CDE6 !important
}

/* весь блок редактора */
.sceditor-container {
background: #666 !important;
width: 98% !important;
}

/* фон группы кнопок */
.sceditor-group {
background: #111 url(http://i79.servimg.com/u/f79/17/37/83/89/dfg10.jpg) center repeat !important;
border-bottom: none !important;
-moz-box-shadow: 0 0 3px #666;
-webkit-box-shadow: 0 0 3px #666;
box-shadow: 0 0 3px #666;
margin: 3px !important;
}

/* кнопки */
.sceditor-button {
margin: 3px !important;
border: 1px solid transparent !important;
outline-color: transparent !important;
}

/* кнопки при наведении */
.sceditor-button:hover {
background-color: #000 !important;
border: 1px solid #163242 !important;
}

/* нажатая кнопка */
.sceditor-button.active, .sceditor-button.sceditor-button-source.hover {
background-color: #000 !important;
border: 1px solid #163242 !important;
}

/* всплывающие окна */
div.sceditor-dropdown {
background-color: #666 !important;
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.72);
border: 1px solid #CCC;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.79);
}

div.sceditor-dropdown label {
color: #C8CDE6 !important;
}

div.sceditor-container.ltr.wysiwygMode {
background: #666 !important;
}


---

---

Все коды добавляются в Па > Оформление > Цвета > Каскадная таблица стилей CSS
Движок значения не имеет.

Основной блок редактора

Код:

/* весь блок редактора */
.sceditor-container {
background: #666 !important;
width: 98% !important;
}

background: цвет фона #666 замените на код подходящего цвета

---

Цвет / фоновая картинка текстового поля и цвет текста

Код:

/* цвет текстового поля */
div.sceditor-container iframe, div.sceditor-container textarea {
background: #666 url(http://i79.servimg.com/u/f79/17/37/83/89/back210.jpg) repeat !important;
color: #C8CDE6 !important
}

background: цвет фона #666 — замените на код подходящего цвета
https://i.servimg.com/u/f79/17/37/83/89/back210.jpg — замените на фоновую картинку
background: цвет текста #666 замените на код подходящего цвета
color: цвет текста #C8CDE6 замените на код подходящего цвета

---

Панель с кнопками

Код:

/* панель с кнопками */
div.sceditor-toolbar {
background: #111 url(http://i79.servimg.com/u/f79/17/37/83/89/hjk10.jpg) repeat !important;
}

background: цвет фона #111 — замените на код подходящего цвета
https://i.servimg.com/u/f79/17/37/83/89/hjk10.jpg — замените на фоновую картинку

---

Фон текстового поля

Код:

div.sceditor-container iframe, div.sceditor-container textarea {
background: #666 url(http://i79.servimg.com/u/f79/17/37/83/89/back210.jpg) repeat !important;
}

background: цвет фона #666 замените на код подходящего цвета
https://i.servimg.com/u/f79/17/37/83/89/back210.jpg — замените на фоновую картинку

---

Цвет текста (в режиме кодов)

Код:

/* цвет текста в поле сообщения */
.sceditor-container textarea {
color: #32cd32 !important;
}

color: цвет текста #32cd32 замените на код подходящего цвета

---

Размер шрифта (в режиме кодов)

Код:

/* размер шрифта в поле сообщения */
.sceditor-container textarea {
font-size: 15px !important;  
}

---

Фон группы (блока) кнопок

Код:

/* фон группы кнопок */
.sceditor-group {
background: #111 url(http://i79.servimg.com/u/f79/17/37/83/89/dfg10.jpg) center repeat !important;  
}

background: цвет фона #111 замените на код подходящего цвета
https://i.servimg.com/u/f79/17/37/83/89/dfg10.jpg — замените на фоновую картинку

---

Кнопки

Код:

/* кнопки */
.sceditor-button {
border: 1px solid transparent !important;
background: #111 url(http://i79.servimg.com/u/f79/17/37/83/89/hjk10.jpg) bottom center repeat-x !important;
}

border: контур кнопки, прозрачный цвет transparent можно заменить на желаемый
background-color: цвет фона, #111 замените на код подходящего цвета
https://i.servimg.com/u/f79/17/37/83/89/hjk10.jpg — замените на фоновую картинку

---

Кнопки при наведении

Код:

/* кнопки при наведении */
.sceditor-button:hover {
background-color: #000 !important;
border: 1px solid #163242 !important;
}

border: контур кнопки, цвет #163242 можно заменить на желаемый
background-color: цвет фона, #000 замените на код подходящего цвета

---

Нажатая кнопка

Код:

/* нажатая кнопка */
.sceditor-button.active, .sceditor-button.sceditor-button-source.hover {
background-color: #000 !important;
border: 1px solid #163242 !important;
}

border: контур кнопки, цвет #163242 можно заменить на желаемый
background-color: цвет фона, #000 замените на код подходящего цвета

---

Всплывающие окна

Код:

/* всплывающие окна */
div.sceditor-dropdown {
background-color: #666 !important;
border: 1px solid #CCC !important;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.75);
}

border: контур кнопки, цвет #CCC можно заменить на желаемый 
background-color: цвет фона, #666 замените на код подходящего цвета 

Удаление "лишних" кнопок:

Код:

/* кнопка дата */
.sceditor-button.sceditor-button-date {
display: none !important;
}

/* кнопка время */
.sceditor-button.sceditor-button-time {
display: none !important;
}
    
/* кнопка видео dailymotion */    
.sceditor-button.sceditor-button-dailymotion {
display: none !important;
}

/* кнопка загрузить изображение */  
.sceditor-button.sceditor-button-servimg {
display: none !important;
}

/* кнопка верх и ниж индекс */
.sceditor-button.sceditor-button-subscript, .sceditor-button.sceditor-button-superscript {
display: none !important;
}

/* кнопки прокрутки */
.sceditor-button.sceditor-button-fascroll, .sceditor-button.sceditor-button-faupdown {
display: none !important;
}

/* кнопка случайное число */
.sceditor-button.sceditor-button-farand {
display: none !important;
}

/* кнопка больше-меньше кнопок */
.sceditor-button.sceditor-button-more {
display: none !important;
}


---

Изменить цвет фона и текста в режиме WYSIWYG

В ПА > Модули > Управление JS создайте новый файл
Название : любое
Расположение : на всех страницах
Код :

Код:

$(window).load(function () {
  $(".sceditor-container iframe").contents().find("head").append("<style>body,html,code:before,p,table{background-color:#DCDCDC!important;color:#000!important;font-size:15px!important;}</style>")
});

background-color:#DCDCDC — цвет фона текстового поля в режиме WYS, замените код #DCDCDC на желлаемый цвет
color:#000 — цвет шрифта в текстовом поле в режиме WYS, замените код #000 на желаемый цвет
font-size:15px — размер шрифта в текстовом поле в режиме WYS, замените число 15 на желаемую величину.

---

Изменить размеры формы ответа

Код:


/* ширина и высота формы ответа */
#quick_reply #textarea_content, div.sceditor-container.ltr.wysiwygMode, div.sceditor-container.ltr.sourceMode {
width: 90% !important; /* ширина */
min-height: 500px !important;  /* высота */
margin: 0 auto !important;
}

Ссылки на обновленные скрипты для текстового редктора

Доп. кнопки для быстрого перехода к сервисам (фотохостингам, Youtube, фоторедакторам и пр.) над формой ответа

Доп. кнопки для быстрого перехода к сервисам (фотохостингам, Youtube, фоторедакторам и пр.) внутри формы ответа

Быстрая вставка ника и цитаты [все движки]

Собственная палитра цветов

Модераторское и администраторское предупреждение