Как редактировать любые CSS-стили в дочерней теме
Если вы используете какую-то многофункциональную тему для WordPress, одну из тех, которые продаются в маркетплейсе themeforest.net , то после создания дочерней темы, наверняка можете столкнуться с проблемой переопределения стилей.
Как правило, не все ограничивается файлом style.css . Кроме него вы можете обнаружить еще стили, разнесенные по различным папкам таким как:
/wp-content/themes/theme-name/assets/css/layout_3/main.css/wp-content/uploads/stm_uploads/skin-custom.css
И как с этим быть, как переопределись их в дочерней теме? Я пересмотрел много вариантов и нашел следующее решение. Нам понадобится функция wp_enqueue_style() , подробное описание контрой вы найдете ниже. А пока я приведу пример практического применения данной функции, используя указанные ранее пути.
Пошаговое руководство
В файле functions.php дочерней темы прописываете строки:
wp_enqueue_style( 'main.css', '/wp-content/themes/theme-name/assets/css/layout_3/');wp_enqueue_style( 'skin-custom.css', '/wp-content/uploads/stm_uploads/');
В файле style.css дочерней темы переопределяются нужные вам стили, например:
h2 color: #7A7A7A !important; margin-top: 20px !important;>Очистка кэша браузера
Совет: для отладки при переопределении стилей рекомендую использовать Google Chrome, подключив расширение Classic Cache Killer .
Оно автоматически очищает кеш браузера перед загрузкой страницы. Может быть включено/отключено одним кликом мышки.
Увы, Safari для веб-разработки не очень удобен, так для него нет такого количества расширений. Даже перезагрузка страницы без обращения к кэшу не всегда срабатывает (удерживая клавишу ⌥ , нажать на значок обновления страницы, возле адресной строки браузера).
Только если нажать ⌘ + ⌥ + [E] , кэш браузер обнулится. Но, согласитесь, каждый раз дополнительно нажимать комбинацию из трех славишь несколько рутинно. Гораздо проще использовать расширение Classic Cache Killer и только обновлять страницу. Все остальное будет сделано автоматически.
Функция wp_enqueue_style()
Функция wp_enqueue_style() правильно добавляет файл CSS стилей. Она регистрирует стиль, если указан источник (не перезаписывает), и ставит в очередь.
Статья по теме: Как средствами CSS изменить цвет маркера html-списка
Если файл стилей был предварительно зарегистрирован через wp_register_style() , то его можно добавить в очередь, указав название (идентификатор) в первом параметре $handle . Если файл не был предварительно зарегистрирован, то эта функция зарегистрирует файл и добавит его в очередь.
Синтаксис
wp_enqueue_style ( string $handle , string $src = '' , string[] $deps = array() , string|bool|null $ver = false , string $media = 'all' )
Параметры
( string ) (Обязательно) Имя таблицы стилей. Должно быть уникальным.
( string ) (Опционально) Полный URL-адрес таблицы стилей или путь к таблице стилей относительно корневого каталога WordPress.
Значение по умолчанию: ''
( string[] ) (Опционально) Массив зарегистрированных стилей обрабатывает эту таблицу стилей, от которой он зависит.
Значение по умолчанию: array()
( string | bool | null ) (Опционально) Строка, указывающая номер версии таблицы стилей, если она есть, которая добавляется к URL-адресу в виде строки запроса для очистки кеша. Если для параметра version задано значение false, автоматически добавляется номер версии, равный текущей установленной версии WordPress. Если установлено значение null, версия не добавляется.
Значение по умолчанию: false
( string ) (Опционально) Медиа, для которого была определена эта таблица стилей. Принимает типы мультимедиа, такие как «все», «печать» и «экран», или мультимедийные запросы, например ‘(orientation: portrait)’ и ‘(max-width: 640px)’.
Значение по умолчанию: 'all'
Использование
Безопасный способ добавить/поставить в очередь файл таблицы стилей на созданную страницу WordPress.
wp_enqueue_style ( $handle, $src, $deps, $ver, $media );
Редактирование файла стилей .css в MODx.
Если кто в курсе, подскажите, есть ли какая-то возможность в MODx редактировать файл стилей не по ФТП, а через админку?
Аудит сайтов - главная часть это тщательная ручная работа, а не отчеты сервисов и программ (https://vold57.com/audit). Продвижение сайтов (https://vold57.com/seo)
На сайте с 20.04.2007
8 сентября 2012, 14:28
Можно создать его отдельным документом для которого указать тип (text/css). p.s. Evo|Revo?
. 🙂 Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
На сайте с 01.10.2007
8 сентября 2012, 14:35
ivan-lev:
Можно создать его отдельным документом для которого указать тип (text/css).
p.s. Evo|Revo?
Для Evo это тоже можно сделать?
На сайте с 06.03.2010
8 сентября 2012, 14:38
vold57:
Для Evo это тоже можно сделать?
На сайте с 20.04.2007
8 сентября 2012, 14:48
Конечно, можно.. Естественно, потом прописать в шаблоне.. И ещё момент - если nginx стоит фронтендом и настроен для обработки статики, в т.ч. css - не забыть поправить.. Эм.. ну и ещё есть файл-менеджер, которым (если с каталогами всё "согласовано") можно зайти в нужный каталог, отредактировать CSS (перед этим установить права) и сохранить в файл - этот вариант по идее более "корректный", но менее удобный для пользователя - документ в дереве проще найти.
На сайте с 30.05.2009
8 сентября 2012, 14:53
vold57:
Если кто в курсе, подскажите, есть ли какая-то возможность в MODx редактировать файл стилей не по ФТП, а через админку?
Можно зайти через "управление файлов" и там отредактировать CSS-файл, если он в где-то папке /assets/* располагается.
На сайте с 01.10.2007
8 сентября 2012, 15:01
ivan-lev:
Конечно, можно..
Естественно, потом прописать в шаблоне..
И ещё момент - если nginx стоит фронтендом и настроен для обработки статики, в т.ч. css - не забыть поправить..
Эм.. ну и ещё есть файл-менеджер, которым (если с каталогами всё "согласовано") можно зайти в нужный каталог, отредактировать CSS (перед этим установить права) и сохранить в файл - этот вариант по идее более "корректный", но менее удобный для пользователя - документ в дереве проще найти.
По первому варианту у меня что-то не получается. Делал так: 1. Создал новый документ. 2. В содержимое ресурса вставил содержимое файла стилей. 3. Псевдоним дал index.css 4. В настройках страницы указал тип содержимого text/css 5. в шаблоне прописал путь к фалу стилей Но при загрузке страницы стили не работают, причем при вызове из браузера файла стилей его содержимое кроме стилей включает в себя все содержимое шаблона. Только в качестве контента прописаны стили. Если второй вариант более корректен, то лучше его буду использовать
Пожелание для Editor X: редактирование кода CSS (таблицы стилей) сайта
Вы можете вносить изменения в CSS прямо из редактора Editor X, менять цвет, стиль и дизайн ваших элементов. Изменения вступят в силу после нажатия кнопки Опубликовать.
В качестве альтернативы вы можете попробовать вставить короткий снипет CSS в разделе Коды аналитики в панели управления сайтом. Кроме того вы можете использовать инструмент HTML iFrame, который поддерживает синтаксис CSS.
Мы постоянно работаем над улучшением наших продуктов, поэтому ваши отзывы очень важны для нас.
Если вы хотите, чтобы мы добавили эту функцию, пожалуйста, нажмите на кнопку Проголосуйте за эту функцию, и мы сообщим вам, как только она будет доступна.
Нужны конкретные действия CSS?
Мы постоянно разрабатываем новые функции, которые позволят вам лучше контролировать файлы CSS. Нажмите ниже, чтобы проголосовать за варианты, которые вы хотите увидеть следующим:
- Настройка полос прокрутки
- Использование вариативных шрифтов в типографике сайта
- Расширяемые текстовые поля со ссылкой «Подробнее»
- Добавление эффектов тени
- Использование градиентов в качестве фона элементов
- Подчеркивание пункта меню
Если в этом списке нет нужной функции, свяжитесь с командой сопровождения с более подробной информацией.
Как редактировать код CSS на сайте
Добавьте код CSS в виде классов для любого элемента, расширяющего функциональность. Вы можете написать код CSS в настройках страницы и назначить класс на панели свойств.
Your browser does not support HTML5 video.
Просмотр по категориям функций
Элементы веб-страницы
Поддерживаемые системы
Визуальный редактор страниц
Элементы дизайна
Медиа библиотеки
Свойства элемента
Отзывчивый
Эффекты анимации
Настройки темы
Форма обратной связи
Верхний и нижний колонтитулы
Электронная коммерция
Пользовательский код
Особенности приложения
Свойства сайта и страницы
Виджеты WordPress
How To Edit The CSS Code To Extend Styling Of Your Web Elements
How to create a unique vibe on your page if you know how to add custom CSS codes and how to make them blend with the other elements on the page? Open your page settings using Property Panel and go to the CSS section to review the current code of your elements. Understanding how to make improvements and change font size, color palette, and animations so that when you add custom CSS, it will not make your site structure crumble is the key skill in adding custom CSS. By adding custom CSS, you will improve the user experience and the Google Analytics results.
How do you integrate a custom CSS file into your system? It is not complicated, but it is more challenging to realize how to create related articles and sections by adding custom features and installing those codes without them affecting the site negatively. Your custom CSS code must be tested before adding custom CSS. An external CSS file may add custom features or break the element with this CSS file. If you add custom CSS, double-check other CSS codes before adding CSS again.
Whether how to install or how to create your own CSS, our page builder provides you with all the necessary tools before you get started. Many developers understand how to add keywords to improve the code, create the columns for a beautiful Mega Menu, set up an effective contact form and terms of service, and set the search box for any font size. How do they do the proper customization? Discover even more in video tutorials and related posts.