Стиль my css для Modern

InstantCMS 2.X
#1 13 августа 2021 в 14:31

Добрый. Может у кого есть за «пиво» изменения стиля фон + виджеты как здесь  ?

Изображение

Дочерний шаблон не хочется ...  + виджетик как в шаблоне light-news (кнопка ЛС, Профиль и тд)

#2 13 августа 2021 в 15:16

Общий фон был серый, а у виджетов белый? Сам понемногу двигаюсь в данном направлении пока смотреть почти не на что вот пример vkerchi.ru.

#3 13 августа 2021 в 15:25

Общий фон был серый, а у виджетов белый?

Nikolay

Примерно да. Или как у mail. ru

#4 13 августа 2021 в 15:56

Начал делать в категории Новости, просто одними стилями не получилось.

То что делал: для body и класса breadcrumb::after — задал серый цвет, далее чтобы не делать правку в файлах с помощью компонента SiteKreator и положительных масок задал белый фон для вывода записей новостей. Для списков новостей создал копию файла списка. Если такой вариант подойдёт опишу дальше.

#5 13 августа 2021 в 16:41

Через !important (приоритет стиля) не пробовали ? 

#6 13 августа 2021 в 16:44

Вот что попробовал.

1. Установил с GitHub последнюю версию, + демо данные.
2. В файле: templates/modern/main.tpl.php добавил (на строке 17):

  1. $this->addCSS('templates/modern/css/my.css', false);

3. По указанному выше пути (templates/modern/css/) создал пустой файл my.css с содержимым:

  1. @charset "UTF-8";
  2. body { background-color: #ddd; }
  3. .row .icms-widgets {
  4. margin-top: 10px;
  5. }
  6. .row .icms-widget,
  7. .row .card-header,
  8. .row .icms-widgets {
  9. background-color: #fff;
  10. padding: 10px;
  11. }

Что получилось для центральной.

Изображение

P.S. в админку не заходил, возможно фон можно назначить там для своей схемы.

Есть еще несколько путей реализации, например, через редактирование виджетов. Они же настраиваются (всё настраивается), и можно добавить css свой. Создать свое свойство, где фон белый, отступы. И этот код вставлять, например, описать white_box:

  1. .white_box {
  2. background-color: #fff;
  3. padding: 10px;
  4. }

И где надо просто добавлять его. Создать можно несколько таких сборных для себя, и в зависимости от условий их ставить в свои блоки на сайте. Пример (большие отступы, тень внизу):

  1. .white_box_broad {
  2. background-color: #fff;
  3. padding: 20px;
  4. box-shadow: 0 1px 3px rgb(18 18 18 / 10%);
  5. }

Огромное поле для деятельности и творчества.

#7 13 августа 2021 в 16:52

 Evg ну вот уже и не муха села на варенье, спасибо !

#8 13 августа 2021 в 16:59

Тут на самом деле просто понять, что и как делать. А далее, вставлять своё. Минимальные знания css необходимы, но это при желание можно выучить. Поэкспериментировать, специально файл отдельный. И там пишем, что угодно. Для контрастности обычно сперва фон тела документа (body) делают очень черным, чтобы сразу заместить разные косяки, потом можно смягчить. Привязываемся к css или стандартному, или где надо вставляем свои свойства в виджеты.

#9 13 августа 2021 в 17:01

Менял light-news, но как понимаю надо переходить на модерн из-за ряда компонентов ...

#10 13 августа 2021 в 18:21

Тут на самом деле просто понять, что и как делать.

Evg

Спасибо! С виджетами почти понятно, а как тоже самое сделать с типами контента, с выводом списка и записей, на  пример шаблон default_list_featured только чтоб блоки были раздельные а не на сплошном белом фоне?

#11 13 августа 2021 в 19:18

Смотрите, на самом деле предложенный выше способ с файлов оправдывает себя в 2 случаях. Первый — когда изменения минимальны, и второй — когда нет доступа к коду.  Такое бывает, когда хитрые разные приложения собирают и вообще нет возможности до него добраться. Но тут случай не такой же.

Переопределить все стили — это сложно и это долго. И самое главное, если вы в состояние переопределить таким образом весь сайт и отловить мелочи, то ваших знаний вполне хватит делать не так. 

Создайте свой шаблон!

  • Он будет свой и независимый. 
  • Вы можете править его, как в случае (выше) с файлом. 

Что вы теряете? Если что, вы перейдете на дефолтный. У вас будет доступ к файлам, вы сможете вносить правки туда, если что-то глобально надо исправить. 

Есть ещё один момент. Вот сейчас мы захотели сделать фон и белые коробки. А через 5 минут мы захотим ещё что-то. И захотим ведь! А с шаблоном мы получим максимальные возможности.

----------------------------------------------------------------

Добавим класс css свой, коробка белая:

  1. .white_box {
  2. background-color: #fff;
  3. padding: 10px;
  4. }

И задача сделать тело статьи. Идем в админку:

Изображение

Тут добавляем наш класс CSS (вкладка Дизайн) и видим:

Изображение

Как-то так. Это вот сходу если, как опираться на свои классы css. А когда свой шаблон мы можем всё использовать, что-то переопределить, что-то в админке прописать, да и файлы можно подправить. Уж тут точно можно всё до неузнаваемости изменить.

На первом фото вижу уже готовый шаблон. Может быть имеет смысл купить его, время сэкономим. Там же уже реализован фон и белые коробки.

#12 13 августа 2021 в 20:16

Как-то так. Это вот сходу если, как опираться на свои классы css. А когда свой шаблон мы можем всё использовать, что-то переопределить, что-то в админке прописать, да и файлы можно подправить. Уж тут точно можно всё до неузнаваемости изменить.

Evg

В шаблон типа контента default_list_featured добавил всего три класса

Изображение

К каждому классу теперь можно задавать свои стили для вывода колонок, в итоге получилось где то так:

Изображение

 

#13 13 августа 2021 в 20:21

В шаблон типа контента default_list_featured добавил всего три класса

Nikolay

Любой способ, путей много сделать. Главное, что правя свой шаблон мы не лишимся обновлений. Дефолтные шаблоны пусть останутся как образцы, чтобы можно будет к ним вернуться в любой момент, можно туда вообще не лезть, а в своем, ковыряться можно как угодно. 🐸

#14 13 августа 2021 в 20:38

В шаблон типа контента default_list_featured добавил всего три класса

Nikolay

Любой способ, путей много сделать. Главное, что правя свой шаблон мы не лишимся обновлений. Дефолтные шаблоны пусть останутся как образцы, чтобы можно будет к ним вернуться в любой момент, можно туда вообще не лезть, а в своем, ковыряться можно как угодно. 🐸

Evg

Так и делаю на дочернем шаблоне, чтоб при обновлении было меньше заморочек и стараюсь как меньше править файлы. пока потихоньку получается.

#15 13 августа 2021 в 20:46

Через !important (приоритет стиля) не пробовали ? 

noname

Максимальный приоритет для базовых стилей сайта, которые своими ручками и творим? Лихо!

В файле: templates/modern/main.tpl.php добавил (на строке 17):

Evg

Как вариант:

--------------------------------------------------------

Менял light-news

noname

Очередной раз прошу уточнить: вы покупали этот шаблон?

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.