Форум Лиги-17

Лига-17 - онлайн игра по мотивам мира покемонов.
https://forum.league17.ru/

Руководство по использованию BBCode в теме магазина

https://forum.league17.ru/viewtopic.php?t=88025

Страница 1 из 1

Руководство по использованию BBCode в теме магазина

Добавлено: 06 авг 2015, 17:32
Evangelion
 Руководство по использованию BBCode

Вступление
Что такое BBCode?
Можно ли комбинировать теги?

Форматирование текста
Как выделить текст: жирный, наклонный, подчёркнутый, зачеркнутый
Как изменить цвет или размер текста
Создание маркированного и нумерованного списков
Выравнивание объектов
Изображение в тексте
Вставка горизонтальной линии в сообщение

Создание ссылок
Ссылки

Показ изображений в сообщениях
Добавление изображения в сообщение 		Цитирование и вывод форматированных текстов
Цитирование при ответах
Добавление спойлера в сообщение

Построение таблиц
Таблицы

Информация и изображения монстров
Информация о монстре
Изображения монстров

Оформление текста
Текст с тенью
Двух/трёхцветный текст
Подсказка в тексте

Вступление

Добавлено: 06 авг 2015, 17:39
Evangelion
Что такое BBCode?
BBCode — это специальный вариант HTML. Сможете ли вы использовать BBCode в ваших сообщениях или нет, определяется администратором форумов. Кроме того, вы сможете отключить использование BBCode в конкретном сообщении при его размещении. Сам BBCode по стилю похож на HTML, теги заключены в квадратные скобки [ и ], а не в < и >; он даёт больше возможностей управления тем, как выводятся данные.

Тег (англ. tag ярлык, этикетка, бирка; метить) ключевое слово, метка для категоризации чего-либо. Используется для поиска какой-либо информации или для форматирования текста. Это элемент языка разметки гипертекста (например в XML, HTML).
При использовании некоторых шаблонов вы сможете добавлять BBCode в ваши сообщения, пользуясь простым интерфейсом, расположенным над полем для ввода текста. Но даже в этом случае данное руководство может оказаться полезным.

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


Можно ли комбинировать теги?
Да, конечно можно. Например, для формирования жирного текста большого размера красного цвета можно использовать следующую конструкцию:
ОбразецРезультат:

Код: Выделить всё

[size=200][color=red][b]ТЕСТ[/b][/color][/size]
ТЕСТ

Не рекомендуется выводить таким образом длинные тексты. Учтите, что вы, автор сообщения, должны позаботиться о том, чтобы теги были правильно вложены друг в друга, иначе их комбинация не даст результата.
Изображение

Изображение Вернуться наверх

Форматирование текста

Добавлено: 06 авг 2015, 17:48
Evangelion
Как выделить текст: жирный, наклонный, подчёркнутый, зачеркнутый
BBCode включает теги для быстрого изменения стиля шрифта, сделать это можно следующими способами:
  • Чтобы сделать текст жирным, заключите его в [b][/b],
  • Для подчёркивания используйте [u][/u],
  • Курсив делается тегами [i][/i],
  • Для зачеркнутого текста используйте [s][/s].
Спойлер: Пример использования: ПОКАЗАТЬ
ОбразецРезультат:

Код: Выделить всё

[b]Жирный текст[/b]
Жирный текст

Код: Выделить всё

[u]Подчёркнутый текст[/u]
Подчёркнутый текст

Код: Выделить всё

[i]Текст написанный курсивом[/i]
Текст написанный курсивом

Код: Выделить всё

[s]Зачёркнутый текст[/s]
Зачёркнутый текст

Изображение Вернуться наверх


Как изменить цвет или размер текста
Для изменения цвета или размера шрифта могут быть использованы следующие теги (окончательный вид будет зависеть от системы и браузера пользователя):
  • Цвет текста можно изменить, окружив его [color=][/color]. Вы можете указать либо известное имя цвета (red, blue, yellow и т.п.), или шестнадцатиричное представление, например #FFFFFF, #000000.
  • Изменение размера достигается аналогичным образом при использовании [size=][/size]. Этот тег зависит от используемых шаблонов, рекомендуемый формат — число, показывающее размер текста в процентах, от 20% (очень маленький) до 200% и даже 300% (очень большой) от размера по умолчанию.
Спойлер: Пример использования: ПОКАЗАТЬ
Образец:Результат:

Код: Выделить всё

[color=red]Привет![/color]
Привет!

Код: Выделить всё

[color=#FF0000]Привет![/color]
Привет!

Код: Выделить всё

[size=50]Маленький[/size]
Маленький

Код: Выделить всё

[size=200]Огромный![/size]
Огромный!

Изображение Вернуться наверх


Создание маркированного и нумерованного списков
BBCode поддерживает два вида списков: маркированные и нумерованные. Они практически идентичны своим эквивалентам из HTML.
  • В маркированном списке все элементы выводятся последовательно, каждый отмечается символом-маркером. Для создания маркированного списка используйте [list][/list] и определите каждый элемент при помощи [*].
  • Второй тип списка, нумерованный, позволяет выбрать, что именно будет выводиться перед каждым элементом. Для создания нумерованного списка используйте [list=1][/list] или [list=a][/list] (где а – латинская) для создания алфавитного списка. Как и в случае маркированного списка, элементы определяются с помощью [*].
Спойлер: Пример использования: ПОКАЗАТЬ
Образец и результат

Код: Выделить всё

[list=none]
Красный
Синий
Желтый
[/list]
  • Красный
    Синий
    Желтый

Код: Выделить всё

[list]
[*]Красный
[*]Синий
[*]Желтый
[/list]
  • Красный
  • Синий
  • Желтый

Код: Выделить всё

[list=1]
[*]Красный
[*]Синий
[*]Желтый
[/list]
  1. Красный
  2. Синий
  3. Желтый

Код: Выделить всё

[list=a]
[*]Красный
[*]Синий
[*]Желтый
[/list]
  1. Красный
  2. Синий
  3. Желтый

Изображение Вернуться наверх


Выравнивание объектов
Для выравнивания текста, изображений, вложений и других объектов используются 4 специальных тега:
  • Выравнивание по центру [align=center][/align]
  • Выравнивание по левому краю [align=left][/align]
  • Выравнивание по правому краю [align=right][/align]
  • Предварительно отформатированный текст [pre][/pre] даёт возможность учитывать несколько одновременных пробелов между текстом
Спойлер: Пример использования: ПОКАЗАТЬ
Образец и результат

Код: Выделить всё

[align=center]Для выравнивания текста, изображений, вложений
и других объектов используются 4 специальных тега[/align]
Для выравнивания текста, изображений, вложений
и других объектов используются 4 специальных тега

Код: Выделить всё

[align=left]Для выравнивания текста, изображений, вложений 
и других объектов используются 4 специальных тега[/align]
Для выравнивания текста, изображений, вложений
и других объектов используются 4 специальных тега

Код: Выделить всё

[align=right]Для выравнивания текста, изображений, вложений 
и других объектов используются 4 специальных тега[/align]
Для выравнивания текста, изображений, вложений
и других объектов используются 4 специальных тега

Код: Выделить всё

[pre]Для выравнивания текста,          изображений, вложений 
          и других объектов используются 4 специальных тега[/pre]
Для выравнивания текста,          изображений, вложений 
          и других объектов используются 4 специальных тега

Изображение Вернуться наверх


Изображение в тексте
Для размещения картинки в тексте можно использовать такие теги:
  • Для размещения картинки слева/справа от текста: [float=сторона][img]ссылка_на_изображение[/img][/float] текст
Спойлер: Пример использования: ПОКАЗАТЬ
Образец и результат

Код: Выделить всё

[float=left][img]https://s018.radikal.ru/i527/1507/ca/98d8ea9f4320.png[/img][/float] Вам предстоит помочь старушке в поисках 
драгоценных камешков. Встретиться с ней 
вы можете в регионе Джото, город Олстон, 
там недалеко есть Дом старушки.
Изображение
Вам предстоит помочь старушке в поисках
драгоценных камешков. Встретиться с ней
вы можете в регионе Джото, город Олстон,
там недалеко есть Дом старушки.

Код: Выделить всё

[float=rihgt][img]https://s018.radikal.ru/i527/1507/ca/98d8ea9f4320.png[/img][/float] Вам предстоит помочь старушке в поисках 
драгоценных камешков. Встретиться с ней 
вы можете в регионе Джото, город Олстон, 
там недалеко есть Дом старушки.
Изображение
Вам предстоит помочь старушке в поисках
драгоценных камешков. Встретиться с ней
вы можете в регионе Джото, город Олстон,
там недалеко есть Дом старушки.

Изображение Вернуться наверх


Вставка горизонтальной линии в сообщение
Для разделения текста на смысловые блоки можно использовать горизонтальную линию: [hrc=цвет]толщина[/hrc]
Спойлер: Пример использования: ПОКАЗАТЬ
Образец:Резултат:

Код: Выделить всё

[hrc=#909090]2[/hrc]

Изображение Вернуться наверх

Создание ссылок

Добавлено: 06 авг 2015, 17:54
Evangelion
Ссылки
В BBCode поддерживается несколько способов создания ссылок.
  • Первый из них использует тег [url=][/url], после знака = должна идти необходимая ссылка. Учтите, что ссылка будет открываться в том же или в новом окне, в зависимости от настроек браузера пользователя.
  • Если вы хотите, чтобы в качестве текста ссылки показывался сам URL, необходимо использовать тег [url][/url], а между тегами указать нужную ссылку.
  • Кроме того, конференция поддерживает возможность, называемую Автоматические ссылки, это переведёт любой синтаксически правильную текст в ссылку. Например, ввод httр://img.league17.ru/pub/balls/slots/13.png в ваше сообщение автоматически преобразует в ссылку http://img.league17.ru/pub/balls/slots/13.png при просмотре сообщения.
  • Как и со всеми прочими тегами BBCode, вы можете заключать в теги [url][/url] любые другие теги, например [img][/img] (см. следующий пункт), [b][/b] и т.д. Как и с тегами форматирования, правильная вложенность тегов зависит от вас.
Спойлер: Пример использования: ПОКАЗАТЬ
Образец:Резултат:

Код: Выделить всё

[url=https://forum.league17.ru]Посетите форум Лиги-17[/url]
Посетите форум Лиги-17

Код: Выделить всё

[url]https://forum.league17.ru[/url]
https://forum.league17.ru

Изображение Вернуться наверх

Показ изображений в сообщениях

Добавлено: 06 авг 2015, 17:57
Evangelion
Добавление изображения в сообщение
BBCode включает тег для добавления изображения с внешних серверов, например с хостингов фотографий, в ваше сообщение. Для вывода изображения вы должны окружить его тегами [img][/img]. Учтите, что изображение в этом случае будет выводиться в масштабе 1:1 и если её размер будет слишком большим, то изображение не впишется в текст сообщения.

Как указано в «Создание ссылок», вы можете заключить изображение в теги [url][/url], чтобы картинка стала ссылкой.
Спойлер: Пример использования: ПОКАЗАТЬ
Образец и результат:

Код: Выделить всё

[img]https://forum.league17.ru/styles/prosilver/theme/images/site_logo.png[/img]
Изображение

Код: Выделить всё

[url=https://forum.league17.ru][img]https://forum.league17.ru/styles/prosilver/theme/images/site_logo.png[/img][/url]
Изображение

Изображение Вернуться наверх

Цитирование и вывод форматированных текстов

Добавлено: 06 авг 2015, 17:59
Evangelion
Цитирование при ответах
Есть два способа процитировать текст: со ссылкой и без.
  • Когда вы используете кнопку «Цитата» для ответа на сообщение, то его текст добавляется в поле ввода окружённым блоком [quote=" "][/quote]. Этот метод позволит вам цитировать со ссылкой на автора, либо на что-то ещё, что вы туда впишете. Помните, вы должны заключить имя в кавычки " ", они не могут быть опущены.
  • Второй метод просто позволяет вам что-то процитировать. Для этого вам надо заключить текст в теги [quote][/quote]. При просмотре сообщения будет просто показан текст в блоке цитирования
Спойлер: Первый метод. Пример использования: ПОКАЗАТЬ
Образец и результат:

Код: Выделить всё

[quote="Автор"]Текст автора будет здесь[/quote]
Автор писал(а):Текст автора будет здесь
Спойлер: Второй способ. Пример использования: ПОКАЗАТЬ
Образец и результат:

Код: Выделить всё

[quote]Текст автора будет здесь[/quote]
Текст автора будет здесь
Добавление спойлера в сообщение
Спойлер – это скрытая часть сообщения, открываемое щелчком мыши. Используется для скрытия различных материалов, не значимых по важности, а так же для визуального уменьшения размера сообщения. Внутри спойлера может содержаться любая информация (текст, графика, анимация, другой спойлер и т. д.). Для создания спойлера используется тег [spoiler=][/spoiler].

Образец и результат:

Код: Выделить всё

[spoiler=Заголовок] Текст, рисунки и прочее ...[/spoiler]

Спойлер: Заголовок ПОКАЗАТЬ
Текст, рисунки и прочее ...
Изображение Вернуться наверх

Построение таблиц

Добавлено: 06 авг 2015, 18:02
Evangelion
Таблицы
Есть два способа построения таблиц: с пунктирной рамкой и без.
  • Для построения таблицы без рамок необходим данный код: [table][-][/table]
  • Для построения таблицы с рамкой: [table2][*][/table2]
Спойлер: Пример использования: ПОКАЗАТЬ
[b][u]Образец:[/u][/b] Таблица без рамок: [code][table]первая колонка с любым содержимым[-]вторая колонка с любым содержимым[/table][/code][*][b][u]Результат:[/u][/b][table]первая колонка с любым содержимым[-]вторая колонка с любым содержимым[/table]
Таблица с пунктирными рамками:
[code][table2]первая колонка с любым содержимым[*]вторая колонка с любым содержимым[/table2][/code][-][table2]первая колонка с любым содержимым[*]вторая колонка с любым содержимым[/table2]
Важное замечание: В обеих таблицах может быть только по 2 колонки(или 4 если объединить эти две таблицы)
Спойлер: Пример использования: ПОКАЗАТЬ
Образец:

Код: Выделить всё

[table2][table]Первая колонка[-]Вторая колонка[/table][*][table]Третья колонка[-]Четвёртая колонка[/table][/table2]
Результат: [table]Первая колонка[-]Вторая колонка[/table][*][table]Третья колонка[-]Четвёртая колонка[/table]
Изображение Вернуться наверх

Информация и изображения монстров

Добавлено: 06 авг 2015, 18:13
Evangelion
Информация о монстре
BBCode включает тег для добавления изображения монстра и информации о его статах/генах. Для вывода информации вы должны использовать тег [pok=номер монстра]статы/гены[/pok]. Учтите, что номер монстра нужно указывать трёхзначный(Например: 003). Чтобы написать статы/гены, необходимо через запятую их перечислить 28,25,26,28,25,26 и вставить между тегами [pok=][/pok].
Для изображения шайни монстра, используйте тег: [poks=][/poks].
Спойлер: Пример только с генами: ПОКАЗАТЬ
Образец:Результат:

Код: Выделить всё

[pok=310]28,25,26,28,25,26[/pok]
HP: 28
Атака: 25
Защита: 26
Скорость: 28
Спец.Атака: 25
Спец.Защита: 26
Спойлер: Пример со статами и генами: ПОКАЗАТЬ
Образец:Результат:

Код: Выделить всё

[pok=310]385 28,259 25,260 26,380 28,255 25,248 26[/pok]
HP: 385 28
Атака: 259 25
Защита: 260 26
Скорость: 380 28
Спец.Атака: 255 25
Спец.Защита: 248 26
Спойлер: Пример шайни изображения в теге: ПОКАЗАТЬ
Образец:Результат:

Код: Выделить всё

[poks=310]28,25,26,28,25,26[/poks]
HP: 28
Атака: 25
Защита: 26
Скорость: 28
Спец.Атака: 25
Спец.Защита: 26
Более расширенная версия включает в себя 2 кода:
  • Код похож на предыдущий, но отдельно добавлены гены: [pok2=номер]статы[+]гены[/pok2]
    • Для изображения шайни монстра, используйте тег: [poks2=][/poks2].
  • Данный код отображает очки EV, характер, спареность и пол: [atr]указываем сколько очков EV не расставлено,характер,спареность,пол[/atr]
Спойлер: Пример использования: ПОКАЗАТЬ
Образец и Результат:

Код: Выделить всё

[pok2=310]345 126,151 0,235 126,205 19,290 0,487 126[+]36,33,37,31,35,28[/pok2]
[atr]0,мирный,спарен,М[/atr]
 СтатыГены
HP:345 12636
Атака:151 033
Защита:235 12637
Скорость:205 1931
Спец.Атака:290 035
Спец.Защита:487 12628
СпособностьЯйцевая атака
0мирный
Очки EVХарактерРазведениеПол
спаренМ
Пример шайни изображения в теге:

Код: Выделить всё

[poks2=310]345 126,151 0,235 126,205 19,290 0,487 126[+]36,33,37,31,35,28[/poks2]
[atr]0,мирный,спарен,М[/atr]
 СтатыГены
HP:345 12636
Атака:151 033
Защита:235 12637
Скорость:205 1931
Спец.Атака:290 035
Спец.Защита:487 12628
СпособностьЯйцевая атака
0мирный
Очки EVХарактерРазведениеПол
спаренМ

Вариант использования:

Код: Выделить всё

[table][img]http://www.serebii.net/itemdex/sprites/fastball.png[/img][b] #282 Gardevoir 100-lvl [img]http://wiki.league17.ru/images/0/01/Tren_ar5.png[/img] (Спец защита, 50/50 банок)[/b]
[pok2=306]345 126,151 0,235 126,205 19,290 0,487 126[+]36,33,37,31,35,28[/pok2]
[atr]0,мирный,спарен,М[/atr][-][b]Выберите атаки, которые
монстр забудет после тренировки:[/b]
Атака 1
Атака 2
Атака 3
Атака 4 [b]
Выберите атаки, которым
хотите научить своего монстра:[/b]
Атака 5
Атака 6[/table]
[img]http://img.league17.ru/pub/balls/slots/1.png[/img][b] #310 Амперон 100-lvl [img]http://wiki.league17.ru/images/0/01/Tren_ar5.png[/img] (Спец защита, 50/50 банок)[/b] [pok2=306]345 126,151 0,235 126,205 19,290 0,487 126[+]36,33,37,31,35,28[/pok2] [atr]0,мирный,спарен,М[/atr][-][b]Выберите атаки, которые монстр забудет после тренировки:[/b] Атака 1 Атака 2 Атака 3 Атака 4 [b] Выберите атаки, которым хотите научить своего монстра:[/b] Атака 5 Атака 6

Изображения монстров
Для получения изображения монстра можно воспользоваться кодом

Код: Выделить всё

[img]Ссылка на изображение монстра[/img]
Можно использовать ссылки из игры либо собственные.
Так же имеется код для отображения мини спрайта монстров: [pimg][/pimg](Необходимо вводить трёхзначные номера монстров, без "#". Например: 003)
Спойлер: Пример использования: ПОКАЗАТЬ

Образец и результат:

Код: Выделить всё

[img]http://img.league17.ru/pub/mnst/norm/minim/309.gif[/img]
в ссылке меняем цифры(в данном случае 309) на нужный номер монстра

Изображение

Мини спрайт

Код: Выделить всё

[pimg]310[/pimg]


Изображение Вернуться наверх

Оформление текста

Добавлено: 06 авг 2015, 18:20
Evangelion
Текст с тенью
BBCode включает тег для добавления тени к тексту.
Для вывода результата вы должны окружить его тегами [rcolor=цвет]текст[/rcolor].
Спойлер: Пример использования: ПОКАЗАТЬ
Образец:Результат:

Код: Выделить всё

[rcolor=#BFFF40]Текст с тенью[/rcolor]
Текст с тенью
Двух/трёхцветный текст
BBCode включает тег для перемещения цвета по тексту.
Для вывода результата вы должны окружить его тегами [colorslide=Ваш текст]Цвет1,Цвет2,Цвет3,время смены цвета (в миллисекундах(чем меньше - тем быстрее))[/colorslide].
  • Цвет1 - является основным цветом для текста;
  • Цвет2 - цвет который будет перемещаться по тексту;
  • Цвет3 - второй цвет который будет перемещаться по тексту;
  • Цвет2 и Цвет3 можно сделать одного цвета;
  • Цвет можно вводить в шестнадцатеричном варианте (#ff0000 # 00ffff) или названия на английском (RED BLUE GOLD);
    Важно: данный тег можно использовать только один раз в тексте.
Спойлер: Пример использования: ПОКАЗАТЬ
Образец:Результат:

Код: Выделить всё

[colorslide=Улыбниииись!]blue,red,green,100[/colorslide]
[colorslide=Улыбниииись!]blue,red,green,100[/colorslide]

Подсказка в тексте
BBCode отображает подсказку/сноску для текста.
Для вывода результата вы должны использовать данный тег: [classic="текст"]поясняющийся текст[/classic] (Важно: кавычки в тексте обязательны)
Спойлер: Пример использования: ПОКАЗАТЬ
Образец:Результат:

Код: Выделить всё

[classic="текст"]поясняющий текст[/classic]
текстпоясняющий текст
Изображение Вернуться наверх
Часовой пояс: UTC+03:00
Страница 1 из 1

Создано на основе phpBB® Forum Software © phpBB Limited

Русская поддержка phpBB