Подскажите, плиз. Как в дефолтном шаблоне ( http://opencart-russia.ru/demo3020/ ) на главной странице растянуть основное меню во всю ширину экрана? Что бы категории в меню остались на своих местах. И всё остальное на странице, соответственно тоже осталось на своих местах, кроме ширины основного меню.
тема · 4 715 просмотров · 13 ответов
Как в дефолтном шаблоне на главной странице растянуть основное меню во всю ширину экрана?
Дизайн, оформление и шаблоны
Судя по главному скриншоту, этот модуль растягивает меню на всю ширину. Правда, следующий скриншот это не подтверждает...
Попробуйте и, если не затруднит, отпишитесь.
Попробуйте и, если не затруднит, отпишитесь.
в шаблоне меню, изменить conteiner на container-fluid
SiteMix написал(а): ↑Судя по главному скриншоту, этот модуль растягивает меню на всю ширину. Правда, следующий скриншот это не подтверждает...
Попробуйте и, если не затруднит, отпишитесь.
Модуль растягивает, но не до конца. К тому же категории сместились влево.
Вложения · 1
Это же обычная задача верстки. Обернуть в див, задать фон, потом уменьшить отступ... итд.
А то что посоветовали, это просто растягивает контейнер во всю ширину, но не делает всю работу за вас.
А то что посоветовали, это просто растягивает контейнер во всю ширину, но не делает всю работу за вас.
Не меняйте, а оберните в div с любым классом, например full
Задайте такой же фон
а у меню, уменьшите отступ
но для блока выше добавить отступ, т.е получим
если с градиентом, то подсмотрев стили меню, добавить
Задайте такой же фон
code
.full {
background: #229ac8;
}а у меню, уменьшите отступ
code
#menu {
margin-bottom: 0;
}но для блока выше добавить отступ, т.е получим
code
.full {
background: #229ac8;
margin-bottom: 20px;
}если с градиентом, то подсмотрев стили меню, добавить
code
background-color: #229ac8;
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
background-repeat: repeat-x;
border-color: #1f90bb #1f90bb #145e7a;Romans написал(а): ↑в шаблоне меню, изменить conteiner на container-fluid
...\catalog\view\theme\default\template\common\menu.twig
вторая строка
<div class="container"> изменил на <div class="container-fluid">
Подчистил куки, кэш.
На главной странице ни чего не изменилось, главное меню шире не стало.
Ravilr написал(а): ↑Редактируете через админку? Вертайте все назад и редактируйте через фтп. Даже если редактируете через фтп, все равно необходимо все восстановить изменения через админку.
Пока не редактирую. По вашей информации пытаюсь разобраться, что к чему. Не могу понять что нужно оборачивать в div? И в каких файлах это находится? Просто я в этом деле совершенно Незнайка.
Можете меня ткнуть носом в конкретный файл и показать, что на что нужно заменить?
Как то раз один человек мне помог, и сразу выиграл крупную сумму в лотерею.
Ravilr написал(а): ↑Это же обычная задача верстки. Обернуть в див, задать фон, потом уменьшить отступ... итд.Обычная она для того кто понимает. А ТС не из таких, раз задал вопрос.
А то что посоветовали, это просто растягивает контейнер во всю ширину, но не делает всю работу за вас.
Тот модуль, кстати, примерно так делает - оборачивает в див. Только это делает через *опу, на мой вгляд. Тем не менее, по итогу должен получиться обёрнутый container, судя по коду. Правда, я смотрел версию для "двойки", но, полагаю, и для "тройки так же сделано".
В общем, после трёх дней научного тыка, растянул главное меню таким образом:
1)
Сначала убрал радиус, путём добавления:
*{
border-radius: 0px !important;
}
в конец файла .../catalog/view/theme/тема/stylesheet/stylesheet.css
Получилось вот так: (рис.1)
2)
По ftp редактируем файл:
...\catalog\view\theme\default\template\common\menu.twig
и в строке 2:
<div class="container">
"container" меняем на "container-fluid"
должно получиться:
<div class="container-fluid">
сохраняем.
Обновляем сайт, проверяем изменения – их нет.
Чтоб изменения вступили в силу, нужно произвести следующие действия:
3)
Заходим в админпанеь магазина:
Дизайн > Редактор шаблона > Выбрать шаблон > common > menu.twg
появляется отредактированный текст (рис.2).
Сохраняем его. Теперь изменения вступят в силу.
Главное меню будет выглядеть таким образом (рис3):
Меню растянулось, но по краям остались отступы.
Чтоб от них избавиться, я сделал следующее:
Откроем файл: ...\public_html\catalog\view\javascript\bootstrap\css\bootstrap.min.css
Поиском находим этот отрезок:
.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
(рис.4)
и в двух местах 15px меняем на 0px
должно получиться:
.container-fluid{padding-right:0px;padding-left:0px;margin-right:auto;margin-left:auto}
Сохраняем. Меню должно растянуться во весь экран (рис.5).
Единственная проблема, в мобильной версии отступы тоже пропали (рис6):
Господа Знайки. Как теперь в дефолтном шаблоне, после проведённых вышеперечисленных манипуляций, вернуть категории на прежнее место? А ещё лучше, чтоб начало первой категории и конец последней категории, были вровень ширины баннера.
Плиз, объясните это популярным языком, чтоб даже я Незнайка, смог внести изменения.
Судя по количеству просмотров, тема актуальна. Тем более сейчас почти все нормальные сайты имеют гл. меню во всю ширину экрана. Вот популярные сайты: https://www.reg.ru/https://beget.com/ruhttps://www.one.com/
1)
Сначала убрал радиус, путём добавления:
*{
border-radius: 0px !important;
}
в конец файла .../catalog/view/theme/тема/stylesheet/stylesheet.css
Получилось вот так: (рис.1)
2)
По ftp редактируем файл:
...\catalog\view\theme\default\template\common\menu.twig
и в строке 2:
<div class="container">
"container" меняем на "container-fluid"
должно получиться:
<div class="container-fluid">
сохраняем.
Обновляем сайт, проверяем изменения – их нет.
Чтоб изменения вступили в силу, нужно произвести следующие действия:
3)
Заходим в админпанеь магазина:
Дизайн > Редактор шаблона > Выбрать шаблон > common > menu.twg
появляется отредактированный текст (рис.2).
Сохраняем его. Теперь изменения вступят в силу.
Главное меню будет выглядеть таким образом (рис3):
Меню растянулось, но по краям остались отступы.
Чтоб от них избавиться, я сделал следующее:
Откроем файл: ...\public_html\catalog\view\javascript\bootstrap\css\bootstrap.min.css
Поиском находим этот отрезок:
.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
(рис.4)
и в двух местах 15px меняем на 0px
должно получиться:
.container-fluid{padding-right:0px;padding-left:0px;margin-right:auto;margin-left:auto}
Сохраняем. Меню должно растянуться во весь экран (рис.5).
Единственная проблема, в мобильной версии отступы тоже пропали (рис6):
Господа Знайки. Как теперь в дефолтном шаблоне, после проведённых вышеперечисленных манипуляций, вернуть категории на прежнее место? А ещё лучше, чтоб начало первой категории и конец последней категории, были вровень ширины баннера.
Плиз, объясните это популярным языком, чтоб даже я Незнайка, смог внести изменения.
Судя по количеству просмотров, тема актуальна. Тем более сейчас почти все нормальные сайты имеют гл. меню во всю ширину экрана. Вот популярные сайты: https://www.reg.ru/https://beget.com/ruhttps://www.one.com/
А теперь возвращайте все обратно и делайте так как я описал выше. Это хорошо, что вы сделали сами, но это неправильно.
1. Большая ошибка трогать bootstrap.css
2. Стили добавляем только в stylesheet.css
3. Чтобы не нажимать Дизайн > Редактор шаблона итд , не нужно там трогать шаблон. Из истории удалите изменения.
1. Большая ошибка трогать bootstrap.css
2. Стили добавляем только в stylesheet.css
3. Чтобы не нажимать Дизайн > Редактор шаблона итд , не нужно там трогать шаблон. Из истории удалите изменения.
Чтобы ответить, войдите или зарегистрируйтесь.