1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

1.3.x Пользовательские ВВ-коды

Тема в разделе "Советы, руководства и видео-уроки", создана пользователем Skaiman, 18 июн 2014.

Загрузка
  1. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    223
    Версия XF:
    1.4.0
    В новых версиях XenForo, появилась возможность добавлять собственные ВВ-коды. Посмотрев здесь, я нашел только описание новой возможности, но как их добавить нет. Сам я недавно стал тестировать этот движок, поэтому только разбираюсь в тонкостях, ну и для таких же как я, сделал небольшую инструкцию по добавлению своих ВВ-кодов.
    "Главная" -> "Пользовательские ВВ-коды" -> "+Добавить новый ВВ-код" -> "Основная информация".
    Добавим простенький код, для примера "Текст с тенью". Смотрим скриншот:

    screen_01.png

    Замена HTML:
    HTML:
    <span style="font-size: 2em; text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; color:#ddcca3;">{text}</span>
    Где {text} будет текст для вставки в сообщение.
    Перейдем на вкладку "Расширенные настройки" и укажем путь до иконки которая отобразиться на кнопке в редакторе - "Ссылка на иконку редактора:".

    screen_02.png

    Вот моя иконка:
    shadow.png
    Сохраните, если пойдет, изображение себе и закинте на сайт. К примеру:
    Код:
    /forum/styles/ВАШ СТИЛЬ/xenforo/editor/shadow.png
    Получилось:

    screen_03.png

    По такому же принципу сделал ВВ-код добавление файла мр3, по прямой ссылке, с использованием плеера uppod. Все тож самое (конечно кроме HTML), только в расширенных настройках надо отметить "Отключить авто-ссылки"
     
    Последнее редактирование: 18 июн 2014
    TAIFUN, Ademar, zikvel и ещё 1-му нравится это.
  2. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    223
    Версия XF:
    1.4.0
    Продолжу начатую мной тему пользовательских ВВ-кодов. В первом топике, я писал про вставку мр3 файла прямой ссылкой, теперь опишу все подробнее.
    Добавляем новый ВВ-код:

    Основная информация

    Тэг BB-кода: mp3
    Заголовок: Трек mp3
    Описание: Вставляет прямую ссылку на mp3 файл, используется плеер uppod
    Способ замены: Простая замена
    Опция BB-кода: Нет
    Замена HTML: Подробное описание с шестью видами плеера
    Пример использования:
    Код:
    [mp3]http://skaiman.ga/music/Goodbyes.mp3[/mp3]
    Разрешить использование этого кода в подписи: На Ваше усмотрение
    Включено: Да

    Расширенные настройки

    В этом BB-коде: Отключить авто-ссылки
    Ссылка на иконку редактора:
    Код:
    /forum/styles/ВАШ СТИЛЬ/xenforo/editor/mp3.png
    Иконка для редактора: mp3.png

    Вот где то так.
     
    TAIFUN, patrig, XenTerSiO и ещё 1-му нравится это.
  3. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    223
    Версия XF:
    1.4.0
    Обтекание картинки текстом.

    Представляю Вашему вниманию ВВ-коды обтекания картинки текстом, слева и справа. Для этого используется скрипт Highslide JS, с увеличением при клике.

    Картинка слева.

    Общая информация:

    Тэг BB-кода: imgleft
    Заголовок: Изображение слева
    Описание: Изображение в тексте слева
    Способ замены: Простая замена
    Опция BB-кода: Нет
    Замена HTML:
    Код:
    <a href="{text}" class="highslide" onclick="return hs.expand(this)" style="float:left; margin: 15px 15px 10px 0"><img src="{text}" style="height:150px; border:0;" /></a>
    Пример использования:
    Код:
    [imgleft]http://pic.rk.ua/di-1MPX.jpg[/imgleft]
    Разрешить использование этого кода в подписи: Нет

    Расширенные настройки:

    В этом BB-коде: Отключить авто-ссылки
    Ссылка на иконку редактора:
    Код:
    /forum/styles/ВАШ СТИЛЬ/xenforo/editor/imgleft.png
    Иконка для редактора: imgleft.png

    Картинка справа.

    Общая информация:

    Тэг BB-кода: imgright
    Заголовок: Изображение справа
    Описание: Изображение в тексте справа
    Способ замены: Простая замена
    Опция BB-кода: Нет
    Замена HTML:
    Код:
    <a href="{text}" class="highslide" onclick="return hs.expand(this)" style="float:right; margin: 15px 0 10px 15px"><img src="{text}" style="height:150px; border:0;" /></a>
    Пример использования:
    Код:
    [imgright]http://pic.rk.ua/di-1MPX.jpg[/imgright]
    Разрешить использование этого кода в подписи: Нет

    Расширенные настройки:

    В этом BB-коде: Отключить авто-ссылки
    Ссылка на иконку редактора:
    Код:
    /forum/styles/ВАШ СТИЛЬ/xenforo/editor/imgright.png
    Иконка для редактора: imgright.png

    Скачиваем архив, распаковываем, закидываем папку highslide в папку js Вашего форума.
    Открываем page_container_js_head и добавляем туда:
    Код:
    <script type="text/javascript" src="js/highslide/highslide.js"></script>
    <script type="text/javascript" src="js/highslide/highslide.config.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="js/highslide/highslide.css" />
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="js/highslide/highslide-ie6.css" />
    <![endif]-->
    Демонстрационная страница: КЛИК

    Да чуть не забыл, картинка берется со стороннего ресурса, с любого хостинга изображений, вложенная не используется.
    Удачи!
     

    Вложения:

    Последнее редактирование: 22 июн 2014
    Gatses, Smalesh, zikvel и ещё 1-му нравится это.
  4. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    223
    Версия XF:
    1.4.0
    Дополнительно к посту Обтекание картинки текстом.

    Что бы убрать темный бордюр вокруг увеличенного изображения, надо в файле highslide.config.js найти строку:
    Код:
    hs.outlineType = 'custom';
    И custom заменить на rounded-white

    Что бы убрать копирайт "Использует Highslide JS", находим строчку в файле highslide.js:
    HTML:
    showCredits : true, // you can set this to false if you want
    И меняем значение true на false.

    В демо я уже поправил. Так же можете скачать исправленные файлы и заменить.
    Перезалил архив, в highslide.config.js не указал путь до папки js, а то не будет работать:
    Код:
    hs.graphicsDir = 'js/highslide/graphics/';
     

    Вложения:

    • highslide.zip
      Размер файла:
      15,8 КБ
      Просмотров:
      4
    Последнее редактирование: 23 июн 2014
    zikvel и Mirovinger нравится это.
  5. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    223
    Версия XF:
    1.4.0
    Заглавная (инициал, буквица), первая буква абзаца или текста.

    Не очень, конечно нужный ВВ-код, но думаю кому то пригодиться. Выглядеть это будет так:
    Image 1.png
    Тэг BB-кода: initial
    Заголовок: Заглавная буква
    Описание: Заглавная (инициал, буквица), первая буква для абзаца
    Способ замены: Простая замена
    Опция BB-кода: Нет
    Замена HTML:
    Код:
    <span class="dropcap">{text}</span>
    Пример использования:
    Код:
    [initial]А[/initial]
    Ссылка на иконку редактора:
    Код:
    /styles/ВАШ СТИЛЬ/xenforo/editor/initial.png
    Иконка редактора: initial.png

    Создаем папку fonts:
    Код:
    /styles/ВАШ СТИЛЬ/xenforo/fonts
    Заливаем туда шрифты из архива. Открываем EXTRA.css и добавляем:
    Код:
    @font-face {
      font-family: 'Marck Script';
      src: url('./styles/flexile/xenforo/fonts/marckscript-regular.eot');
      src: url('./styles/flexile/xenforo/fonts/marckscript-regular.eot?#iefix') format('embedded-opentype'),
      url('./styles/flexile/xenforo/fonts/marckscript-regular.woff') format('woff'),
      url('./styles/flexile/xenforo/fonts/marckscript-regular.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    
    span.dropcap {
      text-shadow:
      0 -1px 0 #858585,
      0 1px 5px rgba(0,0,0,.6),
      0 3px 1px rgba(0,0,0,.1),
      0 0 2px rgba(0,0,0,.2),
      0 1px 2px rgba(0,0,0,.3),
      0 1px 3px rgba(0,0,0,.2),
      0 3px 5px rgba(0,0,0,.25),
      0 6px 5px rgba(0,0,0,.2),
      0 10px 8px rgba(0,0,0,.15);
    }
    
    span.dropcap {font-size:3.5em; display:block; float:left; line-height:1.0em; font-family:'Marck Script', cursive;font-weight: bold;color: #ccc;}
    span.dropcap {height:50px; margin:-4px 5px -3px 0} 
     

    Вложения:

    • fonts.zip
      Размер файла:
      119 КБ
      Просмотров:
      9
    Gromolapov и Mirovinger нравится это.
  6. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    223
    Версия XF:
    1.4.0
    Статус Skype.

    Увидел топик Кнопка Скайп на сайт и решил реализовать это в ВВ-кодах, но не стал использовать новую кнопку, не нравиться она мне :), не отображает online и offline. Использовал старую, она хоть и не поддерживается на сайте скайпа, но работает исправно.
    Не буду все писать, только Замена HTML:
    Код:
    <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
    <a href="skype:{text}?chat"><img src="http://mystatus.skype.com/smallclassic/{text}" style="border: none;" width="114" height="20" alt="My status" /></a>
    И Иконка редактора: skype.png

    Скриншоты:
    Image 2.png Image 3.png
     
    zikvel, lepagrn, fly_indiz и 2 другим нравится это.
  7. fly_indiz

    fly_indiz Местный

    Регистрация:
    20.08.11
    Сообщения:
    460
    Симпатии:
    352
    Версия XF:
    1.4.3
    Можно для подписи использовать...
     
  8. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    223
    Версия XF:
    1.4.0
    ВВ-код подписи для пользователей.

    Предыдущий пост, натолкнул меня на мысль сделать ВВ-код для подписи.
    Сделал простой legend, с использованием цветов установленного у Вас стиля, конечно, фантазия не имеет границ, можно сделать как угодно.

    Image 4.png

    Но, я недавно общаюсь с XenForo, да и не силен вообще в PHP, поэтому заголовок "Подпись" не могу сделать изменяемой. Очень бы хотелось, что бы знатоки умельцы обратили свои взоры на этот топик и помогли с добавлением обработчика и можно было при вставке этого кода, менять надпись, типа:
    Код:
    [sign=Подпись]бла бла бла[/sign]
    Пока этого нет, ставим как есть :)
    Скачиваем архив со шрифтом, заливаем в папку fonts, (подробнее о шрифте есть выше), в EXTRA.css добавляем:
    Код:
    @font-face {
      font-family: 'Conv_StudioScriptC';
      src: url('./styles/flexile/xenforo/fonts/StudioScriptC.eot');
      src: local('☺'), url('./styles/flexile/xenforo/fonts/StudioScriptC.woff') format('woff'), url('./styles/flexile/xenforo/fonts/StudioScriptC.ttf') format('truetype'), url('./styles/flexile/xenforo/fonts/StudioScriptC.svg') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    .sign_box {
      width: 50%;
      background: @primaryLighterStill url('@imagePath/xenforo/gradients/form-button-white-25px.png') repeat-x top;
      border: 1px solid @primaryLighterStill;
      border-radius: 3px;
      margin: 7px 5px;
      padding:3px 10px 7px 15px;
      font-size: 10px;
      color: @mutedTextColor;
      font-style: italic;
    }
    .sign_name {
      font-size: 18px;
      font-family: 'Conv_StudioScriptC';
      color: @secondaryMedium;
      font-style: normal;
    }
    Замена HTML:
    Код:
    <fieldset class="sign_box"><legend class="sign_name">Подпись</legend>{text}</fieldset>
    Икока для редактора: signature.png

    Ну и ждем, может кто поможет :)
     

    Вложения:

    Mirovinger нравится это.
  9. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    223
    Версия XF:
    1.4.0
    ВВ-коды DEMO и DOWNLOAD.

    Сегодня сделал ВВ-код для отображения кнопок DEMO и DOWNLOAD. Ну демо, понятно для чего, если читали мои посты, видели, а донлоад, может пригодиться, если заливать большие файлы на сторонние ресурсы. Вроде все просто, нарисовал картинки, сделал спрайт, накропал css и html для них. Вот что получилось:

    Замена HTML для DEMO:
    Код:
    <a class="sprite_dd" id="demo" target="_blank" title="Посмотреть демо" href="{text}"></a>
    Замена HTML для DOWNLOAD:
    Код:
    <a class="sprite_dd" id="download" target="_blank" title="Скачать исходники" href="{text}"></a>
    Код CSS для EXTRA.css:
    Код:
    .sprite_dd {
      display:block;
      width:130px;
      height:50px;
      background:url(./styles/img/sprites_dd.png)!important;
      background-repeat:no-repeat;
      border-radius: 0!important;
      border: 0!important;
      margin-right:10px!important;
      float:left;
    }
    
    #download {background-position:0 0!important;}
    #download:hover {background-position:0 -50px!important;}
    #demo {background-position:0 -100px!important;}
    #demo:hover {background-position:0 -150px!important;}
    Вроде все работает и sprites и hover, но вылез один недостаток. Для картинок установлено свойство float:left, что вставляет картинку в текст с обтеканием, без него картинки не установятся рядом. Нужен контейнер div, в котором картинки будут находиться отдельно от текста. Пришлось делать дополнительный код для бокса.
    Замена HTML для BOX:
    Код:
    <div class="box">{text}<div class="clear"></div></div>
    Код CSS для EXTRA.css:
    Код:
    .box {
      padding:15px 0 15px 30px;
      border-top:1px dashed @primaryLighter;
      border-bottom:1px dashed @primaryLighter;
    }
    .clear {clear:both;}
    a, img, a img {
      outline:none;
      border:0 none;
    }
    В результате получилось, как мне кажется :), симпатично.

    Image 5.png

    Так же есть страничка демо: [​IMG]

    Просто ссылки надо оборачивать в два ВВ-кода:
    Код:
    [box][demo]ССЫЛКА НА СТРАНИЦУ ДЕМО[/demo][file]ССЫЛКА НА СКАЧИВАНИЕ ФАЙЛА[/file][/box]
    Конечно демо и файл можно и по отдельности, но в бокс :)
     

    Вложения:

    • sprites_dd.zip
      Размер файла:
      15,9 КБ
      Просмотров:
      11
    Mirovinger нравится это.
  10. Nappsel

    Nappsel Активный пользователь

    Регистрация:
    11.11.13
    Сообщения:
    29
    Симпатии:
    0
    Версия XF:
    1.4.0
    Возможно онлайн/оффлайн статус прикрутить под аватарку? Чтобы у пользователя, который заполнил это поле, появилась иконка статуса. То есть не пользовательскими ВВ-кодами сделать.
     
  11. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    223
    Версия XF:
    1.4.0
    Наверное можно, в message_user_info, но я не знаю как. :( Надо вместо {text}, в коде, поставить условие для скайпа.
     
  12. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    223
    Версия XF:
    1.4.0
    Возможно: Статус skype и icq под аватаром
     
  13. Anatoliy

    Anatoliy Местный

    Регистрация:
    26.09.12
    Сообщения:
    70
    Симпатии:
    8
    Версия XF:
    1.1.3
    Пока не ставил, но интересное решение, на xenforo этого и не хватало как раз.
    Я пока не ставил, но вопрос, можно ли приатаченные картинки выравнивать?

    Решил спросить вдруг уже модифицировали!
     
    Последнее редактирование: 15 янв 2015
  14. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    223
    Версия XF:
    1.4.0
  15. Anatoliy

    Anatoliy Местный

    Регистрация:
    26.09.12
    Сообщения:
    70
    Симпатии:
    8
    Версия XF:
    1.1.3
    Не работает в 1.4.3 почему то, вернее что не делай, кнопки на панели не появляются
    уже и явно url к картинке указывал, и сокращённо но толку ноль!

    LEFT.png
    Как видно выравнивание работает, а кнопку на панели как не мучал так и не вывел!:(
     
  16. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    223
    Версия XF:
    1.4.0
    хайд может установлен типа esthetic, то он режет кнопки, все пользовательские :)
     
  17. Anatoliy

    Anatoliy Местный

    Регистрация:
    26.09.12
    Сообщения:
    70
    Симпатии:
    8
    Версия XF:
    1.1.3
    Точно, тут вы правы, но наверное хайд будет чуть нужнее.
    Спасибо за помощь!
     
  18. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    223
    Версия XF:
    1.4.0
    Видите ли, если дополнение по какой то причине, что то нарушает в работе других приложений, это уже вызывает недоверие к дополнению и вот думайте, что нужнее :)
     
  19. Mirovinger

    Mirovinger Местный

    Регистрация:
    17.05.12
    Сообщения:
    256
    Симпатии:
    250
    Версия XF:
    1.1.2
    Он режет только в режет в режиме выпадающего списка, но если отключить это в настройках стиля, то всё работает нормально, конечно компактный вид хорошо, но если нужны кастомные кнопки, то только так.
     
  20. BLEF

    BLEF Местный

    Регистрация:
    01.02.12
    Сообщения:
    466
    Симпатии:
    56

Поделиться этой страницей