Мобильная Тема
#1
Отправлено 24 Октябрь 2016 - 17:52
1) нижнее меню, контакты, и все их пункты сделать посередине
2) верхнее меню - сделать обычное вылетающее меню, где первая кнопка каталог, и ее можно развернуть при одном нажатии, и потом уже понвжимать на категории и попасть на них, а остальное просто пункты верхнего меню обычной версии которые ведут на свои страницы
3) чтобы в каталоге не отображались картинки категорий (чтобы меньше мотать) то есть зашли в салюты из бабочек, а там просто три кнопки, и ниже товары, то есть то же самое сейчас но без картинок.
4) в превью товаров то есть когда смотрим категорию, чтобы был не один товар в ряд во весь дисплей, а по два в ряд, тогда наверное придется делать кнопку не "добавить в корзину", а просто "в корзину"
Повторюсь все изменения должны касаться толкьо мобильной версии, Заранее спасибо!)
#2
Отправлено 25 Октябрь 2016 - 19:39
ProninT (24 Октябрь 2016 - 17:52) писал:
1) нижнее меню, контакты, и все их пункты сделать посередине
2) верхнее меню - сделать обычное вылетающее меню, где первая кнопка каталог, и ее можно развернуть при одном нажатии, и потом уже понвжимать на категории и попасть на них, а остальное просто пункты верхнего меню обычной версии которые ведут на свои страницы
3) чтобы в каталоге не отображались картинки категорий (чтобы меньше мотать) то есть зашли в салюты из бабочек, а там просто три кнопки, и ниже товары, то есть то же самое сейчас но без картинок.
4) в превью товаров то есть когда смотрим категорию, чтобы был не один товар в ряд во весь дисплей, а по два в ряд, тогда наверное придется делать кнопку не "добавить в корзину", а просто "в корзину"
Повторюсь все изменения должны касаться только мобильной версии, Заранее спасибо!)
Здравствуйте.
1.В файле main.css найдите
@media all and (max-width: 481px) {после добавьте
.block-contact .block-content {text-align: center!important;}2.Не совсем понял, как это должно работать, вместо кнопки( прикрепил скриншот) сделать полноценное меню
каталог(+категории при нажатии) и далее за ним следующие пункты меню.
3.В файле main.css найдите
@media all and (max-width: 481px) {после добавьте
.categories { display: none;}4.Уточните, пожалуйста, в каталоге товаров сделать во 2 в ряд вместо одного?(как на скриншоте)
Прошу Вас по возможности прислать скриншот необходимых изменений.
#3
Отправлено 26 Октябрь 2016 - 00:01
Mr.Nito (25 Октябрь 2016 - 19:39) писал:
1.В файле main.css найдите
@media all and (max-width: 481px) {после добавьте
.block-contact .block-content {text-align: center!important;}2.Не совсем понял, как это должно работать, вместо кнопки( прикрепил скриншот) сделать полноценное меню
каталог(+категории при нажатии) и далее за ним следующие пункты меню.
3.В файле main.css найдите
@media all and (max-width: 481px) {после добавьте
.categories { display: none;}4.Уточните, пожалуйста, в каталоге товаров сделать во 2 в ряд вместо одного?(как на скриншоте)
Прошу Вас по возможности прислать скриншот необходимых изменений.
ИЗВИНЯЮСЬ НЕ УКАЗАЛ МАГАЗИН! SBABOCHKAMI.ru
#4
Отправлено 26 Октябрь 2016 - 16:20
ProninT (26 Октябрь 2016 - 00:01) писал:
2. Найдите в файле main.css
#custommenu .mainnav li a.title-lv0 { display: block; font-size: 16px; color: #22121e; margin: 8px 0 10px 0; padding: 0 0 5px 0; border-bottom: 1px solid #e2dfdf; text-transform: uppercase; }
замените на
#custommenu .mainnav li a.title-lv0 { display: block; font-size: 13px; color: #22121e; margin: 0px 0 0px 0; padding: 0 0 0px 0; border-bottom: 1px solid #e2dfdf; text-transform: uppercase; }
3. Найдите в шаблоне Товары код
<div class="cat-image"> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"> <img class="goods-cat-image-medium" src="{% IF nested_categories_list.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=sunrise{% ELSE %}{nested_categories_list.IMAGE_MEDIUM}{% ENDIF %}"> </a> </div>и удалите. Данные изменения произведите 2 раза.
4. Опишите более подробнее, что именно Вы хотите реализовать.
#5
Отправлено 01 Ноябрь 2016 - 21:34
Ирина345 (26 Октябрь 2016 - 16:20) писал:
2. Найдите в файле main.css
#custommenu .mainnav li a.title-lv0 { display: block; font-size: 16px; color: #22121e; margin: 8px 0 10px 0; padding: 0 0 5px 0; border-bottom: 1px solid #e2dfdf; text-transform: uppercase; }
замените на
#custommenu .mainnav li a.title-lv0 { display: block; font-size: 13px; color: #22121e; margin: 0px 0 0px 0; padding: 0 0 0px 0; border-bottom: 1px solid #e2dfdf; text-transform: uppercase; }
3. Найдите в шаблоне Товары код
<div class="cat-image"> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"> <img class="goods-cat-image-medium" src="{% IF nested_categories_list.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=sunrise{% ELSE %}{nested_categories_list.IMAGE_MEDIUM}{% ENDIF %}"> </a> </div>и удалите. Данные изменения произведите 2 раза.
4. Опишите более подробнее, что именно Вы хотите реализовать.
Сделал только 3 пункт, потому что все остальное видимо криво описал. итак со скринами:
1) ВЕРХНЕЕ МЕНЮ, надо сделать вылетающим НЕ ВО ВСЕ ОКНО, а как на сайте babo4ek.net , также не писать там лишнее - лого ном телефона и имейл
(КСТАТИ в полной версии порядок верхних пунктов меню не такой как указан в админке(((
2) ТОВАРЫ : в превью товаров то есть когда смотрим категорию, чтобы был не один товар в ряд во весь дисплей, а по два в ряд, тогда наверное придется делать кнопку не "добавить в корзину", а просто "в корзину", чтобы уместилось ( схематично показал наскриншоте)
#6
Отправлено 04 Ноябрь 2016 - 22:35
#7
Отправлено 05 Ноябрь 2016 - 17:40
Ирина345 (26 Октябрь 2016 - 16:20) писал:
2. Найдите в файле main.css
#custommenu .mainnav li a.title-lv0 { display: block; font-size: 16px; color: #22121e; margin: 8px 0 10px 0; padding: 0 0 5px 0; border-bottom: 1px solid #e2dfdf; text-transform: uppercase; }
замените на
#custommenu .mainnav li a.title-lv0 { display: block; font-size: 13px; color: #22121e; margin: 0px 0 0px 0; padding: 0 0 0px 0; border-bottom: 1px solid #e2dfdf; text-transform: uppercase; }
3. Найдите в шаблоне Товары код
<div class="cat-image"> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"> <img class="goods-cat-image-medium" src="{% IF nested_categories_list.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=sunrise{% ELSE %}{nested_categories_list.IMAGE_MEDIUM}{% ENDIF %}"> </a> </div>и удалите. Данные изменения произведите 2 раза.
4. Опишите более подробнее, что именно Вы хотите реализовать.
Жду ответы на вопросы, которые вверху, а также замечания по уже сделанным работам: картинки категорий надо было удалять ТОЛЬКО в мобильной теме, в полном режиме прошу вернуть!
#8
Отправлено 10 Ноябрь 2016 - 05:48
ProninT (24 Октябрь 2016 - 17:52) писал:
1) нижнее меню, контакты, и все их пункты сделать посередине
2) верхнее меню - сделать обычное вылетающее меню, где первая кнопка каталог, и ее можно развернуть при одном нажатии, и потом уже понвжимать на категории и попасть на них, а остальное просто пункты верхнего меню обычной версии которые ведут на свои страницы
3) чтобы в каталоге не отображались картинки категорий (чтобы меньше мотать) то есть зашли в салюты из бабочек, а там просто три кнопки, и ниже товары, то есть то же самое сейчас но без картинок.
4) в превью товаров то есть когда смотрим категорию, чтобы был не один товар в ряд во весь дисплей, а по два в ряд, тогда наверное придется делать кнопку не "добавить в корзину", а просто "в корзину"
Повторюсь все изменения должны касаться толкьо мобильной версии, Заранее спасибо!)
1. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
@media all and (max-width: 481px) {
после него вставьте:
#footer .title, #footer .links li, #footer .block-contact > div { text-align: center; }
Результат:
2. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#menu_offcanvas .phone {margin-top: 30px;} #menu_offcanvas .logo {margin-top: 30px;text-align: center;}
замените на:
#menu_offcanvas .phone, #menu_offcanvas .logo, #menu_offcanvas .email {display:none !important;}
далее найдите:
body.active #menu_offcanvas { display: inline-block; position: fixed; width: 100%; left: 0; height: 100%; line-height: 1.3; background: #efefec; padding: 0 10px 10px; text-align: left; opacity: 1; overflow-y: auto; visibility: visible; z-index: 99; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
замените на:
body.active #menu_offcanvas { display: block; position: fixed; width: 100%; left: 0; height: auto; line-height: 1.3; background: #efefec; padding: 0 10px 10px; text-align: left; opacity: 1; visibility: visible; z-index: 99; overflow: auto; }
далее найдите:
body.active .wrapper { overflow: hidden; z-index: 1; display: none; }
замените на:
body.active .wrapper { overflow: hidden; z-index: 1; }
далее найдите:
#menu_offcanvas .menu-list { display: block; position: relative; float: none; width: 100%; margin-bottom: 5px; }
перед ним вставьте:
#menu_offcanvas .catalog { margin-top: 50px !important; }
Результат:
3. Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
<div class="cat-name" title="Перейти к категории «{nested_categories_list.NAME}»"> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a> </div>
перед ним вставьте:
<div class="cat-image"> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"> <img class="goods-cat-image-medium" src="{% IF nested_categories_list.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=sunrise{% ELSE %}{nested_categories_list.IMAGE_MEDIUM}{% ENDIF %}"> </a> </div>
p.s.: встретится 2 раза, в обоих случаях необходимо произвести изменения.
В main.css найдите:
@media all and (max-width: 481px) {
после него пропишите:
.categories .cat-image{display:none;}
4. Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
<!-- Вывод товаров ТАБЛИЦЕЙ --> <div class="products-grid row"> {% FOR goods %} <div class="item col-xs-4 col-lg-4 col-sm-6 col-sms-6 col-smb-12">
замените на:
<!-- Вывод товаров ТАБЛИЦЕЙ --> <div class="products-grid row"> {% FOR goods %} <div class="item col-xs-4 col-lg-4 col-sm-6 col-sms-6 col-smb-6">
далее найдите:
<a class="add-cart button button2" title="В корзину" data-tooltip="В корзину">Добавить в корзину</a>
замените на:
<a class="add-cart button button2" title="В корзину" data-tooltip="В корзину">В корзину</a>
Результат:
#9
Отправлено 15 Ноябрь 2016 - 20:00
Vaccina (10 Ноябрь 2016 - 05:48) писал:
@media all and (max-width: 481px) {
после него вставьте:
#footer .title, #footer .links li, #footer .block-contact > div { text-align: center; }
Результат:
123.jpg
2. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#menu_offcanvas .phone {margin-top: 30px;} #menu_offcanvas .logo {margin-top: 30px;text-align: center;}
замените на:
#menu_offcanvas .phone, #menu_offcanvas .logo, #menu_offcanvas .email {display:none !important;}
далее найдите:
body.active #menu_offcanvas { display: inline-block; position: fixed; width: 100%; left: 0; height: 100%; line-height: 1.3; background: #efefec; padding: 0 10px 10px; text-align: left; opacity: 1; overflow-y: auto; visibility: visible; z-index: 99; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
замените на:
body.active #menu_offcanvas { display: block; position: fixed; width: 100%; left: 0; height: auto; line-height: 1.3; background: #efefec; padding: 0 10px 10px; text-align: left; opacity: 1; visibility: visible; z-index: 99; overflow: auto; }
далее найдите:
body.active .wrapper { overflow: hidden; z-index: 1; display: none; }
замените на:
body.active .wrapper { overflow: hidden; z-index: 1; }
далее найдите:
#menu_offcanvas .menu-list { display: block; position: relative; float: none; width: 100%; margin-bottom: 5px; }
перед ним вставьте:
#menu_offcanvas .catalog { margin-top: 50px !important; }
Результат:
321.jpg
3. Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
<div class="cat-name" title="Перейти к категории «{nested_categories_list.NAME}»"> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a> </div>
перед ним вставьте:
<div class="cat-image"> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"> <img class="goods-cat-image-medium" src="{% IF nested_categories_list.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=sunrise{% ELSE %}{nested_categories_list.IMAGE_MEDIUM}{% ENDIF %}"> </a> </div>
p.s.: встретится 2 раза, в обоих случаях необходимо произвести изменения.
В main.css найдите:
@media all and (max-width: 481px) {
после него пропишите:
.categories .cat-image{display:none;}
4. Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
<!-- Вывод товаров ТАБЛИЦЕЙ --> <div class="products-grid row"> {% FOR goods %} <div class="item col-xs-4 col-lg-4 col-sm-6 col-sms-6 col-smb-12">
замените на:
<!-- Вывод товаров ТАБЛИЦЕЙ --> <div class="products-grid row"> {% FOR goods %} <div class="item col-xs-4 col-lg-4 col-sm-6 col-sms-6 col-smb-6">
далее найдите:
<a class="add-cart button button2" title="В корзину" data-tooltip="В корзину">Добавить в корзину</a>
замените на:
<a class="add-cart button button2" title="В корзину" data-tooltip="В корзину">В корзину</a>
Результат:
333.jpg
Спасибо в основном то, что хотел, но есть косячки.. вот например у меня на айфоне 5S отображатся товары так : первый нужного размера но почему то посередине, остальные как надо, но, правда много лишних полей которые надо убрать (скрин)
и еще в мобильной версии как то хотелось бы уместить название самой коробки, то есть что бы три точки были не в конце а в начале например не "бабочки в подарок...", а "... подарок "люкс 5"", типа того..
#10
Отправлено 18 Ноябрь 2016 - 20:40
ProninT (15 Ноябрь 2016 - 20:00) писал:
и еще в мобильной версии как то хотелось бы уместить название самой коробки, то есть что бы три точки были не в конце а в начале например не "бабочки в подарок...", а "... подарок "люкс 5"", типа того..
Прошу прощения за долгий ответ, товары в каталоге поправил.Проверил на iOS должно отображаться правильно.
В файле main.css заменил(1097 строка)
.products-grid { display: flex;на
.products-grid { display: block;
Название сделал полным
заменил (610 строку)
.products-grid .item .product-shop .product-name a {display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 16px;}на
.products-grid .item .product-shop .product-name a {display: block;overflow: hidden;white-space: normal;text-overflow: ellipsis;font-size: 16px;}
#11
Отправлено 08 Май 2017 - 22:05
#12
Отправлено 09 Май 2017 - 12:44
Rubin1223 (08 Май 2017 - 22:05) писал:
В файле main.css
в блоке
@media all and (max-width: 481px) {замените
#slideshow .text {padding-right: 5px;} #slideshow .text .button {font-size: 14px;padding: 0 10px;}на
#slideshow .text {top: 78%;padding-right: 5px;} #slideshow .text .button {font-size: 13px;padding: 0 10px;}font-size: 13px; -размер шрифта кнопки
top: 78%; - отступ кнопки от верха
#13
Отправлено 05 Февраль 2018 - 18:02
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных