Регистрация    Войти
Авторизация

Разбираем визуальный редактор комментариев uCoz (часть 1)

Разбираем визуальный редактор комментариев uCoz (часть 1)

Всем доброго дня, после очередного обновления в системе uCoz, многие пользователи вооружились вилами и факелами, с целью доказать свою правоту по отношению нового визуального редактора комментариев uCoz, от своего мнения я воздержусь, так как я одновременно за и против, идея шикарная, удобная и понятная, но с добавлением большой ложки дёгтя, из-за чего от данного решения приходится отказываться многим пользователям системы.

Но давайте постараемся сделать всё как положено.

Редактируем данную панель:

Для того, чтобы отредактировать визуальный редактор комментариев uCoz и установить в нужном нам порядке кнопки, а также выбрать один из двух вариантов визуального оформление, следует зайти:

в Админ панель => Настройки => Общие настройки => Не использовать визуальный редактор комментариев:

Поставим напротив галочку - на сайте будет отображаться стандартная панель bb кодов.
Уберём напротив галочку - появиться Настройка редактора

Старая и новая панель bb кодов будет отображаться в форме добавление комментарий, благодаря системной переменной uCoz, а именно $BBCODES$ нечего нового в этом нет.

Запомните, что после того как мы пропишем ниже предоставленные js и css файлы вручную на страницу вашего сайта, uCoz не сможет внести нужные изменения в ниже предоставленные файлы, один раз отредактировали, скопировали, а дальше либо повторяем процесс заново, либо прописываем вручную.

Шаг 2 - Прописываем JS:

<script type="text/javascript" src="http://s105.ucoz.net/uwbb/lang/ru.js"></script> 
<script type="text/javascript" src="http://s105.ucoz.net/uwbb/uwbb.js"></script>
<!-- <script type="text/javascript" src="http://s105.ucoz.net/uwbb/tmpimg.js"></script> -->
<script type="text/javascript">
if( ! window.uCoz ) window.uCoz = {};
if( ! window.uCoz.uwbb ) window.uCoz.uwbb = {};
window.uCoz.uwbb.buttons = 'bold,italic,underline,strike,|,img,link,spoiler,quote,code,|,smilebox';
window.uCoz.uwbb.lang = 'ru';
$( function() { $('#message').wysibb( window.uCoz.uwbb ); } );
</script>
<!-- </uwbb> -->


В данных js файлах находиться html каркас данной визуальной панели со всеми настройками, его мы разбирать не будем, оставим всё как есть от греха подальше, единственное скажу, что последний скрипт, а именно строчка в нём:

window.uCoz.uwbb.buttons = 'italic,bold,underline,strike,|,img,link,spoiler,quote,code,|,smilebox';


отвечает за расположение той или иной функции (кнопки) в визуальном редакторе комментариев uCoz , ниже приведу название всех кнопок:

bold - кнопка полужирного текста
italic - кнопка курсива
underline - кнопка подчёркнутого текст
sup - кнопка надстрочного текста
sub - кнопка подстрочного текста
strike - кнопка зачёркнутого текста

ufontfamily - функция выбора шрифта
fontcolor - функция выбора цвета шрифта
fontsize - функция выбора размера шрифта

bullist - кнопка маркированного списка
justifyleft - кнопка текст по левому краю
justify - кнопка текст по ширине
justifycenter - кнопка текст по центру
justifyright - кнопка текст по правому краю

hr - кнопка горизонтальной линии
hide - кнопка скрытый текст (для незарегистрированных)
spoiler - кнопка спойлер
smilebox - кнопка вставить смайлы

img - кнопка добавить картинку
link - кнопка добавить ссылку
quote - кнопка добавить цитату
code - кнопка добавить код
video - кнопка добавить видео


Я уверен, в будущем данный список будет пополняться, ждём очередного обновления от uCoz.

Также обратите внимание, что в скрипте указан идентификатор #message, он прописывается для формы добавление комментария и благодаря ему, мы видим данный визуальный редактор комментариев uCoz.

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

Шаг 3 - Прописываем CSS

Теперь самое главное для многих пользователей uCoz, давайте соединим два файла css стилей в один и пропишем их в основной файл стилей вашего сайта, а лучше всего создадим отдельный файл iconset-1.css:
/* CSS СТИЛИ ФАЙЛА uwbb.css
============================================================================*/
/* wysibb */
html {
height:100% !important;
}

/* TOOLBAR */
.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn span.btn-text {
text-transform: uppercase;
font-family: sans-serif,Verdana,Tahoma;
font-weight:bold;
line-height:20px;
text-align:center;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn:hover span.btn-tooltip{
display: block !important;
}

/* END TOOLBAR */

/* CONTENT */
.wysibb-text {
margin:0px;
}
.wysibb-text textarea {
border:0px;
outline:none;
padding:8px;
background:#FFFFFF;
box-sizing:border-box;
}
.wysibb-text .wysibb-text-iframe {
max-width:100%;
width:100%;
margin:0;
}
.wysibb-body {
text-align:left;
min-width:0 !important;
overflow:auto !important;
background:#FFFFFF;
padding:8px;
margin-top: 5px;
}

.wysibb-body fieldset {
padding:10px;
}

/* END CONTENT */

/* DEFAULT STYLES */
.codetop {
background:#eee;
border-left:1px dashed #78c5ed;
border-right:1px dashed #78c5ed;
border-top:1px dashed #78c5ed;
border-bottom:1px solid #ccc;
padding:2px 5px;
}
.codemain {
padding: 10px;
background: #f4fbff;
border-left:1px dashed #78c5ed;
border-right:1px dashed #78c5ed;
border-bottom:1px dashed #78c5ed;
}
.quote {
border:1px solid #0004e4;
border-left:3px solid #0004e4;
padding:15px;
margin-left:30px;
}
.quote blockquote {
margin:0;
}
.wbbtab {
margin-left:30px;
}
/* END DEFAULT STYLES */

/* DROPDOWN */
.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn.wbb-dropdown {
padding-right:10px;

}
.wbb-smilebox .wbb-list {
max-height:140px !important;
}
.wbb-list {
display:none;
position:absolute;
top:24px;
left:-1px;
border: 1px solid #bbb;
box-shadow: 0px 0px 3px #aaa;
width:190px;
padding:5px;
background:#fff;
max-height:220px;
overflow:auto;
z-index:2;
}
/* END DROPDOWN */

/* COLORPICKER */
.ve-tlb-colorpick .cp-line {
display: block;
position: absolute;
width: 20px;
height: 3px;
background: black;
bottom: 3px;
left: 7px;
}

.wbb-list .sc {
width: 16px;
height: 16px;
margin: 0 0 1px 1px;
display: inline-block;
*display:inline;
zoom: 1;
cursor: pointer;
border:1px solid #fff;
}
.wbb-list .sc:hover {
border:1px solid #333;
}
.wbb-list .nc {
height:24px;
line-height:24px;
text-align:center;
color:#666;
margin:0 1px 5px 1px;
}
.wbb-list .nc:hover {
background:#eee;
}
.wbb-list .pl {
display:block;
height:5px;
}
/* END COLORPICKER */

/* TABLE PICKER */
.tbl-sel {
border: 1px solid #ddd;
position: absolute;
cursor: pointer;
}
.tbl-sel:hover {
background:#eee;
}
.wbb-table td {
border: 1px dashed #DDD;
padding: 3px;
margin:5px;
min-width: 5px;
min-height: 15px;
}
/* TABLE PICKER */

/* SELECT */
.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn.wbb-select .wbb-list {
width:280px;
padding:0;
max-height:250px;
}
.wbb-select .option {
display:block;
padding:3px 10px;
white-space: nowrap;
cursor:pointer;
}
.wbb-select .option:hover {
background:#dff0ff;
}
.wbb-select .option.selected {
background:#cce7fe;
border-top:1px solid #96cdfe;
border-bottom:1px solid #96cdfe;
}
/* END SELECT */

/* SMILEBOX TOOLBAR */
.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn.wbb-smilebox .wbb-list {
width:156px;
}

.smile {
/*
height: 24px;
width: 24px;
*/
line-height:20px;
padding: 5px 7px;
display: inline-block;*display:inline;zoom: 1;
cursor: pointer;
vertical-align:middle;
}
/* END SMILEBOX TOOLBAR */

/* MODAL WINDOW */
#wbbmodal {
font: 12px/1.2 Arial,Verdana;
position: fixed;
text-align:center;
bottom: 0;
left: 0;
top: 0;
right: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
background: rgba(255,255,255,0.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7Fffffff,endColorstr=#7Fffffff);
zoom: 1;
z-index: 11005;
}

#wbbmodal .wbbm{
background: #fff;
text-align:left;
min-width: 400px;
max-width: 800px;
min-height:200px;
max-height:800px;
margin: 50px auto;
border: 1px solid #bbb;
box-shadow:0px 0px 10px #999;
}
#wbbmodal .wbbm-title{
color:#333;
position:relative;
padding:5px 10px;
border-bottom:1px solid #ccc;
}
#wbbmodal .wbbm-title .wbbm-title-text{
font-size:1.6em;
line-height:2em;
margin:0;
padding:0;
}
#wbbmodal .wbbm-title .wbbclose{
display:block;
text-transform:uppercase;
position:absolute;
right:15px;
top:15px;
font-size:21px;
font-weight:bold;
cursor:pointer;
color:#888;
}
#wbbmodal .wbbm-title .wbbclose:hover{
color:red;
}
#wbbmodal .wbbm-content{}
#wbbmodal .wbbm .wbbm-tablist{
width:160px;
float:left;
padding: 20px 5px;
}
#wbbmodal .wbbm .wbbm-tablist ul{
list-style-type:none;
padding:0;
margin:0;
}
#wbbmodal .wbbm .wbbm-tablist ul li{
height:14px;
padding:10px 10px 10px 20px;
cursor:pointer;
margin: 5px 0;
position:relative;
border-radius: 3px;
}
#wbbmodal .wbbm .wbbm-tablist ul li.on, #wbbmodal .wbbm .wbbm-tablist ul li.on:hover{
background:#666;
color:#fff;
cursor:default;
}
#wbbmodal .wbbm .wbbm-tablist ul li:hover{
background:#eee;
}

#wbbmodal .wbbm-cont{
padding:20px;
min-height:100px;
}
#wbbmodal .wbbm-content{
min-height:100px;
}
#wbbmodal .hastabs .wbbm-bottom,#wbbmodal .hastabs .wbbm-cont {
margin-left:170px;
border-left:1px solid #ccc;
}
#wbbmodal .wbbm-bottom{
border-top:1px solid #ccc;
padding:10px;
background:#f1f1f1;
}
#wbbmodal button{
display:inline-block;*display:inline;zoom: 1;
font-size:0.9em;
font-weight:bold;
}
#wbbmodal .wbb-button{
background:#0055e4;
background-image: linear-gradient(bottom, #0054e4 50%, #005fff 67%);
background-image: -o-linear-gradient(bottom, #0054e4 50%, #005fff 67%);
background-image: -moz-linear-gradient(bottom, #0054e4 50%, #005fff 67%);
background-image: -webkit-linear-gradient(bottom, #0054e4 50%, #005fff 67%);
background-image: -ms-linear-gradient(bottom, #0054e4 50%, #005fff 67%);
color:#fff;
line-height:26px;
border:1px solid #0055e4;
border-radius:3px;
padding:2px 10px;
cursor:pointer;
}
#wbbmodal .wbb-button:hover{
background:#005fff;
border:1px solid #0049C4;
}
#wbbmodal .wbb-cancel-button{
background:#f5f5f5;
color:#333;
line-height:26px;
border:1px solid #ddd;
border-radius:3px;
padding:2px 10px;
cursor:pointer;
margin-left:15px;
}
#wbbmodal .wbb-cancel-button:hover{
background:#fff;
border:1px solid #ccc;
}
#wbbmodal .wbb-remove-button{
background:#db0000;
color:#fff;
line-height:26px;
border:1px solid #ca0000;
border-radius:3px;
padding:2px 10px;
cursor:pointer;
float:right;
}
#wbbmodal .wbb-remove-button:hover{
background:#f80000;
border:1px solid #be0000;
}

#wbbmodal .wbbm-inp-row{
margin-bottom:15px;
}
#wbbmodal .wbbm-inp-row label{
display:block;
font-weight:bold;
margin-bottom:3px;
}
#wbbmodal .wbbm-inp-row input{
height:26px;
padding:0px 3px;
line-height:24px;
font-size:12px;
width:100%;
border:1px solid #aaa;
outline:none;
box-sizing:border-box;
}

#wbbmodal .wbbm-inperr{
color:red;
font-size:10px;
display:block;
}
#wbbmodal .wbbm-brdred{
border-color:red !important;
}

/* IMAGE UPLOAD */
#wbbmodal #imguploader{
text-align: center;
}
#wbbmodal #imguploader.drag{
border: 3px dashed #ccc;
}
#wbbmodal #imguploader.drag.dragover{
background:#feffe4;
}
#wbbmodal #imguploader.drag.wbb-loading{
padding:40px 0;
}
#wbbmodal #imguploader.drag .p{
font-size:2em;
color: #aaa;
margin-top: 15px;
}
#wbbmodal #imguploader.drag .p2{
color: #AAA;
}
#wbbmodal #imguploader.drag .fileupload{
margin: 15px 0;
}
#wbbmodal .fileupload{
margin: 40px 0;
position: relative;
}
#wbbmodal .dragupload{
margin: 10px 0 15px 0;
position: relative;
}
#wbbmodal .fileupload input.file {
opacity: 0;
filter: alpha(opacity=0);
width: 230px;
height: 32px !important;
position: absolute;
top: 2px;
left: 50%;
margin-left: -115px;
display: block;
}
.loader{
margin:30px 0;
}
.upl-error{
color:red;
display:block;
}

.powered{
display:none;
position:absolute;
bottom:-18px;
right:5px;
font-size:10px;
}
/* END IMAGE UPLOAD */
/* MODAL WINDOW */

/* PHPBB3 */
.content-phpbb3{
font-size:13px;
}

/* uCoz adds START */

#_uwbb-add-smiles-button {
display: block;
text-align: center;
background:#f5f5f5;
color:#333;
line-height:26px;
border:1px solid #ddd;
border-radius:3px;
padding:2px 10px;
cursor:pointer;
margin-top:5px;
}
#_uwbb-add-smiles-button:hover {
background:#fff;
border:1px solid #ccc;
}
#_uwbb-wait-add-smiles {
display: block;
height: 32px;
width: 32px;
background:url("/.s/img/ma/m/i2.gif") 8px 8px no-repeat;
margin: auto;
}

.wbb-fontsize {
width:35px !important;
}

.wbb-fontsize .btn-tooltip {
/*
display:none !important;
*/
}

.wbb-cp .wbb-list .nc {
display:none;
}

/* uCoz adds END */

.wbbm-cont div {
clear: none !important;
}

.wbbm-cont input[type="file"] {
max-width: 100px;
}

/* CSS СТИЛИ ФАЙЛА iconset-1.css
============================================================================*/
.wysibb .ve-tlb-bold {
background:url(./img/icons-1.png) 3px 1px no-repeat;
width:20px;
}
.wysibb .ve-tlb-italic {
background:url(./img/icons-1.png) 3px -39px no-repeat;
width:20px;
}
.wysibb .ve-tlb-underline {
background:url(./img/icons-1.png) 2px -20px no-repeat;
width:20px;
}
.wysibb .ve-tlb-strike {
background:url(./img/icons-1.png) 3px -120px no-repeat;
width:20px;
}
.wysibb .ve-tlb-link {
background:url(./img/icons-1.png) 3px -79px no-repeat;
width:20px;
}
.wysibb .ve-tlb-unlink {
background:url(./img/icons-1.png) 3px -99px no-repeat;
width:20px;
}
.wysibb .ve-tlb-img {
background:url(./img/icons-1.png) 3px -59px no-repeat;
width:20px;
}
.wysibb .ve-tlb-quote {
background:url(./img/icons-1.png) 3px -139px no-repeat;
width:20px;
}
.wysibb .ve-tlb-spoiler {
background:url(./img/icons-1.png) 3px -159px no-repeat;
width:20px;
}
.wysibb .ve-tlb-list {
background:url(./img/icons-1.png) 3px -178px no-repeat;
width:20px;
}
.wysibb .ve-tlb-bbcode {
background:url(./img/icons-1.png) 3px -201px no-repeat;
height:20px;
margin:2px 7px !important;
}
.wysibb .wysibb-toolbar .modeSwitch .wysibb-toolbar-btn{
width:46px;
}
.wysibb .ve-tlb-numlist {
background:url(./img/icons-1.png) 3px -220px no-repeat;
width:20px;
}
.wysibb .ve-tlb-textleft {
background:url(./img/icons-1.png) 3px -239px no-repeat;
width:20px;
}
.wysibb .ve-tlb-textcenter {
background:url(./img/icons-1.png) 3px -259px no-repeat;
width:20px;
}
.wysibb .ve-tlb-textright {
background:url(./img/icons-1.png) 3px -278px no-repeat;
width:20px;
}
.wysibb .ve-tlb-offtopic {
background:url(./img/icons-1.png) 3px -300px no-repeat;
width:20px;
}
.wysibb .ve-tlb-code {
background:url(./img/icons-1.png) 3px -319px no-repeat;
width:20px;
}
.wysibb .ve-tlb-spoiler {
background:url(./img/icons-1.png) 3px -339px no-repeat;
width:20px;
}
.wysibb .ve-tlb-sub {
background:url(./img/icons-1.png) 3px -360px no-repeat;
width:20px;
}
.wysibb .ve-tlb-sup {
background:url(./img/icons-1.png) 3px -380px no-repeat;
width:20px;
}
.wysibb .ve-tlb-colorpick {
background: url(./img/icons-1.png) 7px -439px;
width:24px;
height:20px;
}
.wysibb .ve-tlb-table {
background: url(./img/icons-1.png) 3px -460px;
width:20px;
}
.wysibb .ve-tlb-smilebox {
background: url(./img/icons-1.png) 3px -479px;
width:20px;
}
.wysibb .ve-tlb-video {
background: url(./img/icons-1.png) 3px -499px;
width:20px;
}
.wysibb .ve-tlb-hide {
background: url(./img/icons-1.png) 3px -539px;
width:20px;
height:20px;
}
.wysibb .ve-tlb-size {
display:block;
background:url(./img/icons-1.png) 3px -522px;
width:50px !important;
height:20px;
}
.wysibb .ve-tlb-hr {
background: url(./img/icons-1.png) 3px -574px;
width:20px;
height:20px;
}
.wysibb .ve-tlb-textjustify {
background: url(./img/icons-1.png) 3px -557px;
width:20px;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn.wbb-dropdown ins.ar {
display:block;
position:absolute;
right:3px;
top:3px;
width:8px;
height:24px;
background: url(./img/icons-1.png) -8px -400px;
cursor:default;
}
.wysibb .wbb-br {
display:none !important;
}
.wysibb .wbb-select .sar {
display:block;
position:absolute;
right:3px;
top:2px;
width:8px;
height:22px;
background: url(./img/icons-1.png) -8px -420px;
cursor:default;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-container {
background-image: linear-gradient(top, #f8f8f8 17%, #dfdfdf 59%);
background-image: -o-linear-gradient(top, #f8f8f8 17%, #dfdfdf 59%);
background-image: -moz-linear-gradient(top, #f8f8f8 17%, #dfdfdf 59%);
background-image: -webkit-linear-gradient(top, #f8f8f8 17%, #dfdfdf 59%);
background-image: -ms-linear-gradient(top, #f8f8f8 17%, #dfdfdf 59%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.17, #f8f8f8),color-stop(0.59, #dfdfdf));
margin:4px 4px 4px 0;
border: 1px solid #acacac;
border-radius:5px;
display:inline-block;
*display:inline;
zoom: 1;
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn:hover {
background-color: #d1dde1;
background-image: linear-gradient(top, #f4f4f4 17%, #c8dae1 59%);
background-image: -o-linear-gradient(top, #f4f4f4 17%, #c8dae1 59%);
background-image: -moz-linear-gradient(top, #f4f4f4 17%, #c8dae1 59%);
background-image: -webkit-linear-gradient(top, #f4f4f4 17%, #c8dae1 59%);
background-image: -ms-linear-gradient(top, #f4f4f4 17%, #c8dae1 59%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.17, #f4f4f4),color-stop(0.59, #c8dae1));
}
.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn:last-child, .wysibb .wysibb-toolbar .wysibb-toolbar-container .wbb-hide {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn span.btn-inner {
display:block;
border-left:1px solid #f6f6f6;
border-right:1px solid #b0b0b0;
width:26px;
height:22px;
}
.wysibb-toolbar-container .wysibb-toolbar-btn:first-child .btn-inner {
border-left:0px !important;
}
.wysibb-toolbar-container .wysibb-toolbar-btn:last-child .btn-inner, .wysibb .wysibb-toolbar .wysibb-toolbar-container .wbb-hide .btn-inner {
border-right:0px !important;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn {
display:inline-block;
*display:inline;
zoom: 1;
height:22px;
min-width:24px;
position:relative;
vertical-align: middle;
cursor:pointer;
}

/* mxCherry - IE fix START */
.wysibb-toolbar-btn-hovered {
background-color: #d1dde1;
}
.wysibb-toolbar-btn-hovered span.btn-tooltip {
display: block !important;
}
.wysibb-toolbar-btn-hovered span.btn-tooltip ins {
bottom: -14px !important;
}
.wysibb-toolbar-container-ie {
border-right: none !important;
}
.ve-tlb-bbcode {
border: none !important;
}
.ve-tlb-colorpick .cp-line {
overflow: hidden;
}
/* mxCherry - IE fix END */

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn.wbb-select {
width:100px;
padding: 0 10px 0 0;
}
.wbb-dropdown .ar {
display:none !important;
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn.on,.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn.on:hover {
cursor:default;
background:#d6d6d6;
background-image: linear-gradient(top, #cccccc 17%, #f4f4f4 59%);
background-image: -o-linear-gradient(top, #cccccc 17%, #f4f4f4 59%);
background-image: -moz-linear-gradient(top, #cccccc 17%, #f4f4f4 59%);
background-image: -webkit-linear-gradient(top, #cccccc 17%, #f4f4f4 59%);
background-image: -ms-linear-gradient(top, #cccccc 17%, #f4f4f4 59%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.17, #cccccc),color-stop(0.59, #f4f4f4));
border-left:0 !important;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn.on .btn-inner {
border-left:1px solid #ccc;
}

.wbb-ufontfamily {
width:63px !important;
}

.wbb-fontsize .val {
width:25px;
}

.wbb-ufontfamily .val {
width:50px;
font-family:Georgia;
color:#555555;
font-size:10px !important;
padding-left:4px !important;
}

.wbb-select .val {
height:22px;
line-height:24px;
font-weight:bold;
font-size:11px;
display:block;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right:10px;
background-image: linear-gradient(top, #ffffff 17%, #f6f6f6 59%);
background-image: -o-linear-gradient(top, #ffffff 17%, #f6f6f6 59%);
background-image: -moz-linear-gradient(top, #ffffff 17%, #f6f6f6 59%);
background-image: -webkit-linear-gradient(top, #ffffff 17%, #f6f6f6 59%);
background-image: -ms-linear-gradient(top, #ffffff 17%, #f6f6f6 59%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.17, #ffffff),color-stop(0.59, #f6f6f6));
padding:0 2px;
}
.wysibb {
border:1px solid #ddd;
border-radius:7px;
position:relative;
background:#fff;
font-family:Arial,Verdana,Tahoma;
}

.wysibb .wysibb-toolbar {
background:#f4f4f4;
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%);
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom:1px solid #ddd;
position:relative;
padding:4px 60px 4px 9px;
}
.wysibb .wysibb-toolbar .modeSwitch{
position:absolute;
right:4px;
top:4px;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn span.btn-tooltip {
display:none !important;
background: #eeeef5;
background-image: linear-gradient(top, #ffffff 17%, #eeeef5 59%);
background-image: -o-linear-gradient(top, #ffffff 17%, #eeeef5 59%);
background-image: -moz-linear-gradient(top, #ffffff 17%, #eeeef5 59%);
background-image: -webkit-linear-gradient(top, #ffffff 17%, #eeeef5 59%);
background-image: -ms-linear-gradient(top, #ffffff 17%, #eeeef5 59%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.17, #ffffff),color-stop(0.59, #eeeef5));
border:1px solid #c2c2cc;
position:absolute;
line-height:20px;
font-size:11px;
padding:3px 10px;
bottom:35px;
left:-3px;
color:#636363;
border-radius:3px;
white-space:nowrap;
}
.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn span.btn-tooltip ins{
background:url(./img/icons-1.png) 3px -597px no-repeat;
width:24px;
height:10px;
position:absolute;
bottom:-10px;
left:2px;
}

на компьютере и зальём его в корень вашего сайта, а потом пропишем отдельно в шапке сайте перед закрывающим тегом

<link rel="stylesheet" href="Ссылка на ваш файл" type="text/css" />


Сразу хочу сказать, что я удалил из данного css кода, а именно из uwbb.css следующею строку:

ul,ol { 
padding:0 0 0 30px;
}


именно из-за данного значения, ваш дизайн сайта мог разъехаться в разные стороны, также хочу обратить внимание, что возможно следует удалить в этом же файле uwbb.css следующею строку:

html { 
height:100% !important;
}


но это с учётом того, что ваш дизайн мог разъехаться в разные стороны.

Как многие могли заметить, в данном визуальном редакторе комментариев uCoz, все кнопки реализованы благодаря методу css спрайтам, поэтому заменить иконки кнопок на свои не составит труда, главное отредактировать одно большое изображение иконок в Фотошопе.

Примечание:

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

Так как у нас с вами отсутствует основной html код каркаса, нам придется скрывать js и css файл от определённых групп пользователей, к примеру если вы хотите чтобы данная панель была видна только зарегистрированным пользователям, то ссылки на js и css файлы следует поместить в специальную системную переменную uCoz $USER_LOGGED_IN$

<?if($USER_LOGGED_IN$)?> 
<link rel="stylesheet" type="text/css" href="Ссылка на css файл">
<?endif?>


<?if($USER_LOGGED_IN$)?> 
<script type="text/javascript" src="http://s59.ucoz.net/uwbb/lang/ru.js"></script>
<script type="text/javascript" src="http://s59.ucoz.net/uwbb/uwbb.js"></script>
<!-- <script type="text/javascript" src="http://s59.ucoz.net/uwbb/tmpimg.js"></script> -->
<script type="text/javascript">
if( ! window.uCoz ) window.uCoz = {};
if( ! window.uCoz.uwbb ) window.uCoz.uwbb = {};
window.uCoz.uwbb.buttons = 'bold,italic,underline,sup,sub,hr,strike,ufontfamily,|,fontcolor,fontsize,|,bullist,justifyleft,justify,justifycenter,justifyright,|,hide,spoiler,smilebox,img,link,quote,video,code';
window.uCoz.uwbb.lang = 'ru';
$( function() { $('#message').wysibb( window.uCoz.uwbb ); } );
</script>

<?endif?>


аналогичные действия проводим и с системной переменной $GROUP_ID$

<?if($GROUP_ID$=ID)?>Тут нужный код <?endif?>


ID - идентификатор той или иной группы на вашем сайте, его можно посмотреть зайдя в Админ панель => Пользователи => Группы пользователей => ID

На этом я заканчиваю основную статью по визуальному редактору комментариев uCoz, в следующей статье мы будем разбирать по полочкам css файлы и постараемся создать свой визуальный стиль данных кнопок.

На этом всё, спасибо за внимание!

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  17-01-2013, 20:45   Просмотров: 3175   

Источник новости: сеntеr-dm.ru

Разбираем визуальный редактор комментариев uCoz, Разбираем визуальный редактор, редактор комментариев uCoz
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.