Pioneer - скин для шаблона modern

+16
2.21K
Pioneer - скин для шаблона modern

В основе работы — 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>) не валиден (хоть и обрабатывается практически всеми браузерами). Каким воспользоваться, — решайте сами. 

На демке несколько разделов подкрашены как изменением значения всего лишь одной переменной, так и нескольких. Пройдитесь по пункам меню. Демка здесь.

Всем удачи!

Прикреплённый файл:
Скачать 17 Кбскачан 71 раз
0
Алексей Т Алексей Т 2 года назад #

Приятный современный вид приобрел наш Модерн + в карму. Думаю в таком стиле можно продолжать делать и другие шкурки для модерна.

0
Melon Melon 2 года назад #

Для кого?

0
Melon Melon 2 года назад #

Интересно сколько времени пройдёт прежде чем в блогах я увижу шаблон не хуже модерна. Может я просто старею и становлюсь ворчливым...

0
Алексей Т Алексей Т 2 года назад #

Чем он хуже?

0
Melon Melon 2 года назад #

Это как с одеждой, вроде у обоих пиджак, но один из них хочется одеть, а второй нет.

+2
Алексей Т Алексей Т 2 года назад #

Верно, это называется есть из чего выбрать.

0
Melon Melon 2 года назад #

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

+1
Fuze Fuze 2 года назад #

К сожалению, нет из чего выбрать.

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

0
Melon Melon 2 года назад #

Это понятно, что на вкус и цвет все фломастеры разные. Непонятно почему на любой другой cms есть платные шаблоны в ногу со временем и с адекватной поддержкой. А на инстанте, лично на мой взгляд, лучшим является новый дефолтный. Все эти раскраски, закруглялки и ничего более. Вроде Make начинал что-то делать, но быстро скуксился и пока не вышел на нужный уровень по качеству. Вроде есть незаполненная ниша, а занять ее никто не хочет. Нет ни одного специализированного шаблона под видео или каталог организаций (а это вроде как основные премиум компоненты. Это все конечно не относится напрямую к данной разработке, но все же.

0
Сергей Сергей 2 года назад #

На мой взгляд, это хороший свитер, пиджаки вообще не люблю. Натянул его,  всё можно идти, по больше таких свитеров. Модерн очень туго заходит, по крайней мере, у меня,  думаю я не один такой.😂

0
Panda58dev Panda58dev 2 года назад #

Мне очень понравилось, благодарю за работу!
Как я понимаю «закругления» можно менять в разных ТК?
ИзображениеИзображение

0
Melon Melon 2 года назад #

Справа вариант напомнил мне шаблон для 1 ветки бесплатный был в каталоге, спасибо за ностальгию, помню был он у меня на одном сайте-форуме.

0
Panda58dev Panda58dev 2 года назад #

Да не, левое — прям чёткое закругление, стандартный modern выглядит как шаблон из 2016-го, как прямой наследник metro-интерфейса, а тут прям красота!

Олег Васильевич я Олег Васильевич я 2 года назад #
Комментарий удален
+1
RSN RSN 2 года назад #

Для одного проекта хотел что то подобное (со скруглялками и пробелами между блоками), а тут готовый… Красота))

Спасибо!

Олег Васильевич я Олег Васильевич я 2 года назад #
Комментарий удален
Олег Васильевич я Олег Васильевич я 2 года назад #
Комментарий удален
+1
Сергей Сергей 2 года назад #

Олег Васильевич, благодарю за готовое решение, пригодится точно! По сути, я бы неделю колупался, и не факт что получилось, я тут раз и готово.

0
Capitan Capitan 2 года назад #

А в Верхнем ряду это у вас готовый виджет с иконками соц сетей? Или код в хтмл виджете?
Поделитесь?

Олег Васильевич я Олег Васильевич я 2 года назад #
Комментарий удален
+1
Pascal Pascal 2 года назад #

Спасибо Олегу Васильевичу за ещё один инструмент для работы с Инстантом!

Разобрался, как использовать и поделюсь с сообществом.

Основной цвет шапки и подвала сайта выставляется в файле templates\modern\css\skin\pioneer.css

  1. --pioneer-primary-angle: 213;
  2. --pioneer-primary-saturation: 50%;
  3. --pioneer-primary-lightness : 45%;

Цвет можно подобрать тут.

0
Jestik Jestik 2 года назад #

А как вывести слайдер, так как на демке? А то у меня вот так выходит:
Изображение

Олег Васильевич я Олег Васильевич я 2 года назад #
Комментарий удален
0
Lord Lord 2 года назад #

А шаблон modern где скачать?

0
Алексей Т Алексей Т 2 года назад #

Он в системе по умолчанию идет

0
lakomet lakomet 1 год назад #

После установки скина, цвет фона стал серый, а все блоки(виджеты, тело записи и т.д.) прозрачные. Что нужно прописать(и куда), чтоб блоки были белыми и не прозрачными? 

0
RSN RSN 1 год назад #

Так пробовали (выставить в виджете)?

Изображение

Для тела страницы, в сетке шаблона, надо поставить селекторы: pioneer_wd pioneer_wd__controller

Изображение

так:

Изображение

В описании разработки под спойлером написано, что и где добвляется… В принципе надо на месте кое что поправлять, а в целом скин работает...

Еще от автора

Одна ёлка, немного снега и два Деда, играющихся в прятки
Ещё один вариант новогоднего украшения. Пока не замылено в сети (на эту минуту стоит только на 2-х сайтах)
Новогодние скидки
Всё платное за 50%
Подсветим родительские пункты в меню
Небольшая правка, которая поможет повысить юзабилити
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.