Динамический CSS как документ MODx
Вам никогда не хотелось сделать некоторые из ваших css-стилей динамическими? Например, бадж на главной странице этого сайта использует как раз динамический стиль (он меняется при перезагрузке случайным образом). Мне пришлось вынести свойства, задающие внешний вид баджа, за рамки css-файла и вписать в шаблон, где я использую сниппет для случайной генерации этого свойства. Или вспомните, как вам хотелось как-нибудь заменить часто повторяющиеся блоки css-кода на переменную и потом менять только содержимое этой переменной, а не каждый блок по отдельности.
Есть ресурс http://www.shauninman.com/plete/2005/08/css-constants, предлагающий воплощать вышесказанное, используя хак @-правила, после чего ваш css-код выглядит слегка неестественно. Что ж, MODx, похоже, первая и единственная пока система, которая справляется с этой задачей с помощью своих функций — легко, изящно и никак не влияя на css-код. Секрет заключается в использовании документа MODx для хранения css-кода.
Единственное требование – должны быть включены дружественные URL с псевдонимами
- Создайте в древе документов вашего сайта папку “css”. Это необязательно, однако логично и добавит аккуратности.
- В этой папке создайте новый документ без шаблона (blank) и с типом содержимого, как вы уже догадались, «text/css» (выбрать тип содержимого можно во вкладке «настройка страницы», page settings)
- Вставьте в содержимое документа ваш css-код. Используйте, где необходимо, сниппеты, чанки и т. д.
- Задайте псевдоним этого документа (как бы вы назвали ваш css-файл), добавив в конце «.css». Это опять-таки необязательно, но так уж принято называть css-файлы.
- Замените в шаблоне ссылку на css-файл типа
на метод @import. Делается это ввиду того, что ссылка на наш вновь созданный css-документ не работает в IE, по непонятным причинам. Итак пишем:
И сохраняем шаблон
- Не забудьте переписать пути к изображениям в css-коде с учетом нового расположения нашего файла, если это необходимо.
- И, наконец, чтобы гарантировать правильную работу этого приема в IE, вписываем в .htaccess следующие строки:
BrowserMatch «MSIE» brokenvary=1
BrowserMatch «Mozilla/4.3» brokenvary=1
BrowserMatch «Opera» !brokenvary
SetEnvIf brokenvary 1 force-no-vary
Редактирование файла стилей .css в MODx.
Если кто в курсе, подскажите, есть ли какая-то возможность в MODx редактировать файл стилей не по ФТП, а через админку?
Аудит сайтов — главная часть это тщательная ручная работа, а не отчеты сервисов и программ (https://vold57.com/audit). Продвижение сайтов (https://vold57.com/seo)
ivan-lev:
Можно создать его отдельным документом для которого указать тип (text/css).
p.s. Evo|Revo?
Конечно, можно.. Естественно, потом прописать в шаблоне.. И ещё момент — если nginx стоит фронтендом и настроен для обработки статики, в т.ч. css — не забыть поправить.. Эм.. ну и ещё есть файл-менеджер, которым (если с каталогами всё «согласовано») можно зайти в нужный каталог, отредактировать CSS (перед этим установить права) и сохранить в файл — этот вариант по идее более «корректный», но менее удобный для пользователя — документ в дереве проще найти.
vold57:
Если кто в курсе, подскажите, есть ли какая-то возможность в MODx редактировать файл стилей не по ФТП, а через админку?
Можно зайти через «управление файлов» и там отредактировать CSS-файл, если он в где-то папке /assets/* располагается.
ivan-lev:
Конечно, можно..
Естественно, потом прописать в шаблоне..
И ещё момент — если nginx стоит фронтендом и настроен для обработки статики, в т.ч. css — не забыть поправить..
Эм.. ну и ещё есть файл-менеджер, которым (если с каталогами всё «согласовано») можно зайти в нужный каталог, отредактировать CSS (перед этим установить права) и сохранить в файл — этот вариант по идее более «корректный», но менее удобный для пользователя — документ в дереве проще найти.
По первому варианту у меня что-то не получается. Делал так: 1. Создал новый документ. 2. В содержимое ресурса вставил содержимое файла стилей. 3. Псевдоним дал index.css 4. В настройках страницы указал тип содержимого text/css 5. в шаблоне прописал путь к фалу стилей Но при загрузке страницы стили не работают, причем при вызове из браузера файла стилей его содержимое кроме стилей включает в себя все содержимое шаблона. Только в качестве контента прописаны стили. Если второй вариант более корректен, то лучше его буду использовать
Редактирование css
MODX v1.2.1, захожу в Элементы—>Управление файлами, там открываю файл стилей, который подключен к index.html, меняю, к примеру, размер шрифта h1, сохраняю, но изменения не применяются. А если скопирую этот файл стилей и изменю в index.html ссылку с «assets/templates/мой сайт/css/main.min.css» на «assets/templates/мой сайт/css/копия.css», то все работает. Почему так?
Редактирование css
подскажите, где вставить псевдокласс :nth-child , чтобы блоки располагались "лево-право", а не по.
Редактирование HTML и CSS
Как найти тот или иной php файл для редактирования если с помощью firebug в firefox код.
Редактирование кода css
Пытаюсь создать программу(для себя), которая добавляет в css код табуляцию, ну как пример загрузил.
редактирование template.css
я хочу изменить цвет шаблона, в template.css я меняю цвет, но при обновлении фаерфокса цвет не.
1. В MODx html-код шаблона хранится не в файле index.html или каком-либо другом, а в базе данных. Поэтому никакие index.html редактировать не нужно.
2. С html-кодом шаблона работатете из админки — Элементы-Управление элементами-Шаблоны. Там шаблонов может быть несколько. В них и редактируете ваш html-код.
2. CSS, JS, картинки, шрифты — это все обычно лежит в папке assets/templates/мой сайт/. Тут Вы правы. CSS редактируете в файле.
Подключаем свои стили
Часто сайты разрабатываются на основе фреймворков, в которых уже есть готовые шаблоны оформления для многих элементов сайта. Самые известные из них это Bootstrap, UI Kit, Semantic UI, MaterializeCSS и другие. Про Bootstrap уж точно все слышали. Но так как хочется придать сайту индивидуальность, возникает необходимость подправить стандартные стили. Для таких целей принято создавать отдельный файл стилей, чтобы вносить изменения в оформление сайта не затрагивая базовый файл стилей. Во-первых, проще контролировать файл с несколькими строчками, чем искать в тысячах строках кода нужный класс. А во-вторых, это поможет избежать проблем с переходом на новую версию фреймворка — заменили базовый файл и ваши изменения не потеряются.
При использовании фреймворка Bootstrap для изменений стилей самого Bootstrap используют обычно файл bootstrap-theme.css, который подключают после основного bootstrap.css. Именно в него вносят правки для стилей этого фреймворка. Но ещё рекомендуют стили, не относящиеся к фреймворку, выносить в отдельный файл. Например, main.css или default.css. В этом файле прописывают собственные стили, определяющие дизайн сайта. Так вот о нём я и хочу сказать пару слов.
Обычно стили подключают в секции head страницы сайта. Выглядеть это может, например, так.
Опускаю тот факт, что в целях оптимизации стили нужно минимизирвоать. Речь сейчас не об этом.
В данном случае переопределяемые стили имеют приоритет над базовыми, указанными в bootstrap.css. Но часто на сайт устанавливают различные дополнения, которые самостоятельно подключают файлы стилей и скриптов. У меня это делает Tickets. И эти файлы подключаются уже после нашего главного файла main.css (в котором мы определяем дизайн) и, соответственно, замещают наши стили.
Есть несколько решений данной проблемы.
Изменение стилей дополнения
Хорошее дополнение (а Tickets безусловно является таким) позволяет подключать свои собственные стили вместо стандартных. Для этого нужно сделать копию файла стилей дополнения, внести нужные изменения и в системных настройках указать изменённый файл. Но тут возникает та же проблема, что и с фреймворком — при обновлении дополнения нужно найти новые стили и перенести их в свой файл. Эту проблему можно решить подключением в своём файле через @import файла с базовыми стилями. Т.е. в своём файле подключаем через @import базовый файл стилей и ниже переопределяем нужные стили, которые заместят базовые. Но есть мнение, что @import лучше не использовать.
Указывать !important
Использование инструкции !important повышает приоритет стиля и может решить проблему. Но что если стилей много? Не будешь же для каждого писать !important . Кроме того, это может сломать уже настроенные стили. А еще может возникнуть ситуация, когда у стилей дополнения также указано !important . В общем, тоже не идеальный вариант.
Перенести main.css
Ну и последний вариант, это перенести наш главный файл скриптов в конец секции head, чтобы он был самым последним. Сделать это нужно после полной загрузки страницы, т.е. когда уже все стили подключены. Для этого можно использовать jQuery.
$(document).ready(function($) { $("#main-style").detach().appendTo("head"); }); Как видно из кода, мы берем элемент с id=»#main-style» и переносим его в конец секции head. А элементом с этим id будет как раз наш файл стилей.
Но при использовании этого способа может возникнуть небольшая проблема. Так как наш файл стилей переносится после того, как страница уже готова, то пользователь может увидеть эти изменения — изменится цвет текста или размер отступа блогов. Исправить этот эффект можно указав стилям, которые вызывают самое заметное мигание, инструкцию !important . Я использую именно этот способ для изменения стилей Tickets.
Заключение
В общем, каждый метод имеет плюсы и минусы. Для лучшего эффекта можно их комбинировать.
Подключаем свои стили или скрипты в админке MODX Revo
Бывет, что в админке MODX Revolution нужно поменять какие-то стили, например, скрыть какое-то поле для определенного менеджера. Или создать зависимые TV, например, при установке определенного значения в одном TV — отображать/скрывать другое поле TV. В общем, бывает нужно изменить DOM менеджера MODX.
Конечно, можно создать отдельный шаблон, в случае со скрытием TV или многие задачи можно решить через настройку форм. Но это не всегда целесообразно, да и настройка форм в MODX довольно трудоемкий процесс.
Тут нам и поможет плагин с событием для админки.
Навигация по статье:
Плагин скрытия TV в админке
Например, плагин ниже позволит скрыть TV-поле с >Назовем плагин, например, «tv30Hide» и вешаем на событие «OnManagerPageInit», приоритет у события ставим «0».
switch ($modx->event->name) case 'OnManagerPageInit':
$modx->regClientStartupHTMLBlock(
"
"
);
default:
return;
>
Функция regClientStartupHTMLBlock и позволяет нам внедрить свой HTML-код (в данном случае ) на страницу админки.
- modX::regClientStartupHTMLBlock — добавляет HTML-код на страницу админки, подключая его перед закрывающимся head.
- modX::regClientHTMLBlock — добавляет HTML-код на страницу админки, подключая его перед закрывающимся body.
- modX::regClientCSS — функция регистрирует css-файл, подключая его в head админки.
- modX::regClientStartupScript — функция регистрирует js-файл на страницу админки, подключая его перед закрывающимся head.
- modX::regClientScript — функция регистрирует js-файл на страницу админки, подключая его перед закрывающимся body.