Аккаунт Setka Редактирование стандартных элементов с помощью Custom CSS

Редактирование стандартных элементов с помощью Custom CSS

Некоторых видов оформления невозможно достичь стандартными средствами Менеджера стилей. В таких случаях задать оформление разделителей, таблиц, списков или галереи можно с помощью Custom CSS.

Как добавить элементу кастомный CSS на уровне стиля?

Предположим вы хотите добавить в стиль Setka Editor пунктирный разделитель. Все разделители по умолчанию — сплошные линии, но CSS позволяет сделать линию пунктирной и задать для неё множество других параметров.

 

Рассмотрим процесс редактирования на этом примере.

 

Шаг 1. Узнаем класс элемента

Прежде чем редактировать разделитель, нужно узнать его класс. Сделаем это с помощью инструментов разработчика в любом браузере:

  1. Перейдём в Менеджер стилей: откроем Setka, выберем Styles на верхней панели.
  2. В списке элементов, слева выберем разделитель. Он автоматически отобразится в зоне предпросмотра — справа.
  3. Откроем инструменты разработчика (⌘+⌥+I, Ctrl+Shift+I или F12).
  4. Переключимся в режим выбора элемента и кликнем по элементу в зоне предпросмотра.
  5. В панели Elements появится код разделителя:
    ______________2019-08-22___15.52.56.png
<hr class="stk-reset stk-theme_30028__separator_basic_divider">
  • hr — тип элемента — горизонтальный разделитель;
  • значение в кавычках — класс элемента stk-theme_30028__separator_basic_divider, где число 30028 — идентификатор стиля.

Скопируем класс разделителя, чтобы использовать его в шаге 2.

 

Галереи и списки не редактируются стандартными средствами Менеджера стилей. Если элемент недоступен в Менеджере стилей, потребуется совершить дополнительные действия:

  1. Создайте новый пост в Setka Editor.
  2. Добавьте в пост редактируемый элемент.
  3. Откройте предпросмотр, нажав соответствующую кнопку на правой панели или клавишу TAB.
  4. Откройте инструменты разработчика (⌘+⌥+I, Ctrl+Shift+I или F12).
  5. Переключитесь в режим выбора элемента и кликните по элементу, который хотите отредактировать.
  6. В панели Elements появится код элемента:
    ______________2019-08-22___15.52.56.png
<hr class="stk-reset stk-theme_30028__separator_basic_divider">
  • hr — тип элемента — горизонтальный разделитель;
  • значение в кавычках — класс элемента stk-theme_30028__separator_basic_divider, где число 30028 — идентификатор стиля.

 

Примечание: некоторые элементы Setka состоят из нескольких частей. Например, каждая кнопка галереи имеет свой класс: класс кнопки «влево» — slick-prev, класс кнопки «вправо» — slick-next.
mceclip2_result.png

Шаг 2. Добавим класс в Custom CSS

Теперь выбранный класс можно модифицировать любыми средствами CSS. Чтобы добавить разделителю свойство пунктирный:
  1. Вернёмся в Менеджер стилей: откроем Setka, выберем Styles на верхней панели, а затем стиль, элемент которого требуется изменить.
  2. Прокрутим список элементов до конца и кликнем на Custom CSS.
    mceclip3_result.png
  3. Добавим новую строку. Начнём её с точки, затем вставим класс разделителя, полученный на шаге 1:
.stk-theme_30028__separator_basic_divider:before {
}
В фигурных скобках перечислим любые параметры CSS. Чтобы сделать разделитель пунктирным, добавим свойство border и установим ему значение dashed. Зададим расстояние между чёрточками пунктира — 3 пикселя, добавив 3px:
mceclip5_result.png
.stk-theme_30028__separator_basic_divider:before {
border: 3px dashed;
}
Сохраним изменения Custom CSS и стиля.

 

Рекомендуем установить галочку напротив пункта Apply the styles to a post content only. Если этот пункт активен, изменения CSS будут влиять исключительно на контент, созданный в рамках темы, не затрагивая стили вашего сайта.

 

Примечание: вы увидите изменения из Custom CSS только в редакторе и в постах. Они не будут видны в зоне предпросмотра Менеджера стилей.

Похожие статьи