Вопрос По Дизайну
#1
Отправлено 05 Апрель 2016 - 10:44
И как это глупо не звучало для интернет магазина, возможно ли скрыть корзину и добавление товара в нее, а так же добавлении товара в избранное (временно пока она не нужна) ?
#2
Отправлено 05 Апрель 2016 - 11:10
phorezzz (05 Апрель 2016 - 10:44) писал:
И как это глупо не звучало для интернет магазина, возможно ли скрыть корзину и добавление товара в нее, а так же добавлении товара в избранное (временно пока она не нужна) ?
Здравствуйте,
1) Чтобы убрать блоки под слайдером вообще, найдите и удалите в шаблоне HTML код:
<!-- Баннеры --> {% IF index_page %} <div id="topsl" class="wrap"> <div class="container"> <div class="row"> <div class="block free-shipping col-sm-3 col-sms-6 col-smb-12"> <div class="block-title"><span>Бесплатная доставка</span></div> <div class="block-content">Доставка по городу и области Бесплатна!</div> </div> <div class="block money-back col-sm-3 col-sms-6 col-smb-12"> <div class="block-title"><span>30 дней гарантии</span></div> <div class="block-content">Вы можете вернуть товар в течении 30 дней после получения заказа</div> </div> <div class="block orders-247 col-sm-3 col-sms-6 col-smb-12"> <div class="block-title"><span>Прием заказов 24/7</span></div> <div class="block-content">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</div> </div> <div class="block secured-payment col-sm-3 col-sms-6 col-smb-12"> <div class="block-title"><span>Безопасная оплата</span></div> <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div> </div> </div> </div> </div> {% ENDIF %} <!-- /END Баннеры -->
если нужно временно скрыть, тогда в конце main.css добавьте код:
#topsl { display: none; }
2) В конце mian.css добавьте код:
ul.add-to-links { display: none !important; } a.add-cart.btn-cart.button { display: none !important; } .block.mini-cart { display: none; }
#3
Отправлено 05 Апрель 2016 - 21:19
#5
Отправлено 08 Апрель 2016 - 02:48
#6
Отправлено 08 Апрель 2016 - 21:28
#7
Отправлено 09 Апрель 2016 - 07:00
#8
Отправлено 09 Апрель 2016 - 13:01
#9
Отправлено 09 Апрель 2016 - 13:17
Kronmet (09 Апрель 2016 - 13:01) писал:
Здравствуйте.
Если я вас правильно понял, то попробуйте, пожалуйста, сделать следующее:
В шаблоне main.css найдите данный код:
#header .header-right .header-right-inner { float: right; }
И замените его вот этим вот кодом:
#header .header-right .header-right-inner { float: right; display: none; }
Далее в самый конец шаблона main.css добавьте, пожалуйста, следующий код:
ul.add-to-links li:nth-child(2) { display: none !important; }
#11
Отправлено 11 Апрель 2016 - 11:14
Kronmet (09 Апрель 2016 - 13:01) писал:
Здравствуйте, функцию сравнения товаров можно отключить в Настройках - Основные в разделе "Модуль сравнения товаров на сайте". Все кнопки с ним связанные автоматически пропадут с сайта.
Далее по дизайну шапки, перед изменениями создайте бекап шаблона, далее в шаблоне HTML найдите код:
<!-- Основная часть Шапки --> <div id="header" class="wrap"> <div class="container"> <div class="row"> <!-- Logo --> <div id="logo" class="col-sm-4 col-xs-12"> <a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/"> <img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}"> </a> </div> <!-- END: Logo --> <div class="header-right col-sm-8 col-xs-12"> <div class="header-right-inner"> <ul class="connect-us"> <li><a href="#" class="fa fa-facebook"></a></li> <li><a href="#" class="fa fa-twitter"></a></li> <li><a href="#" class="fa fa-youtube"></a></li> <li><a href="#" class="fa fa-vk"></a></li> </ul> <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" title="Поиск по магазину" onsubmit="if($(this).find('.form-search').val()) return false;"> <div class="form-search"> <input type="text" name="q" value="{SEARCH_QUERY}" class="inputText" placeholder="Поиск по магазину..."> <input type="hidden" name="goods_search_field_id" value="0"> <button type="submit" title="Искать" class="button search-submit"></button> </div> </form> </div> </div> </div> </div> </div> <!-- /END Основная часть Шапки -->
и замените на код:
<!-- Основная часть Шапки --> <div id="header" class="wrap"> <div class="container"> <div class="row"> <!-- Logo --> <div class="work-time col-sm-4 col-xs-12"> <p>Мы работаем по будням с 8:00 до 19:00</p> <p>Прием заявок по телефону - круглосуточно</p> </div> <div id="logo" class="col-sm-4 col-xs-12"> <a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/"> <img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}"> </a> </div> <!-- END: Logo --> <div class="header-right col-sm-4 col-xs-12"> <div class="header-right-inner"> {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<p class="c-phone"><label>Телефон:</label> <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></p>{% ENDIF %} {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<p class="c-phone"><label>Телефон:</label> <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></p>{% ENDIF %} <a class="callback fancybox.ajax" href="http://{NET_DOMAIN}/callback?only_body=1">Обратный звонок</a> </div> </div> </div> </div> </div> <!-- /END Основная часть Шапки -->
перед кодом:
</head>
добавьте код:
<script> $(document).ready(function() { $(".callback").fancybox({ maxWidth : 300, maxHeight : 330, fitToView : false, width : '70%', height : '70%', autoSize : false, closeClick : false, openEffect : 'none', closeEffect : 'none' }); }); </script>
В конце main.css добавьте код:
.work-time { color: black; font-size: 17px; line-height: 17px; } .header-right-inner .c-phone { font-size: 18px; } .callback { border: 2px solid #3cabda; border-radius: 20px; padding: 10px 50px; color: #3cabda; }
далее код:
#header .header-right .header-right-inner { float: right; display: none; }
замените на код:
#header .header-right .header-right-inner { float: right; }
Уточните, нужна ли форма отправки заявки и подойдет ли Вам для этого форма "Связь с администрацией"?
#13
Отправлено 12 Апрель 2016 - 03:00
<div class="callback-info"> {% IF FORM_NOTICE %} <div class="{% IF FORM_NOTICE_IS_GOOD %}success{% ELSE %}warning{% ENDIF %}">{FORM_NOTICE | nl2br}</div> {% ENDIF %} {% IFNOT FORM_NOTICE_IS_GOOD %} <form method="post" action="{CALLBACK_URL}" class="callbackForm form-box" enctype="multipart/form-data"> <input type="hidden" name="hash" value="{HASH}" /> <input class="callbackredirect" type="hidden" name="return_to" value="{CALLBACK_URL}" /> <!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации --> {ANTISPAM_CODE} <div class="callback-form"> <div> <label for="callback_person" class="required">Представьтесь, пожалуйста<em>*</em></label> <input id="callback_person" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" maxlength="50" class="required inputText"/> </div> <div> <label for="callback_phone" class="required">Телефон<em>*</em></label> <input id="callback_phone" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" maxlength="255" class="required inputText"/> </div> </div> <br> <div class="buttons clear"> <a href="http://{NET_DOMAIN}/" class="button" style="display: none;">Перейти на главную</a> {% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="button">Отправить</button>{% ENDIF %} </div> </form> {% ENDIF %} </div>
N2, в main.css найдите:
.work-time { color: black; font-size: 17px; line-height: 17px; }
после него пропишите:
.work-time p { font-weight: bold; margin: 5px 0; }
В шаблоне HTML найдите:
<label>Телефон:</label>
замените на:
<img src="ссылка на иконку" alt="" />в нем текст замените на ссылку.
В main.css найдите:
.callback { border: 2px solid #3cabda; border-radius: 20px; padding: 10px 50px; color: #3cabda; }
данный блок отвечает за стилизацию кнопки обратного звонка.
N3, в шаблоне HTML найдите:
<ul class="mainnav"> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %} <li class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}"> <a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}">{catalog_full.NAME}</a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul> {%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {%ENDFOR%} {%ENDIF%} </ul>
замените на:
<ul class="mainnav"> {% FOR menu %} {% FOR header %} {% FOR links %} <li class="level0 {% IF menu.header.links.SELECTED %}active{%ENDIF%}"> <a href="{menu.header.links.URL}" class="title-lv0 {% IF menu.header.links.SELECTED %}active{%ENDIF%}">{menu.header.links.NAME}</a> </li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul>
#14
Отправлено 12 Апрель 2016 - 14:20
Теперь на скриншоте показано меню,его надо сделать таким цветом (#B0B0B0) и убрать границы кнопки(чтобы просто оставалось название без обормления).
2.Изменить у всего меню шрифт,чтобы все буквы были заглавными и жирными,\
3. Выровнить все меню по центру.
4.Как добавить маленькие иконки слева от названия меню?
#15
Отправлено 12 Апрель 2016 - 15:30
Kronmet (12 Апрель 2016 - 14:20) писал:
Теперь на скриншоте показано меню,его надо сделать таким цветом (#B0B0B0) и убрать границы кнопки(чтобы просто оставалось название без обормления).
2.Изменить у всего меню шрифт,чтобы все буквы были заглавными и жирными,\
3. Выровнить все меню по центру.
4.Как добавить маленькие иконки слева от названия меню?
Здравствуйте!
В шаблоне main.css найдите строку:
#custommenu ul.mainnav li.level0 > a {display: block;padding: 8px 10px;font-size: 150%;font-weight: normal;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;position: relative;color: #FFF;border: 1px solid transparent;}замените ее на:
#custommenu ul.mainnav li.level0 > a {display: block;padding: 8px 10px;font-size: 150%;font-weight: 600; text-transform: uppercase;position: relative;color: #B0B0B0;border: 1px solid transparent;}
В строке:
#custommenu ul.mainnav li.level0.active > a, #custommenu ul.mainnav li.level0:hover > a {color: #FFF;position: relative;background-color: rgba(255, 255, 255, 0.1);border-color: rgba(255, 255, 255, 0.3);}замените цвет пункта меню при наведении на необходимый. Например так:
#custommenu ul.mainnav li.level0.active > a, #custommenu ul.mainnav li.level0:hover > a {color: #666666;position: relative;background-color: rgba(255, 255, 255, 0.1);border-color: rgba(255, 255, 255, 0.3);}
Найдите строку:
#mommenu .btn {display:inline-block;cursor:pointer;margin: 15px 0 0 15px;position: relative;z-index: 2;padding: 0 0;background: transparent;width: 49px;height: 49px;line-height: 49px;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;text-align: center;border: 1px solid rgba(255, 255, 255, 0.5);}замените на:
#mommenu .btn {display:inline-block;cursor:pointer;margin: 15px 0 0 15px;position: relative;z-index: 2;padding: 0 0;background: [color=#282828][font=helvetica, arial, sans-serif]#B0B0B0[/font][/color];width: 49px;height: 49px;line-height: 49px;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;text-align: center;border: 1px solid [color=#282828][font=helvetica, arial, sans-serif]#B0B0B0[/font][/color];}
и строку:
#mommenu .btn:hover {background: rgba(255, 255, 255, 0.2);}замените на:
#mommenu .btn:hover {background: #666666;}
Вставляем картинки:
в шаблоне main.css найдите строку:
#custommenu ul.mainnav li.level0 > a {display: block;padding: 8px 10px;font-size: 150%;font-weight: 600; text-transform: uppercase;position: relative;color: #B0B0B0;border: 1px solid transparent;}замените на:
#custommenu ul.mainnav li.level0 > a {display: block;padding: 8px 10px;font-size: 150%;font-weight: 600; text-transform: uppercase;position: relative;color: #B0B0B0;border: 1px solid transparent; width: 135px;}
в конец шаблона добавьте строки:
#custommenu ul.mainnav li.level0 > a {display: block;padding: 8px 10px;font-size: 150%;font-weight: 600; text-transform: uppercase;position: relative;color: #B0B0B0;border: 1px solid transparent; width: 145px;}
Затем,в шаблоне html найдите строку:
<a href="{menu.header.links.URL}" class="title-lv0 {% IF menu.header.links.SELECTED %}active{%ENDIF%}">{menu.header.links.NAME}</a>
перед ней вставьте:
<div class="mini-image-menu"> {% IF menu.header.links.NAME=О компании %}<img src="{ASSETS_IMAGES_PATH}ico-mail.png" alt="" title="" /> {% ENDIF %} {% IF menu.header.links.NAME=Каталог %}<img src="{ASSETS_IMAGES_PATH}ico-delete.png" alt="" title="" /> {% ENDIF %} {% IF menu.header.links.NAME=Прайс-лист %}<img src="{ASSETS_IMAGES_PATH}ico-dot.png" alt="" title="" /> {% ENDIF %} {% IF menu.header.links.NAME=Услуги%}<img src="{ASSETS_IMAGES_PATH}ico-drop.png" alt="" title="" /> {% ENDIF %} {% IF menu.header.links.NAME=Справочник %}<img src="{ASSETS_IMAGES_PATH}ico-edit.png" alt="" title="" /> {% ENDIF %} {% IF menu.header.links.NAME=Контакты%}<img src="{ASSETS_IMAGES_PATH}ico-dot.png" alt="" title="" /> {% ENDIF %} </div>
Замените названия мини-изображений на свои, заранее загруженные на сайт. Получится примерно так:
Проверьте, и напиши нам, чтобы подправить стили индивидуально для Вашего магазина.
#17
Отправлено 13 Апрель 2016 - 20:26
Kronmet (13 Апрель 2016 - 19:44) писал:
Попробуйте сделать следующее:
в main.css найдите код
#custommenu ul.mainnav li.level0 { display: block; float: left; border: none; position: static; text-align: left; padding: 21px 5px 21px 0px; }и замените на
#custommenu ul.mainnav li.level0 .mini-image-menu, #custommenu ul.mainnav li.level0 a { padding: 0px 4px; float: left; width: auto; } #custommenu ul.mainnav li.level0 { display: block; float: left; border: none; position: static; text-align: left; height: 75px; line-height: 75px; }
#18
Отправлено 13 Апрель 2016 - 23:55
#20
Отправлено 14 Апрель 2016 - 01:34
#custommenu ul.mainnav li.level0 > a { display: block; padding: 8px 10px; font-size: 150%; font-weight: 600; text-transform: uppercase; position: relative; color: #B0B0B0; border: 1px solid transparent; width: 145px; }
замените на:
#custommenu ul.mainnav li.level0 > a { display: inline-block; padding: 0 !important; font-size: 150%; font-weight: 600; text-transform: uppercase; position: relative; color: #B0B0B0; border: 1px solid transparent; width: auto; }
Далее найдите:
#custommenu ul.mainnav li.level0 .mini-image-menu, #custommenu ul.mainnav li.level0 a { padding: 0px 4px; float: left; width: auto; }
замените на:
#custommenu ul.mainnav li.level0 .mini-image-menu, #custommenu ul.mainnav li.level0 a { padding: 0px 4px 0px 0px; display: inline-block; width: auto; vertical-align: middle; }
Далее найдите:
#custommenu ul.mainnav li.level0 { display: block; float: left; border: none; position: static; text-align: left; height: 75px; line-height: 75px; }
замените на:
#custommenu ul.mainnav li.level0 { display: block; float: left; border: none; position: static; text-align: left; height: 75px; line-height: 75px; padding: 0 5px; border-right: 1px dashed #ccc; } #custommenu ul.mainnav li.level0:last-child { border: none; }Пункты меню вы можете изменить в разделе Сайт - Меню.
Результат:
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных