Перейти к публикации

Jacob™Ande®son мысли вслух

  • записей
    5
  • комментариев
    20
  • просмотров
    2 537

AdequateBBcode для dle 9.8

Jacob™Ande®son

337 просмотров

И сегодня снова пойдет речь о приятных мелочах и будем мы на этот раз будем менять стандартные bb на новые, от ПафНутиЙ под названием AdequateBBcode, и выглядят они примерно так:blogentry-4034-0-24643000-1368729700_thumb.png

Зачем мы будем их менять спросите вы? процитирую ПафНутиЯ:

 

  • Для удобной кастомизации внешнего вида bbcode-редактора, идущего в комплекте с DLE (всё оформление вынесено в CSS-файл). Добавлено в engine.css дле 9.8 это и будем исправлять :)
  • Для оптимизации работы движка (уменьшается количество http-запросов, т.к. редактор использует только одну картинку).
  • Для самоуспокоения (надоел уже этот стандартный, ущербный внешний вид).

 

 

 

Напомню всем, что в dle 9.8 BB редактор, используемый на сайте для добавления новостей и для комментариев, полностью переведен на использование шаблонов и стилей CSS шаблонов. Тем самым у веб-мастеров появилась возможность не только менять картинки кнопок редактора, но и полностью кардинально менять его внешний вид по своему усмотрению.

 

Поэтому способ установки от ПафНутиЙ не очень подходит для новой версии популярного движка, т.к. больше нет необходимости ковырять php файлы, можно обойтись только с помощью обычных css стилей. И так давайте приступим к его установке:

 

1) Заливаем картинку в папку "{THEME}/bbcodes/"

Скачать:bbcodes.zip

 

2)Открываем файл engine.css и в нем ищем что-то подобное:

 

/*---BB Редактор---*/.bb-pane { height: 1%; overflow: hidden; border: 1px solid #BBB; background-image: url("../bbcodes/bg.gif"); }.bb-btn, .bb-sep { height: 25px; float: left; display: block; overflow: hidden; text-indent: -9999px; white-space: nowrap; }.bb-sel { float: left; padding: 4px 2px 0 2px; }.bb-sel select { font-size: 11px; }.bb-sep { width: 5px; background-image: url("../bbcodes/brkspace.gif"); }.bb-btn { cursor: pointer; width: 23px; }#b_font { width: 118px;}#b_size { width: 65px;}#b_font select { padding: 0px;}#b_size select { padding: 0px;}#b_b { background-image: url("../bbcodes/b.gif"); }#b_i { background-image: url("../bbcodes/i.gif"); }#b_u { background-image: url("../bbcodes/u.gif"); }#b_s { background-image: url("../bbcodes/s.gif"); }#b_img { background-image: url("../bbcodes/image.gif"); }#b_up { background-image: url("../bbcodes/upload.gif"); }#b_emo { background-image: url("../bbcodes/emo.gif"); }#b_url { background-image: url("../bbcodes/link.gif"); }#b_leech { background-image: url("../bbcodes/leech.gif"); }#b_mail { background-image: url("../bbcodes/email.gif"); }#b_video { background-image: url("../bbcodes/mp.gif"); }#b_audio { background-image: url("../bbcodes/mp3.gif"); }#b_hide { background-image: url("../bbcodes/hide.gif"); }#b_quote { background-image: url("../bbcodes/quote.gif"); }#b_code { background-image: url("../bbcodes/code.gif"); }#b_left { background-image: url("../bbcodes/l.gif"); }#b_center { background-image: url("../bbcodes/c.gif"); }#b_right { background-image: url("../bbcodes/r.gif"); }#b_color { background-image: url("../bbcodes/color.gif"); }#b_spoiler { background-image: url("../bbcodes/spoiler.gif"); }#b_fla { background-image: url("../bbcodes/flash.gif"); }#b_yt { background-image: url("../bbcodes/youtube.gif"); }#b_tf { background-image: url("../bbcodes/typograf.gif"); }#b_list { background-image: url("../bbcodes/list.gif"); }#b_ol { background-image: url("../bbcodes/ol.gif"); }#b_tnl { background-image: url("../bbcodes/translit.gif"); }#b_br { background-image: url("../bbcodes/pbreak.gif"); }#b_pl { background-image: url("../bbcodes/page.gif"); }.bb-editor textarea {     -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;    padding: 2px; border: 1px solid #bcc0c2; width: 100%; background: #fff url("../images/fields.png") repeat-x;}.editorcomm .bb-editor { width: 465px;}.editorcomm .bb-editor textarea { height: 156px; }.clr {    clear: both;}

 

 

 

И заменяем его на это:

 

 

/*---BB Редактор---*/.bb-sep {    height: 26px;    margin: 0 4px 4px 0;    float: left;    background: url(../bbcodes/bbcodes.png) no-repeat 0 0;    overflow: hidden;    text-align: left;    text-indent: -9999px;    width: 5px;    background-position: 0 -841px;}.bb-btn {    width: 26px;    height: 26px;    margin: 0 4px 4px 0;    float: left;    background: url(../bbcodes/bbcodes.png) no-repeat 0 0;    overflow: hidden;    text-align: left;    text-indent: -9999px;    cursor: pointer;    border-radius: 4px;    -moz-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);    -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);}.bb-btn:hover {    background-color: #fff;    -moz-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);    -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);}.bb-sel {    float: left;    padding: 4px 2px 0 2px;}.bb-sel select {    font-size: 11px;}#b_font {    float: left;    margin-right: 4px;}#b_size {    float: left;    margin-right: 4px;}#b-font select,.b-size select {    font-size: 100%;    margin: 4px 0 0 0;    vertical-align: baseline;    *vertical-align: middle;}#b_b {    background-position: 0 -900px;}#b_b:hover {    background-position: -30px -900px;    }#b_i {    background-position: 0 -570px;}#b_i:hover {    background-position: -30px -570px;}#b_u {    background-position: 0 -60px;}#b_u:hover {    background-position: -30px -60px;}#b_s {    background-position: 0 -180px;}#b_s:hover {    background-position: -30px -180px;}#b_img {    background-position: 0 -540px;}#b_img:hover {    background-position: -30px -540px;}#b_up {    background-position: 0 -30px;}#b_up:hover {    background-position: -30px -30px;}#b_emo {    background-position: 0 -660px;}#b_emo:hover {    background-position: -30px -660px;}#b_url {    background-position: 0 -450px;}#b_url:hover {    background-position: -30px -450px;}#b_leech {    background-position: 0 -480px;}#b_leech:hover {    background-position: -30px -480px;}#b_mail {    background-position: 0 -690px;}#b_mail:hover {    background-position: -30px -690px;}#b_video {    background-position: 0 -390px;}#b_video:hover {    background-position: -30px -390px;}#b_audio {    background-position: 0 -360px;}#b_audio:hover {    background-position: -30px -360px;}#b_hide {    background-position: 0 -600px;}#b_hide:hover {    background-position: -30px -600px;}#b_quote {    background-position: 0 -240px;}#b_quote:hover {    background-position: -30px -240px;}#b_code {    background-position: 0 -750px;}#b_code:hover {    background-position: -30px -750px;}#b_left {    background-position: 0 -510px;}#b_left:hover {    background-position: -30px -510px;}#b_center {    background-position: 0 -810px;}#b_center:hover {    background-position: -30px -810px;}#b_right {    background-position: 0 -210px;}#b_right:hover {    background-position: -30px -210px;}#b_color {    background-position: 0 -720px;}#b_color:hover {    background-position: -30px -720px;}#b_spoiler {    background-position: 0 -150px;}#b_spoiler:hover {    background-position: -30px -150px;}#b_fla {    background-position: 0 -630px;}#b_fla:hover {    background-position: -30px -630px;}#b_yt{    background-position: 0 0;}#b_yt:hover {    background-position: -30px 0;}#b_tf {    background-position: 0 -90px;}#b_tf:hover {    background-position: -30px -90px;}#b_list {    background-position: 0 -420px;}#b_list:hover {    background-position: -30px -420px;}#b_ol {    background-position: 0 -330px;}#b_ol:hover {    background-position: -30px -330px;}#b_tnl {    background-position: 0 -120px;}#b_tnl:hover {    background-position: -30px -120px;}#b_br {    background-position: 0 -270px;}#b_br:hover {    background-position: -30px -270px;}#b_pl{    background-position: 0 -300px;}#b_pl:hover {    background-position: -30px -300px;}.bb-editor textarea {        -moz-box-sizing: border-box;        -webkit-box-sizing: border-box;        box-sizing: border-box;        padding: 2px;        border: 1px solid #bcc0c2;        width: 100%;        background: #fff url("../images/fields.png") repeat-x;    }    .editorcomm .bb-editor {                    width: 507px;                }                .editorcomm .bb-editor textarea {        height: 156px;    }        .clr {    clear: both;}

 

 

 

Ну вот и все,наслождаемся результатом) tooltip я пока-что не изменял, сначала я разберусь с Bootstrap и выложу о нем статью :) Также предлагаю почитать мою первую статью, где мы изменяем оформление checkbox в dle на jquery


3 комментария


Рекомендованные комментарии

Ну а блоги тогда нафиг?) мне вот тут нравится, более такое оформление сайтоподобное...ну следующее о dle там выложу, без проблем)

Поделиться комментарием


Ссылка на комментарий

Андрей , ну блин тут все красиво оформлено  и глаз радует а там как ни то((

Поделиться комментарием


Ссылка на комментарий

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
×
×
  • Создать...