Вопросы По Оформлению
#1
Отправлено 07 Май 2016 - 19:12
SL-385485
В шапке сайта стоят 2 телефона и кнопка входа в личный кабинет, необходимо телефоны поставить телефоны друг под другом, а значок трубки посередине.
Также надо меню, где Межкомнатные двери, напольные покрытия и т.д. центрировать.
Каким образом это сделать?
Спасибо!
#2
Отправлено 08 Май 2016 - 19:00
ArtReal (07 Май 2016 - 19:12) писал:
SL-385485
В шапке сайта стоят 2 телефона и кнопка входа в личный кабинет, необходимо телефоны поставить телефоны друг под другом, а значок трубки посередине.
Также надо меню, где Межкомнатные двери, напольные покрытия и т.д. центрировать.
Каким образом это сделать?
Спасибо!
В main.css найдите код
#custommenu .mainnav { position: static; margin: 0; overflow: hidden; }и замените на
#custommenu .mainnav { position: static; margin: 0; overflow: hidden; text-align: center; }так же найдите
#custommenu .mainnav > li { float:left; }и замените на
#custommenu .mainnav > li { display: inline-block; }найдите
.block-phone a { font-size: 18px; margin-left: 5px; }и замените на
.block-phone a { font-size: 18px; margin-left: 5px; padding-left: 15px; }найдите
.block-phone i { font-size: 18px; }и замените на
.block-phone i { font-size: 20px; position: absolute; top: 16px; }найдите
.block-phone { display: inline-block; float: none; width: 200px; line-height: 40px; margin-left: 20px; text-transform: uppercase; }и замените на
.block-phone { display: inline-block; float: none; width: 200px; line-height: 25px; margin-left: 20px; text-transform: uppercase; }
#3
Отправлено 10 Май 2016 - 10:30
#4
Отправлено 14 Сентябрь 2016 - 15:26
Изменения делал давно, поэтому ни бэкапы, ни моя память меня сейчас не спасут.
То, что мне нужно сделать отметил на скрине, а именно:
1. Перенести поиск с нижней строки меню на верхнюю.
2. Удалить нижнюю строку меню, дублирует верхнюю.
3. Отредактировать положение текста в верхних блоках.
#5
Отправлено 14 Сентябрь 2016 - 15:58
1. Перенесите часть кода в файле Сайт - Шаблоны - HTML
<!-- Поиск --> <div class="form-search"> <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" title="Поиск по магазину" onsubmit="if($(this).find('.form-search').val()) return false;"> <input type="text" name="q" value="{SEARCH_QUERY}" class="input-text search-string" placeholder="Поиск по магазину..."> <input type="hidden" name="goods_search_field_id" value="0"> <button type="submit" title="Искать" class="button search-submit fa fa-search"></button> </form> </div>
Вставьте его сразу после этого кода (После строки под номером 90):
<div class="row"> <ul class="menu-info"> {% FOR menu %} {% FOR header %} {% FOR links %} <div class="cat-name"><a href="{menu.header.links.URL}" class="main_category {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></div> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %}
У вас должно получиться:
<div class="row"> <ul class="menu-info"> {% FOR menu %} {% FOR header %} {% FOR links %} <div class="cat-name"><a href="{menu.header.links.URL}" class="main_category {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></div> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} <!-- Поиск --> <div class="form-search"> <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" title="Поиск по магазину" onsubmit="if($(this).find('.form-search').val()) return false;"> <input type="text" name="q" value="{SEARCH_QUERY}" class="input-text search-string" placeholder="Поиск по магазину..."> <input type="hidden" name="goods_search_field_id" value="0"> <button type="submit" title="Искать" class="button search-submit fa fa-search"></button> </form> </div>
2. В том же файле найдите и удалите данный код:
<!-- Личный кабинет, Телефон, Поиск --> <div class="header-top"> <div class="container"> <div class="block-account"> <div class="user-title"> <i class="fa fa-bars" title="Меню пользователя"></i><span class="label">Меню</span> </div> <ul class="dropdown-list"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div>
3. Пожалуйста уточните, в каких именно блоках вы хотите отредактировать текст и каким образом.
#6
Отправлено 14 Сентябрь 2016 - 21:36
Ra1zon (14 Сентябрь 2016 - 15:58) писал:
заметил что некорректно они отображаются только если меняется размер окна браузера, вот так текст съезжает
а в развернутом окне все в порядке.
В общем дальше получается следующее.
1. В форме поиска, поисковая фраза набирается белыми буквами, необходимо изменить цвет шрифта на черный.
2. Цвет меню каталога и надписи "корзина" с иконкой также белый, необходимо сделать черным, оранжевый при наведении оставить.
3. Логотип спустить вниз, поместить слева от меню каталога, указал на скрине
4. Блок справа (там где сейчас логотип) и блок слева удалить, оставить три имеющихся блока "доставка", "Прием заказов" и "гарантия"
#7
Отправлено 15 Сентябрь 2016 - 10:12
Найдите строку:
.form-search .input-text {width: 200px;padding-right: 25px;height: 30px;background: none;border: 0;color: #fff;}
И замените ее на:
.form-search .input-text {width: 200px;padding-right: 25px;height: 30px;background: none;border: 0;color: #000;}
2. В том же файле найдите строку:
.header-middle {position: relative;}
Замените ее на:
.header-middle {position: relative; background-color:#000;}
3. Найдите и удалите код в файле (Редактор шаблонов ->HTML):
<!-- Логотип --> <div class="col-xs-2"> <div class="logo"> <a href="http://{NET_DOMAIN}/" title="{SETTINGS_STORE_NAME}"> <img src="{ASSETS_IMAGES_PATH}logo.png?design=urban" alt="{SETTINGS_STORE_NAME}"> </a> </div> </div> <div class="col-xs-10">
Найдите код:
<!-- Каталог --> <div class="container"> <div id="custommenu" class="col-lg-9 col-sm-8 col-sms-6 col-smb-6 col-left"> {% IFNOT catalog_full_empty %} <ul class="mainnav">
После него вставьте код:
<!-- Логотип --> <div class="logo" style="float: left;"> <a href="http://kpkm.storeland.ru/" title="Мобильная электроника из Китая"> <img src="http://kpkm.storeland.net/logo.png?design=urban" alt="Мобильная электроника из Китая" style="width:120px; padding-right:30px; padding-top:5px"> </a> </div>
Должно получиться:
<!-- Каталог --> <div class="container"> <div id="custommenu" class="col-lg-9 col-sm-8 col-sms-6 col-smb-6 col-left"> {% IFNOT catalog_full_empty %} <ul class="mainnav"> <!-- Логотип --> <div class="logo" style="float: left;"> <a href="http://kpkm.storeland.ru/" title="Мобильная электроника из Китая"> <img src="http://kpkm.storeland.net/logo.png?design=urban" alt="Мобильная электроника из Китая" style="width:120px; padding-right:30px; padding-top:5px"> </a> </div>
4.В файле main.css найдите строки:
.container {width: 1200px;}
.container {width: 970px;}
.container {width: 750px;}
Замените их на:
.container {width: auto;}
И добавьте строчку:
.info-item {height:98px;}
#8
Отправлено 15 Сентябрь 2016 - 13:27
Еще подскажите, пожалуйста, как меню каталога, сдвинуть немного вправо, слишком близко оно к логотипу.
#9
Отправлено 15 Сентябрь 2016 - 13:36
severyanin (15 Сентябрь 2016 - 13:27) писал:
Еще подскажите, пожалуйста, как меню каталога, сдвинуть немного вправо, слишком близко оно к логотипу.
Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
<div class="logo" style="float: left;">
Замените на:
<div class="logo" style="float: left;margin-right: 10%;">
#10
Отправлено 16 Сентябрь 2016 - 11:21
Едем дальше)
В карточке товара:
1. Цену необходимо увеличить, и, может жирным сделать, слишком мелкий шрифт.
2. Поле артикул удалить
3. Кнопку "в корзину" необходимо удалить, оставить только одну кнопку и надпись на ней поменять на "купить".
#11
Отправлено 16 Сентябрь 2016 - 11:41
severyanin (16 Сентябрь 2016 - 11:21) писал:
Едем дальше)
В карточке товара:
1. Цену необходимо увеличить, и, может жирным сделать, слишком мелкий шрифт.
2. Поле артикул удалить
3. Кнопку "в корзину" необходимо удалить, оставить только одну кнопку и надпись на ней поменять на "купить".
screen.png
1. В файле main.css найдите строчку:
.price {display: inline-block;color: #ffa500;font-size: 18px;letter-spacing: 0.5px;}
и замените на:
.price {display: inline-block;color: #ffa500;font-size: 28px;letter-spacing: 0.5px;font-weight:bold;}
Где font-size регулирует величину текста, а font-weight:bold; делает текст жирным.
2. в файле Товар, найдите строки:
<!-- Артикул --> {% IF GOODS_MOD_ART_NUMBER %} <div class="goodsDataMainModificationArtNumber f-fix"> Артикул: <span>{GOODS_MOD_ART_NUMBER}</span> </div> {% ENDIF %}
и замените их на:
<!-- Артикул --> <!--{% IF GOODS_MOD_ART_NUMBER %} <div class="goodsDataMainModificationArtNumber f-fix"> Артикул: <span>{GOODS_MOD_ART_NUMBER}</span> </div> {% ENDIF %}-->
3. Снова в файле Товар найдите строки:
<button type="submit" class="add-cart button" title="Положить «{GOODS_NAME}» в корзину"/>В корзину</button> <button type="submit" class="add-cart quick button" title="Положить «{GOODS_NAME}» в корзину"/>Быстрый заказ</button>
и замените их на:
<!--<button type="submit" class="add-cart button" title="Положить «{GOODS_NAME}» в корзину"/>В корзину</button>--> <button type="submit" class="add-cart quick button" title="Положить «{GOODS_NAME}» в корзину"/>Купить</button>
#13
Отправлено 16 Сентябрь 2016 - 14:00
severyanin (16 Сентябрь 2016 - 13:46) писал:
Нужно немного увеличить отступ между названием товара и ценой.
Кнопку с надписью "купить" увеличить, какая-то маленькая получилась.
screen2.png
В файле main.css
Найдите строку:
.product-view .product-shop .price-box {float: left;margin-bottom: 10px;}
и замените ее на:
.product-view .product-shop .price-box {float: left;margin-bottom: 10px; margin-top: 10px;}
Где margin-top:10px; величина отступа сверху(цены), вы всегда сможете ее настроить под себя.
Увеличение кнопки Купить
В том же файле добавьте строку:
.add-to-cart .button {width:150px;}
Где width:150px; параметр для ширины данной кнопки.
#14
Отправлено 16 Сентябрь 2016 - 14:19
Ra1zon (16 Сентябрь 2016 - 14:00) писал:
.add-to-cart .button {width:150px;}Где width:150px; параметр для ширины данной кнопки.
Отлично!
Теперь необходимо шрифт текста кнопки "купить" увеличить/выделить жирным.
#15
Отправлено 16 Сентябрь 2016 - 14:27
severyanin (16 Сентябрь 2016 - 14:19) писал:
Теперь необходимо шрифт текста кнопки "купить" увеличить/выделить жирным.
В сообщении №11 вами были произведены подобные изменения, только для другого блока, используйте
параметры font-size:22px; и font-weight:bold;
.add-to-cart .button {width:150px;}
Для данной строки, у вас должно получиться
.add-to-cart .button {width:150px;font-size:22px; font-weight:bold;}
#17
Отправлено 19 Сентябрь 2016 - 13:50
1. В файле Корзина, найдите строку:
<a id="startOrder" class="button black" title="Перейти к быстрому оформлению заказа">Быстрый заказ</a>
И замените ее на:
<a id="startOrder" class="button black" title="Перейти к быстрому оформлению заказа">Оформить заказ</a>
2. В файле main.css найдите строку:
.form-search {display: inline-block;position: relative;float: right;right: 0.5px;top: 4px;z-index: 10;border: 1px solid rgba(255,255,255,0.2);padding: 0 5px;}
И замените на:
.form-search {display: inline-block;position: relative;float: right;right: 0.5px;top: 4px;z-index: 10;border: 2px solid rgba(179, 179, 179, 0.81);padding: 0 5px;}
Рамка станет приятного серого цвета, если вы все же хотите сделать ее черной, вместо rgba(179, 179, 179, 0.81) вставьте #000
3.В файл main.css вставьте строку:
.menu-info {margin-left:10%;}
#19
Отправлено 19 Сентябрь 2016 - 15:38
Найти строку:
.red {color: #ffa500;}
Заменить на:
.red {color: #ffa500;font-weight: bold;}
Найти:
.cart-ajax .cart-txt .newCartCount {color: #ffa500;}
Заменить на:
.cart-ajax .cart-txt .newCartCount {color: #ffa500;font-weight: bold;}
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных