Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: j-p-g.net Видео фоторедактор Транслит

Текущее время Ср 22 Ноя - 8:43

Результаты поиска: найдено 1 по поиску DCDCDC

Новый редактор сообщений: настройки 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 — замените на код подходящего цвета
http://i79.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 — замените на код подходящего цвета
http://i79.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 замените на код подходящего цвета
http://i79.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 замените на код подходящего цвета
http://i79.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 замените на код подходящего цвета
http://i79.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;
}
автор Dana Domirani
в Ср 12 Июн - 17:38
 
Искать в: Интересные решения
Тема: Новый редактор сообщений: настройки CSS и JS
Ответов: 1
Просмотров: 6902

Вернуться к началу

Перейти: