Раскраска шаблона

InstantCMS 2.X
#1 15 ноября 2020 в 04:08
Решил начать осваивать новую версию Инстанта 2.14
Больше всего ждал ее из-за нового дефолтного шаблона. Сделал дочерний шаблон и попытался изменить его внешний вид......
Дальше вставки изображения вместо фона дело не пошло.
Старые Скины работают частично. Изменение цветов в настройках шаблона слишком глобально. Можно поменять цвет фона но вместе с изменение цвета заголовков, хлебных крошек и наверно еще чего то… Это совсем не то что хотелось бы.
Пробовал разобраться в файле theme.css но он вытянут в одну строку и очень сложно разобраться со структурой.

НУЖНА помощь!
1. Чем посмотреть файл theme.css, чтобы увидеть его структуру?
2. Может быть у кого то уже есть готовый Скин — файл css с настройками внешнего вида?
3. Может быть уже есть что почитать о том как в новом шаблоне управлять внешним видом? Настроек много. Судя по ним можно менять css прямо в сетке шаблона. Как это делать?

Возможно кому то вопросы покажутся глупыми, но в новом шаблоне у меня не получилось изменить даже шапку шаблона. Хотя в старом сам сделал скин и все работало. Все изменения пробовал реализовать через подключенный файл своих настроек my.css Файл подключен верно, из него фон меняется.
#2 15 ноября 2020 в 06:47

1. Чем посмотреть файл theme.css, чтобы увидеть его структуру?

vikont
Visual Studio Code
В Windows Shift + Alt + F
На Mac Shift + Option + F
В Linux Ctrl + Shift + I
#3 15 ноября 2020 в 11:23
vikont,
Не трогайте файл theme.css
Если надо что-то покрасить — допишите блоку класс цвета текста или бэкграунда, смотрите методы работы с цветами в бутстрапе:
bootstrap-4.ru/docs/4.0/utilities/colors/
Если уж очень хочется какой-то свой стиль добавить — напишите его в файл \templates\modern\scss\theme\_custom.scss, а потом зайдите в настройки шаблона и нажмите "Сохранить", чтобы применилось.
Если уж совсем хочется посмотреть theme.css — посмотрите:
/users/files/download7763.html
#4 15 ноября 2020 в 15:54

е трогайте файл theme.css
Если надо что-то покрасить — допишите блоку класс цвета текста или бэкграунда, смотрите методы работы с цветами в бутстрапе:
bootstrap-4.ru/docs/4.0/utilities/colors/
Если уж очень хочется какой-то свой стиль добавить — напишите его в файл \templates\modern\scss\theme\_custom.scss, а потом зайдите в настройки шаблона и нажмите "Сохранить", чтобы применилось.

Ris

Было бы наглядное руководство как это делать )) Сколько пробывал так и не получалось (
#5 15 ноября 2020 в 16:27


е трогайте файл theme.css
Если надо что-то покрасить — допишите блоку класс цвета текста или бэкграунда, смотрите методы работы с цветами в бутстрапе:
bootstrap-4.ru/docs/4.0/utilities/colors/
Если уж очень хочется какой-то свой стиль добавить — напишите его в файл \templates\modern\scss\theme\_custom.scss, а потом зайдите в настройки шаблона и нажмите "Сохранить", чтобы применилось.

Ris

Было бы наглядное руководство как это делать )) Сколько пробывал так и не получалось (

@alexandr22
Присоединяюсь! Этот вопрос всплывет не однократно и будет самым востребованным трендом на многие месяцы, особенно после выхода Инстанта версии 2.14.
А еще бы кто то из знатоков сделал Скин — шаблон. Файлик с набором наиболее востребованных стилей. Поменял в нем по своему усмотрению цвета, размеры, или картинку, применил и все работает.
#6 15 ноября 2020 в 17:26
vikont я так понимаю вы пользуетесь скинами от сайткреатора? instantcms.ru/addons/site-kreator.html
Если нет то как вы подключаете скины и что это такое.
#7 15 ноября 2020 в 17:53


vikont я так понимаю вы пользуетесь скинами от сайткреатора? instantcms.ru/addons/site-kreator.html
Если нет то как вы подключаете скины и что это такое.

Алексей
Да, на основе скинов сайтакреатора сделал свои и использую на своих сайтах через HTML блок.
На новой версии с новым шаблоном это ни так ни через подключение в main.php полностью не работает. Удалось подключить только картинку для фона, на этом и застрял.
#8 15 ноября 2020 в 20:02
Попробуйте скин /users/files/download7762.html
1 Разархивировать
2 Загрузить скин из файла

3 Активировать скин
4 Показывать на страницах
#9 15 ноября 2020 в 22:34


Попробуйте скин /users/files/download7762.html
1 Разархивировать
2 Загрузить скин из файла
3 Активировать скин
4 Показывать на страницах

Алексей
Спасибо. Я прекрасно знаю этот компонент. Но хочу обойтись без него. Тем более, что на шаблон modern старые скины не влияют. У меня не получилось.
И в ситуации, когда Креатор постоянно исчезает, это не лучший вариант.
#10 15 ноября 2020 в 23:10
vikont, мне кажется Вы пытаетесь подойти к шаблону на бутстрап, со старыми методами.
У бутстрапа многое прописывается не в css, а в классах.

Ris, выше Вам подсказал… там принцип примерно такой:

Есть код ссылки:
  1.  
  2. <p><a href="#">Ссылка</a></p>
  3.  
Добавили к ней например
  1.  
  2. <p><a href="#" class="text-warning">Ссылка</a></p>
  3.  
И ссылка стала оранжевым цветом, добавили в неё

  1.  
  2. <p><a href="#" class="text-warning text-right">Ссылка</a></p>
  3.  
И текст стал выравниваться справа… добавили туда же:

  1.  
  2. <p><a href="#" class="text-warning text-lg-right">Ссылка</a></p>
  3.  
И текст стал не только выравниваться с права, но и шрифт крупнее...
И так же стилизация, размер, цвет, блоков…

Это просто надо смотреть постоянно в указанной Ris шпаргалке...
Как и что задается…
#11 15 ноября 2020 в 23:36

Тем более, что на шаблон modern старые скины не влияют.

vikont
Я дал на новый скин ссылку для Инстант 2.14.0.- ну да ладно)))
#12 2 января 2021 в 11:13
Тоже потихоньку осваиваю новый шаблон Modern, начал с уроков по Bootstrap, дошел до переопределения переменных www.youtube.com/watch?v=R9Yrxlu6BFo. Возник вопрос какой способ правильнее и лучше для раскраски шаблона: Создать свой файл стилей и делать в нем правки или делать правки в файле _custom.scss???
#13 2 января 2021 в 17:00

Возник вопрос какой способ правильнее и лучше для раскраски шаблона: Создать свой файл стилей и делать в нем правки или делать правки в файле _custom.scss???

Nikolay
На мой взгляд, лучше сделать дочерний шаблон который будет наследоваться от Modern и править стили в нем, при обновлении системы ваш дочерний шаблон не будет затронут.
Так же, СДЕСЬ специально создавал тему про css классы на bootstrap — Ссылка на css классы. Пользоваться очень просто — в виджете, вкладка "Дизайн" вписываете любой класс, например bg-light, в Класс CSS для тела, для заголовка или контейнера....
Вообще, очень радуют последние обновления 2.14… можно не пользоваться дополнительными компонентами а делать все, можно сказать в коробке… Инструкций к bootstrap достаточно в сети...

Как сделать дочерний шаблон — смотрим сдесь!
#14 2 января 2021 в 17:12
Nikolay, правильнее будет сделать дочерний шаблон. Скопировать в него папку scss. И уже в ней править _custom.scss
Только в scss вы можете использовать переменные bootstrap.
Ну и в настройках шаблона в 2.14.1 появилась вкладка, посвященная переменным bootstrap
#15 25 марта 2021 в 15:38
Всем добра. Кто подскажет, как изменить размер иконки, выводимой через
  1. <?php html_svg_icon('solid', 'ruble-sign'); ?>
нужно задать размер 64х64 рх?
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.