Данный форум предназначен исключительно для пользователей старше 18 лет.
Просмотр форума возможен только при подтверждении вашего возраста.
Нажав кнопку ниже, вы подтверждаете, что вам исполнилось 18 лет.
Если вы младше этого возраста, закройте эту страницу.
BB-коды (Bulletin Board Codes) — это простой способ форматирования текста на форумах с помощью специальных тегов в квадратных скобках, например: жирный текст, курсив, цитаты и так далее. Однако наша платформа отличается от привычной многим форумным ролевикам системы Quadra, поэтому некоторые знакомые вам комбинации могут здесь работать иначе. В статьях этой темы вы найдёте пояснения и примеры, как именно использовать BB-коды в Сатине.
Основные инструменты работают практически так же, как и на quadra. Они вынесены на панель формы ответа.
Основные функции
Код:
[font=название шрифта]текст[/font] - меняет шрифт
[size=хх]текст[/size] - размер шрифта
[b]текст[/b] - жирный
[i]текст[/i] - курсив
[u]текст[/u] - нижнее подчеркивание
[s]текст[/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
[img]прямая ссылка на изображение[/img] - вставить изображение. Об этом расскажем отдельно.
[video=youtube]ссылка на видео[/video] - вставить видео с Youtube
[ya url="ссылка" width="хх" height="хх" title="название"] - вставить трек с Yandex музыки
Объекты
Код:
[spoiler=текст][/spoiler] - вставить свернутый текст, спойлер. ББ-коды в названии отключены
[quote=заголовок цитаты]текст[/quote] - цитата. Заголовок опционален
[hide="1"]текст[/hide] - скрытый текст. Не привязан к количеству постов. Об этом расскажем отдельно.
[*code]любой текст[*/code] - код. Пишется без символов *. В таком блоке не будет использоваться разметка и коды, которые вы применяете, будут видны. Этот блок написан с использованием этого тега
[html]любой текст[/html] - вставить блок разметки html. Об этом расскажем отдельно.
Таблицы
Код:
[table][tr]
[td]текст[/td]
[/tr][/table]
Этот код вставляет таблицу с заданным вами количеством столбцов и рядов. Подробнее ниже
Игровое
Код:
[roll=xdy+bonus reason="название броска" result="код шифрования"] - броски кубиков. Вы можете задать свои значения. Бросок происходит автоматически и ничего дописывать в этот код не следует, результат вы получите в форме вот такого кода. Используйте кнопку на панели инструментов
Маски - изменяемое оформление мини-профиля для конкретного поста. Созданные через кнопку, маски сохраняются в вашем браузере. Писать каждый раз код не обязательно, просто используйте встроенные возможности
Код:
[mask name="Имя" status="Статус профиля" avatar="ссылка на аватар"][/mask]
Кнопка Дополнительное Позволяет использовать следующие BB-коды:
Код:
[hr] - вставить горизонтальную линию
[abbr="пояснение"]оригинальный текст[/abbr] - создает небольшое пояснение в виде всплывающего при наведении блока подсказки. Например, там можно расшифровать аббревиатуру
Последняя кнопка на панели - "Загрузить последнее сохраненное сообщение" позволяет вставить текст поста, сохраненный в вашем браузере. Это чтоб ваши посты не пропадали, если пришлось закрыть страницу
Стикеры вставляются автоматически, когда вы выбираете изображение из списка.
На нашей платформе таблицы работают иначе, чем на 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]
Скрипты и сложные конструкции не поддерживаются, всё строго — но для оформления текста, таблиц и стиля этого вполне достаточно. Примеры разрешенных тегов и атрибутов ниже:
![[Изображение: e77ed43f2a9b.png]](https://i.ibb.co/RG87tppG/e77ed43f2a9b.png)