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

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

Для статей и рецензий

Меняйте размер окна браузера, чтобы лучше понять как работают эти шаблоны.

Важно!

Из-за проблем с адаптацией под мобильные устройства шаблоны подходят только для изображений определённых размеров! Для средних картинок шириной 140–240px подходящих шаблонов нет.

Полезно знать:

Абзац с большой картинкой

Адаптивный плавающий блок для использования в текстах. Подходит только для больших изображений.

Описание + доп. шаблоны

Шаблон сделан на основе адаптивных колонок (см. «Расширенный BBCode»). Внутри трёхколоночного макета создаётся только одна колонка, которая будет обтекаться текстом. Внутри плавающей колонки может быть любой контент, но лучше использовать примеры ниже, т.к. они написаны со знанием дела.

«Текст далее» находится снаружи этого блока, после блока [div=clearfix][/div] — именно он позволяет отменить обтекание текста. Этот блок необязателен для шаблона с картинкой слева, но обязателен при использовании картинки справа из-за ограничений встроенного стиля.

Адаптивность заключается в расположении блока на мобильных устройствах: колонка становится блочным элементом, текст перестаёт её обтекать и переносится на новую строку, а благодаря [center] изображение центрируется.

Важно указать ширину для картинки, чтобы «включилась» адаптивность. Если ширина вашего изображения размер меньше 240—270px, такой вариант вам может не подойти.

[div=c-column][/div] — колонка с контентом. Класс left необязателен при использовании шаблона с картинкой слева, но для картинки справа необходимо указать класс right, а также mr-0, чтобы переписать встроенный стиль.

Классы mt-, mr-, mb- и ml- отвечают за отступы с соответствующей стороны — сверху (top), справа (right), снизу (bottom), слева (left). Цифры меняют размер отступа, поддерживаются значения от 0 до 10.

Шаблоны колонки с контентом

Представлен только код контента плавающей колонки.

Колонка с изображением

Блок слева Блок справа

[div=c-column mb-2 mr-4]
[center][image=YOUR_IMAGE_ID w=270][/center]
[/div]

[div=c-column right mb-2 ml-4 mr-0]
[center][image=YOUR_IMAGE_ID w=270][/center]
[/div]

Колонка с цитатой-подписью к изображению

[center][div=b-quote d-inline-block p-2 pr-3 pl-3 m-0]
[img w=360]https://i.imgur.com/aGMILHR.jpg[/img]
Подпись
[/div][/center]

Блок слева Блок справа

Подпись

Текст

Колонка с цитатой-подписью к видео

[center][div=b-quote d-inline-block p-2 pr-3 pl-3 m-0]
https://youtu.be/BL0YK8jryK0
«Trust in you» by [sweet ARMS]
[/div][/center]

Блок слева Блок справа

youtube

«Trust in you» by sweet ARMS

Текст

Колонка с цитатой-подписью к паре персонажей

[center][div=b-quote d-inline-block p-2 pr-3 pl-3 m-0][div=d-flex]
[character=496][img no-zoom]https://shikimori.one/system/characters/preview/496.jpg[/img][br]Сиро Эмия[/character] 
[character=496][img no-zoom]https://shikimori.one/system/characters/preview/497.jpg[/img][br]Сэйбер[/character]
[/div][/div][/center]

Блок слева Блок справа

Сиро Эмия

Сэйбер

Текст

Блок слева Блок справа

[div=cc-3]
[div=c-column mb-2 mr-4]
[center][img w=360]https://i.imgur.com/aGMILHR.jpg[/img][/center]
[/div]
Текст
[div=clearfix][/div]
[/div]

Текст далее

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Текст далее

[div=cc-3]
[div=c-column right mb-2 ml-4 mr-0]
[center][img w=360]https://i.imgur.com/aGMILHR.jpg[/img][/center]
[/div]
Текст
[div=clearfix][/div]
[/div]

Текст далее

Текст далее

Абзац с маленькой картинкой

Плавающий блок для использования в текстах. Подходит только для маленьких изображений.

Описание

Этот вариант лучше работает на больших экранах, потому что размер блока подбирается автоматически, но на мобильных экранах, если ширина изображения будет заполнять 45–99% экрана, это будет выглядеть хуже. К сожалению, ограничить размер блока с помощью CSS-свойств min-width и max-width и/или @media-запросов нельзя.

[div][/div] — блочный элемент без классов — это необязательная обёртка, которая поможет разделить абзацы с обтеканием текста. «Текст далее» находится снаружи этого блока, после блока [div=clearfix][/div] — именно он позволяет отменить обтекание текста.

[div=left mb-2 mr-4][/div] — плавающий блок с контентом. Код [div=left mb-2 mr-5] нужно заменить на [div=right mb-2 ml-4], чтобы колонка была прикреплена к правому краю экрана.

Классы mt-, mr-, mb- и ml- отвечают за отступы с соответствующей стороны — сверху (top), справа (right), снизу (bottom), слева (left). Цифры меняют размер отступа, поддерживаются значения от 0 до 10.

Блок персонажа

Представлен код только обтекаемого блока, расположенного слева. Чтобы блок плавал справа, нужно заметить [div=left mb-2 mr-4] на [div=right mb-2 ml-4]. Менять размер картинки и отступов нежелательно!

[div=left mb-2 mr-4]
[character=496][img w=120 no-zoom]https://shikimori.one/system/characters/preview/496.jpg[/img][br]Сиро Эмия[/character]
[/div]

Блок слева Блок справа

[div]
[div=left mb-2 mr-4][image=YOUR_IMAGE_ID][/div]
Текст
[div=clearfix][/div]
[/div]

Текст далее

Сиро Эмия

[div]
[div=right mb-2 ml-4][image=YOUR_IMAGE_ID][/div]
Текст
[div=clearfix][/div]
[/div]

Текст далее

Сиро Эмия

Пример комбинирования этого шаблона

Shirou EmiyaСиро Эмия

SaberСэйбер

Rin ToosakaРин Тосака

code

[div]
[div=left mb-2 mr-4]
[character=496][img w=120 no-zoom]https://shikimori.one/system/characters/preview/496.jpg[/img][/character]
[/div][b][character=496][/b][hr]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[div=right mb-2 ml-4]
[character=497][img w=120 no-zoom]https://shikimori.one/system/characters/preview/497.jpg[/img][/character]
[/div][b][character=497][/b][hr]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[div=left mb-2 mr-4]
[character=498][img w=120 no-zoom]https://shikimori.one/system/characters/preview/498.jpg[/img][/character]
[/div][b][character=498][/b][hr]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[div=clearfix][/div]
[/div]

Идеальный вариант (не существует)

[div=b-critique_fakeclass clearfix]
[div=float-left][image=101010][/div]Lorem ipsum
[div=float-right][image=101010][/div]Lorem ipsum
[/div]

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

@media (max-width: 480px) {
  .b-critique_fakeclass .float-left,
  .b-critique_fakeclass .float-right {
    float: none !important;
    text-align: center;
    margin: auto !important;
  }
}

@media (min-width: 481px) {
  .b-critique_fakeclass .float-left:not([class *= 'm']) {
    margin-right: 1.5em;
    margin-bottom: 0.5em;
  }

  .b-critique_fakeclass .float-right:not([class *= 'm']) {
    margin-left: 1.5em;
    margin-bottom: 0.5em;
  }
}