В Default-шаблоне с CSS-стилями можно работать сразу несколькими способами. Для каких-то мелких правок вообще нет надобности менять основные css-файлы - все операции доступны из админ-панели. Это очень удобно, поскольку всегда можно подобрать нужный параметр, например цвет шрифта, фона и т.п.
Для измнения элементов дизайна следует использовать переопределение стилей существующих css-классов. В MaxSite CMS практически все создаваемые блоки вывода сопровождаются уникальными классами и этот факт здорово облегчает жизнь вебмастеру: не нужно думать о html-верстке, достаточно указать свой вариант стилей.
Опция «Свои CSS-стили»
Самый простой вариант - воспользоваться опцией «Свои CSS-стили» в Настройке шаблона.
Указанные здесь стили, будут автоматически подключены в конце секции HEAD сайта, а значит будут иметь приоритет перед всеми другими стилями, как шаблона, так и плагинов.
Например мы хотим изменить цвет фона сайта. Данный параметр задан в стилях тэга BODY. Указываем например так:
body {background: #483D8B;}
С помощью данной опции можно менять произвольные элементы сайта. Преимущества её в том, что
- блогер не «завязан» на верстальщика шаблона. Многие css-стили очень просты и интуитивны, поэтому их освоит даже откровеная блондинка;
- стили можно подбирать сколько угодно раз: не понравился цвет, сменил на другой. Нужно поменять оформление - экспериментируй по максимуму - в случае появления проблем, просто удаляем свои «творения».
Использование css-профилей
CSS-профиль - это обычный css-файл, который подключается к шаблону динамически. Для блогера подключение профиля выполняется в Настройке шаблона в опции «Дополнительные профили».
То есть достаточно просто отметить нужные профили и они автоматически подключатся. По названию профиля понятно для чего он предназначен. Например, если нужно сменить основной шрифт на Arial, то просто отмечаем «font-arial.css».
Также профили могут содержать т.н. темы оформления - это некоторые вариации стандартного дизайна. В комплекте MaxSite CMS присутствуют несколько вариантов:
- dark-theme.css
- dignity-theme.css
- gray-theme.css
- green-theme.css
Всё равно, будете ли вы использовать профиль для смены единичного свойства (например гарнитура шрифта) или набор для темы оформления - во всех случаях работа с css-профилем будет идентична.
Профили хранятся в виде css-файлов в каталоге шаблона css/profiles/. Просто загружаем свой профиль в этот каталог и включаем его в Настройках шаблона.
CSS-профили удобно использовать, если нужно поменять дизайн в «комплексе» - в этом случае затрагивается несколько классов сразу и их удобно править в одном файле.
Также профили пригодятся для вебмастеров, создающих шаблоны на заказ. Клиент может затребовать какой-то вариант оформление, который в будущем может смениться. В том случае профиль идеально подходит - при ненадобности он просто отключается.
Добавление своих стилей в шаблон
Данная возможность используется в случаях, когда дизайн сайта меняется окончательно. В этом случае удобно дописать свои стили к стандартным и они будут подключены автоматом.
Делается это с помощью файла css/add_style.css.
Обратите внимание, что в комплекте MaxSite CMS существует заготовка для этого файла с именем _add_style.css. Для подключения достаточно убрать символ подчеркивания.
Файл add_style.css будет подключен после основных стилей, поэтому в нём также можно переопределить произвольные элементы.
В отличие от профилей, add_style.css будет подключаться всегда, поэтому здесь следует размещать только те стили, которые будут базовыми для вашего шаблона. Например, если шаблон имеет два сайдбара, то стили основной разметки следует указывать уже свои - дефолтный вариант использует только один сайдбар.
Полная замена стилей
Крайне редко может потребоваться полная замена стилей. Скорее всего это говорит о криворукости верстальщика, но даже этот вариант доступен в MaxSite CMS. Для того, чтобы отказаться от использования default-стилей используем свои в файле css/my_style.css.
При наличии этого файла, в шаблоне будет подключен только он, минуя стандартный style-all-mini.css.
Понятно, что использование my_style.css годится только для тех вебмастеров, которые отлично разбираются в верстке.
«Стили для программистов»
Данный вариант годится для тех, кто желает использовать в своих css-стилях/файлах исполняемый php-код. В этом случае системой используется файл css/css.php. Работа с этим файлом полностью отдана на откуп вебмастеру.
Следует учитывать, что при использовании css.php не подключаются default-стили из style-all-mini.css, поскольку сделать это можно в самом css.php.
Что нельзя делать
При создании своего шаблона можно поступить двумя способами. Первый - использовать каталог default-шаблона и второй - скопировать default-шаблон за основу в свой каталог и там уже работать.
Оба способа имею как свои преимущества, так и недостатки. Самым важным, пожалуй, будет то, что при обновлении MaxSite CMS в первом случае новые возможности будут доступны автоматом, а во-втором - придётся вручную вносить правки.
Поэтому, перед тем, как решать какой вариант выбрать, следует оценить «масштабность» переделки дизайна. Если изменений не очень много, то проще воспользоваться css-профилями или add_style.css, которые размещаются в каталоге default-шаблона.
Default-шаблон так устроен, что новые файлы не будут затерты при обновлении. Например в комплекте поставки нет файла add_style.css, а присутствует только заготовка _add_style.css, которая и затрется при обновлении MaxSite CMS. Таким образом, при использовании каталога default-шаблона следует придерживаться несложных правил именования файлов. Если вы начнете вносить изменения в стандартный style-all-mini.css, то он гарантированно затрется при обновлении системы, а вы получте лишнюю головную боль.
Отдельно хочу отметить, что данное правило затрагивает не только css-стили, но и другие части default-шаблона, например компоненты и custom-блоки.
Таким образом, никогда не используйте те файлы, которые не предназначены для изменений и меняются при обновлении MaxSite CMS!
Если вы всё-же планируете сделать шаблон в виде отдельного каталога, то я рекомендую сделать так, чтобы при обновлении системы, можно было бы загрузить новый default-шаблон в ваш каталог или обновить его отдельные элементы (например новый style-all-mini.css). Для этого достаточно в своем шаблоне придерживаться точно таких же правил именования файлов.
Важность базовых default-стилей
Файл style-all-mini.css структурно состоит из нескольких частей:
- сброс стилей
- стили базовых тэгов
- стили основных блоков MaxSite CMS
- стили плагинов MaxSite CMS
- хелперы (помощники)
Таким образом, при использовании своих стилей (add_style.css или профилей), верстальщик сразу получает базовый комплект и избавляется от дополнительной головной боли, связанный с корректной интеграцией своего шаблона в MaxSite CMS.
Отдельно отмечу секцию хелперов. Она содержит стили не только для самого шаблона, но и годится при написании текстов заметок. Скажем, чтобы выровнять изображение вправо в тексте можно указать так:
[img(right)]http://сайт.com/uploads/my_photo.jpg[/img]
Это происходит из-за того, что есть хелпер img.right, в котором прописано не только выравнивание IMG вправо, но и соответствующие отступы от текста. Не лишайте своих пользователей возможности использовать хелперы!
Если у вас есть какие-то конкретные пожелания по оформлению и смене дизайна default-шаблона, то оставляйте свой комментарий! По вашим вопросам я подготовлю следующую статью с конкретными примерами.
Комментариев: 8 RSS
1Аноним31-10-2011 16:45
Спасибо за статью, было интересно почитать!
2Аноним04-11-2011 19:21
Еще какие-нибудь коренные изменения в устройстве шаблонов планируются в ближайшее время?
3Аноним04-11-2011 19:43
Пока таких планов нет.
4Аноним18-11-2011 06:03
Прекрасно. Потратил на прочтение 10 минут, но сэкономлю в будущем часы времени.
Хотелось бы узнать, как можно сделать следующее.
В слайдере картинки отображаются или рандомно или по порядку или же только какая то заданная.
Как сделать так, чтобы можно было задать для каждой рубрики/страницы сайта отдельную картинку.
То есть зашел в рубрику 1 наверху в слайдере картинка подходящая к теме рубрики и т.д.
И то же самое со статичными страницами. Было бы круто сделать такую функцию. Я не программер, но думаю понадобится новые опции вносить в шаблон.
5Аноним18-11-2011 14:26
Если заранее известен алгоритм согласования картинки с записью или рубрикой, то используются функции is_type(), is_type_slug(), is_page_cat() в условии.
Например в компоненте вывода картинки для главной, рубрики и записей можно сделать так:
6Аноним18-11-2011 16:19
Я не программист, но что-то понял из ваших слов.
Но что и куда писать не понял и не знаю.
Может поподробней расскажете в следующей статье?
Думаю будет прикольно добавить сию функцию в следующую версию максайта ;-)
7Роман05-11-2017 08:39
Добрый день. Из всех перечисленных Вами способов у меня почему то работает только самый первый. Добавление в папку стилей новых файлов (add_style.css, my_style.css) почему то не работает. Изменение атрибутов на полный доступ тоже никак не по способствовало. Раньше редактирование css файла получалось когда в браузере была открыта вкладка - посмотреть код. Не знаю как это работало, но это работало. Сейчас даже так перестало получаться. Подскажите пожалуйста как можно с этим бороться. Спасибо.
8Аноним05-11-2017 08:50
Смотря какая версия MaxSite CMS. Если новые 90 и выше, то файлы должны автоматом подхватываться. Если старые .86 и ниже, то нужно проверить как именно они подключаются.