ZorNet.Ru — сайт для вебмастера » HTML и CSS » Графика на визуальный редактор комментариев uCoz

Графика на визуальный редактор комментариев uCoz

Если у вас стоит визуальный редактор на комментарий и он просто вас по дизайну не устраивает. То можно его сделать очень привлекательным и точно подогнать под все оттенки цвета. Вы скажите что на самой системе есть такая функция, но там только основа и не более, а здесь мы подойдем каждой функций и кнопки. И даже если наводим на одну из них, то появляется подсказка, то она у нас также будет особой, что можно посмотреть.

Графика на визуальный редактор комментариев uCoz

В самом коде нам не нужно не чего менять, вы просто ставите на новый визуальный ответ и все. Дальше только будут работать стили, а точнее вы сами увидите, что все подписано, где какой класс за что отвечает и что можно сменить по дизайну. Только вам нужно найти картинку изображение, так как вы будете на ней оставлять комментарий. Здесь просто нашел море с песком, вообщем пляж, так как нужно что то светлое и поставил. Размер выставил по длине 750 пикселей а по ширине 247, но вы можете посмотреть и сделать меньше или больше.

И как мы видим, теперь вид комментарий совершенно изменился, но он так сделан, как уже было сказано, вы сами по стилям можете его довести, как вам нужно и выставить, любое изображение.

Установка:

CSS

Код

/* ==== фон поля ввода редактора ==== */
.wysibb-body {
background: url("http://i.imgur.com/oi3qD3F.jpg") !important; /* здесь можно поставить фоновую картинку */
color: #000000 !important; /* цвет текста новой формы ввода */
}
.wysibb-body {
  background: ваш цвет !important; /* фоновой цвет новой формы ввода */
}
.wysibb {
  border: 1px solid #006400 !important; /* цвет и толщина рамки новой формы ввода */
  border-radius: 6px !important; /* радиус закругления на углах новой формы ввода (0 - углы квадратные) */
  border-bottom: 1px solid #DDDDDD /* цвет и толщина линии под панелькой с кнопками */
}
.wysibb .wysibb-toolbar {
  background: url("ссылка на картинку") !important; /* здесь можно поставить фоновую картинку */
  background: #607B8B !important; /* фон панельки с кнопками, первый цвет градиента */
  background-image: linear-gradient(bottom, #eee 50%, #fafafa 100%); /* второй цвет градиента */
  background-image: -o-linear-gradient(bottom, #eee 50%, #fafafa 100%); /* тоже второй цвет градиента, для других браузеров */
  background-image: -moz-linear-gradient(bottom, #eee 50%, #fafafa 100%); /* тоже второй цвет градиента, для других браузеров */
  background-image: -webkit-linear-gradient(bottom, #eee 50%, #fafafa 100%); /* тоже второй цвет градиента, для других браузеров */
  background-image: -ms-linear-gradient(bottom, #eee 50%, #fafafa 100%); /* тоже второй цвет градиента, для других браузеров */
}
.wysibb-text textarea {
background: url("http://i.imgur.com/oi3qD3F.jpg") !important; /* здесь можно поставить фоновую картинку */
}
.wysibb-text textarea {
  background: ваш цвет !important; /* фоновой цвет новой формы ввода, когда она переключена в режим bb-кодов */
}

textarea {
  color: #000000 !important; /* цвет текста в новой форме ввода, когда она переключена в режим bb-кодов */
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn span.btn-inner {

  border-right:1px solid #b0b0b0 !important; /* цвет правой части лини, разделяющей кнопки */
}

.wysibb .ve-tlb-hide {
  background: url("http://s64.ucoz.net/uwbb/style/img/icons-1.png") transparent !important; /* картинка со значками на кнопках новой формы ввода, если вы будете заменить их своими, то имейте ввиду, что каждый значок не должен быть больше 22 пикселей в высоту */
}

.wbb-select .val {
  background-image: linear-gradient(top, #7CFC00 17%, #FFC0CB 59%) !important; /* для гурманов: фон над надписью "Шрифт" на одноименной кнопке, первый и второй цвет градиента (можно сплошным цветом) */
  background-image: -o-linear-gradient(top, #7CFC00 17%, #FFC0CB 59%) !important; /* то же самое, для других браузеров */
  background-image: -moz-linear-gradient(top, #7CFC00 17%, #FFC0CB 59%) !important; /* то же самое, для других браузеров */
  background-image: -webkit-linear-gradient(top, #7CFC00 17%, #FFC0CB 59%) !important; /* то же самое, для других браузеров */
  background-image: -ms-linear-gradient(top, #7CFC00 17%, #FFC0CB 59%) !important; /* то же самое, для других браузеров */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.17, #7CFC00),color-stop(0.59, #FFC0CB)) !important; /* то же самое, для других браузеров */
}

.wbb-ufontfamily .val {
  color: #006400 !important; /* цвет надписи "Шрифт" на одноименной кнопке */
  font-family: "Georgia" !important; /* шрифт надписи "Шрифт" на одноименной кнопке (гурманы в экстазе) */
  font-size: 10px !important; /* размер надписи "Шрифт" на одноименной кнопке */
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container {
  background-image: linear-gradient(top, #BBFFFF 17%, #EEE8AA 59%) !important; /* фон кнопок новой формы ввода, первый и второй цвет градиента (можно сплошным цветом) */
  background-image: -o-linear-gradient(top, #BBFFFF 17%, #EEE8AA 59%) !important; /* то же самое, для других браузеров */
  background-image: -moz-linear-gradient(top, #BBFFFF 17%, #EEE8AA 59%) !important; /* то же самое, для других браузеров */
  background-image: -webkit-linear-gradient(top, #BBFFFF 17%, #EEE8AA 59%) !important; /* то же самое, для других браузеров */
  background-image: -ms-linear-gradient(top, #BBFFFF 17%, #EEE8AA 59%) !important; /* то же самое, для других браузеров */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.17, #BBFFFF),color-stop(0.59, #EEE8AA)) !important; /* то же самое, для других браузеров */
  border: 2px solid #1E90FF !important; /* толщина и цвет рамки кнопок */
  border-radius:7px !important; /* радиус закругления углов кнопок (0 - углы квадратные) */
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn:hover {
  background-image: linear-gradient(top, #FF1493 17%, #FFD700 59%) !important; /* фон кнопок новой формы ввода когда наводишь курсором на них, первый и второй цвет градиента (можно сплошным цветом) */
  background-image: -o-linear-gradient(top, #FF1493 17%, #FFD700 59%) !important; /* то же самое, для других браузеров */
  background-image: -moz-linear-gradient(top, #FF1493 17%, #FFD700 59%) !important; /* то же самое, для других браузеров */
  background-image: -webkit-linear-gradient(top, #FF1493 17%, #FFD700 59%) !important; /* то же самое, для других браузеров */
  background-image: -ms-linear-gradient(top, #FF1493 17%, #FFD700 59%) !important; /* то же самое, для других браузеров */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.17, #FF1493),color-stop(0.59, #FFD700)) !important; /* то же самое, для других браузеров */
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn.on,.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn.on:hover {
  background-image: linear-gradient(top, #FFD700 17%, #FF1493 59%) !important; /* фон кнопок новой формы ввода когда нажимаешь на них, первый и второй цвет градиента (можно сплошным цветом) */
  background-image: -o-linear-gradient(top, #FFD700 17%, #FF1493 59%) !important; /* то же самое, для других браузеров */
  background-image: -moz-linear-gradient(top, #FFD700 17%, #FF1493 59%) !important; /* то же самое, для других браузеров */
  background-image: -webkit-linear-gradient(top, #FFD700 17%, #FF1493 59%) !important; /* то же самое, для других браузеров */
  background-image: -ms-linear-gradient(top, #FFD700 17%, #FF1493 59%) !important; /* то же самое, для других браузеров */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.17, #FFD700),color-stop(0.59, #FF1493)) !important; /* то же самое, для других браузеров */
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn span.btn-tooltip {
  background-image: linear-gradient(top, #00F5FF 17%, #FFFF00 59%) !important; /* фон всплывающей подсказки, которые появляются при наведении на кнопки, первый и второй цвет градиента (можно сплошным цветом) */
  background-image: -o-linear-gradient(top, #00F5FF 17%, #FFFF00 59%) !important; /* то же самое, для других браузеров */
  background-image: -moz-linear-gradient(top, #00F5FF 17%, #FFFF00 59%) !important; /* то же самое, для других браузеров */
  background-image: -webkit-linear-gradient(top, #00F5FF 17%, #FFFF00 59%) !important; /* то же самое, для других браузеров */
  background-image: -ms-linear-gradient(top, #00F5FF 17%, #FFFF00 59%) !important; /* то же самое, для других браузеров */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.17, #00F5FF),color-stop(0.59, #FFFF00)) !important; /* то же самое, для других браузеров */
  border:2px solid #8B4513 !important; /* толщина и цвет рамки всплывающей подсказки */
  font-size:11px !important; /* размер шрифта всплывающей подсказки */
  color:#FF0000 !important; /* цвет шрифта всплывающей подсказки */
  border-radius:5px !important; /* радиус закругления углов рамки всплывающей подсказки (0 - углы квадратные) */
}
/* ==== Конец фона поля ввода редактора ==== */

Стили как заметили здесь не маленькие, так что можно просто вывести одним файлом и прописать их уже в текстовом документе, что можно здесь узнать как делается.

08 Января 2016 Просмотров: 1720 Комментариев: (23)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 19
Порядок вывода комментариев: Сопрано 08 Января 2016 03:04¹ 0 Kosten, ты написал, что только для комментариев эти стили. А вот на форум они также подойдут и будут там тоже, вот что интересует. Kosten 08 Января 2016 03:12² 0 Стиль разбит как на комментарий и так на форум, так как там 2 ссылки стоят на изображение и думаю на форум, не стал проверять, но посмотрел и форум. Он широкий и оказалось что в длину нужно больше 700 пикселей делать. Вот как на форуме: Kvint 08 Января 2016 03:16³ 0 Вот что то новое, теперь точно перейду на визуальный, то как то не решался, привык к старому. И выставлю изображение под тематику. Scheme 08 Января 2016 03:20⁵ 0 А что так сильно мешало поменять, это можно сделать за минуту и потом только привыкнуть. FeStemBer 08 Января 2016 03:19⁴ 0 Но этот код не новинка, давно по интернету ходил, даже если не ошибаюсь на официальном сайте uCoz его видел. Так он нормально сделан, что дизайн можно поменять, его минус, это что он большой ине как не сделать меньше. Kosten 08 Января 2016 04:12¹⁸ 0 Но может для вас не новинка, а кто то его вообще в первые видит и подумав, перейдет на обновление визуальное. Scheme 08 Января 2016 03:22⁶ 0 Не знаю где вы его видели, сам искал что то подобное по визуальному редактору и не чего толком не нашел. Какие то стили были и то здесь на сайте их нашел, но они только меняли, так сказать топорно. Это можно где кнопки сделать 2 цвета и что то еще, но здесь явно под все сделано. Kosten 08 Января 2016 04:11¹⁷ 0 Но сам заметил, что 2 ссылки и думаю, что одни на комментарий а другие на форум, но битые были, хорошо главная ссылка от системы была,а всего там 3 ссылки. csretven 08 Января 2016 03:24⁷ 0 Если только файл стилей сделать, а так пихать что то не хочется, просто много может места занять и потом не чего не установить. Kvint 08 Января 2016 03:32¹⁰ 0 А только так и не нужно его пихать, но если у кого место позволяет, почему и в CSS не поставить. Просто так будет намного легче выводить тот оттенок цвета который тебе нужен. Kosten 08 Января 2016 04:09¹⁶ 0 Возможно кто то не чего не установил и у него сохранилось место, то так можно поставить. Марковичь 08 Января 2016 03:27⁸ 0 Сделан не весь, одну деталь забыли, это кнопку отправить, понимаю что это лишнее, но иожно было стили подогнать под нее, чтоб по цвету поменять. Kvint 08 Января 2016 03:30⁹ 0 Но это точно, просто светлая на светлом как то не так, нужно или совершенно другие стили поставить как на кнопках были, вот вам и выход, и дизайн полностью поменяется. Kosten 08 Января 2016 04:08¹⁵ 0 Но да, можно было на кнопку вывести, чтоб под один тон менять, но не чего, как написали, также можно поставить на другие стили. Вот к примеру, где контейнер у меня и там блоки с названием, вывел специально на совершенно другие стили, что теперь можно также кнопку поменять и не брать с кнопок, а уже сто то свое. Так кому интересно по кнопкам или кто хочет поменять, то здесь стили, которые потом можете подогнать по своему.
1 2 »