Разработка интернет-магазина на Joomla. Урок №14. Хлебные крошки и блок сортировки товаров

Автор Ivan Samoilov
Разработка интернет-магазина на Joomla. Урок №14. Хлебные крошки и блок сортировки товаров

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

Итак начнем первое, что нужно сделать — это значок флеша. Давайте искать связь между этими элементами который в себе содержит Flash так. Так мы будем инспектировать самый элемент со слоном так.

Итак Слышь добавляется у нас следующим образом с помощью контент.

Давайте чтобы определить отправила добавим. Почему модулю хлебных крошек какой-либо глаз так добавим суффикс класса модуля допустим такой сохраняем. Ив таблица стилей пишем следующие правила так. Лебедев А вот — это прям будем сейчас переопределять так контент присвоить пустоту смотрим. Что у нас получилось есть и нам. Остаётся только избавиться от этого значка значка маркера списка давайте сделаем следующим образом. А — это у нас получился то, что мы здесь пробежка непостоянно склейка произошла ещё раз охраняем посмотрим. Отлично Теперь нам остается только оформить все остальные элементы цветом предлагаю сделать ссылки черном так вот не совсем чёрные ты близки к чёрному сотку так и прописал. Это для ссылок готова смотрим есть и нам ещё неплохо увеличить размер текста так бонсай 16 так проверяем следующее, что мы хотим сделать — это сделать верхний отступ. Обращаемся к самому главному контейнеру то есть модуля фотоблог прописан в среду ещё правила. Как пишется слитно margin-top 515 есть проверяем всё блок, а нет ещё у нас оформленный получился блок на сером фоне если прекратить увидеть удаляем цвет переопределяет точнее цвет так background-color transparent Border радиус Pixel посмотрим, что получается так похожим применили не к тому элементу применять надо было на уровень ниже следующий элемент за ним можно сделать вот так Def следующий есть так опять же у нас правила не переводилась так, а потому что. Угол Логично так сделаем смотрим. Теперь всё как нам нужно их. Единственное, что в у нас не такой большой отступ от первого элемента можем его сократить да то есть вот здесь уберём fading padding Right Left padding есть и применяют так готова следующее, что мы должны сделать — это присвоить стиль и всем заголовкам заголовки у нас будут один уровень иметь они так и есть H1 так и. Обращаемся к нашим заголовком будут иметь вот такой стиль такие стиль и будем обращаться через ID. Прочитайте H1 кто так проверяю H1 и нам осталось увеличить размер шрифта, а давайте поставим 20 6 пикселей вот так. Ну и такой большой отступ нам тоже уже ни к чему сверху то есть мы можем отступ сверху вот так сделать вот Apple Watch дети наши правила готово с верхним блоком разобрались предлагаю разобраться также с блоком в следующем сортировке у нас съезжают не блоков, а именно съезжает блок в следующий так сижу и блока сортировки и блок количество то есть у нас формы, а не налазит на их сделаем — это следующим образом вот наша стиля который будет двигать наши блоки сделаем — это также задвигал так и применим так и так как — это всё находится внутри этого класса у нас всё будет корректно работать отлично и то же самое делаем насчёт количество так находим количество. Где применяют узбек 90 пиксели есть и смотрим. Что у нас получилось отлично. А теперь нам остается только сортировки наши уже работают нам. Остаётся только. Создать шаблон для оформления товаров списка товаров карточек товаров снова магазинов для этого переходим в наш компонент от нашего магазина, а не магазина вообще сайта заходит папочку компонент находим папку Content blocking, а папочку этим Place и видим, а шаблон default стандартный шаблон. Дело в том, что при обновление компонентов шопинг вот этот шаблон defaultapppool задираться нам нужно переопределите вот так чтобы в изменения в нём были не затираем и сделаем — это вот так и назовём его к примеру mightyfools к примеру вот так. Отлично Теперь нам осталось применить именно этот шаблон для нашей для нашего магазина для этого переходим в настройки дом шопинга. Джон шоппинг в настройки и по-моему — это в общих так основных скорее всего настройках. Да шаблон по умолчанию default. Вот как раз он и есть моя default Stream и всё у нас будет хорошо прибавление лично обновляемся. Так у нас сейчас ползли некоторые стиля, а не страшно сейчас поправим так значит сортировка вот наш блог текстолит, а из-за того, что принялся bootstrap — это всё сработало Take Flight. Так значит наши правила до этого которому писали нам уже не пригодятся придётся их переопределить так и второе правило. А уже здесь так не получится готова то есть вот наш первый блок мы его делаем диск Display inline-block блок готова вот он стал уже не такой большой далее блок controls. Делаем его тоже Display inline-block отлично и убираем такой большой отступ вот так отлично вот сюда так и нам стоять ещё вот сюда добавить вот так Lanos смотрим, что получилось. Да и остаются на все вот эти блоки поставить один за другим делаем Display inline-block. Вот наши родительский контейнер. Вот первый элемент вот 2 и так значит бокс продукт сортировки так вот сюда есть сделаем его inline-block предлагаем поставить margin-right 20 пикселей на будущее так и то же самое делаем со следующим блоком вот он бокс product Count to Page так аналогия дисплей на LG.

0 комментариев
0

Читайте также