Изменение В Шапке
#1
Отправлено 25 Апрель 2016 - 16:17
1) Требуется сместить до картинки чека "Товаров на сумму.... и тд." и красиво все это там уместить, по центру .
2) Графу поиск уменьшить в размерах и поставить правее и чуть ниже от чека, чтобы так сказать был зазор между ними
3) Убрать фразу НАЗВАНИЕ МАГАЗИНА
4) Названия Главная Доставка Корзина Каталог и т.д . сместить ниже, чтобы было органично и красиво и, чтобы они были в белых прямоугольничках со скругленными углами)))
Пока на этом все)
Жду Вашей вселенской помощи
Аккаунт SL-384641
#2
Отправлено 25 Апрель 2016 - 18:17
Gerti (25 Апрель 2016 - 16:17) писал:
1) Требуется сместить до картинки чека "Товаров на сумму.... и тд." и красиво все это там уместить, по центру .
2) Графу поиск уменьшить в размерах и поставить правее и чуть ниже от чека, чтобы так сказать был зазор между ними
3) Убрать фразу НАЗВАНИЕ МАГАЗИНА
4) Названия Главная Доставка Корзина Каталог и т.д . сместить ниже, чтобы было органично и красиво и, чтобы они были в белых прямоугольничках со скругленными углами)))
Пока на этом все)
Жду Вашей вселенской помощи
Аккаунт SL-384641
1) Дело в том, что у Вас адаптивный шаблон и при изменении разрешения экрана корзина будет перемещаться, возможно стоит сделать для корзины отдельную картинку с листом, а с фона его убрать.
2) В style.css найдите код
#search_block_top #search_query_top { width: 350px; vertical-align: middle !important; border: 1px solid #cecece!important; padding-right: 30px; }в нем изменяйте width(ширина поиска).
Так же найдите
#search_block_top { position: static; float: right; margin: 26px 10px 0 0; }изменяйте значение 10px, для регулировки положения поиска.
3) В шаблоне html найдите код
<a href="http://{NET_DOMAIN}/" title="{SETTINGS_STORE_NAME}"> <img class="logo" src="{ASSETS_IMAGES_PATH}logo.png?design=autumn" alt="{SETTINGS_STORE_NAME}. Перейти на главную" /> {SETTINGS_STORE_NAME} </a>и замените на
<a href="http://{NET_DOMAIN}/" title="{SETTINGS_STORE_NAME}"> <img class="logo" src="{ASSETS_IMAGES_PATH}logo.png?design=autumn" alt="{SETTINGS_STORE_NAME}. Перейти на главную" /> </a>4) В style.css найдите код
#megamenu { position: absolute; height: 54px; top: 90px; left: 238px; }для регулировки положения по высоте изменяйте свойство top/
так же найдите код
#megamenu li .root_link { color: #666666; text-transform: uppercase; font-size: 11px; text-decoration: none; }и замените на
#megamenu li .root_link { color: #666666; text-transform: uppercase; font-size: 11px; text-decoration: none; background: #F00; padding: 7px; border-radius: 13px; }изменяйте цвета у свойств color и background.
#3
Отправлено 25 Апрель 2016 - 19:07
Danil (25 Апрель 2016 - 18:17) писал:
1) Дело в том, что у Вас адаптивный шаблон и при изменении разрешения экрана корзина будет перемещаться, возможно стоит сделать для корзины отдельную картинку с листом, а с фона его убрать.
Согласна, вот теперь подскажите размер картинки с листом какой делать?
и потом залить его как отдельную картинку, а в шапку как вставить?
#4
Отправлено 25 Апрель 2016 - 19:22
Gerti (25 Апрель 2016 - 19:07) писал:
и потом залить его как отдельную картинку, а в шапку как вставить?
Пришлите нам название загруженного изображения и мы поможем его установить.
#5
Отправлено 25 Апрель 2016 - 23:15
Danil (25 Апрель 2016 - 19:22) писал:
#6
Отправлено 26 Апрель 2016 - 01:17
#cart { background: url('ссылка на фон чека') no-repeat left top; width: 200px; heght: 200px; }
замените на:
#cart { background: url('{ASSETS_IMAGES_PATH}001.png') no-repeat -25px -40px; width: 195px; height: 120px; text-align: center; padding-top: 35px; padding-left: 10px; }
#7
Отправлено 26 Апрель 2016 - 09:28
Vaccina (26 Апрель 2016 - 01:17) писал:
#cart { background: url('ссылка на фон чека') no-repeat left top; width: 200px; heght: 200px; }замените на:
#cart { background: url('{ASSETS_IMAGES_PATH}001.png') no-repeat -25px -40px; width: 195px; height: 120px; text-align: center; padding-top: 35px; padding-left: 10px; }
#8
Отправлено 26 Апрель 2016 - 09:52
Gerti (26 Апрель 2016 - 09:28) писал:
Здравствуйте, в styl.css найдите код:
#header-right{float:right;height:100px;position: relative;z-index:20;margin-right: 10px;}
и замените на код:
#header-right{float:right;height:100px;position: relative;z-index:20;margin-right: 10px;width: 250px;}
далее найдите код:
#search_block_top #search_query_top{width:250px;*height: 26px !important; *padding-top: 10px !important; *padding-bottom: 0 !important; vertical-align: middle !important; border: 1px; solid #cecece!important;padding-right:30px}
и замените на код:
#search_block_top #search_query_top{width:250px;*height: 26px !important; *padding-top: 10px !important; *padding-bottom: 0 !important; vertical-align: middle !important; border: 1px; solid #cecece!important;padding-right:30px;border-radius:27px !important}
в этом коде изменяйте значение 250 у свойства width, и значение 27px у свойства border-radius.
Далее в шаблоне HTML найдите код:
<div id="header-right">
перед ним добавьте код:
<div class="header-contact"> <div class="block_content"> <!-- Контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER1 || SETTINGS_STORE_PHONE_NUMBER2 || SETTINGS_STORE_PHONE_NUMBER3 || SETTINGS_STORE_ICQ || SETTINGS_STORE_SKYPE %} <div class="contacts"> <div class="phone" title="Звоните, мы проконсультируем вас по любым вопросам"> <!-- Первый контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER1 %} <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}{SETTINGS_STORE_PHONE_CITY_CODE1}{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}"> <span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span> {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1} </a> {% ENDIF %} <!-- Второй контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER2 %} <br /> <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}{SETTINGS_STORE_PHONE_CITY_CODE2}{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}"> <span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE2}</span> {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2} </a> {% ENDIF %} <!-- Третий контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER3 %} <br /> <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}{SETTINGS_STORE_PHONE_CITY_CODE3}{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}"> <span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}</span> {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3} </a> {% ENDIF %} </div> <!-- Время работы магазина --> {% IF SETTINGS_STORE_WORK_TIME %} <div class="work-time" title="Время работы нашего магазина: {SETTINGS_STORE_WORK_TIME}"> {SETTINGS_STORE_WORK_TIME} </div> {% ENDIF %} <!-- Контакт Skype --> {% IF SETTINGS_STORE_SKYPE %} <a href="skype:{SETTINGS_STORE_SKYPE}?call" title="Свяжитесь с нами по Skype"><img src="{FORALL_IMAGES_PATH}icon/skype.png" width="16" height="16" alt="Свяжитесь с нами по Skype" /> <span class="valignMiddle">{SETTINGS_STORE_SKYPE}</span></a> {% ENDIF %} <!-- Номер ICQ на сайте --> {% IF SETTINGS_STORE_ICQ %} <div class="clear"></div> <div class="icq-number left"> <img src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&img=27" alt="Статус" width="16" height="16" /> <span>{SETTINGS_STORE_ICQ}</span> </div> {% ENDIF %} <div class="clear"></div> </div> {% ENDIF %} </div> </div>
и в конце main.css добавьте код:
.header-contact { position: absolute; top: 20px; right: 300px; }
#9
Отправлено 26 Апрель 2016 - 10:35
Юля123 (26 Апрель 2016 - 09:52) писал:
#header-right{float:right;height:100px;position: relative;z-index:20;margin-right: 10px;}
и замените на код:
#header-right{float:right;height:100px;position: relative;z-index:20;margin-right: 10px;width: 250px;}
далее найдите код:
#search_block_top #search_query_top{width:250px;*height: 26px !important; *padding-top: 10px !important; *padding-bottom: 0 !important; vertical-align: middle !important; border: 1px; solid #cecece!important;padding-right:30px}
и замените на код:
#search_block_top #search_query_top{width:250px;*height: 26px !important; *padding-top: 10px !important; *padding-bottom: 0 !important; vertical-align: middle !important; border: 1px; solid #cecece!important;padding-right:30px;border-radius:27px !important}
в этом коде изменяйте значение 250 у свойства width, и значение 27px у свойства border-radius.
Далее в шаблоне HTML найдите код:
<div id="header-right">
перед ним добавьте код:
<div class="header-contact"> <div class="block_content"> <!-- Контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER1 || SETTINGS_STORE_PHONE_NUMBER2 || SETTINGS_STORE_PHONE_NUMBER3 || SETTINGS_STORE_ICQ || SETTINGS_STORE_SKYPE %} <div class="contacts"> <div class="phone" title="Звоните, мы проконсультируем вас по любым вопросам"> <!-- Первый контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER1 %} <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}{SETTINGS_STORE_PHONE_CITY_CODE1}{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}"> <span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span> {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1} </a> {% ENDIF %} <!-- Второй контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER2 %} <br /> <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}{SETTINGS_STORE_PHONE_CITY_CODE2}{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}"> <span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE2}</span> {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2} </a> {% ENDIF %} <!-- Третий контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER3 %} <br /> <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}{SETTINGS_STORE_PHONE_CITY_CODE3}{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}"> <span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}</span> {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3} </a> {% ENDIF %} </div> <!-- Время работы магазина --> {% IF SETTINGS_STORE_WORK_TIME %} <div class="work-time" title="Время работы нашего магазина: {SETTINGS_STORE_WORK_TIME}"> {SETTINGS_STORE_WORK_TIME} </div> {% ENDIF %} <!-- Контакт Skype --> {% IF SETTINGS_STORE_SKYPE %} <a href="skype:{SETTINGS_STORE_SKYPE}?call" title="Свяжитесь с нами по Skype"><img src="{FORALL_IMAGES_PATH}icon/skype.png" width="16" height="16" alt="Свяжитесь с нами по Skype" /> <span class="valignMiddle">{SETTINGS_STORE_SKYPE}</span></a> {% ENDIF %} <!-- Номер ICQ на сайте --> {% IF SETTINGS_STORE_ICQ %} <div class="clear"></div> <div class="icq-number left"> <img src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&img=27" alt="Статус" width="16" height="16" /> <span>{SETTINGS_STORE_ICQ}</span> </div> {% ENDIF %} <div class="clear"></div> </div> {% ENDIF %} </div> </div>
и в конце main.css добавьте код:
.header-contact { position: absolute; top: 20px; right: 300px; }
Помогите поднастроить, может я что не так сделала...
#10
Отправлено 26 Апрель 2016 - 12:24
Gerti (26 Апрель 2016 - 10:35) писал:
Помогите поднастроить, может я что не так сделала...
Видимо, я невнимательно прочла Ваше сообщение, так как многих пунктов, что Вы сейчас перечислили я не увидела в предыдущем сообщении.
Уточните, пожалуйста,
Цитата
на скриншоте, где должен быть поиск?
Чтобы изменить чек, найдите в style.css код:
#cart { background: url('{ASSETS_IMAGES_PATH}001.png') no-repeat -25px -40px; width: 195px; height: 120px; text-align: center; padding-top: 35px; padding-left: 10px; }
и замените на код:
#cart { background: url('{ASSETS_IMAGES_PATH}002.png') no-repeat; width: 195px; height: 120px; text-align: center; padding-top: 35px; padding-left: 10px; position: relative; right: -126px; }
значение -126рх изменяйте на нужное, чтобы перенести чек.
Чтобы изменить контактную информацию, в конце style.css добавьте код:
.header-contact .contacts .phone a, .header-contact .contacts .work-time { font-size: 20px; line-height: 25px; color: #DA3B44; }
изменяйте значения на свои, свойства по порядку: размер шрифта, высота строки, цвет текста
#11
Отправлено 26 Апрель 2016 - 12:29
Юля123 (26 Апрель 2016 - 12:24) писал:
Уточните, пожалуйста,
на скриншоте, где должен быть поиск?
#12
Отправлено 26 Апрель 2016 - 12:40
Так же подскажите как , телефон и время работы поставить по середине между чеком и машинкой..?
#13
Отправлено 26 Апрель 2016 - 13:00
Gerti (26 Апрель 2016 - 12:29) писал:
в конец style.css добавьте
@media only screen and (min-width: 1211px) { #search_block_top { top: 115px; left: -115px; position: absolute; } }
Gerti (26 Апрель 2016 - 12:40) писал:
Так же подскажите как , телефон и время работы поставить по середине между чеком и машинкой..?
div#header-right input.exclusive, #paymentForm input, a.exclusive { position: absolute; bottom: 38px; width: 124px; left: 47px; }так же найдите
.header-contact { position: absolute; top: 20px; right: 300px; }и замените на
.header-contact { position: absolute; top: 20px; right: 0; left: 0; margin: 0 auto; width: 190px; }
#14
Отправлено 26 Апрель 2016 - 15:25
Danil (26 Апрель 2016 - 13:00) писал:
В конец style.css добавьте
div#header-right input.exclusive, #paymentForm input, a.exclusive { position: absolute; bottom: 38px; width: 124px; left: 47px; } [/quote] Попробовала, не подошло, все съехало... пропал даже выбор, когда товар кладешь в корзину, продолжить покупки или перейти в корзину [quote name='Danil' timestamp='1461664808' post='235345'] Попробуйте сделать следующее: в конец style.css добавьте .header-contact { position: absolute; top: 20px; right: 300px; }и замените на
.header-contact { position: absolute; top: 20px; right: 0; left: 0; margin: 0 auto; width: 190px; }
#15
Отправлено 27 Апрель 2016 - 06:49
#button_order_cart { margin-left: 5px; }
#16
Отправлено 28 Апрель 2016 - 14:32
Vaccina (27 Апрель 2016 - 06:49) писал:
#button_order_cart { margin-left: 5px; }
Мне нужно, чтобы надпись с временем и телефонами встала красиво между чеком и шв. машинкой. а то ни как не могу отрегулировать этот момент.
И еще возник вопрос можно ли поставить и если можно то как, кнопку с названием ПРЕДЗАКАЗ , на тех товарах которых нет в наличие
#17
Отправлено 28 Апрель 2016 - 14:50
Gerti (28 Апрель 2016 - 14:32) писал:
Мне нужно, чтобы надпись с временем и телефонами встала красиво между чеком и шв. машинкой. а то ни как не могу отрегулировать этот момент.
И еще возник вопрос можно ли поставить и если можно то как, кнопку с названием ПРЕДЗАКАЗ , на тех товарах которых нет в наличие
Здравствуйте, в style.css найдите код:
.header-contact { position: absolute; top: 20px; right: 300px; }
и изменяйте значения у свойств top и right на нужное Вам.
#18
Отправлено 28 Апрель 2016 - 15:37
Юля123 (28 Апрель 2016 - 14:50) писал:
.header-contact { position: absolute; top: 20px; right: 300px; }
и изменяйте значения у свойств top и right на нужное Вам.
Второй вопрос все еще в силе по поводу кнопки ПРЕДЗАКАЗ
#19
Отправлено 28 Апрель 2016 - 17:42
Gerti (28 Апрель 2016 - 15:37) писал:
Второй вопрос все еще в силе по поводу кнопки ПРЕДЗАКАЗ
#20
Отправлено 28 Апрель 2016 - 21:37
Ирина345 (28 Апрель 2016 - 17:42) писал:
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных