Содержание
Обводка элемента тенью или линией
Настройка боковых отступов для мобильной версии поста
Убрать управление и добавить автопроигрывание для видео из Vimeo
Одинаковая высота для нескольких обьектов в сетке
Размер кнопок, толщина стрелок
Вывод счетчика слайдов между кнопками
Вывод точек-индикаторов под фотографией
Расположить все кнопки и элементы по центру
Установить кнопки по бокам изображения
Кнопки в левом верхнем углу, счетчик слайдов в правом верхнем углу
Стрелки под изображением, по бокам от точек
Что такое Custom CSS?
Стандартные возможности Setka Editor не всегда полностью покрывают потребности в оформлении контента. В подавляющем большинстве случаев, задать нестандартное оформление можно с помощью CSS. Для этого в редакторе и менеджере стилей предусмотрены поля Custom CSS.
Как работает Custom CSS?
Custom CSS задаёт оформление выбранным элементам, в соответствии с CSS-кодом. Код можно добавить:
В редакторе
Элементы вёрстки в редакторе имеют в настройках поле Добавить CSS:
Добавьте любые CSS-атрибуты, и они применятся к выбранному элементу. Например, если написать в Custom CSS параграфа атрибут border: 3px solid black; — он обернётся в чёрную рамку толщиной в 3 пикселя:
В стиле
Открыв стиль в Управлении дизайн системой и прокрутив список элементов до конца, вы увидите раздел Custom CSS:
По нажатию откроется всплывающее окно с дополнительными CSS-атрибутами:
CSS, добавленная в это диалоговое окно, подключится ко всем постам в выбранном стиле. Это полезно, если нужно изменить стандартное оформление для элементов стиля: галерей, разделителей, специфических текстовых форматов.
Обратите внимание на галочку Apply the styles to a post content only:
- Если галочка активна — CSS применится только к контенту поста.
- Если галочка неактивна — ко всей странице целиком, включая обвес, шапку, подвал и т.д.
В компонентах и шаблонах
Custom CSS применим к компонентам и шаблонам. Чтобы добавить его:
1. Перейдите во вкладку Styles, и выберите стиль.
2. На панели слева перейдите во вкладку snippets или templates.
3. Выберите компонент, либо шаблон, из списка.
4. Под HTML-кодом шаблона/компонента вы найдёте галочку Custom CSS for snippet / Custom CSS for template. После её активации откроется текстовое поле для CSS:
CSS применится к контентной области шаблона поста, или к блоку компонента соответственно.
Некоторые приёмы Custom CSS
Расскажем о нескольких популярных вариантах использования Custom CSS в постах и стилях.
Обрезка изображения "в круг"
Часто фирменный стиль предполагает круглые изображения. Это могут быть, например, фотографии авторов или спикеров. Такие элементы (список авторов, цитата и т.п.) часто переиспользуются. Поэтому имеет смысл сохранить их как компоненты.
После того, как компонент создан, нужно скруглить изображение с помощью Custom CSS. Для этого проделайте следующее:
1. Откройте Setka и выберите нужный стиль во вкладке Styles.
2. Перейдите во вкладку snippets и выберите компонент из списка слева.
3. В коде компонента найдите фрагмент:
<figure class=“stk-reset stk-image-figure” data-ce-tag=“image-figure”>
<div data-ce-tag=“mask” class=“stk-mask”>
</div>
</figure>
Примечание: код компонента может быть существенно больше, если компонент содержит другие элементы: сетки, заголовки и прочее. Важно найти часть кода выше, отвечающую за изображение.
4. После stk-image-figure добавьте имя кастомного стиля, который будет скруглять изображение. В нашем примере стиль называется clientname_portrait. Обязательно замените название на уникальное. Например, укажите название вашей компании вместо clientname:
<figure class=“stk-reset stk-image-figure clientname_portrait” data-ce-tag=“image-figure”>
<div data-ce-tag=“mask” class=“stk-mask”>
</div>
</figure>
5. Поставьте галочку Custom CSS for snippet и вставьте в появившееся поле следующий код:
.clientname_portrait:not(#_) .stk-image {
width: 105px;
height: 105px;
border-radius: 50%;
object-fit: cover;
}
Где width — ширина, а height — высота скруглённого изображения. Не забудьте заменить clientname_portrait на имя, заданное на предыдущем шаге.
6. Сохраните стиль, нажав Save внизу страницы. После вставки компонента, добавленное в него изображение автоматически обрежется в круг:
Обводка элемента тенью или линией
Чтобы добавить обводку, пропишите параграфу, сетке или колонке один из этих вариантов Custom CSS:
Тень
border-radius: 6px;
box-shadow: 0 3px 16px -5px rgba(0, 40, 128, 0.4),
0 0px 1px 1px rgba(0, 40, 128, 0.02);
padding: 4px;
Где border-radius — радиус скругления в пикселях, а padding — величина отступа от края элемента.
Линия
Где 4px — толщина линии в пикселях, solid — тип линии (сплошная), а #fc0 — цвет линии в формате HEX.
Подробнее о границах элемента в htmlbook
Настройка боковых отступов для мобильной версии поста
Чтобы контент не прилипал к краям мобильного браузера, с обеих сторон контейнера автоматически добавляется отступ в 10px. Величину отступа можно изменить, добавив следующий код в Custom CSS стиля:
@at-root {
@media screen and (max-width: 767px) {
.stk-post.stk-theme_11111 {
--stk-m_r: 20px !important;
--stk-m_l: 20px !important;
}
}
}
Где -stk-m_r — величина отступа в пикселях справа, -stk-m_l — слева, а stk-post.stk-theme_1111 — идентификатор стиля. Замените 1111 на номер текущего стиля.
Номер можно скопировать из строки браузера, открыв стиль в Управлении дизайн системой:
https://editor.setka.io/12345/clients/67890/themes/[НОМЕР СТИЛЯ]/edit
Градиент в качестве фона
Существует несколько сервисов для генерации CSS-градиентов. Например, CSS Gradient. Код, сгенерированный в CSS Gradient, можно подставить в поле Custom CSS поста, сетки, колонки или параграфа.
Вертикальный текст
Чтобы расположить текст вертикально, добавьте к параграфу эту CSS:
writing-mode: vertical-lr;
Где vertical-lr — метод написания. lr — слева направо, rl — справа налево.
Подробнее о режимах написания в htmlbook
Поворот элемента на угол
Чтобы повернуть элемент на определённый угол, добавьте к нему следующий код:
transform: rotate(180deg);
Здесь 180deg — угол поворота в градусах. Поворачивайте текст на нужный угол, в зависимости от задачи.
Подробнее о трансформациях в htmlbook
Убрать управление и добавить автопроигрывание для видео из Vimeo
1. Скопируйте эмбед код из Vimeo. Вот пример:
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/421964906?portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
2. Замените
?portrait=0
в конце ссылки на
?background=true
В результате код должен выглядеть так:
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/421964906?background=true" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
3. Вставьте код в поле эмбеда.
Одинаковая высота для нескольких обьектов в сетке
Когда секция вашего поста состоит из нескольких карточек с разным количеством текста, вам может понадобиться задать для них одинаковую высоту. Например, если у вас в посте есть такая конструкция:
мы рекоммедуем сделать из неё такую:
Оптимальное решение такой задачи — добавить параметр
height: 100%
в поле Custom CSS для каждой "главной" сетки в такой карточке. Так высота каждой из этих сеток внутри конструкции будет равна высоте их родительской сетки. В интерфейсе Setka Editor это выглядит так:
Кастомизация галерей
Добавив коды из примеров ниже, в Custom CSS стиля, можно изменить стандартный вид галереи: добавить индикацию, переместить и перекрасить кнопки.
Кнопки
Кнопкам можно задать свой цвет, графику и размер.
Цвета кнопок
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow {
color: #FFF; // Цвет иконки в формате HEX
background-color: #000; // Цвет фона в формате HEX
box-shadow: none; // Отключение обводки вокруг кнопок
}
Размер кнопок, толщина стрелок
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow {
width: 50px; height: 50px; // Ширина (width) и высота (height) кнопки в пикселях
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow span {
border-width: 5px; // Толщина линии стрелки в пикселях
}
Своя графика для кнопок
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow {
border-radius: 0; // Задаёт радиус скругления кнопок - позволяет установить форму кнопок, отличную от круга
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow span {
display: none; // Скрывает стандартную иконку кнопки
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow__prev {
background: url("/prev-arrow.png") center/cover no-repeat; // Задает URL изображения для кнопки Назад
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow__next {
background: url("/next-arrow.png") center/cover no-repeat; // Задает URL изображения для кнопки Вперёд
}
Вывод счетчика слайдов между кнопками
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_counter {
display: block;
font: 16px Arial; // Желаемый шрифт
}
Вывод точек-индикаторов под фотографией
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_dots {
display: flex;
}
Цвета точек
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_dot {
background-color: #EAEAEA; // Цвет неактивной точки в формате HEX
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_dot:hover {
background-color: #CDCDCD; // Цвет точки по наведению курсора в формате HEX
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_dot__active {
background-color: #FFCC00; // Цвет точки текущего слайда в формате HEX
}
Альтернативные раскладки
Расположить все кнопки и элементы по центру
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] {
justify-content: center;
}
Установить кнопки по бокам изображения
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow {
position: absolute; top: 50%; z-index: 10;
transform: translateY(-50%);
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow__prev {
left: 10px; // Отступ от края изображения в пикселях для кнопки Назад
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow__next {
right: 10px; // Отступ от края изображения в пикселях для кнопки Вперёд
}
Кнопки в левом верхнем углу, счетчик слайдов в правом верхнем углу
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_counter {
display: block;
order: 25; margin-left: auto;
font: 16px Arial; // Желаемый шрифт
}
Стрелки под изображением, по бокам от точек
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow__prev {
order: 35;
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow__next {
order: 45;
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_dots {
display: flex;
}