CSS-club – настройка внешнего вида сайта

КлубыCSS-club – настройка внешнего вида сайта

Расширенный BBCode

Некоторые плюшки, которые не описаны в документации по /bb_codes.

Пользовательский элемент`<div>` и `<span>`

С помощью BBCode вы можете создать блочный HTML-элемент <div>:

[div]Текст в контейнере[/div]

А также строчный HTML-элемент <span>:

[span]Текст в контейнере[/span]

К этому элементу можно добавить любой класс в том числе уже используемые на сайте классы:

[div=subheadline]Заголовок[/div]

Результат

Заголовок

Класс записывается через знак равно, последующие классы – через пробел:

[div=subheadline red]Заголовок[/div]

Результат

Заголовок

Классы subheadline и red – это классы, используемые на сайте Шикимори в его собственном css стиле. Больше примеров использования заголовков можно найти тут.
Вы можете добавить свой класс с произвольным именем и оформить его через настройки внешнего вида сайта.

Помимо классов, к элементу можно добавить произвольный data-атрибут:

[div=subheadline data-sync]Заголовок[/div]
[div=subheadline data-sync=header_sub]Заголовок[/div]
[div data-sync=header_sub]Заголовок[/div]

На название и содержимое атрибута накладывается жёсткое ограничение: только английский алфавит, цифры и нижнее подчёркивание.
Подробно про использование data-* атрибутов: developer.mozilla.org

Спойлеры

Спойлер

Скрытый текст

[spoiler=Спойлер]Скрытый текст[/spoiler]

Новый вид спойлеров отображается только, если его код написан в начале новой строки (иногда требуется дополнительный перевод строки от предыдущих bb-кодов).

Спойлер

Скрытый текст

[spoiler=Спойлер is-fullwidth]Скрытый текст[/spoiler]

Добавление атрибута is-fullwidth для заполнения всей доступной ширины.

Спойлер

Скрытый текст

[spoiler=Спойлер is-fullwidth is-centered]Скрытый текст[/spoiler]

При добавлении атрибута is-centered текст будет расположен по центру.

Дополнительно:
Вы можете создать свой спойлер из любых элементов с помощью класса to-process и атрибута data-dynamic:

[div=to-process data-dynamic=spoiler_block]
[div=b-button]Кнопка[/div]
[div=hidden]Контент[/div]
[/div]

Первый элемент внутри блока to-process всегда будет кнопкой для спойлера, а второй — контентом. Изначально контент не скрывается, поэтому к этому элементу добавляется класс hidden. Результат:

Кнопка

Если вам нужен изначально открытый спойлер, то к контейнеру нужно добавить класс is-opened, при этом класс hidden для контента добавлять не нужно:

[div=is-opened to-process data-dynamic=spoiler_block]
[div=b-button]Кнопка[/div]
[div]Контент[/div]
[/div]

Flexbox

Немного utility-классов на Шики!

Важно!

Из-за проблем с адаптацией под мобильные устройства все примеры спрятаны под спойлер!

Возможности Flexbox можно изучить тут:

https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Flexbox
https://codepen.io/enxaneta/full/adLPwv

Использование Flexbox позволит вам выравнивать контент по вертикали:

Видео с описанием

youtube

Описание
星街すいせい 1stAlbum『Still Still Stellar』
2021.9.29 Release

[div=d-flex align-items-center]
[div=mr-5]https://youtu.be/a51VH9BYzZA[/div]
[div=flex-fill]
Описание
[/div]
[/div]

Заголовок c оформлением

[div=headline d-flex align-items-center pb-1]
[div=mr-3][img no-zoom]https://i.imgur.com/LppzDXe.png[/img][/div]
[div=flex-fill]Заголовок c оформлением[/div]
[div=ml-3][img no-zoom]https://i.imgur.com/LppzDXe.png[/img][/div]
[/div]

Делать отступы между элементами на основе доступного пространства:

Заголовок с тегом

Flexbox

New!

[div=headline d-flex align-items-center justify-content-between p-1]
[span]Flexbox[/span]
[div=b-anime_status_tag ongoing right m-0]New![/div]
[/div]

Выравнивать текст по левому краю внутри блока [center]:

Выравнивание текста слева внутри [center]

center

left!

center

[center]
center
[div=d-flex][span]left! :love2:[/span][/div]
center
[/center]

Utility-классы

Еще немного utility-классов на Шики!

Отображение элемента: display

Настройка свойства display у элементов.

Строчный элемент:

[div=d-inline]Строчный div[/div]

Блочный элемент:

[span=d-block]Блочный span[/span]

Блочный элемент с поведением строчного:

[div=d-inline-block]Блочный div[/div]

Пример

Цитата 1

Цитата 2

[div=b-quote d-inline-block p-2]Цитата 1[/div]
[div=b-quote d-inline-block p-2]Цитата 2[/div]

Блочный элемент с flex-содержимым:

[div=d-flex]Flex-контейнер[/div]

Блочный элемент с flex-содержимым и поведением строчного элемента:

[div=d-inline-flex]Flex-контейнер[/div]

Пример

Flex-контейнер 1

Flex-контейнер 2

[div=collapsed d-inline-flex p-1 m-0]Flex-контейнер 1[/div]
[div=collapsed d-inline-flex p-1 m-0]Flex-контейнер 2[/div]

Скрытый элемент:

[div=hidden]Скрытый элемент[/div]

Внутренний отступ: padding

Изменение свойства padding у элементов. Класс начинается с p-, затем добавляется цифра от 0 до 10, обозначающая размер отступа (производная от размера шрифта сайта, а не конкретного элемента). Отступы можно настраивать отдельно для каждой стороны, изменив начало класса на pt-, pr-, pb- или pl- для отступов сверху (padding-top), справа (padding-right), снизу (padding-bottom) или слева (padding-left) соответственно.

Обычная цитата:

Countin' flowers on the wall

> Countin' flowers on the wall

[div=b-quote-v2][div=quote-content]Countin' flowers on the wall[/div][/div]

Цитата с большими отступами:

Countin' flowers on the wall

[div=b-quote-v2 p-5][div=quote-content]Countin' flowers on the wall[/div][/div]

Цитата с большими отступами везде, кроме левого края:

Countin' flowers on the wall

[div=b-quote-v2 p-5 pl-0][div=quote-content]Countin' flowers on the wall[/div][/div]

Внешний отступ: margin

Изменение свойства margin у элементов. Настраивается точно также как и padding. Существуют похожие классы, такие как m0, m8, m30 и т.д., но они устанавливают только нижний отступ, поэтому лучше использовать универсальные классы.

Countin' flowers on the wall

[div=b-quote-v2 p-1][div=quote-content m-5]Countin' flowers on the wall[/div][/div]

Countin' flowers on the wall

[div=b-quote-v2 p-1][div=quote-content m-4 mt-0 mb-2]Countin' flowers on the wall[/div][/div]

Цветной текст

Пример:

[span=text-blue]text-blue[/span]

Возможные значения:
text-blue
text-brown
text-gray
text-green
text-magenta
text-orange
text-pink
text-powderblue
text-purple
text-red
text-skyblue
text-yellow

Колонки

С помощью элемента <div> и классов в стандартном стиле Шики можно создать разные виды колонок.
Код самих колонок неизменен: [div=c-column]Содержимое[/div].
А код контейнера меняется в зависимости от размера колонок, расстояния между ними и отсутствия мобильной адаптации:

cc- – общее начало для класса контейнера.
Цифра от 2 до 9 – определяет размер колонок: 100% контейнера будут поделены на эту цифру. Расстояние между колонками будет равно 4%.
Чтобы изменить расстояние между колонками для колонок сс-6 – сс-9 надо добавить -g15 или -g0 для расстояния между колонками 1.5% и 0% соответственно.
Для отключения мобильной адаптации после цифры для колонок сс-2 – сс-4 можно добавить букву a после цифры.

Примеры кода

4 колонки по 22% ширины. Мобильная адаптация отключена

[div=cc-4a]
[div=c-column]1[/div]
[div=c-column]2[/div]
[div=c-column]3[/div]
[div=c-column]4[/div]
[div=c-column]5[/div]
[div=c-column]6[/div]
[/div]

9 колонок без пропусков.

[div=cc-9-g0]
[div=c-column]1[/div]
[div=c-column]2[/div]
[div=c-column]3[/div]
[/div]

Все возможные комбинации

2 колонки

[div=cc-2] – стандартные 2 колонки

48%

48%

[div=cc-2_3] – колонки шириной 2/3 и 1/3:

64.66667%

31.(3)%

[div=cc-3_2] – колонки шириной 1/3 и 2/3:

31.(3)%

64.66667%

[div=cc-3_4] – колонки шириной 3/4 и 1/4:

73%

23%

[div=cc-2a] – колонки без мобильной адаптации:

48%

48%

3 колонки

[div=cc-3] – стандартные 3 колонки

30.66667%

30.66667%

30.66667%

[div=cc-3a] – колонки без мобильной адаптации:

30.66667%

30.66667%

30.66667%

4 колонки

[div=cc-4] – стандартные 4 колонки

22%

22%

22%

22%

[div=cc-4a] – колонки без мобильной адаптации:

22%

22%

22%

22%

5 колонок

[div=cc-5] – стандартные 5 колонок

6 колонок

[div=cc-6] – стандартные 6 колонок

[div=cc-6-g15] – 1.5% между колонками:

[div=cc-6-g0] – 0% между колонками:

7 колонок

[div=cc-7] – стандартные 7 колонок

[div=cc-7-g15] – 1.5% между колонками:

[div=cc-7-g0] – 0% между колонками:

8 колонок

[div=cc-8] – стандартные 8 колонок

[div=cc-8-g15] – 1.5% между колонками:

[div=cc-8-g0] – 0% между колонками:

9 колонок

[div=cc-9] – стандартные 9 колонок

[div=cc-9-g15] – 1.5% между колонками:

[div=cc-9-g0] – 0% между колонками:

New!

Кроме того, можно изменить стандартные колонки с помощью utility-классов:

Примеры

flex/cc-2/no-wrap/column x3

33.(3)%

33.(3)%

33.(3)%

[div=cc-2 d-flex]
[div=c-column m-0 flex-fill]1[/div]
[div=c-column m-0 flex-fill]2[/div]
[div=c-column m-0 flex-fill]3[/div]
[/div]

flex/cc-2/wrap/column x3

50% (100% mobile)

50% (100% mobile)

100%

[div=cc-2 d-flex flex-wrap]
[div=c-column m-0 flex-fill]1[/div]
[div=c-column m-0 flex-fill]2[/div]
[div=c-column m-0 flex-fill]3[/div]
[/div]

flex/cc-3/wrap/column x3

33% (100% mobile)

33% (100% mobile)

33% (100% mobile)

[div=cc-3 d-flex flex-wrap]
[div=c-column m-0 flex-fill]1[/div]
[div=c-column m-0 flex-fill]2[/div]
[div=c-column m-0 flex-fill]3[/div]
[/div]

flex/cc-3/wrap/no-column

30% (100% mobile)

70% (100% mobile)

[div=cc-3 d-flex flex-wrap]
[div=c-column m-0]1[/div]
[div=flex-fill]2[/div]
[/div]

Переключатель класса `active`

Переключатель

Класс user-defined добавленный к любому div-элементу превратит его в переключатель. При нажатии на элемент к нему будет добавлен класс active (или убран, если он уже имеется).

[div=user-defined]Переключатель[/div]

Переключатель класса `active` (несколько элементов)

Элемент 1

Элемент 2

Элемент 3

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

[div=to-process data-dynamic=switcher data-switcher=sw1]Элемент 1[/div]
[div=to-process data-dynamic=switcher data-switcher=sw1]Элемент 2[/div]

В атрибуте data-switcher можно указать название переключателя (без пробелов, только символы A-z,0-9,-,_), чтобы сделать несколько различных переключателей.

Табы

Tab 1

Tab 2

Tab 3

Tab 4

Content 1

Табы нельзя вкладывать друг в друга!

Класс to-process и атрибут data-dynamic=tabs обязательны для контейнера с табами. Внутри этого контейнера скрипт находит элементы с атрибутом data-tab-switch и data-tab, которые будут расцениваться как "Кнопки табов" и "Табы" соответственно. Порядок "кнопка1 кнопка2 таб1 таб2" строгий ("кнопка1 кнопка2 таб2 таб1" работать не будет), т.к. считывается положение элемента в контейнере. Между кнопками переключается класс active, между табами – класс hidden.

Простейший пример без CSS

Tab 1

Tab 2

Content 1

[div=to-process data-dynamic=tabs]
[div=b-js-link active data-tab-switch]Tab 1[/div]
[div=b-js-link data-tab-switch]Tab 2[/div]
[div data-tab]Content 1[/div]
[div=hidden data-tab]Content 2[/div]
[/div]

Пример оформления без CSS

Tab 1

Tab 2

Content 1

[div=to-process data-dynamic=tabs]
[div=b-button active data-tab-switch]Tab 1[/div]
[div=b-button data-tab-switch]Tab 2[/div]
[div data-tab]Content 1[/div]
[div=hidden data-tab]Content 2[/div]
[/div]

Класс b-button позволяет создавать кнопки табов меньшего размера, чем при использовании b-link_button из последующих примеров. Увеличить их можно с помощью utility-класов вроде p-1 или pr-2 pl-2. А отступы сделать с помощью класса ml-1.

Еще один вариант без CSS

Tab 1

Tab 2

Content 1

[div=to-process data-dynamic=tabs]
[div=b-link_button inline active data-tab-switch]Tab 1[/div]
[div=b-link_button inline data-tab-switch]Tab 2[/div]
[div data-tab]Content 1[/div]
[div=hidden data-tab]Content 2[/div]
[/div]

Вертикальные табы без CSS

Tab 1

Tab 2

Tab 3

Tab 4

Content 1

[div=d-flex to-process data-dynamic=tabs]
 [div=d-flex flex-column flex-shrink-0 mr-4]
  [div=b-link_button active data-tab-switch]Tab 1[/div]
  [div=b-link_button data-tab-switch]Tab 2[/div]
  [div=b-link_button data-tab-switch]Tab 3[/div]
  [div=b-link_button data-tab-switch]Tab 4[/div]
 [/div]
 [div=p-2 flex-fill data-tab]Content 1[/div]
 [div=p-2 flex-fill hidden data-tab]Content 2[/div]
 [div=p-2 flex-fill hidden data-tab]Content 3[/div]
 [div=p-2 flex-fill hidden data-tab]Content 4[/div]
[/div]

Обратите внимание, что data-параметры в коде – это атрибуты, а не классы, поэтому, если у элемента нет классов, атрибут указывается через пробел после div, а не знак равно. Значение атрибута указывается через знак равно.

Атрибуты в CSS указываются в квадратных скобках:

/* Стиль кнопок для табов */
[data-tab-switch] {
  color: #176093;
}

/* Стиль активной кнопки для табов */
.active[data-tab-switch] {
  color: #ff1402;
}

Помните, что такие табы используются и на сайте (в частности, на главной странице: аниме/манга/ранобэ), поэтому рекомендуется использовать дополнительные классы для оформления.

Комментарии

190

Скрыть 187 комментариев

Показать 187 комментариев

Загрузить ещё 10 из 187 комментариев

Lena(2x2)16 июня 2025#

Вдруг кому пригодится.
Постеры кликабельные с ссылками на страницы, ссылки так же можно заменить.
Я просто для примера так сделал.

Персонажи

Сам код:

[div=headline silver][color=black]Персонажи[/color][/div]

[div=cc-5]
[div=b-catalog_entry c-column][div=cover][div=image-decor][url=https://shikimori.one/characters/117223-aqua][poster]https://shikimori.one/uploads/poster/characters/117223/main-7d0cf69a489a204cecf180c5220251a3.webp[/poster][div=text]Аква[/url][/div][/div][/div][/div]
[div=b-catalog_entry c-column][div=cover][div=image-decor][url=https://shikimori.one/characters/41891-noire][poster]https://shikimori.one/uploads/poster/characters/41891/main-bda98a94fe0c29dee831fe3b844f5816.webp[/poster][div=text]Black Heart[/url][/div][/div][/div][/div]
[div=b-catalog_entry c-column][div=cover][div=image-decor][url=https://shikimori.one/characters/243180-kama][poster]https://i.imgur.com/UNHj4wE.jpg[/poster][div=text]Кама[/url][/div][/div][/div][/div]
[div=b-catalog_entry c-column][div=cover][div=image-decor][url=https://shikimori.one/characters/169162-nobukatsu-oda][poster]https://i.imgur.com/zpk5RLQ.png[/poster][div=text]Rammstein[/url][/div][/div][/div][/div]
[/div]

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

Redington18 июня 2025#

да, сюда бы как то вставлять такие #FF0000 кода цветов что бы пахало на всю полоску

Lena(2x2)25 июня 2025#

Другой вариант кода(централизация персонажей)

Теперь по персонажам можно кликать.(Я немного доработал код)

Сам код:

[div=cc-6-g15 d-flex justify-content-center]
[div=c-column]
[url=https://shikimori.one/characters/4605-kyou-fujibayashi]
  [img no-zoom]https://shikimori.one/system/user_images_h/original/d2efafc944e06ba2aed19373/2cff639b9e1e6689d0212afc75d678c6bc4cd4bd99f982d64d36bf10c34382ac.jpg[/img]
[/url]
[div=b-menu-line][character=4605][b]Кё Фудзибаяси[/b][/character][/div]
[/div]
[div=c-column]
[url=https://shikimori.one/characters/4603-tomoyo-sakagami]
  [img no-zoom]https://shikimori.one/system/user_images_h/original/d2efafc944e06ba2aed19373/007b7950ae83bae2903ab8cb3596221fbb97e2ee951bf7e29aa63a0a5c915431.jpg[/img]
[/url]
[div=b-menu-line][character=4603][b]Томоё Сакагами[/b][/character][/div]
[/div]
[/div]

Простая версия(централизация персонажей)

Простая версия без написей(на скриншоте надпись уже есть)

Сам код:

[center][url=https://shikimori.one/characters/250628-nagase-ichijou]
  [img no-zoom]https://shikimori.one/system/user_images_h/original/d2efafc944e06ba2aed19373/a3b6e8324b5f402d93d79d28bbaf46774c875717f4eb33adf88abc537f56564f.jpg[/img]
[/url][url=https://shikimori.one/characters/250627-kagari-shirube]
  [img no-zoom]https://shikimori.one/system/user_images_h/original/d2efafc944e06ba2aed19373/9106f8fb42509e0c88c082f0d761edd300ef3f3f9578debee049740254267933.jpg[/img][/center]
[/url]

Есть один недостаток. Постеры надо выравнивать в один размер в графическом редакторе (чтобы размер был одинаковым).
Посчитал что и такой вариант кому то да пригодится, переделал чутка просто 1 вариант.
---
@grin3671 , Спасибо за код, другу очень надо было. А то я с этим элементом [br] намучался просто. Разные варианты пробовал.
А оказалось что нехватало элементов для этого.

Твой комментарий

Пользовательский элемент<div> и <span>

Спойлеры

Flexbox

Utility-классы

Цветной текст

Колонки

Переключатель класса active

Переключатель класса active (несколько элементов)

Табы

Пользовательский элемент`<div>` и `<span>`

Переключатель класса `active`

Переключатель класса `active` (несколько элементов)