Редактор постов Custom CSS — расширенные возможности оформления контента

Custom CSS — расширенные возможности оформления контента

Содержание

Что такое Custom CSS?

Как работает Custom CSS?

В редакторе

В стиле

В компонентах и шаблонах

Некоторые приёмы Custom CSS

Обрезка изображения "в круг"

Обводка элемента тенью или линией

Тень

Линия

Настройка боковых отступов для мобильной версии поста

Градиент в качестве фона

Вертикальный текст

Поворот элемента на угол

Убрать управление и добавить автопроигрывание для видео из Vimeo

Одинаковая высота для нескольких обьектов в сетке

Кастомизация галерей

Кнопки

Цвета кнопок

Размер кнопок, толщина стрелок

Своя графика для кнопок

Вывод счетчика слайдов между кнопками

Вывод точек-индикаторов под фотографией

Цвета точек

Альтернативные раскладки

Расположить все кнопки и элементы по центру

Установить кнопки по бокам изображения

Кнопки в левом верхнем углу, счетчик слайдов в правом верхнем углу

Стрелки под изображением, по бокам от точек

 

Что такое Custom CSS?

Стандартные возможности Setka Editor не всегда полностью покрывают потребности в оформлении контента. В подавляющем большинстве случаев, задать нестандартное оформление можно с помощью CSS. Для этого в редакторе и менеджере стилей предусмотрены поля Custom CSS.

 

Как работает Custom CSS?

Custom CSS задаёт оформление выбранным элементам, в соответствии с CSS-кодом. Код можно добавить:

 

В редакторе

Элементы вёрстки в редакторе имеют в настройках поле Добавить CSS:

______________2020-04-07___19.14.42_result.png

 

Добавьте любые CSS-атрибуты, и они применятся к выбранному элементу. Например, если написать в Custom CSS параграфа атрибут border: 3px solid black; — он обернётся в чёрную рамку толщиной в 3 пикселя:

______________2020-04-07___19.28.04_result.png

 

В стиле

Открыв стиль в Управлении дизайн системой и прокрутив список элементов до конца, вы увидите раздел Custom CSS:

______________2020-04-07___19.16.15_result.png

 

По нажатию откроется всплывающее окно с дополнительными CSS-атрибутами:

______________2020-04-07___19.32.18_result.png

 

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:

mceclip0.png

 

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 внизу страницы. После вставки компонента, добавленное в него изображение автоматически обрежется в круг:

______________2020-04-07___19.23.49_result.png

 

Обводка элемента тенью или линией

Чтобы добавить обводку, пропишите параграфу, сетке или колонке один из этих вариантов 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 — величина отступа от края элемента.

Подробнее о тенях в htmlbook

Shadow.png

 

Линия

Где 4px — толщина линии в пикселях, solid — тип линии (сплошная), а #fc0 — цвет линии в формате HEX.

Подробнее о границах элемента в htmlbook

Line.png

 

Настройка боковых отступов для мобильной версии поста

Чтобы контент не прилипал к краям мобильного браузера, с обеих сторон контейнера автоматически добавляется отступ в 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 поста, сетки, колонки или параграфа.

Gradient.png

 

Вертикальный текст

Чтобы расположить текст вертикально, добавьте к параграфу эту CSS:

writing-mode: vertical-lr;

Где vertical-lr — метод написания. lr — слева направо, rl — справа налево.

Подробнее о режимах написания в htmlbook

Vertical_text.png

 

Поворот элемента на угол

Чтобы повернуть элемент на определённый угол, добавьте к нему следующий код:

transform: rotate(180deg);

Здесь 180deg — угол поворота в градусах. Поворачивайте текст на нужный угол, в зависимости от задачи.

Подробнее о трансформациях в htmlbook

Rotate_text.png

 

Убрать управление и добавить автопроигрывание для видео из 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. Вставьте код в поле эмбеда.

 

Одинаковая высота для нескольких обьектов в сетке

Когда секция вашего поста состоит из нескольких карточек с разным количеством текста, вам может понадобиться задать для них одинаковую высоту. Например, если у вас в посте есть такая конструкция:

section-with-various-sized-badges.png

 

мы рекоммедуем сделать из неё такую:

section-with-same-sized-badges.png

Оптимальное решение такой задачи — добавить параметр

height: 100%

в поле Custom CSS для каждой "главной" сетки в такой карточке. Так высота каждой из этих сеток внутри конструкции будет равна высоте их родительской сетки. В интерфейсе Setka Editor это выглядит так:

css-for-same-sized-badges.png

 

Кастомизация галерей

Добавив коды из примеров ниже, в Custom CSS стиля, можно изменить стандартный вид галереи: добавить индикацию, переместить и перекрасить кнопки.

 

Кнопки

Кнопкам можно задать свой цвет, графику и размер.

 

Цвета кнопок

.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow {
color: #FFF; // Цвет иконки в формате HEX
background-color: #000; // Цвет фона в формате HEX
box-shadow: none; // Отключение обводки вокруг кнопок
}

setka-editor-custom-css-for-colored-gallery-arrows.png

Размер кнопок, толщина стрелок

.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; // Толщина линии стрелки в пикселях
}

setka-editor-custom-css-for-gallery-arrows-size.png

Своя графика для кнопок

.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; // Желаемый шрифт
}

setka-editor-custom-css-for-gallery-slides-counter.png

Вывод точек-индикаторов под фотографией

.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_dots {
display: flex;
}

setka-editor-custom-css-for-dot-gallery-indicator.png

Цвета точек

.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
}

Colord_dots_for_gallery.png

Альтернативные раскладки

Расположить все кнопки и элементы по центру

.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] {
justify-content: center;
}

Buttons_in_the_center.png

Установить кнопки по бокам изображения

.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; // Отступ от края изображения в пикселях для кнопки Вперёд
}

Dots_both_sides.png

Кнопки в левом верхнем углу, счетчик слайдов в правом верхнем углу

.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_counter {
display: block;
order: 25; margin-left: auto;
font: 16px Arial; // Желаемый шрифт
}

mceclip0.png

Стрелки под изображением, по бокам от точек

.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;
}

Arrows_on_both_sides_in_the_bottom.png