Аккаунт SL-424023. Мне нужно немного изменить дизайн:
1. Переделка шапки: опустить меню поверх слайдера, изменить цвет кнопок меню на синий(который используется в шаблоне), а цвет букв на белый. в пустом пространстве выше меню разместить телефон.
2. Нужно переделать слайдер, чтобы картинок можно было установить больше 2, и чтобы они менялись сами. Сейчас они перелистываются только вручную.
3. удалить блок синего цвета с четырьмя кружочками : бесплатная доставка и т.д. находится выше новостей.
4. Заменить изображение подложку под новостями.
5. Закоментировать группу значков соцсетей в подвале сайта.
0
Внести Изменения В Дизайн
Автор Aviva, 11 янв. 2018 03:17
Сообщений в теме: 4
#1
Отправлено 11 Январь 2018 - 03:17
#2
Отправлено 11 Январь 2018 - 18:03
Добрый день. Для внесения изменений зайдите в Редактор шаблонов-->HTML и найдите:
после него вставьте:
далее зайдите в Редактор шаблонов-->main.css и найдите:
замените на:
далее найдите:
замените на:
далее в конец кода main.css вставьте:
Далее зайдите в раздел Настройки-->Основные и в поле "Телефоны на сайте:" задайте контактные данные.
2. Зайдите в Редактор шаблонов-->HTML и найдите:
замените на:
Далее в Редакторе шаблонов чрез кнопку "Добавить файлы" добавьте картинки новые картинки. Они должны иметь названия slide3 и slide4 с расширением .jpg;
Рекомендуемый размер загружаемых картинок: 1920x704px
3. Зайдите в Редактор шаблонов-->main.css и найдите:
замените на:
4. В Редакторе шаблонов в левом блоке в разделе Изображений найдите изображение "bkg_brand.jpg" . Откройте его и через кнопку "Заменить" замените на свое. Рекомендуемый размер загружаемого изображения: 1920x480px
5. Зайдите в Редактор шаблонов-->HTML и найдите:
замените на:
<div class="col-md-3 col-xs-12"> <div id="logo"> <a href="{INDEX_PAGE_URL}" title="{SETTINGS_STORE_NAME}"><img src="{ASSETS_IMAGES_PATH}logo.png?design=sport" alt="{SETTINGS_STORE_NAME}"></a> </div> </div>
после него вставьте:
<div class="col-md-9 col-xs-12"> <ul class="head_mob"> {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<li class="phone"><em class="fa fa-phone"></em><span class="ft-content"><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></span></li>{% ENDIF %} {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<li class="phone"><em class="fa fa-phone"></em><span class="ft-content"><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></span></li>{% ENDIF %} {% IF SETTINGS_STORE_PHONE_NUMBER3 %}<li class="fax"><em class="fa fa-fax"></em><span class="ft-content"><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3}{SETTINGS_STORE_PHONE_CITY_CODE3}{SETTINGS_STORE_PHONE_NUMBER3}">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}({SETTINGS_STORE_PHONE_CITY_CODE3}){SETTINGS_STORE_PHONE_NUMBER3}</a></span></li>{% ENDIF %} </ul> </div>
далее зайдите в Редактор шаблонов-->main.css и найдите:
#custommenu ul.menunav li.active > a, #custommenu ul.menunav li:hover > a {color: #fff;background: #09afe7;position: relative;}
замените на:
#custommenu ul.menunav li > a, #custommenu ul.menunav li> a {color: #fff;background: #09afe7;position: relative;} #custommenu ul.menunav li.active > a, #custommenu ul.menunav li:hover > a {color: #09afe7;background: #fff;position: relative;}
далее найдите:
#custommenu ul.menunav li > a {display: block;padding: 10px 15px;color: #696c79;line-height: 30px;text-transform: uppercase;font-size: 16px;font-weight: 700;position: relative;border-bottom: 2px solid transparent;}
замените на:
#custommenu ul.menunav li > a {display: block;padding: 10px 15px;color: #fff;line-height: 30px;text-transform: uppercase;font-size: 16px;font-weight: 700;position: relative;border-bottom: 2px solid transparent;}
далее в конец кода main.css вставьте:
.head_mob {margin-top:58px;} .head_mob li{display:inline-block; width:33%; font-size:16px;color:#6975a2;} .head_mob li .ft-content{margin-left:10px;font-weight:bold;}
Далее зайдите в раздел Настройки-->Основные и в поле "Телефоны на сайте:" задайте контактные данные.
2. Зайдите в Редактор шаблонов-->HTML и найдите:
<div id="slider" class="owl-carousel owl-theme"> <div class="item"> <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=sport" /></a> </div> <div class="item"> <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=sport" /></a> </div> <div class="item"> <img u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=sport" /> </div> <div class="item"> <img u="image" src="{ASSETS_IMAGES_PATH}slide2.jpg?design=sport" /> </div> </div>
замените на:
<div id="slider" class="owl-carousel owl-theme"> <div class="item"> <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=sport" /></a> </div> <div class="item"> <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=sport" /></a> </div> <div class="item"> <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=sport" /></a> </div> <div class="item"> <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide4.jpg?design=sport" /></a> </div> <div class="item"> <img u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=sport" /> </div> <div class="item"> <img u="image" src="{ASSETS_IMAGES_PATH}slide2.jpg?design=sport" /> </div> <div class="item"> <img u="image" src="{ASSETS_IMAGES_PATH}slide3.jpg?design=sport" /> </div> <div class="item"> <img u="image" src="{ASSETS_IMAGES_PATH}slide4.jpg?design=sport" /> </div> </div>
Далее в Редакторе шаблонов чрез кнопку "Добавить файлы" добавьте картинки новые картинки. Они должны иметь названия slide3 и slide4 с расширением .jpg;
Рекомендуемый размер загружаемых картинок: 1920x704px
3. Зайдите в Редактор шаблонов-->main.css и найдите:
#block-info {background: #09afe7;padding: 30px 0 0 0;text-align: center;}
замените на:
#block-info {background: #09afe7;padding: 30px 0 0 0;text-align: center;display:none;}
4. В Редакторе шаблонов в левом блоке в разделе Изображений найдите изображение "bkg_brand.jpg" . Откройте его и через кнопку "Заменить" замените на свое. Рекомендуемый размер загружаемого изображения: 1920x480px
5. Зайдите в Редактор шаблонов-->HTML и найдите:
<ul class="link-follow"> <li><a class="facebook fa fa-facebook" href="https://www.facebook.com/" title="FaceBook.com" target="_blank"><span>facebook</span></a></li> <li><a class="twitter fa fa-twitter" href="https://twitter.com/" title="Twitter.com" target="_blank"><span>twitter</span></a></li> <li><a class="odnoklassniki fa fa-odnoklassniki" href="https://ok.ru/" title="Odnoklassniki" target="_blank"><span>odnoklassniki</span></a></li> <li><a class="vk fa fa-vk" href="https://vk.com/" title="VK.com" target="_blank"><span>vk</span></a></li> <li><a class="youtube fa fa-instagram" href="https://instagram.com/" title="Instagram.com" target="_blank"><span>youtube</span></a></li> </ul>
замените на:
<!--ul class="link-follow"> <li><a class="facebook fa fa-facebook" href="https://www.facebook.com/" title="FaceBook.com" target="_blank"><span>facebook</span></a></li> <li><a class="twitter fa fa-twitter" href="https://twitter.com/" title="Twitter.com" target="_blank"><span>twitter</span></a></li> <li><a class="odnoklassniki fa fa-odnoklassniki" href="https://ok.ru/" title="Odnoklassniki" target="_blank"><span>odnoklassniki</span></a></li> <li><a class="vk fa fa-vk" href="https://vk.com/" title="VK.com" target="_blank"><span>vk</span></a></li> <li><a class="youtube fa fa-instagram" href="https://instagram.com/" title="Instagram.com" target="_blank"><span>youtube</span></a></li> </ul-->
#3
Отправлено 15 Январь 2018 - 00:19
Спасибо. Почти все получилось.
Но слайдер не работает по прежнему. Только ручное перелистывание.
Еще, можно телефон в шапке сделать справа и увеличить шрифт? А по центру шапки текст:
Магазин работает с 10 до 20 часов по московскому времени.
Минимальная сумма заказа 1000 рублей.
За заказ от 5 000 рублей доставка бесплатная
Выравнивание текста по центру.
Но слайдер не работает по прежнему. Только ручное перелистывание.
Еще, можно телефон в шапке сделать справа и увеличить шрифт? А по центру шапки текст:
Магазин работает с 10 до 20 часов по московскому времени.
Минимальная сумма заказа 1000 рублей.
За заказ от 5 000 рублей доставка бесплатная
Выравнивание текста по центру.
#4
Отправлено 24 Январь 2018 - 15:20
Ау...
#5
Отправлено 30 Январь 2018 - 13:30
Aviva (15 Январь 2018 - 00:19) писал:
Спасибо. Почти все получилось.
Но слайдер не работает по прежнему. Только ручное перелистывание.
Еще, можно телефон в шапке сделать справа и увеличить шрифт? А по центру шапки текст:
Магазин работает с 10 до 20 часов по московскому времени.
Минимальная сумма заказа 1000 рублей.
За заказ от 5 000 рублей доставка бесплатная
Выравнивание текста по центру.
Но слайдер не работает по прежнему. Только ручное перелистывание.
Еще, можно телефон в шапке сделать справа и увеличить шрифт? А по центру шапки текст:
Магазин работает с 10 до 20 часов по московскому времени.
Минимальная сумма заказа 1000 рублей.
За заказ от 5 000 рублей доставка бесплатная
Выравнивание текста по центру.
jQuery(function($) { var carouselU = $('#slider'); carouselU.owlCarousel({ pagination: false, navigation : true, itemsScaleUp : true, slideSpeed : 800, autoPlay: true, autoHeight: true, paginationSpeed : 400, singleItem:true, items: 1 }); });и замените его на
jQuery(function($) { var carouselU = $('#slider'); carouselU.owlCarousel({ pagination: false, navigation : true, itemsScaleUp : true, slideSpeed : 800, autoplay: true, autoHeight: true, paginationSpeed : 400, singleItem:true, items: 1 }); });Далее В шаблоне HTML найдите код
<div class="col-md-9 col-xs-12"> <ul class="head_mob"> {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<li class="phone"><em class="fa fa-phone"></em><span class="ft-content"><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></span></li>{% ENDIF %} {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<li class="phone"><em class="fa fa-phone"></em><span class="ft-content"><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></span></li>{% ENDIF %} {% IF SETTINGS_STORE_PHONE_NUMBER3 %}<li class="fax"><em class="fa fa-fax"></em><span class="ft-content"><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3}{SETTINGS_STORE_PHONE_CITY_CODE3}{SETTINGS_STORE_PHONE_NUMBER3}">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}({SETTINGS_STORE_PHONE_CITY_CODE3}){SETTINGS_STORE_PHONE_NUMBER3}</a></span></li>{% ENDIF %} </ul> </div>и замените его на
<div class="col-md-9 col-xs-12"> <div class="header-text"> <p style="text-align:center">Магазин работает с 10 до 20 часов по московскому времени.<br> Минимальная сумма заказа 1000 рублей.<br> За заказ от 5 000 рублей доставка бесплатная</p> </div> <ul class="head_mob" style="text-align:right;width:100%"> {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<li class="phone"><em class="fa fa-phone"></em><span class="ft-content"><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></span></li>{% ENDIF %} {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<li class="phone"><em class="fa fa-phone"></em><span class="ft-content"><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></span></li>{% ENDIF %} {% IF SETTINGS_STORE_PHONE_NUMBER3 %}<li class="fax"><em class="fa fa-fax"></em><span class="ft-content"><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3}{SETTINGS_STORE_PHONE_CITY_CODE3}{SETTINGS_STORE_PHONE_NUMBER3}">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}({SETTINGS_STORE_PHONE_CITY_CODE3}){SETTINGS_STORE_PHONE_NUMBER3}</a></span></li>{% ENDIF %} </ul> <div class="clear"> </div> </div>В файле main.css найдите код
.head_mob {margin-top:58px;}и замените его на
.head_mob {width:100;text-align:right;} .header-text p{text-align:center}
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных