В основе работы — css-переменные и цветовой формат hsla, что позволит сделать всё, как на картинке изменением только одного параметра. Инструкция по настройке под спойлером.
… Устновка обычная. Можно просто скопировать содержимое папки «package» на сайт.
----------------------
Дополнительная настройка шаблона:
1) Колонке с хлебными крошками назначить дополнительные селекторы «pioneer_wd pioneer_wd__breadcrumb»
2) Виджету, выводящему контроллер, назначить шаблон «wrapper» и дополнительные селекторы для контейнера «pioneer_wd pioneer_wd__controller»
---------------------
Как задействовать?
---------------------
Вариант №1: подключаем скин отдельным файлом
Действия:
1) Изменить, если нужно, значения переменных в файле templates\modern\css\skin\pioneer.css
2) Подключить файл любым удобным способом (к примеру, через опции виджета «HTML блок»)
3) Изменить значение абстрактного счётчика
---------------------
Вариант №2: компилируем стилевой файл темы
Действия:
1) Отключить или удалить виджет выведенный в варианте №1
2) Изменить, если нужно, значения переменных в файле package\templates\modern\css\skin\pioneer.css
3) Содержимое файла вставить в templates\modern\scss\theme\_custom.scss
4) Скомпилировать стиль
5) Изменить значение абстрактного счётчика
----------------------
Вариант №3: каждой странице свой цвет
Действия:
Для обоих вариантов выше, подключить к странице любым удобным способом внешний стилевой файл с новыми значениями только нужных переменных (тем же виджетом «HTML блок»).
К примеру, переопределяем только цвета. Тогда содержимое дополнительного файла будет такое:
:root{--pioneer-primary-angle: 0;}
Чтобы не плодить дополнительные файлы, можно вывести переменную тегом <style>:
<style>:root{--pioneer-primary-angle: 0;}</style>
Следует иметь ввиду, что второй вариант подключения (через <style>) не валиден (хоть и обрабатывается практически всеми браузерами). Каким воспользоваться, — решайте сами.
----------------------
Дополнительная настройка шаблона:
1) Колонке с хлебными крошками назначить дополнительные селекторы «pioneer_wd pioneer_wd__breadcrumb»
2) Виджету, выводящему контроллер, назначить шаблон «wrapper» и дополнительные селекторы для контейнера «pioneer_wd pioneer_wd__controller»
---------------------
Как задействовать?
---------------------
Вариант №1: подключаем скин отдельным файлом
Действия:
1) Изменить, если нужно, значения переменных в файле templates\modern\css\skin\pioneer.css
2) Подключить файл любым удобным способом (к примеру, через опции виджета «HTML блок»)
3) Изменить значение абстрактного счётчика
---------------------
Вариант №2: компилируем стилевой файл темы
Действия:
1) Отключить или удалить виджет выведенный в варианте №1
2) Изменить, если нужно, значения переменных в файле package\templates\modern\css\skin\pioneer.css
3) Содержимое файла вставить в templates\modern\scss\theme\_custom.scss
4) Скомпилировать стиль
5) Изменить значение абстрактного счётчика
----------------------
Вариант №3: каждой странице свой цвет
Действия:
Для обоих вариантов выше, подключить к странице любым удобным способом внешний стилевой файл с новыми значениями только нужных переменных (тем же виджетом «HTML блок»).
К примеру, переопределяем только цвета. Тогда содержимое дополнительного файла будет такое:
:root{--pioneer-primary-angle: 0;}
Чтобы не плодить дополнительные файлы, можно вывести переменную тегом <style>:
<style>:root{--pioneer-primary-angle: 0;}</style>
Следует иметь ввиду, что второй вариант подключения (через <style>) не валиден (хоть и обрабатывается практически всеми браузерами). Каким воспользоваться, — решайте сами.
На демке несколько разделов подкрашены как изменением значения всего лишь одной переменной, так и нескольких. Пройдитесь по пункам меню. Демка здесь.
Всем удачи!
Прикреплённый файл:
Реклама #
Алексей Т 2 года назад #
Приятный современный вид приобрел наш Модерн + в карму. Думаю в таком стиле можно продолжать делать и другие шкурки для модерна.
Melon 2 года назад #
Для кого?
Melon 2 года назад #
Интересно сколько времени пройдёт прежде чем в блогах я увижу шаблон не хуже модерна. Может я просто старею и становлюсь ворчливым...
Алексей Т 2 года назад #
Чем он хуже?
Melon 2 года назад #
Это как с одеждой, вроде у обоих пиджак, но один из них хочется одеть, а второй нет.
Алексей Т 2 года назад #
Верно, это называется есть из чего выбрать.
Melon 2 года назад #
К сожалению, нет из чего выбрать. Ну лично для меня, никому свое мнение не навязываю.
Fuze 2 года назад #
На самом деле это вкусовщина. Для меня лично, если отбросить расцветку (хотя понятно, что это просто показан сам функционал), то вроде и ничего, аля фейсбук-стайл.
Melon 2 года назад #
Это понятно, что на вкус и цвет все фломастеры разные. Непонятно почему на любой другой cms есть платные шаблоны в ногу со временем и с адекватной поддержкой. А на инстанте, лично на мой взгляд, лучшим является новый дефолтный. Все эти раскраски, закруглялки и ничего более. Вроде Make начинал что-то делать, но быстро скуксился и пока не вышел на нужный уровень по качеству. Вроде есть незаполненная ниша, а занять ее никто не хочет. Нет ни одного специализированного шаблона под видео или каталог организаций (а это вроде как основные премиум компоненты. Это все конечно не относится напрямую к данной разработке, но все же.
Сергей 2 года назад #
На мой взгляд, это хороший свитер, пиджаки вообще не люблю. Натянул его, всё можно идти, по больше таких свитеров. Модерн очень туго заходит, по крайней мере, у меня, думаю я не один такой.😂
Panda58dev 2 года назад #
Мне очень понравилось, благодарю за работу!
Как я понимаю «закругления» можно менять в разных ТК?
Melon 2 года назад #
Справа вариант напомнил мне шаблон для 1 ветки бесплатный был в каталоге, спасибо за ностальгию, помню был он у меня на одном сайте-форуме.
Panda58dev 2 года назад #
Да не, левое — прям чёткое закругление, стандартный modern выглядит как шаблон из 2016-го, как прямой наследник metro-интерфейса, а тут прям красота!
Олег Васильевич я 2 года назад #
RSN 2 года назад #
Для одного проекта хотел что то подобное (со скруглялками и пробелами между блоками), а тут готовый… Красота))
Спасибо!
Олег Васильевич я 2 года назад #
Олег Васильевич я 2 года назад #
Сергей 2 года назад #
Олег Васильевич, благодарю за готовое решение, пригодится точно! По сути, я бы неделю колупался, и не факт что получилось, я тут раз и готово.
Capitan 2 года назад #
А в Верхнем ряду это у вас готовый виджет с иконками соц сетей? Или код в хтмл виджете?
Поделитесь?
Олег Васильевич я 2 года назад #
Ьascal 2 года назад #
Спасибо Олегу Васильевичу за ещё один инструмент для работы с Инстантом!
Разобрался, как использовать и поделюсь с сообществом.
Основной цвет шапки и подвала сайта выставляется в файле templates\modern\css\skin\pioneer.css
Цвет можно подобрать тут.
Jestik 2 года назад #
А как вывести слайдер, так как на демке? А то у меня вот так выходит:
Олег Васильевич я 2 года назад #
Lord 2 года назад #
А шаблон modern где скачать?
Алексей Т 2 года назад #
Он в системе по умолчанию идет
lakomet 1 год назад #
После установки скина, цвет фона стал серый, а все блоки(виджеты, тело записи и т.д.) прозрачные. Что нужно прописать(и куда), чтоб блоки были белыми и не прозрачными?
RSN 1 год назад #
Так пробовали (выставить в виджете)?
Для тела страницы, в сетке шаблона, надо поставить селекторы: pioneer_wd pioneer_wd__controller
так:
В описании разработки под спойлером написано, что и где добвляется… В принципе надо на месте кое что поправлять, а в целом скин работает...