Jump to content


Photo
* * * * * 1 votes

Актуальная тема assets jbzoo css и less

Started by isay777 , Aug 20 2015 21:10

Best Answer SmetDenis , 27 August 2015 - 09:25

Стили можно разделить на 4 группы

  • Панель управления (подключаются всегда всей пачкой для ПУ)
  • Фреймворк (UIkit, BS, итд... тут все очевидно)
  • Общие стили, виджеты, корзина
  • Стили шаблона

Полагаю вопрос возникает по последним 2м пунктам.

Все общие стили находятся тут, подключаются по мере необходимости.
media\zoo\applications\jbuniversal\assets\less

Внутри можно найти папки

  • admin - стили панель управления
  • cart - все для корзины, выделено отдельно т.к это довольно большой пласт стилей.
  • general - самые-самые глобальные стили, вроде простейших колонок и clearfix
  • media - стили для мобильной версии
  • misc - коллекция примесей
  • widget - стили для JS-виджетов.

Less-файлы в корне являются чем то вроде загрузщиков (точкой входа), которые импортируют файлы из папок.

 

Соответственно, если мы хотим переопределить стили для jbcolor (виджет переключателя цветов), то идем в папку widget. находим файл colors.less

Чтобы не менять файл ядра, копируем его в наш текущий шаблон. Он подключится сам.

media\zoo\applications\jbuniversal\templates\<ШАБЛОН>\assets\less\widget\colors.less

 

Так же переопределение работает почти для всех общих стилей (за исключением самых-самых системных...)

 

Если стили относятся к шаблону модуля, то скорее всего файл лежит тут

Например для модуля формы фильтра все лежит тут modules\mod_jbzoo_search\assets\less\filter.less

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

efy5_200x0.png

 

 

Если включить режим отладки, убрать сжатие и объединение (т.е перейти в режим разработки), то по названию файла и классам легко понять что происходит, где искать...

 

Название классов у нас формируется примерно следующим образом

.jbzoo .<ИМЯ БЛОКА>
.jbzoo .<ИМЯ БЛОКА>-<ИМЯ ВЛОЖЕННОГО КЛАССА>
.jbzoo .<ИМЯ БЛОКА>-<ИМЯ ВЛОЖЕННОГО КЛАССА> div:hover 

 

jbzoo - это обязательное пространство имен.

В идеале специфичность должна быть не более 2х классов + тег или псевдокласс.

 

Поэтому если не получается переопределить, то можно добавить специфичности классом или тегом. Тут уже по обстоятельствам.

Go to the full post


61 replies to this topic

#1 isay777

isay777
  • JBZoo User (rus)
  • User rate: 113.4
  • posts: 1878
  • topics: 232

Posted 20 August 2015 - 21:10

Очень важный и актуальный вопрос как сделать так, чтоб jbzoo не перезаписывал свои стили, а шел к примеру первым в списке css?

 

Очень часто не возможно переназначить css от jbzoo. Как css не вставляй хром или другой браузер подхватывает именно jbzoo`шный css. Я не знаю почему. 

 

 

 


  • 0
ХОСТИНГ для сайтов jbzoo (все попугаи)

#2 SmetDenis

SmetDenis
  • Administrators
  • User rate: 139.4
  • posts: 16232
  • topics: 200

Posted 21 August 2015 - 07:00

Все очень просто.
Достаточно знать как работает специфичность в CSS - http://htmlbook.ru/s.../kaskadirovanie

Нужно использовать правильные селекты для своих стилей.
Я бы рекомендовал обрамлять своим id т.к это имеет больший приоритет чем класс.
Мы используем везде классы, поэтому проблем быть не должно.

Соответственно, порядок в CSS играет роль только в одном случае - совпадает специфичность селекторов.
  • 1
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.

#3 isay777

isay777
  • Topic Starter
  • JBZoo User (rus)
  • User rate: 113.4
  • posts: 1878
  • topics: 232

Posted 21 August 2015 - 09:55

Денис спасибо за ответ. Но вопрос не в том чтоб прописывать везде свои id, хотя конечно это выход и он понятен. 

 

Я спрашиваю как сделать наименьший приоритет всем стилям jbzoo? Т.е. подключить jbzoo.css первым в шапки к примеру? 


  • 0
ХОСТИНГ для сайтов jbzoo (все попугаи)

#4 SmetDenis

SmetDenis
  • Administrators
  • User rate: 139.4
  • posts: 16232
  • topics: 200

Posted 21 August 2015 - 09:58

Т.е. подключить jbzoo.css первым в шапки к примеру?

Так если от порядка подключения стили не зависят, то какая разница первый он или нет?
  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.

#5 isay777

isay777
  • Topic Starter
  • JBZoo User (rus)
  • User rate: 113.4
  • posts: 1878
  • topics: 232

Posted 21 August 2015 - 10:06

Ок. Каким-то образом можно сделать наименьший приоритет для стилей jbzoo? 

 

или еще вопрос, я как-то могу увидеть css без Less (я не про выключатель less в админке).  Отключить кэширование готово css из less, чоб он лежал в обычной папке а не имел вид 

default-33a1648fa76283c698d8be4552cce5650.css

в кжше? 

 

PS Для меня к примеру в less найти хоть какой-нить стиль большая проблема т.к. мой дримвьювер ничерта внутри less не видит. Пора новый ставить я чую.


  • 1
ХОСТИНГ для сайтов jbzoo (все попугаи)

#6 SmetDenis

SmetDenis
  • Administrators
  • User rate: 139.4
  • posts: 16232
  • topics: 200

Posted 27 August 2015 - 08:37

CSS не существует в чистом виде, он всегда собирается из less и далее кешируется, отслеживает изменения.

Если включить режим отладки, то там будет видно список файлов, которые используются.
f9nx_200x0.png

Т.к для разных страниц набор статики может быть разным, а подключать все сразу вредно (+200-400кб).
Поэтому ссылка зависит от списка файлов, которые были включены - это хеш + название группы файлов.

Приоритет не задать, т.к его нету. Есть специфичность - http://htmlbook.ru/s.../kaskadirovanie
  • 1
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.

#7 isay777

isay777
  • Topic Starter
  • JBZoo User (rus)
  • User rate: 113.4
  • posts: 1878
  • topics: 232

Posted 27 August 2015 - 08:44

Ясно... 

 

Но вот из последнего... Вот мне надо поправить стиль jbzoo к примеру и сделать вместо зеленого синий. 

В своем css строго прописываю синий. Подхватывается зеленый из less.... 

Ну не лезть же в хелпер с добавлением id из-за цвета... Пошел искать в less. А как узнать в каком именно? 

Поиск результатов не дает в связи с особенностью написания классов в less. И как быть? 

 

Обычно приходиться колдовать с css и придумывать хитрости, добавлять id в предыдущие элементы или элементы jbzoo. 

По моему не айс. 

 

Ну или подскажите как искать классы в лесс, когда он состовной?  


  • 0
ХОСТИНГ для сайтов jbzoo (все попугаи)

#8 SmetDenis

SmetDenis
  • Administrators
  • User rate: 139.4
  • posts: 16232
  • topics: 200

Posted 27 August 2015 - 08:46

Хорошо.

Например, какой класс ищем?
  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.

#9 isay777

isay777
  • Topic Starter
  • JBZoo User (rus)
  • User rate: 113.4
  • posts: 1878
  • topics: 232

Posted 27 August 2015 - 08:55

На вскидку плохо помниться. 

 

Ну вот к примеру парочка 

jbcolor-label div:hover


или .jbzoo .jbfilter label

  • 0
ХОСТИНГ для сайтов jbzoo (все попугаи)

#10 woodman

woodman
  • JBZoo User (rus)
  • User rate: 38.4
  • posts: 648
  • topics: 59

Posted 27 August 2015 - 08:57

я обычно каскадно меняю в таком случае, т.е. в css пишу

.my-container .my-div .jbfilter label

  • 1
Back to JBZoo 220v - High Voltage


  1. JBZoo Community
  2. → Основной форум JBZoo
  3. → Корзина, цены и форма заказа
  4. → JBZoo 220v - High Voltage
  5. Privacy Policy
Click to return to top of page in style!