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

+16
1.44K
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 Кбскачан 39 раз
0
Алексей Т Алексей Т 3 месяца назад #

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

0
Melon Melon 3 месяца назад #

Для кого?

0
Melon Melon 3 месяца назад #

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

0
Алексей Т Алексей Т 3 месяца назад #

Чем он хуже?

0
Melon Melon 3 месяца назад #

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

+2
Алексей Т Алексей Т 3 месяца назад #

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

0
Melon Melon 3 месяца назад #

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

+1
Fuze Fuze 3 месяца назад #

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

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

0
Melon Melon 3 месяца назад #

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

0
Сергей Сергей 3 месяца назад #

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

0
Panda58dev Panda58dev 3 месяца назад #

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

0
Melon Melon 3 месяца назад #

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

0
Panda58dev Panda58dev 3 месяца назад #

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

+3
Олег Васильевич я Олег Васильевич я 3 месяца назад #

Мне очень понравилось, благодарю за работу!

И вам спасибо за отзыв! Правда, я игрался, чтобы не работать))

Мне очень понравилось, благодарю за работу!

Да на любой странице можно всё изменить (и не только цвета и округление)

+1
RSN RSN 3 месяца назад #

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

Спасибо!

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

Изменил пару переменных. Немножко функциональнее будет. Перекачайте, кому нужно

+1
Сергей Сергей 3 месяца назад #

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

0
Capitan Capitan 3 месяца назад #

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

0
Олег Васильевич я Олег Васильевич я 3 месяца назад #

Там чистая система, установленная  с демо-данными. Если не ошибаюсь, в каталоге дополнений видел подобный виджет

+1
Pascal Pascal 3 месяца назад #

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

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

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

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

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

0
Jestik Jestik 3 месяца назад #

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

0
Олег Васильевич я Олег Васильевич я 3 месяца назад #

По скрину тяжело определить. Для начала попробуйте виджету на вкаладке «Дизайн» в опции «Шаблон контейнера» указать «Без шаблона контейнера». Или дайте глянуть живьём

0
Lord Lord 1 месяц назад #

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

0
Алексей Т Алексей Т 1 месяц назад #

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

Еще от автора

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