Данный форум предназначен исключительно для пользователей старше 18 лет.
Просмотр форума возможен только при подтверждении вашего возраста.
Нажав кнопку ниже, вы подтверждаете, что вам исполнилось 18 лет.
Если вы младше этого возраста, закройте эту страницу.
BB-коды (Bulletin Board Codes) — это простой способ форматирования текста на форумах с помощью специальных тегов в квадратных скобках, например: жирный текст, курсив, цитаты и так далее. Однако наша платформа отличается от привычной многим форумным ролевикам системы форумов Quadra, телеграмма, ВК или Дискорда, поэтому некоторые знакомые вам комбинации могут здесь работать иначе. В статьях этой темы вы найдёте пояснения и примеры, как именно использовать BB-коды в Сатине.
Основные инструменты работают практически так же, как и на quadra, но если вы не знакомы с форумными board-движками — эта статья для вас.
Если вы привыкли к Telegram, VK или Discord, интерфейс может показаться сперва непривычным — ниже по шагам разобрано, что делает каждая кнопка панели.
На скриншоте ниже показана базовая форма ввода текста в веб-версии форума.
Кнопки формы ответа отвечают за базовое редактирование текста, как в ворде: при нажатии выделенный текст автоматически оборачивается в нужные теги, а если текст не выделен — теги будут вставлены пустыми.
Основные функции
Код:
[font=название шрифта]текст[/font] - меняет шрифт
[size=хх]текст[/size] - размер шрифта
[b]текст[/b] - жирный
[i]текст[/i] - курсив
[u]текст[/u] - нижнее подчеркивание
[s]текст[/s] - зачеркнутый текст
(вы также можете пользоваться стандартным сочетанием клавиш: Ctrl+b / Ctrl+u / Ctrl+i / Ctrl+s )
[paragraph] - отступ в начале абзаца (одинарный тег, выделять текст не нужно)
[align=left]текст[/align] - выравнивание слева
[align=center]текст[/align] - выравнивание по центру
[align=justify]текст[/align] - выравнивание по ширине. Для массивов текста этот формат у нас сделан по умолчанию
[align=right]текст[/align] - выравнивание справа
[color=цвет]текст[/color] - изменить цвет текста. Вы можете использовать любой цвет, записав его в RGB формате. Например, #FFFFFF для белого
Изображения и ссылки
Код:
[float-left]изображение[/float-left] - обтекание текстом слева
[float-right]изображение[/float-right] - обтекание текстом справа
[url=прямая ссылка]текст или изображение[/url] - вставить гиперссылку. ВАЖНО! Для ссылки внутри форума старайтесь использовать сокращенный формат: например, вместо ссылки на эту тему - https://satina.space/showthread.php?tid=106, записать можно так: /showthread.php?tid=106. Ссылки на изображение следует размещать через тег изображения [url=прямая ссылка][img]ссылка на картинку[/img][/url]
[img]прямая ссылка на изображение[/img] - вставить изображение. Об нем подробнее расскажем ниже, но учтите, что этот тег [img] принимает только прямую ссылку на файл изображения (jpg, png, gif). Вы также можете вставить изображение из буфера обмена - нажмите Ctrl+V и дождитесь загрузки вашей картинки на сервер. Результат будет сразу в нужном теге.
[video=youtube]ссылка на видео[/video] - вставить видео с Youtube
[paragraph][b][font=Palatino Linotype]Объекты[/font][/b]
[code][spoiler=текст][/spoiler] - вставить свернутый текст, спойлер. ББ-коды в названии отключены
[quote=заголовок цитаты]текст[/quote] - цитата. Заголовок опционален
[hide="1"]текст[/hide] - скрытый текст. Не привязан к количеству постов. Об этом расскажем ниже.
[html]любой текст[/html] - вставить блок разметки html. Об этом расскажем ниже.
Стикеры Кнопка со смайликом отвечает за предустановленные стикеры, как в телеграмме. Выбираете нужный, и его автоматически разместит в виде бб-кода для изображения. Таблицы
Код:
[table][tr]
[td]текст[/td]
[/tr][/table]
Этот код вставляет таблицу с заданным вами количеством столбцов и рядов. Подробнее ниже
Игровое
Код:
[roll=xdy+bonus reason="название броска" result="код шифрования"] - броски кубиков. Вы можете задать свои значения. Бросок происходит автоматически и ничего дописывать в этот код не следует, результат вы получите в форме вот такого кода. Используйте кнопку на панели инструментов
Бросок будет произведен, когда вы отправите свой пост, но будет в зашифрованной форме. Обновите страницу, чтоб увидеть результат.
Маски — изменяемое оформление мини-профиля для конкретного поста. Например, вы можете указать другое отображаемое имя или аватар. Маски сохраняются в вашем браузере — вводить код каждый раз не требуется.
Код:
[mask name="Имя" status="Статус профиля" avatar="ссылка на аватар"][/mask]
Кнопка Дополнительное Позволяет использовать следующие BB-коды:
Код:
[abbr="пояснение"]оригинальный текст[/abbr] - создает небольшое пояснение в виде всплывающего при наведении блока подсказки. Например, там можно расшифровать аббревиатуру
[hr] - вставить горизонтальную линию
[ya url="ссылка" width="хх" height="хх" title="название"] - вставить трек с Yandex музыки
[*code]любой текст[*/code] - код. Пишется без символов *. В таком блоке не будет использоваться разметка и коды, которые вы применяете, будут видны. Этот блок написан с использованием этого тега
Вставить iFrame - нужен, чтоб разместить в посте контент другого сайта. Вам потребуется заполнить форму и использовать ссылки, которые вы получите на стороннем ресурсе, а также задать размеры размещаемого iFrame. Этой функцией пользуется в основном администрация.
Последняя кнопка на панели - "Загрузить последнее сохраненное сообщение" позволяет вставить текст поста, сохраненный в вашем браузере. Это чтоб ваши посты не пропадали, если пришлось закрыть страницу.
Если что-то не получилось — используйте предпросмотр перед отправкой поста. Кнопка "Предпросмотр" внизу поля ввода - покажет, как будет выглядеть ваш пост со сработавшими кодами. Там включена небольшая задержка, дождитесь динамического отображения. Предпросмотр открывается под полем ввода, чтоб ваш экран не скакал при наборе текста, когда появляются новые строки.
На нашей платформе таблицы работают иначе, чем на Quadra: система допускает больше гибкости в стилях, но строже относится к разрешённым атрибутам. Некоторые конструкции, привычные пользователям Quadra, здесь просто не сработают — они либо будут отброшены, либо не позволят сохранить сообщение вовсе. Поэтому в этом разделе вы найдёте не только примеры базовой таблицы, но и список допустимых атрибутов (качеств таблицы) и рабочих комбинаций, протестированных в условиях движка форума.
В стилях таблицы разрешённые атрибуты пишутся внутри кавычек. Разрешены все безопасные атрибуты.
список
border — устанавливает толщину и стиль рамки таблицы или ячейки (например, border="1"). cellspacing — расстояние между ячейками таблицы. cellpadding — внутренние отступы внутри ячеек (от края ячейки до содержимого). width — задаёт ширину таблицы или отдельной ячейки (в пикселях или процентах от ширины поста). height — задаёт высоту таблицы или отдельной ячейки. style — позволяет добавлять CSS-стили напрямую (например, style="text-align:center;"). align — выравнивание таблицы или содержимого ячейки по горизонтали (left, center, right). valign — вертикальное выравнивание содержимого ячейки (top, middle, bottom). colspan — объединяет несколько столбцов в одну ячейку (горизонтально). rowspan — объединяет несколько строк в одну ячейку (вертикально). bgcolor — устанавливает цвет фона ячейки (например, bgcolor="#f0f0f0"). class — задаёт CSS-класс, если используются внешние стили (чаще не нужен, но допустим). id — уникальный идентификатор элемента, нужен для целей навигации или скриптов (если применяются).
Настройки по умолчанию: выравнивание ячеек по верху и по ширине, рамка в 1px. Если хотите без рамки, пишите первый тег так: table border="0"
Приведем примеры: 1. Базовая таблица с атрибутами выравнивания и фона
1.
Ячейка 1
Ячейка 2
Ячейка 3
Текст справа
Текст сверху и по центру
Серый фон
Код:
[table border="2" cellpadding="5" align="center"]
[tr]
[td]Ячейка 1[/td]
[td]Ячейка 2[/td]
[td]Ячейка 3[/td]
[/tr]
[tr]
[td align="right"]Текст справа[/td]
[td valign="top" align="center"]Текст сверху и по центру[/td]
[td bgcolor="#f0f0f0"]Серый фон[/td]
[/tr]
[/table]
[table border="2" cellpadding="5" align="center"]
[tr]
[td]Ячейка 1[/td]
[td]Ячейка 2[/td]
[td]Ячейка 3[/td]
[/tr]
[tr]
[td align="right"]Текст справа[/td]
[td valign="top" align="center"]Текст сверху и по центру[/td]
[td bgcolor="#f0f0f0"]Серый фон[/td]
[/tr]
[/table]
. Таблица со стилями и объединением ячеек
Этот пример демонстрирует использование CSS-стилей через атрибут `style`, а также применение `colspan` и `rowspan` для объединения ячеек по горизонтали и вертикали. Таблица включает: — заголовок, растянутый на две колонки; — стилизованные границы и отступы; — объединённую ячейку в левой колонке и наклонный текст в одной из строк.
3. Таблица без стилей и параметров Эта таблица показывает, как выглядит разметка без использования каких-либо атрибутов или CSS-стилей. Ширина колонок распределяется автоматически, в зависимости от содержимого ячеек. Такой вариант подходит для простых случаев, когда не требуется дополнительное оформление.
Автоматическая ширина 1
Автоматическая ширина 2
Автоматическая ширина 3
Без стилей
Должна быть
Равномерная ширина
Код:
[table]
[tr]
[td]Автоматическая ширина 1[/td]
[td]Автоматическая ширина 2[/td]
[td]Автоматическая ширина 3[/td]
[/tr]
[tr]
[td]Без стилей[/td]
[td]Должна быть[/td]
[td]Равномерная ширина[/td]
[/tr]
[/table]
4. таблица с комбинированными атрибутами и стилями Этот пример демонстрирует таблицу с одновременным использованием HTML-атрибутов (`border`, `cellpadding`, `cellspacing`, `colspan`, `valign`, `width`) и встроенных CSS-стилей через `style`. Выделены следующие особенности: — заголовок таблицы растянут на две колонки (`colspan="2"`); — левая колонка заданной ширины и с вертикальным выравниванием (`valign="top"`); — правая колонка оформлена с внутренним отступом и декоративной пунктирной рамкой слева (`border-left: 3px dashed red;`).
5. Таблица в виде списка данных с чередующимися строками Этот пример иллюстрирует, как с помощью CSS-стилей можно оформить таблицу: Особенности оформления: — используется шрифт `Arial` и эффект лёгкой тени (`box-shadow`) для визуального отделения таблицы от фона; — строки чередуются по цвету (`background-color`) для лучшей читаемости; — добавлены отступы внутри ячеек (`padding`) и нижняя рамка (`border-bottom`) для разделения; — указано плавное появление фона (`transition`), хотя на нашей платформе анимации могут быть не поддержаны визуально.
6. Стилизованная таблица Эта таблица оформлена с помощью стилей. В ней сочетаются структурное и декоративное оформление: — зелёная рамка (`border`) и закруглённые углы (`border-radius`) придают таблице вид карточки; — заголовок объединяет все три колонки и выделен цветом фона, белым шрифтом и увеличенным размером текста; — строки содержат чёткие колонки: время, предмет, аудитория; — используется `rowspan`, чтобы объединить ячейку времени для двух предметов подряд; — мягкие оттенки и границы (`border-bottom`) повышают читаемость без перегрузки визуала.
У нас на форуме всё волшебно просто: достаточно скопировать изображение в буфер обмена (например, через ПКМ → «Копировать изображение» или Ctrl + C) и нажать Ctrl + V в поле ввода — картинка автоматически загрузится на сервер, а в том месте, где стоял курсор, появится вставка в формате
Код:
[img]ссылка_на_изображение[/img]
Вставится именно та версия изображения и в том размере, в каком она была в буфере.
Ну и, конечно, можно пользоваться стандартным способом - через кнопку, выбирая картинку локально, с твоего компьютера или телефона, или вставить ссылку, выделить ее, и нажать "ПОДТВЕРДИТЬ" в выпадающем меню под кнопкой "Загрузить изображение" - ссылку автоматически возьмет в bb-код [img]
Но и это не все: вы можете использовать следующие атрибуты для вашего изображения:
Код:
[img=300x300]URL[/img] - задает размеры изображения
[img align=left|right]URL[/img] - выставлять выравнивание изображения
[img=300x300 align=left|right]URL[/img] - использовать и то и другое
Если любишь HTML в постах — он у нас работает, но с некоторыми ограничениями. Можно использовать базовые теги (p, h1–h6, b, i, a, img, table, ul, div, span и др.) и атрибуты вроде style, href, src, width, height, class. Пиши как в обычном HTML, только внутри тега
Код:
[html]...[/html]
Скрипты и сложные конструкции не поддерживаются, всё строго — но для оформления текста, таблиц и стиля этого вполне достаточно. Примеры разрешенных тегов и атрибутов ниже:
![[Изображение: bb.png]](https://satina.space/images/headers/bb.png)
![[Изображение: ab6c892dea06.png]](https://i.ibb.co/W42X526d/ab6c892dea06.png)