Новые сообщения · Участники · Правила форума · Поиск · RSS
  • Страница 1 из 1
  • 1
Модератор форума: juliya  
Форум » uCoz » Cкрипты » Дополнительные bb-коды рамок на форум
Дополнительные bb-коды рамок на форум
VitalyaДата: Воскресенье, 01-Января-2017, 18:43:03 | Сообщение # 1
Генерал_палкомник
Группа: Администраторы
Сообщений: 114
Награды: 0
Репутация: 32767
Статус: Offline


Можно много чего добавить на форум, что-бы он стал более красивый и функциональный. В эту категорию можно включить дополнительные bb-коды рамок. Данный скрипт как раз и реализует данную фишку.

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


Установка дополнительных bb кнопок:

1. Идем в ПУ -> Управление дизайном -> Форум -> Общий вид страниц форума и сразу после $BODY$ добавляем следующий скрипт:
Код
<script type="text/javascript" src="http://updatesite.ru/js/forumnewbb.js"></script>


2. Далее переходим в Форму добавления сообщения (также для форума), находим $BBCODES$ и после пишем:
Код
<span style="padding-right:1px;"><input type="button" class="codeButtons" onclick="simpletag('info','','','message','');return false;" value="info" id="info" title="Важная информация"></span><span style="padding-right:1px;"><input type="button" class="codeButtons" onclick="simpletag('extra','','','message','');return false;" value="extra" id="extra" title="Дополнительно"></span><span style="padding-right:1px;"><input type="button" class="codeButtons" onclick="simpletag('add','','','message','');return false;" value="add" id="add" title="Выделение текста"></span>


3. Далее переходим в Таблицу стилей CSS и добавляем:
Код
.CodeBlock_bb {padding-top: 5px; padding-bottom: 3px;}  
.information_bb {color:#745e60;max-width:655px; background: url('http://livfan.ru/img/information.png') no-repeat 4px 4px #fcf0f0; padding:5px 10px 5px 20px !important; border:1px dotted #eeaaaa; border-left:3px solid #eeaaaa; border-bottom:0px; text-shadow:0px 1px 0px #fff; -webkit-border-top-left-radius: 2px;-moz-border-radius-topleft: 2px;border-top-left-radius: 2px;}  
.information_bbm {overflow: hidden;color:#333;max-width:675px; border:1px dotted #eeaaaa !important; border-left:3px solid #eeaaaa !important; background:#fafafa; padding:5px; font-size:11px; font-family:tahoma;-webkit-border-bottom-left-radius: 2px;-moz-border-radius-bottomleft: 2px;border-bottom-left-radius: 2px;}  
.extra_bb {color:#3a454f;max-width:655px; background: url('http://livfan.ru/img/extra.png') no-repeat 4px 6px #f0f7fc; padding:5px 10px 5px 20px !important; border:1px dotted #aacdee; border-left:3px solid #aacdee; border-bottom:0px; text-shadow:0px 1px 0px #fff; -webkit-border-top-left-radius: 2px;-moz-border-radius-topleft: 2px;border-top-left-radius: 2px;}  
.extra_bbm {overflow: hidden;color:#333;max-width:675px; border:1px dotted #aacaee !important; border-left:3px solid #aacaee !important; background:#fafafa; padding:5px; font-size:11px; font-family:tahoma;-webkit-border-bottom-left-radius: 2px;-moz-border-radius-bottomleft: 2px;border-bottom-left-radius: 2px;}  
.add_bb {max-width:665px; background:#fafafa; padding:5px 10px 5px 10px !important; border:1px dotted #ccc; border-left:3px solid #ccc; -webkit-border-top-left-radius: 2px;-webkit-border-top-right-radius: 2px;-moz-border-radius-topleft: 2px;-moz-border-radius-topright: 2px;border-top-left-radius: 2px;border-top-right-radius: 2px;}  
.CodeBlock_bb:hover {-webkit-filter:blur(2px) grayscale(2);opacity:.8;cursor: pointer;}

 
VitalyaДата: Воскресенье, 01-Января-2017, 19:16:58 | Сообщение # 2
Генерал_палкомник
Группа: Администраторы
Сообщений: 114
Награды: 0
Репутация: 32767
Статус: Offline
Группа таких вот ВВ-кодов




Для начала открываем любой из CSS файлов стиля и добавляем в самый конец
Код
.div_avert {
        width: 95%;
        margin: 8px auto;
        padding: 10px 6px 6px 8px;
        min-height: 18px;
        height:auto;
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        -webkit-box-shadow: 1px 1px 12px #555;
        -moz-box-shadow: 1px 1px 12px #555;
        box-shadow: 1px 1px 12px #555;
}
.span_avert {
        padding-left: 26px;
}
.info_div {
        background-image: url("/images/info.png");
        background-position: 4px 4px;
        background-repeat: no-repeat;
        background-color: #b2ccff;
        border: 2px solid #80aaff;
}
.error_div {
        background-image: url("/images/error.png");
        background-position: 4px 4px;
        background-repeat: no-repeat;
        background-color: #ffb2b2;
        border: 2px solid #ff8080;
}
.ok_div {
        background-image: url("/images/ok.png");
        background-position: 4px 4px;
        background-repeat: no-repeat;
        background-color: #c2f2b3;
        border: 2px solid #3cb371;
}


Потом выкачиваем эти картинки
Код
http://hello-vitebsk.ru/images/ok.png
http://hello-vitebsk.ru/images/error.png
http://hello-vitebsk.ru/images/info.png


И помещаем их в корневую папку /images/
После идем в админку и добавляем следущие ВВ-коды
Код
[ok]{TEXT}[/ok]


Замена HTML
Код
<div class="div_avert ok_div"><span class="span_avert">{TEXT}</span></div>


Использование BBCode:info
Код
[info]{TEXT}[/info]


Замена HTML
Код
<div class="div_avert info_div"><span class="span_avert">{TEXT}</span></div>


Использование BBCode:error
Код
[error]{TEXT}[/error]


Замена HTML
Код
<div class="div_avert error_div"><span class="span_avert">{TEXT}</span></div>
 
Форум » uCoz » Cкрипты » Дополнительные bb-коды рамок на форум
  • Страница 1 из 1
  • 1
Поиск: