Убрать Слайдер, Промо-Блок И Изменить Шапку
#1
Отправлено 21 Октябрь 2017 - 02:25
1. Нужно убрать слайдер с главной и со всех остальных страниц. Уровень шапки и верхнего меню должен остаться неизменным.
2. Нужно убрать промо-блок со всех страниц. Уровень шапки и верхнего меню должен остаться неизменным.
3. Тело страницы на главной (у меня в качестве главной отображается каталог) по расположению не совпадает с телом страницы на остальных страницах. Если переключать с главной на другую страницу, видно, как весь центральный блок двигается влево. Нужно сделать единообразно везде.
4. Нужно поменять отображение информации в шапке:
- убрать слова Контакты, время работы и т.д. - вместо них должны быть просто иконки, как на картинке ниже
- контакты и время работы должны быть в одну колонку, друг под другом. Сейчас Время работы находится справа, около поиска.
- фон шапки нужно сделать однотонным, возможно, черным.
Аккаунт SL-112954
#2
Отправлено 21 Октябрь 2017 - 08:09
Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите и удалите:
{% IF index_page %} <link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}camera.css?design=movement"> <script type='text/javascript' src='{ASSETS_JS_PATH}camera.min.js?design=movement'></script> <script> jQuery(function(){ jQuery('#camera_wrap_1').camera({ minHeight: '400px', maxHeight: '600px', pagination: false, thumbnails: false, time: 3000 }); }); </script> {% ENDIF %}
далее найдите:
<body {% IF index_page %}class="home"{% ENDIF %} {% IF MOD_LNAME=goods %}class="tovar"{% ENDIF %}>
замените на:
<body {% IF MOD_LNAME=goods %}class="tovar"{% ENDIF %}>
далее найдите и удалите:
<!-- Главная страница --> {% IF index_page %} <div class="fluid-container"> <div class="camera_wrap camera_black_skin" id="camera_wrap_1"> <div data-thumb="{ASSETS_IMAGES_PATH}slide1.jpg" data-src="{ASSETS_IMAGES_PATH}slide1.jpg?design=movement"> <div class="camera_caption moveFromLeft"> Накопительные скидки до 15%! </div> </div> <div data-thumb="{ASSETS_IMAGES_PATH}slide2.jpg" data-src="{ASSETS_IMAGES_PATH}slide2.jpg?design=movement"> <div class="camera_caption moveFomRight"> Быть постоянным клиентом выгодно! </div> </div> <div data-thumb="{ASSETS_IMAGES_PATH}slide3.jpg" data-src="{ASSETS_IMAGES_PATH}slide3.jpg?design=movement"> <div class="camera_caption moveFromLeft"> Особые условия для мотосервисов и мотошкол! </div> </div> <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg?design=movement"> <div class="camera_caption moveFomRight"> Вступай в нашу группу Вконтакте, оставляй отзывы и получай бонусы! </div> </div> </div><!-- #camera_wrap_1 --> <div class="clear"></div> </div><!-- .fluid_container --> {% ENDIF %} <div class="container promo_block"> <ul> <li class="box-1"> <h3 class="title-block">Оплата</h3> <p>Множество способов оплаты</p> </li> <li class="box-2"> <h3 class="title-block">Доставка</h3> <p>Доставка во все города России и стран СНГ</p> </li> <li class="box-3"> <h3 class="title-block">Гарантии</h3> <p>Возврат/Замена Товара</p> </li> <li class="box-4"> <h3 class="title-block">Поддержка</h3> <p>Поддержка клиентов по телефону</p> </li> </ul> <div class="clear"></div> </div>
Далее найдите:
<div class="contacts"> {% IF SETTINGS_STORE_PHONE_NUMBER1 || SETTINGS_STORE_PHONE_NUMBER2 || SETTINGS_STORE_PHONE_NUMBER3 || SETTINGS_STORE_SKYPE || SETTINGS_STORE_ICQ %} <div class="phone" title="Позвоните нам"> <b>Контакты:</b><br /> <!-- Первый контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER1 %} {SETTINGS_STORE_PHONE_COUNTRY_CODE1} <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}">{% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}<span class="phone_code">({SETTINGS_STORE_PHONE_CITY_CODE1})</span>{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}</a><br /> {% ENDIF %} <!-- Второй контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER2 %} <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2}{SETTINGS_STORE_PHONE_CITY_CODE2}{SETTINGS_STORE_PHONE_NUMBER2}">{SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}<span class="phone_code">({SETTINGS_STORE_PHONE_CITY_CODE2})</span>{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}</a><br /> {% ENDIF %} <!-- Третий контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER3 %} <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3}{SETTINGS_STORE_PHONE_CITY_CODE3}{SETTINGS_STORE_PHONE_NUMBER3}">{SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}<span class="phone_code">({SETTINGS_STORE_PHONE_CITY_CODE3})</span>{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}</a> {% ENDIF %} <!-- Skype номер --> {% IF SETTINGS_STORE_SKYPE %} <div class="contentTableHeadMainSkype"> <a class="valignMiddle" href="skype:{SETTINGS_STORE_SKYPE}?call" title="Свяжитесь с нами по Skype"> <img class="valignMiddle" src="{FORALL_IMAGES_PATH}icon/skype.png" width="16" height="16" alt="Свяжитесь с нами по Skype" /> <span class="valignMiddle">{SETTINGS_STORE_SKYPE}</span> </a> </div> {% ENDIF %} <!-- ICQ номер --> {% IF SETTINGS_STORE_ICQ %} <div class="contentTableHeadMainIcq"> <img class="valignMiddle" src="https://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&img=27" alt="Статус" width="16" height="16" /> <span class="valignMiddle">{SETTINGS_STORE_ICQ}</span> </div> {% ENDIF %} </div> {% ENDIF %} <!-- Время работы магазина --> {% IF SETTINGS_STORE_WORK_TIME %} <div class="time"> <b>Время работы:</b><br /> <span class="work-time" title="Время работы нашего магазина: {SETTINGS_STORE_WORK_TIME}"> {SETTINGS_STORE_WORK_TIME} </span> </div> {% ENDIF %}
замените на:
<div class="contacts"> {% IF SETTINGS_STORE_PHONE_NUMBER1 || SETTINGS_STORE_PHONE_NUMBER2 || SETTINGS_STORE_PHONE_NUMBER3 || SETTINGS_STORE_SKYPE || SETTINGS_STORE_ICQ %} <div class="phone" title="Позвоните нам"> <!-- Первый контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER1 %} <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}"> <img src="{ASSETS_IMAGES_PATH}phone.png" alt="" /> {SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}<span class="phone_code">({SETTINGS_STORE_PHONE_CITY_CODE1})</span>{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}</a><br /> {% ENDIF %} <!-- Второй контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER2 %} <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2}{SETTINGS_STORE_PHONE_CITY_CODE2}{SETTINGS_STORE_PHONE_NUMBER2}"> <img src="{ASSETS_IMAGES_PATH}phone.png" alt="" /> {SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}<span class="phone_code">({SETTINGS_STORE_PHONE_CITY_CODE2})</span>{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}</a><br /> {% ENDIF %} <!-- Третий контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER3 %} <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3}{SETTINGS_STORE_PHONE_CITY_CODE3}{SETTINGS_STORE_PHONE_NUMBER3}">{SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}<span class="phone_code">({SETTINGS_STORE_PHONE_CITY_CODE3})</span>{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}</a> {% ENDIF %} <!-- Skype номер --> {% IF SETTINGS_STORE_SKYPE %} <div class="contentTableHeadMainSkype"> <a class="valignMiddle" href="skype:{SETTINGS_STORE_SKYPE}?call" title="Свяжитесь с нами по Skype"> <img class="valignMiddle" src="{FORALL_IMAGES_PATH}icon/skype.png" width="16" height="16" alt="Свяжитесь с нами по Skype" /> <span class="valignMiddle">{SETTINGS_STORE_SKYPE}</span> </a> </div> {% ENDIF %} <!-- ICQ номер --> {% IF SETTINGS_STORE_ICQ %} <div class="contentTableHeadMainIcq"> <img class="valignMiddle" src="https://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&img=27" alt="Статус" width="16" height="16" /> <span class="valignMiddle">{SETTINGS_STORE_ICQ}</span> </div> {% ENDIF %} </div> {% ENDIF %} <!-- Время работы магазина --> {% IF SETTINGS_STORE_WORK_TIME %} <div class="time"> <span class="work-time" title="Время работы нашего магазина: {SETTINGS_STORE_WORK_TIME}"> <img src="{ASSETS_IMAGES_PATH}time.png" alt="" /> {SETTINGS_STORE_WORK_TIME} </span> </div> {% ENDIF %}
Далее зайдите враздел style.css - найдите:
.time {display: block;float: left;font-size: 20px;line-height:1em;margin-left: 40px;}
замените на:
.contacts img{vertical-align: middle;} .time {display: block;font-size: 20px;line-height:1em;}
#3
Отправлено 22 Октябрь 2017 - 06:56
Приложил скриншот, на котором показано, что нужно поправить:
1. Убрать из верхнего меню иконку с домиком. Она дублирует пункт "Контакты"
2. поднять на странице каталога категории, чтобы они стали вровень с левым меню
3. Я сделал высоту верхней фоновой картинки 189px. Для десктопной версии это ок. Но в мобильной версии нужно убрать фоновую картинку и сделать серый фон вместо нее в шапке, и чтобы этот фон был высотой 321px. Ну или в крайнем случае, чтобы в мобильной версии высота фоновой картинки в шапке была 321px
#4
Отправлено 24 Октябрь 2017 - 07:26
Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<!-- Верхний блок навигации --> <div class="menu_block_dropdown"> <div class="et_categ_box"> <div id="et_categ_box_scroll"> <div class="img_link_wrapper"><a class="image-link" href="{INDEX_PAGE_URL}"></a></div>
замените на:
<!-- Верхний блок навигации --> <div class="menu_block_dropdown"> <div class="et_categ_box"> <div id="et_categ_box_scroll">
Далее зайдите в style.css - найдите:
.product-list, .product-list2 {margin-top: 20px;margin-left: -11px;margin-right: -1px;clear: both;display: block;position: relative;}
замените на:
.product-list, .product-list2 {margin-top: 5px;margin-left: -11px;margin-right: -1px;clear: both;display: block;position: relative;}
далее найдите:
@media only screen and (min-width: 480px) and (max-width: 767px) {
после него пропишите:
#header { height: auto; background: #3E3F41; padding-bottom: 10px; margin-bottom: 0px; }
#5
Отправлено 24 Октябрь 2017 - 18:25
Vaccina (24 Октябрь 2017 - 07:26) писал:
@media only screen and (min-width: 480px) and (max-width: 767px) {
после него пропишите:
#header { height: auto; background: #3E3F41; padding-bottom: 10px; margin-bottom: 0px; }
1. Вот по этому пункту не понятно. что он меняет? Я внес его, но изменений не заметил.
В мобильной версии сейчас все выглядит, как на приложенном первом скрине. Нужно, чтобы серая фоновая картинка доходила до нижней части верхнего меню (включая красную полоску снизу меню). В настольной версии сайта все ок
2. в каталоге нужно уменьшить вертикальное расстояние между объектами в 2 раза
#6
Отправлено 26 Октябрь 2017 - 08:56
1. Он стилизует шапку сайта по желаемому вами результату, только изменение будет отображаться для разрешений от 480px до 767px. Данный код выше также добавьте после:
@media only screen and (max-width: 479px) {
2. Зайдите в раздел Сайт - Редактор шаблонов - style.css - найдите:
.product .product-price {font-size: 16px;height: 42px;line-height: 18px;margin: 8px 0 0 8px;padding-bottom: 5px;cursor: text;text-align: center;}
замените на:
.product .product-price {font-size: 16px;height: 25px;line-height: 18px;margin: 0;padding-bottom: 5px;cursor: text;text-align: center;}
далее найдите:
.product-name {text-align: center;text-transform: uppercase;font-weight: bold;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;height: 55px;}
замените на:
.product-name {text-align: center;text-transform: uppercase;font-weight: bold;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;height: 35px;}
#7
Отправлено 26 Октябрь 2017 - 11:47
На фото отметил стрелками. Нужно, чтобы фон был вроверь с нижней частью красной полоски
В каталоге теперь название и кнопка "в корзину" стали компактнее располагаться. Но, если навести курсор на изображение какого-нибудь товара, то отображение расширяется и показывается миниатюра других фотографий этого товара. Так вот, в этом случае элементы все так же далеко друг от друга. Нужно сделать идентично. Также, я убрал элемент "добавить в избранное" и из каталога и при наведении курсора. И сейчас получается, что при наведении курсора снизу отображается пустое поле
Нужно сделать так, чтобы при наведении курсора положение элементов не менялось, и отображаемая область увеличивалась только в влево (туда, где появляется миниатюра)
UPD Те же изменения нужно провести в разделе "сопутствующие товары". Там отступы и кнопка избранное остались как раньше. Отступы нужно уменьшить, а "в избранное" убрать
#8
Отправлено 31 Октябрь 2017 - 07:53
Зайдите в раздел Сайт - Редактор шаблонов - style.css - найдите:
#header { height: auto; background: #3E3F41; padding-bottom: 10px; margin-bottom: 0px; }
замените на:
#header { height: auto; background: #3E3F41; margin-bottom: 0px; }
далее найдите:
.preview { background-color: #fff; border: 1px solid #ccc; display: none; float: left; height: 383px; left: -80px !important; overflow: hidden; padding: 5px; position: absolute !important; text-align: center; top: 0; z-index: 2000; }
замените на:
.preview { background-color: #fff; border: 1px solid #ccc; display: none; float: left; height: 312px; left: -80px !important; overflow: hidden; padding: 5px; position: absolute !important; text-align: center; top: 0; z-index: 2000; }
далее найдите:
.preview .product-price { cursor: text; font-size: 16px; line-height: 18px; margin: 8px 0 28px 8px; padding-bottom: 5px; text-align: center; }
замените на:
.preview .product-price { cursor: text; font-size: 16px; line-height: 18px; margin: 0px 0 8px 8px; padding-bottom: 5px; text-align: center; } .preview .buy_button{line-height: 30px;}
#9
Отправлено 31 Октябрь 2017 - 14:26
.preview .product-price { cursor: text; font-size: 16px; line-height: 18px; margin: 0px 0 8px 8px; padding-bottom: 5px; text-align: center; } .preview .buy_button{line-height: 30px;}
строчку margin заменил на вот эту:
margin: 0px 0 6px 0px;
2. В мобильной версии серый фон все так же немного ниже красной линии. Подскажите, какой параметр менять? Кэш чистил.
3. Подскажите, где править код, чтобы в разделе "с этим товаром смотрят" внести те же изменения и сделать элементы более компактными, в точности как в основном меню?
#10
Отправлено 02 Ноябрь 2017 - 10:10
bronko (31 Октябрь 2017 - 14:26) писал:
.preview .product-price { cursor: text; font-size: 16px; line-height: 18px; margin: 0px 0 8px 8px; padding-bottom: 5px; text-align: center; } .preview .buy_button{line-height: 30px;}
строчку margin заменил на вот эту:
margin: 0px 0 6px 0px;
2. В мобильной версии серый фон все так же немного ниже красной линии. Подскажите, какой параметр менять? Кэш чистил.
3. Подскажите, где править код, чтобы в разделе "с этим товаром смотрят" внести те же изменения и сделать элементы более компактными, в точности как в основном меню?
Screenshot_2.jpg
Здравствуйте.
Если я правильно Вас понимаю, то в данном случае Вам необходимо в шаблоне style.css найти следующий код:
.product .wrapper-hover { padding: 10px 0px; background-color: #fff; text-align: left; }
И заменить его вот этим вот кодом:
.product .wrapper-hover { padding: 10px 0px; background-color: #fff; text-align: left; }
Далее после данного кода:
@media only screen and (max-width: 767px) and (min-width: 480px)
Найдите, пожалуйста, следующий код:
#header { height: auto; background: #3E3F41; margin-bottom: 0px; }
И замените его вот этим кодом:
#header { height: 214px; background: #3E3F41; margin-bottom: 0px; }
#11
Отправлено 02 Ноябрь 2017 - 13:10
RayLi (02 Ноябрь 2017 - 10:10) писал:
Если я правильно Вас понимаю, то в данном случае Вам необходимо в шаблоне style.css найти следующий код:
.product .wrapper-hover { padding: 10px 0px; background-color: #fff; text-align: left; }
И заменить его вот этим вот кодом:
.product .wrapper-hover { padding: 10px 0px; background-color: #fff; text-align: left; }
А что с п.3?
#12
Отправлено 02 Ноябрь 2017 - 14:02
bronko (02 Ноябрь 2017 - 13:10) писал:
А что с п.3?
К сожалению произвошла ошибка.
Вам необходимо в шаблоне style.css найти данный код:
.product .wrapper-hover { padding: 10px 0px; background-color: #fff; text-align: left; }
И заменить его вот этим вот кодом:
.product .wrapper-hover { padding: 0px 0px; background-color: #fff; text-align: left; height: 120px; }
#13
Отправлено 02 Ноябрь 2017 - 14:13
#14
Отправлено 02 Ноябрь 2017 - 14:25
bronko (02 Ноябрь 2017 - 14:13) писал:
Данная инструкция является ответом на Ваш 3-й пункт.
К сожалению изменения по нему на Вашем сайте отсутствуют.
Повторите, пожалуйста, изменения на Вашем сайте снова.
Спасибо.
#16
Отправлено 02 Ноябрь 2017 - 14:48
bronko (02 Ноябрь 2017 - 14:36) писал:
Тем не менее, разница в отображении есть!
Это видно на скриншотах. первый скрин - как в основном каталоге, второй - как в разделе "с этим товаром смотрят"
Screenshot_4.jpg Screenshot_3.jpg
А также очень хотелось бы получить ответ на п.2.
Попробуйте в шаблоне style.css найти так же следующий код:
.product .wrapper-hover form { display: block; text-align: center; padding: 15px; }
И заменить его вот этим вот кодом:
.product .wrapper-hover form { display: block; text-align: center; }
#17
Отправлено 02 Ноябрь 2017 - 20:48
Хотелось бы получить ответ на п.2. Хотя бы где копать. Вроде мелочь, а доставляет неудобства
#18
Отправлено 02 Ноябрь 2017 - 21:00
bronko (02 Ноябрь 2017 - 20:48) писал:
Хотелось бы получить ответ на п.2. Хотя бы где копать. Вроде мелочь, а доставляет неудобства
Уточните, пожалуйста, после данный изменений у Вас всё осталось неизменно?
Если да, то пришлите, пожалуйста, скриншот того, как сейчас у Вас на сайте в мобильной версии отображается данная полоска.
В шаблоне main.css после данного кода:
@media only screen and (max-width: 767px) and (min-width: 480px)
Найдите, пожалуйста, следующий код:
#header { height: auto; background: #3E3F41; margin-bottom: 0px; }
И замените его вот этим кодом:
#header { height: 214px; background: #3E3F41; margin-bottom: 0px; }
#20
Отправлено 07 Ноябрь 2017 - 09:49
bronko (07 Ноябрь 2017 - 01:08) писал:
Еще одна проблема, в мобильной версии не нажимается верхнее меню "выберите пункт меню"
Screenshot_6.jpg
Здравствуйте.
В данном случае Вам необходимо в шаблоне main.css найти после следующего кода:
@media only screen and (max-width: 479px)
Данный код:
.nav-container { text-align: left; background: none; margin-top: 0; }
И заменить его вот этим вот кодом:
.nav-container { text-align: left; background: none; margin-top: 0; z-index: 999999; }
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных