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

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

Содержание

Что такое Custom CSS?

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

В редакторе

В стиле

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

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

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

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

Тень

Линия

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

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

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

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

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

Кнопки

Цвета кнопок

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

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

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

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

Цвета точек

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

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

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

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

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

 

Что такое 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

 

В стиле

Открыв стиль в Style Manager и прокрутив список элементов до конца, вы увидите раздел 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. Откройте editor.setka.io и выберите нужный стиль во вкладке 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

 

Линия

border: 4px solid #fc0;

Где 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 на номер текущего стиля.

Номер можно скопировать из строки браузера, открыв стиль в Style Manager:

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

 

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

Добавив коды из примеров ниже, в 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;
}