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

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



Замена HTML:

HTML:

{text}

Где {text} будет текст для вставки в сообщение.
Перейдем на вкладку "Расширенные настройки" и укажем путь до иконки которая отобразиться на кнопке в редакторе - "Ссылка на иконку редактора:".



Вот моя иконка:

Сохраните, если пойдет, изображение себе и закинте на сайт. К примеру:

Код:

/forum/styles/ВАШ СТИЛЬ/xenforo/editor/shadow.png

Получилось:



По такому же принципу сделал ВВ-код добавление файла мр3, по прямой ссылке, с использованием плеера uppod. Все тож самое (конечно кроме HTML), только в расширенных настройках надо отметить "Отключить авто-ссылки"

 

Продолжу начатую мной тему пользовательских ВВ-кодов. В первом топике, я писал про вставку мр3 файла прямой ссылкой, теперь опишу все подробнее.
Добавляем новый ВВ-код:

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

Тэг BB-кода: mp3
Заголовок: Трек mp3
Описание: Вставляет прямую ссылку на mp3 файл, используется плеер uppod
Способ замены: Простая замена
Опция BB-кода: Нет
Замена HTML: Подробное описание с шестью видами плеера
Пример использования:

Код:

[mp3]http://skaiman.ga/music/Goodbyes.mp3[/mp3]

Разрешить использование этого кода в подписи: На Ваше усмотрение
Включено: Да

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

В этом BB-коде: Отключить авто-ссылки
Ссылка на иконку редактора:

Код:

/forum/styles/ВАШ СТИЛЬ/xenforo/editor/mp3.png

Иконка для редактора:

Вот где то так.

 

Обтекание картинки текстом.

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

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

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

Тэг BB-кода: imgleft
Заголовок: Изображение слева
Описание: Изображение в тексте слева
Способ замены: Простая замена
Опция BB-кода: Нет
Замена HTML:

Код:

Пример использования:

Код:

[imgleft]http://pic.rk.ua/di-1MPX.jpg[/imgleft]

Разрешить использование этого кода в подписи: Нет

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

В этом BB-коде: Отключить авто-ссылки
Ссылка на иконку редактора:

Код:

/forum/styles/ВАШ СТИЛЬ/xenforo/editor/imgleft.png

Иконка для редактора:

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

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

Тэг BB-кода: imgright
Заголовок: Изображение справа
Описание: Изображение в тексте справа
Способ замены: Простая замена
Опция BB-кода: Нет
Замена HTML:

Код:

Пример использования:

Код:

[imgright]http://pic.rk.ua/di-1MPX.jpg[/imgright]

Разрешить использование этого кода в подписи: Нет

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

В этом BB-коде: Отключить авто-ссылки
Ссылка на иконку редактора:

Код:

/forum/styles/ВАШ СТИЛЬ/xenforo/editor/imgright.png

Иконка для редактора:

Скачиваем архив, распаковываем, закидываем папку highslide в папку js Вашего форума.
Открываем page_container_js_head и добавляем туда:

Код:

Демонстрационная страница: КЛИК

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

 

Дополнительно к посту Обтекание картинки текстом.

Что бы убрать темный бордюр вокруг увеличенного изображения, надо в файле 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/';

 

Заглавная (инициал, буквица), первая буква абзаца или текста.

Не очень, конечно нужный ВВ-код, но думаю кому то пригодиться. Выглядеть это будет так:

Тэг BB-кода: initial
Заголовок: Заглавная буква
Описание: Заглавная (инициал, буквица), первая буква для абзаца
Способ замены: Простая замена
Опция BB-кода: Нет
Замена HTML:

Код:

{text}

Пример использования:

Код:

[initial]А[/initial]

Ссылка на иконку редактора:

Код:

/styles/ВАШ СТИЛЬ/xenforo/editor/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} 

 

Статус Skype.

Увидел топик Кнопка Скайп на сайт и решил реализовать это в ВВ-кодах, но не стал использовать новую кнопку, не нравиться она мне , не отображает online и offline. Использовал старую, она хоть и не поддерживается на сайте скайпа, но работает исправно.
Не буду все писать, только Замена HTML:

Код:

И Иконка редактора:

Скриншоты:

 

Можно для подписи использовать...

 

ВВ-код подписи для пользователей.

Предыдущий пост, натолкнул меня на мысль сделать ВВ-код для подписи.

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



Но, я недавно общаюсь с 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:

Код:

Подпись

{text}

Икока для редактора:

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

 

ВВ-коды DEMO и DOWNLOAD.

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

Замена HTML для DEMO:

Код:

Замена HTML для DOWNLOAD:

Код:

Код 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:

Код:

{text}

Код 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;
}

В результате получилось, как мне кажется , симпатично.



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

Просто ссылки надо оборачивать в два ВВ-кода:

Код:

[box][demo]ССЫЛКА НА СТРАНИЦУ ДЕМО[/demo][file]ССЫЛКА НА СКАЧИВАНИЕ ФАЙЛА[/file][/box]

Конечно демо и файл можно и по отдельности, но в бокс

 

Возможно онлайн/оффлайн статус прикрутить под аватарку? Чтобы у пользователя, который заполнил это поле, появилась иконка статуса. То есть не пользовательскими ВВ-кодами сделать.

 

Наверное можно, в message_user_info, но я не знаю как. Надо вместо {text}, в коде, поставить условие для скайпа.

 

Возможно: Статус skype и icq под аватаром

 

Пока не ставил, но интересное решение, на xenforo этого и не хватало как раз.
Я пока не ставил, но вопрос, можно ли приатаченные картинки выравнивать?

Решил спросить вдруг уже модифицировали!

 

Вообще то было уже решение https://xenforo.com/community/resources/cta-float-bb-code.2932/

 

Не работает в 1.4.3 почему то, вернее что не делай, кнопки на панели не появляются
уже и явно url к картинке указывал, и сокращённо но толку ноль!


Как видно выравнивание работает, а кнопку на панели как не мучал так и не вывел!

 

хайд может установлен типа esthetic, то он режет кнопки, все пользовательские

 

Точно, тут вы правы, но наверное хайд будет чуть нужнее.
Спасибо за помощь!

 

Видите ли, если дополнение по какой то причине, что то нарушает в работе других приложений, это уже вызывает недоверие к дополнению и вот думайте, что нужнее

 

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

 

Выложите кто-нибудь, если не трудно.