Custom css: Кастомные свойства (—*): CSS переменные — CSS

Custom CSS Pro – WordPress plugin

• Details
• Reviews
• Installation
• Development

Support

Professional real-time CSS editor for those who want to code CSS.

Key Features

• professional CSS Editor.
• Real-time live preview.
• Simple UI.

• Live Custom CSS Editor

Install Custom CSS Pro just as you would any other WP Plugin:

• Download Custom CSS Pro from WordPress.org.
• Unzip the .zip file.
• Upload the Plugin folder (custom-css-pro/) to the wp-content/plugins folder.
• Go to Plugins Admin Panel and find the newly uploaded Plugin, “Custom CSS Pro” in the list.
• Click Activate Plugin to activate it.
• Begin using the plugin by going to Settings > Custom CSS in the Admin Menu.

I searched a long time and this plugin is the best! It has a nice user interface and most important it shows CSS mistakes! I found with this Plugin why my CSS before was not working.

Поменять стили настолько просто, что особо и добавить больше нечего. Особо полезен этот плагин для начинающих разработчиков.

Just wonderful.

Absolutely love this; one note; sometimes after saving the changes and go back to change say one character or a line, it doesn’t popular «save changes». Maybe a small bug? In either case, I use the plug-in for every WP site I run and can’t live without it. No more going through different theme menu’s just to edit the CSS!

This is the kind of plugin you’d easily donate $10 for because it’s so useful. Much thanks to WASP Themes (creators of the Yellow Pencil plugin) for offering such a lightweight and useful tool for nothing. If you use custom css to regularly style elements like I do, there’s nothing quite like being able to preview those live changes in the window while you code. I’ve been using this for about 16 months, I use it on over 10 different wordpress installs to cleanly and effectively make simple color changes, add padding, etc.

Can see CSS changes live!

Read all 14 reviews

“Custom CSS Pro” is open source software. The following people have contributed to this plugin.

Contributors

• YellowPencil

1.0.7

• fixed a minor javascript bug.

1.0.6

• Editor loading bug fixed.
• Bug fixes on surfing on the website while CSS editor active.

1.0.5

• Any more you can coding while surfing on your website.
• CSS Editor’s core functions updated.

1.0.4

• Added nonce to saving action
• Sanitizing CSS data

1.0.3

• A minor bug fixed

1.0.2

• CSS @import bug fixed.

1.0.1

• A minor bug fixed

1.0

• Initial Release

Support

Issues resolved in last two months:

0 out of 1

View support forum

Как безопасно добавлять кастомные CSS стили для плагинов и тем на WordPress

С вами когда-то такое случалось? Вы установили плагин, у него были все нужные вам функции. Но… он некрасиво выглядел. Даже после того, как вы поменяли все настройки, он всё равно не вписывается в стиль вашей темы. И даже если он идеально работает, вы немного огорчились или начали искать другой плагин.

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

Смотрите также:

• Как создать дочернюю тему WordPress — Правильный способ
• Редактируем CSS-стили вашей темы WordPress на лету с помощью плагина CSS Hero
• Как добавить JavaScript и CSS в WordPress тему или плагин
• Загружаем свои стили оформления CSS на WordPress правильно
• 5 правок в CSS, которые помогут новичку улучшить внешний вид своего блога

Эта статья покажет вам, как правильно добавлять такие стили, чтобы они всегда были в безопасности, даже если вы меняете или обновляете тему.

Кастомный CSS — больше контроля над дизайном плагинов

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

Возьмём, к примеру, один из наиболее популярных плагинов Contact Form 7. Его стиль можно изменить только слегка. Но используя кастомный CSS, вы можете полностью изменить каждый аспект его отображения на экране.

К тому же, даже плагины с предусмотренной возможностью изменения внешнего вида не позволят изменить каждый элемент.

Так что, изучив немного CSS и как его безопасно добавить к вашей теме, вы выйдете на новый уровень отображения плагинов читателям.

Почему важно добавить кастомный CSS правильно

Вы не хотите как попало добавить CSS стили к плагину. Есть правильный и неправильный способ добавить CSS на WordPress.

Когда вы добавляете CSS стили правильно, они всегда будут работать корректно, даже если вы обновите вашу тему. Вы сможете просто скопировать и вставить их в новую тему, если вы когда-либо решите сменить дизайн.

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

А сейчас мы расскажем вам, как правильно добавлять CSS стили плагинов для Divi и других тем WordPress.

Куда добавлять CSS стили в теме Divi

Для начала рассмотрим процесс добавления кастомных стилей CSS на примере темы Divi.

Для безопасного добавления CSS стилей для ваших плагинов в Divi, зайдите во вкладку «Theme Options» в вашем меню Divi:

Потом во вкладке «General» нужно пролистать страницу до конца вниз. Там вы найдёте окошко «Custom CSS»:

Технически, всё, что вам нужно сделать, это ввести ваш кастомный код CSS и нажать «Save Changes». Но поскольку мы хотим сделать так, чтобы можно было легко перемещать и копировать стиль нашего плагина, то давайте сделаем еще один шаг.

Вы, наверное, уже добавили кастомные Divi CSS сниппеты, они помогают настроить кастомный CSS в этом окне. Для этого вы можете добавить комментарий типа «Плагин CSS стилей начинается тут». Тогда добавьте ваш CSS код под этой строчкой.

Чтобы добавить такой комментарий, нужно скопировать и вставить этот код:

/* Plugin CSS Styles Start Here */

Комментарий ни на что не повлияет, но поможет организовать разные кастомные CSS стили. Divi поможет сохранить ваши пользовательские CSS стили в безопасности во время обновлений так, что вам не нужно бояться потерять их.

Куда добавлять CSS стили для других тем

Если вы используете другую тему, то вы наверняка захотите добавить свои CSS стили в таблицу стилей вашей дочерней темы. Если вы не используете дочернюю тему, или не знаете что это, то мы советуем создать её и начать использовать.

Предположим, что вы установили дочернюю тему, вы можете менять её в консоли WordPress, зайдя во Внешний вид → Редактор:

Убедитесь, что вы редактируете верную дочернюю тему. Вам нужно зайти в style.css. Для этого просто нажмите на этот пункт.

Потом вам нужно просто добавить ваш кастомный CSS так же, как мы это сделали в Divi. Для начала, добавьте комментарий:

/* Plugin CSS Styles Start Here */

Далее добавьте ваш кастомный CSS стиль под этой строкой:

Поскольку вы работаете с дочерней темой, ваши стили всегда будут в безопасности, даже если вы обновите тему.

Давайте рассмотрим реальный пример. Представим, что вы хотите изменить стиль формы обратной связи Contact Form 7. Вы установите плагин и получите похожую форму:

Теперь вы хотите оживить её немножко, добавив чёрные границы в полях формы. Вы можете зайти в таблицу стилей вашей дочерней темы и добавить этот код под комментарием, который вы сделали:

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    border: 1px solid #000000;
}

В редакторе ваш CSS должен выглядеть так:

После сохранения таблицы стилей и обновления вашей формы обратной связи, вы должны увидеть это:

Теперь границы полей ввода выделены черной рамкой.

Если вы используете Divi, то ваш код будет таким же, только добавляется он в другом месте:

Конечно, это просто эксперимент, поскольку вам не нужен плагин формы обратной связи в Divi. Но этот метод сработает с любым плагином!

Итоги

Добавление пользовательских CSS стилей в WordPress является довольно простым процессом. Тяжелее всего узнать, какой CSS код нужно добавить или изменить. Вы не станете экспертом в CSS за одну ночь, но есть простой трюк.

Чтобы подсмотреть, какие стили вам нужно изменить для того или иного элемента на вашем сайте, откройте Developer Tools в Chrome (нажмите F12) и наведите мышкой на интересующий вас объект. Вы сразу же увидите, какие стили использует этот элемент.

Просто помните – всегда храните кастомный CSS в отдельной области, отделённой комментарием. Так вы всегда сможете его быстро найти.

А у вас есть советы по поводу кастомных CSS стилей? Расскажите нам в комментариях!

Смотрите также:

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Добавление пользовательского CSS в вашу тему · Shopify Справочный центр

Эта страница была напечатана 21 июля 2023 г. Актуальную версию можно найти на странице https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css.

Каскадная таблица стилей (CSS) изменяет способ отображения элементов в вашей теме и может управлять внешним видом нескольких страниц одновременно. Вы можете настроить свою тему за пределами настроек, встроенных в тему, с помощью пользовательской функции CSS. Вы можете добавить пользовательский CSS ко всей теме или к определенному разделу шаблона в вашей теме. Пользовательский CSS не поддерживается на Страница оформления заказа .

Настройка CSS требует некоторого знакомства с CSS и HTML. Прежде чем настраивать тему, убедитесь, что вы понимаете, какой уровень поддержки доступен.

На этой странице

• Рекомендации по использованию пользовательского CSS
• Добавить пользовательский CSS
• Дополнительные ресурсы для CSS

Рекомендации по использованию пользовательского CSS

Примечание

Пользовательский CSS работает, переопределяя настройки вашей темы, поэтому изменения, сделанные с помощью пользовательского CSS, будут иметь приоритет над встроенными настройками вашей темы.

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

• Следующие селекторы CSS не поддерживаются в пользовательском CSS:
  • At-rules @import , @charset и @namespace нельзя использовать
  • Для CSS уровня раздела разрешены только at-rules @media , @container , @layer и @supports
  • Для CSS на уровне раздела вы не можете настроить таргетинг на идентификатор или классы обертки элемента Shopify Section, отображаемого темой с shopify-раздел класс
• Если пользовательское правило CSS объявлено с тегом, обертывающим элемент родительского раздела, то он считается дочерним тегом, и правило стиля применяется к этому разделу.
  Обратите внимание, что по умолчанию родительский раздел заключен в тег
  , но разработчики темы могут установить любое из разрешенных значений в схеме раздела.
• В настоящее время только домен https://cdn.shopify.com разрешен при использовании URL-адресов в пользовательском CSS.
• Пользовательские шрифты не ограничены. Однако пользовательские шрифты — это отдельный ресурс, загружаемый браузерами до отображения текста, что может повлиять на общую производительность магазина. Вы несете ответственность за то, чтобы нестандартные шрифты не искажали вашу витрину. Узнайте, как использовать пользовательские шрифты в вашей теме.
• Правила CSS, влияющие на всю тему, ограничены 1500 символами.
• Правила CSS, влияющие на определенный раздел, ограничены 500 символами.
• В зависимости от используемых вами селекторов или классов CSS обновление темы может привести к тому, что ваш пользовательский CSS перестанет работать.

Shopify не поддерживает расширенные настройки темы. Если вы столкнулись с ошибкой, связанной с этими ограничениями в вашем пользовательском CSS, и не можете определить причину ошибки, обратитесь к списку других доступных ресурсов поддержки.

Добавить пользовательский CSS

Пользовательский CSS можно добавить ко всей вашей теме, которая влияет на все страницы в вашем интернет-магазине, кроме Страница оформления заказа . Например, вы можете изменить способ отображения кнопок во всем магазине.

Шагов:

1. В административной панели Shopify перейдите в Интернет-магазин > Темы .
2. Нажмите Настроить .
3. Нажмите Настройки темы .
4. Нажмите Пользовательский CSS .
5. Добавьте свой код.
6. Щелкните Сохранить .

Пользовательский CSS также можно добавить в определенный раздел вашей темы. Если вы добавите пользовательский CSS в раздел вашей темы, то CSS будет привязан к этому разделу. Например, вы можете применить пользовательский размер шрифта или цвет фона к одному разделу.

Шагов:

1. В административной панели Shopify перейдите в Интернет-магазин > Темы .
2. Нажмите Настроить .
3. Щелкните раздел, в который вы хотите добавить CSS.
4. В нижней части панели свойств раздела нажмите Custom CSS .
5. Добавьте свой код.
6. Щелкните Сохранить .

Дополнительные ресурсы для CSS

Настройка CSS требует некоторого знакомства с CSS и HTML. Прежде чем настраивать тему, убедитесь, что вы понимаете, какой уровень поддержки доступен.

Если вы хотите узнать больше о CSS, вы можете изучить некоторые из следующих ресурсов:

• Основы CSS
• Научитесь стилизовать HTML с помощью CSS
• Справочник по CSS
• Селекторы CSS

Что такое CSS и как он используется для настройки? – Перейти на WordPress

Возможно, вы помните, что CSS — это полезный инструмент для разработки и настройки веб-сайта, но что такое CSS?

CSS или каскадные таблицы стилей — это метод добавления стилистических инструкций для вашего веб-сайта в его внутренний код. Прежде чем углубляться, давайте определим код и обсудим, что он делает.

Код веб-сайта — это язык, который точно сообщает вашему веб-браузеру, как должен выглядеть веб-сайт и что он должен делать. Наиболее распространенным языком кодирования является HTML (язык гипертекстовой разметки), форма кода, которая указывает, какие элементы присутствуют на веб-странице. HTML определяет, например, где находится заголовок, где прерывается каждый абзац и насколько большим должно быть изображение.

CSS — это расширение HTML, которое описывает определенные стилистические инструкции. CSS используется для указания цвета заголовка или шрифта, которым должен быть написан ваш контент. Если HTML — это структура дома, то CSS — это краска, размер окон и ширина коридоров. CSS позволяет настраивать внешний вид вашего веб-сайта и применять стилистические решения ко всему его содержанию. Это гарантирует, что внешний вид вашего сайта соответствует голосу вашего бренда.

Элементы CSS

Прежде чем мы рассмотрим шаги по добавлению настраиваемого языка CSS на ваш веб-сайт, давайте определим несколько терминов. Говоря о CSS, нужно понимать три основных компонента: селекторы, свойства и значения.

Селектор использует HTML-код, чтобы указать часть вашего веб-сайта, которую вы хотите стилизовать. Например, HTML-код абзаца — «p». Если вы хотите использовать CSS для изменения стиля вашего абзаца, «p» станет вашим селектором.

Затем свойства и значения используются для применения стилистических инструкций к селекторам. Если вы хотите, чтобы ваши абзацы были написаны красным текстом, свойство будет стоять первым и будет указывать конкретный атрибут, который вы пытаетесь изменить (в данном случае цвет). Значение — это то, на что вы хотите изменить этот атрибут, который в нашем примере красный.

Записанный код CSS для красного абзаца текста будет выглядеть так (обратите внимание на уникальную пунктуацию, используемую в CSS):

 p {
красный цвет;
} 

Каждый раз, когда в коде вашего сайта используется буква «p», текст становится красным. Если вы хотите дополнительно ознакомиться с основами CSS, WordPress.com предлагает несколько полезных ресурсов и руководств.

Использование CSS с WordPress.com

Есть два способа добавить настройки CSS на ваш сайт WordPress.com. Первый метод предполагает вставку языка CSS непосредственно в ваш HTML-код. Чтобы получить к нему доступ, перейдите к представлению HTML в редакторе WordPress.com. Здесь вы можете вставить соответствующий фрагмент кода везде, где вы хотите, чтобы стиль CSS отображался. Если вы выберете этот путь, вам нужно будет вставить фрагмент кода CSS на каждую страницу и опубликовать там, где вы хотите, чтобы стиль отображался.

Для настройки всего сайта вам потребуется доступ к функции «Индивидуальный дизайн». Это доступно в тарифных планах WordPress.com Premium и с плагинами. Чтобы добраться до него, перейдите к Appearance > Customizer > CSS .

В следующих примерах показано, как оформить сайт с помощью CSS.

Изменение цвета текста с помощью CSS

Если в вашей теме по умолчанию используются желтые подзаголовки, но вы хотите, чтобы они были зелеными, вы можете изменить цвет с помощью CSS. Код HTML для подзаголовка — «h3» (это ваш селектор). Свойство, которое вы меняете, — это цвет, а значение, на которое вы его меняете, — зеленый. Поэтому вы вставите следующий код в панель CSS в настройщике:

 ч3 {
цвет: зеленый;
} 

Вы также можете использовать это свойство для изменения цвета основного текста:

 body {
цвет синий;
} 

Изменение шрифта и размера шрифта

Если в вашей теме по умолчанию используется шрифт, который вам не нравится, вы можете изменить его с помощью свойства «font-family»:

 h3 {
семейство шрифтов: Helvetica;
} 

Использование приведенного выше кода изменит шрифт ваших подзаголовков на Helvetica; однако есть много других шрифтов на выбор.

Другим вариантом является изменение размера шрифта. В CSS размер шрифта управляется процентами. Код ниже представляет изменение подзаголовка на 250 процентов:

 h3 {
размер шрифта: 250%;
} 

Для следующего текста вы также можете одновременно изменить шрифт и размер шрифта:

 h3 {
семейство шрифтов: Helvetica;
размер шрифта: 250%;
} 

Дополнительные свойства текста, о которых вам следует знать, включают font-weight (определяет, является ли шрифт полужирным или нет), font-style (управляет выделением шрифта курсивом или нет) и text-decoration (может использоваться для добавления подчеркивания, надчеркивания или зачеркивания).

Изменение межтекстового интервала с помощью CSS

Иногда ваш шрифт выглядит великолепно, но буквы кажутся слишком близко друг к другу. Чтобы решить любые проблемы с интервалами, HTMLdog предлагает советы о том, как изменить интервал между текстом с помощью CSS. Если буквы выглядят сплющенными, используйте следующее:

 p {
межбуквенный интервал: 0.5em;
} 

Отсюда вы можете возиться с числовым значением до тех пор, пока расстояние между буквами не покажется вам правильным.

Начало работы

Итак, что такое CSS? К настоящему времени вы можете ответить на этот вопрос, а затем и на некоторые другие, так как вы прочитали достаточно информации, чтобы начать. Не забывайте: вы всегда можете опубликовать дополнительные вопросы на форумах WordPress.com.

Нравится:

Нравится Загрузка…

ОБ АВТОРЕ

Бренда Бэррон

Бренда Бэррон — внештатный писатель, редактор и специалист по поисковой оптимизации из Южной Калифорнии. Она является автором The Motley Fool и регулярно ведет блог в The Digital Inkwell.

Еще от Brenda Barron

Позвольте нашим специалистам создать ваш собственный веб-сайт WordPress.com.

Если вам нужна целевая страница или полноценный сайт электронной коммерции, академия онлайн-обучения или интерактивный информационный сайт для вашего бизнеса, мы можем создать его для вас.