Меню, Слайдер
#1
Отправлено 14 Март 2017 - 19:45
1) Изменить стиль меню, оно очень маленькое и некрасивое (люди им не пользуются)
2) Меню в мобильной версии оставить только пункты Главная, Каталог, Доставка, Контакты, чтобы отображалось в одну строчку
4) Изменить размер слайдера до 1920 х 550
3) В мобильной версии кнопку при нажатии "под заказ" переводить в форму заказа, так же как и веб версии
4) Номер телефона перенести вместо кнопки "Контакты" и сделать соразмерной
SL-407956
#2
Отправлено 15 Март 2017 - 10:01
Liya (14 Март 2017 - 19:45) писал:
1) Изменить стиль меню, оно очень маленькое и некрасивое (люди им не пользуются)
2) Меню в мобильной версии оставить только пункты Главная, Каталог, Доставка, Контакты, чтобы отображалось в одну строчку
4) Изменить размер слайдера до 1920 х 550
3) В мобильной версии кнопку при нажатии "под заказ" переводить в форму заказа, так же как и веб версии
4) Номер телефона перенести вместо кнопки "Контакты" и сделать соразмерной
SL-407956
Здравствуйте.
В данном случае, если я во всём вас понял правильно, то вам необходимо произвести следующие изменения:
1. В шаблоне main.css найдите, пожалуйста, данный код:
.manu_block { display: inline-block; }
И заменить его вот этим вот кодом:
.manu_block { display: inline-block; font-size: 17px; }
4. После чего в том же шаблоне найдите, пожалуйста, следующий код:
.owl-carousel .owl-item { position: relative; float: left; min-height: 1px; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 100; }
И замените его вот этим кодом:
.owl-carousel .owl-item { position: relative; float: left; min-height: 1px; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 100; width: 1920px !important; height: 550px; }
Далее там же найдите снова, пожалуйста, данный код:
.owl-carousel .owl-item img { -webkit-transform-style: preserve-3d; }
И замените его этим вот кодом:
.owl-carousel .owl-item img { -webkit-transform-style: preserve-3d; width: 1920px !important; height: 550px !important; }
4. После чего в самый конец данного шаблона добавьте, пожалуйста, следующий код:
.phone_menu_cont { float: left; margin-top: -48px; font-size: 17px; margin-left: 12% !important; }
#3
Отправлено 15 Март 2017 - 11:19
RayLi (15 Март 2017 - 10:01) писал:
В данном случае, если я во всём вас понял правильно, то вам необходимо произвести следующие изменения:
1. В шаблоне main.css найдите, пожалуйста, данный код:
.manu_block { display: inline-block; }
И заменить его вот этим вот кодом:
.manu_block { display: inline-block; font-size: 17px; }
4. После чего в том же шаблоне найдите, пожалуйста, следующий код:
.owl-carousel .owl-item { position: relative; float: left; min-height: 1px; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 100; }
И замените его вот этим кодом:
.owl-carousel .owl-item { position: relative; float: left; min-height: 1px; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 100; width: 1920px !important; height: 550px; }
Далее там же найдите снова, пожалуйста, данный код:
.owl-carousel .owl-item img { -webkit-transform-style: preserve-3d; }
И замените его этим вот кодом:
.owl-carousel .owl-item img { -webkit-transform-style: preserve-3d; width: 1920px !important; height: 550px !important; }
4. После чего в самый конец данного шаблона добавьте, пожалуйста, следующий код:
.phone_menu_cont { float: left; margin-top: -48px; font-size: 17px; margin-left: 12% !important; }
Здравствуйте, при внесении этих изменений получилось следующее:
1) Меню изменилось, все хорошо!
2) Меню из мобильной версии так же не изменилось
3) Слайдер разделился на 3 части и разъехался по всей странице
4) В мобильной версии тоже изменения не произошли
5) Номер телефона перенесся туда куда нужно, но сама кнопка "контакты" не исчезла
#4
Отправлено 15 Март 2017 - 16:30
Liya (15 Март 2017 - 11:19) писал:
1) Меню изменилось, все хорошо!
2) Меню из мобильной версии так же не изменилось
3) Слайдер разделился на 3 части и разъехался по всей странице
4) В мобильной версии тоже изменения не произошли
5) Номер телефона перенесся туда куда нужно, но сама кнопка "контакты" не исчезла
Теперь попробуйте, пожалуйста, произвести ещё следующие изменения:
В самый конец шаблона main.css добавьте, пожалуйста, данный код:
.contacts.toggle_menu_wrap { display: none !important; }
После чего в том же шаблоне найдите, пожалуйста, следующий код:
#header .header-top .container { text-align: center; }
И замените его вот этим вот кодом:
#header .header-top .container { text-align: right; }
#5
Отправлено 15 Март 2017 - 17:16
RayLi (15 Март 2017 - 16:30) писал:
В самый конец шаблона main.css добавьте, пожалуйста, данный код:
.contacts.toggle_menu_wrap { display: none !important; }
После чего в том же шаблоне найдите, пожалуйста, следующий код:
#header .header-top .container { text-align: center; }
И замените его вот этим вот кодом:
#header .header-top .container { text-align: right; }
Произвела изменения
Номер телефона перенеся на место контактов, но логотип и меню при этом действии съезжают, слайдер опять разделился на 3 части и разъехался по всей странице.
#6
Отправлено 15 Март 2017 - 17:20
Liya (15 Март 2017 - 17:16) писал:
Номер телефона перенеся на место контактов все хорошо, но слайдер опять разделился на 3 части и разъехался по всей странице, и меню в шапке тоже уехало вправо
К сожалению сейчас указанной проблемы на вашем сайте не наблюдаем, в связи с чем просим вас уточнить, в каком конкретном браузере и в каких случаях происходит данная проблема?
Спасибо.
#7
Отправлено 15 Март 2017 - 20:30
RayLi (15 Март 2017 - 17:20) писал:
Спасибо.
Так я сделала восстановление последней версии, и жду новых рекомендаций. Я не могу оставить сайт в таком состоянии.
#8
Отправлено 15 Март 2017 - 20:31
Liya (15 Март 2017 - 20:30) писал:
В данном случае вам необходимо повторить ранее присланные вам инструкции и после этого мы сможем помочь вам с дальнейшими изменениями на вашем сайте.
Спасибо.
#10
Отправлено 15 Март 2017 - 20:49
Liya (15 Март 2017 - 20:39) писал:
Теперь произведите пожалуйста, на вашем сайте следующий изменения:
В шаблоне main.css найдите, пожалуйста, данный код:
.owl-carousel .owl-item img { -webkit-transform-style: preserve-3d; width: 1920px !important; height: 550px !important; }
И замените его вот этим вот кодом:
.owl-carousel .owl-item img { -webkit-transform-style: preserve-3d; }
После чего в том же шаблоне найдите, пожалуйста. данный код:
#slideshow #slider .slider-item-1 img { max-width: 100%; height: auto; }
И замените его вот этим кодом:
#slideshow #slider .slider-item-1 img { max-width: 100%; width: 1920px !important; height: 550px !important; }
#11
Отправлено 15 Март 2017 - 21:05
RayLi (15 Март 2017 - 20:49) писал:
В шаблоне main.css найдите, пожалуйста, данный код:
.owl-carousel .owl-item img { -webkit-transform-style: preserve-3d; width: 1920px !important; height: 550px !important; }
И замените его вот этим вот кодом:
.owl-carousel .owl-item img { -webkit-transform-style: preserve-3d; }
После чего в том же шаблоне найдите, пожалуйста. данный код:
#slideshow #slider .slider-item-1 img { max-width: 100%; height: auto; }
И замените его вот этим кодом:
#slideshow #slider .slider-item-1 img { max-width: 100%; width: 1920px !important; height: 550px !important; }
Произвела замену, по моему все осталось по прежнему
#12
Отправлено 15 Март 2017 - 22:28
Спасибо
#13
Отправлено 16 Март 2017 - 09:45
Liya (15 Март 2017 - 22:28) писал:
Спасибо
Здравствуйте.
В таком случае вам необходимо произвести следующие изменения:
В шаблоне html найдите, пожалуйста, данный код:
<div class="container"> <ul class="manu_block" itemscope itemtype="http://schema.org/SiteNavigationElement"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" class="{% IF menu.header.links.SELECTED %}active{%ENDIF%} {% IF menu.header.links.NAME = Каталог %}tc{% ENDIF %}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url"><span>{menu.header.links.NAME}</span></a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> <div class="phone_menu_cont"> {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<div itemprop="telephone"><i class="fa fa-phone"></i><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</a></div>{% ENDIF %} {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<div itemprop="telephone"><i class="fa fa-phone"></i><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2}{SETTINGS_STORE_PHONE_CITY_CODE2}{SETTINGS_STORE_PHONE_NUMBER2}">{SETTINGS_STORE_PHONE_COUNTRY_CODE2}({SETTINGS_STORE_PHONE_CITY_CODE2}){SETTINGS_STORE_PHONE_NUMBER2}</a></div>{% ENDIF %} </div> </div> </div> </div> <!-- /END Шапка -->
И замените его вот этим вот кодом:
<div class="container"> <ul class="manu_block" itemscope itemtype="http://schema.org/SiteNavigationElement"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" class="{% IF menu.header.links.SELECTED %}active{%ENDIF%} {% IF menu.header.links.NAME = Каталог %}tc{% ENDIF %}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url"><span>{menu.header.links.NAME}</span></a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div> </div> <!-- /END Шапка -->
После чего в том же шаблоне найдите. пожалуйста, данный код:
<!-- Шапка --> <div id="header"> <div class="header-top"> <div class="container"> <div class="contacts toggle_menu_wrap" itemscope itemtype="http://schema.org/Organization"> <a class="toggle_menu icon-user" href="#"><span class="title">Контакты</span></a> <div class="toggle_menu_cont"> <h4 class="title">Контакты</h4>
И замените его вот этим вот кодом:
<!-- Шапка --> <div id="header"> <div class="header-top"> <div class="container"> <div class="phone_menu_cont"> {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<div itemprop="telephone"><i class="fa fa-phone"></i><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</a></div>{% ENDIF %} {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<div itemprop="telephone"><i class="fa fa-phone"></i><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2}{SETTINGS_STORE_PHONE_CITY_CODE2}{SETTINGS_STORE_PHONE_NUMBER2}">{SETTINGS_STORE_PHONE_COUNTRY_CODE2}({SETTINGS_STORE_PHONE_CITY_CODE2}){SETTINGS_STORE_PHONE_NUMBER2}</a></div>{% ENDIF %} </div> <div class="contacts toggle_menu_wrap" itemscope itemtype="http://schema.org/Organization"> <a class="toggle_menu icon-user" href="#"><span class="title">Контакты</span></a> <div class="toggle_menu_cont"> <h4 class="title">Контакты</h4>
#14
Отправлено 16 Март 2017 - 11:44
RayLi (16 Март 2017 - 09:45) писал:
В таком случае вам необходимо произвести следующие изменения:
В шаблоне html найдите, пожалуйста, данный код:
<div class="container"> <ul class="manu_block" itemscope itemtype="http://schema.org/SiteNavigationElement"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" class="{% IF menu.header.links.SELECTED %}active{%ENDIF%} {% IF menu.header.links.NAME = Каталог %}tc{% ENDIF %}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url"><span>{menu.header.links.NAME}</span></a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> <div class="phone_menu_cont"> {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<div itemprop="telephone"><i class="fa fa-phone"></i><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</a></div>{% ENDIF %} {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<div itemprop="telephone"><i class="fa fa-phone"></i><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2}{SETTINGS_STORE_PHONE_CITY_CODE2}{SETTINGS_STORE_PHONE_NUMBER2}">{SETTINGS_STORE_PHONE_COUNTRY_CODE2}({SETTINGS_STORE_PHONE_CITY_CODE2}){SETTINGS_STORE_PHONE_NUMBER2}</a></div>{% ENDIF %} </div> </div> </div> </div> <!-- /END Шапка -->
И замените его вот этим вот кодом:
<div class="container"> <ul class="manu_block" itemscope itemtype="http://schema.org/SiteNavigationElement"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" class="{% IF menu.header.links.SELECTED %}active{%ENDIF%} {% IF menu.header.links.NAME = Каталог %}tc{% ENDIF %}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url"><span>{menu.header.links.NAME}</span></a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div> </div> <!-- /END Шапка -->
После чего в том же шаблоне найдите. пожалуйста, данный код:
<!-- Шапка --> <div id="header"> <div class="header-top"> <div class="container"> <div class="contacts toggle_menu_wrap" itemscope itemtype="http://schema.org/Organization"> <a class="toggle_menu icon-user" href="#"><span class="title">Контакты</span></a> <div class="toggle_menu_cont"> <h4 class="title">Контакты</h4>
И замените его вот этим вот кодом:
<!-- Шапка --> <div id="header"> <div class="header-top"> <div class="container"> <div class="phone_menu_cont"> {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<div itemprop="telephone"><i class="fa fa-phone"></i><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</a></div>{% ENDIF %} {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<div itemprop="telephone"><i class="fa fa-phone"></i><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2}{SETTINGS_STORE_PHONE_CITY_CODE2}{SETTINGS_STORE_PHONE_NUMBER2}">{SETTINGS_STORE_PHONE_COUNTRY_CODE2}({SETTINGS_STORE_PHONE_CITY_CODE2}){SETTINGS_STORE_PHONE_NUMBER2}</a></div>{% ENDIF %} </div> <div class="contacts toggle_menu_wrap" itemscope itemtype="http://schema.org/Organization"> <a class="toggle_menu icon-user" href="#"><span class="title">Контакты</span></a> <div class="toggle_menu_cont"> <h4 class="title">Контакты</h4>
Это все исказило, телефон поднялся до самого верха, что его даже не видно
#17
Отправлено 16 Март 2017 - 12:39
Liya (16 Март 2017 - 12:32) писал:
Теперь в шаблоне main.css найдите, пожалуйста, данный код:
.phone_menu_cont { float: left; margin-top: -48px; font-size: 19px; margin-left: 12% !important; }
И замените его вот этим вот кодом:
.phone_menu_cont { float: left; font-size: 19px; line-height: 80px; }
#18
Отправлено 16 Март 2017 - 12:51
RayLi (16 Март 2017 - 12:39) писал:
.phone_menu_cont { float: left; margin-top: -48px; font-size: 19px; margin-left: 12% !important; }
И замените его вот этим вот кодом:
.phone_menu_cont { float: left; font-size: 19px; line-height: 80px; }
В веб версии, все отлично, спасибо
Помогите теперь, Меню в мобильной версии оставить только пункты Главная, Каталог, Доставка, Контакты, чтобы отображалось в одну строчку
#19
Отправлено 20 Март 2017 - 15:27
Liya (16 Март 2017 - 12:51) писал:
Помогите теперь, Меню в мобильной версии оставить только пункты Главная, Каталог, Доставка, Контакты, чтобы отображалось в одну строчку
@media all and (max-width: 481px) {и сразу после нее вставьте код
#header .header-top .manu_block li:nth-child(2),#header .header-top .manu_block li:nth-child(3),#header .header-top .manu_block li:nth-child(5),#header .header-top .manu_block li:nth-child(8){display:none}
#20
Отправлено 20 Март 2017 - 17:13
Stasya (20 Март 2017 - 15:27) писал:
@media all and (max-width: 481px) {и сразу после нее вставьте код
#header .header-top .manu_block li:nth-child(2),#header .header-top .manu_block li:nth-child(3),#header .header-top .manu_block li:nth-child(5),#header .header-top .manu_block li:nth-child(8){display:none}
Отлично, спасибо огромное
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных