Перейти к содержимому


Фотография
* * * * * 1 Голосов

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


Лучший Ответ 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х классов + тег или псевдокласс.

 

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

Перейти к сообщению


Сообщений в теме: 61

#11 isay777

isay777

Отправлено 27 August 2015 - 08:59

 

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

.my-container .my-div .jbfilter label

 

Забыл еще !important ))))

 

И да, частично не сработает. 

Ибо .my-container .my-div .jbfilter label - будет твой 

а .my-container .my-div .jbfilter label:hover - уже не твой подхватиться 

 .jbfilter label:hover из less


Сообщение отредактировал isay777: 27 August 2015 - 09:00

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

#12 Михаил

Михаил

Отправлено 27 August 2015 - 09:20

Присоединяюсь к вопросу. Как сменить порядок загрузки css от jbzoo?

 

Сначала грузятся css от шаблона, а потом подгружаются от jbzoo. Логичнее было бы все таки css подгружать после, т.к. все таки мы шаблоном перезаписываем или наследуем стили.

Понятное дело что можно использовать id а не классы, использовать !important, можно удалять требуемые стили в less jbzoo, но при апдейте все затрется. 

А смена порядка решит большинство вопросов в определении стилей шаблона я полагаю.


  • 0

#13 woodman

woodman

Отправлено 27 August 2015 - 09:25

а .my-container .my-div .jbfilter label:hover - уже не твой подхватиться

 

вот так можно

.my-container .my-div .jbfilter label {

    &:hover {

    }
}

  • 1

#14 SmetDenis

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х классов + тег или псевдокласс.

 

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


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



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


#15 isay777

isay777

Отправлено 27 August 2015 - 09:39

вот он долгожданный мануал по less  )))

 

 

 

вот так можно

.my-container .my-div .jbfilter label {

    &:hover {

    }
}

это если ты верстаешь на less - это раз 

Если ты знаешь что там ховер - это два 

А там еще бефор и фтер - это три 

 

Думаю ответ от Дениса вполне устроит 


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

#16 SmetDenis

SmetDenis

Отправлено 27 August 2015 - 09:51

На мануал не тянет, скорее развернутый ответ :)

Но если ответил на вопрос - ок.

 

Поднял топик, чтобы другие видели.


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



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


#17 isay777

isay777

Отправлено 27 August 2015 - 09:52

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

 

это уже сняло массу вопросов 


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

#18 Nav

Nav

Отправлено 09 September 2015 - 15:37

Спасибо. Вопросы были такие же. Ответ понимал где искать, но не всегда это было просто. Сейчас все ясно, где и что лежит.


  • 0

#19 andrey.koch

andrey.koch

Отправлено 01 October 2015 - 18:33

 

Если стили относятся к шаблону модуля, то скорее всего файл лежит тут
Например для модуля формы фильтра все лежит тут modules\mod_jbzoo_search\assets\less\filter.less

 

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

 

Для чайника поясните пожалуйста, как переопределить этот файл стилей?


  • 1

#20 andrey.koch

andrey.koch

Отправлено 04 October 2015 - 17:36

Чё там, как?  ;)

 

Если найдётся минутка подскажите пожалуйста. 

 

isay убери пожалуйста метку, что вопрос решен.


  • 0




Click to return to top of page in style!