Перейти к содержимому


Изменение Шапки Шаблона "вечность"


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 52

#21 P.S.

P.S.

    Новичок

  • Пользователи
  • Pip
  • 6 сообщений

Отправлено 05 Февраль 2014 - 20:29

Доброго времени суток. Пытался сделать точно так же(пункты 1 и 2),как и автор этой темы, повторял все описанные выше рекомендации, но так и не получилось( точнее получилось переместить блок поиска вниз, но он почему то посередине, как не пытался его передвинуть вправо не получилось. Поле со сравнение пропало совсем. Подскажите что сделано не так?
http://besttires.storeland.ru

Прикрепленные изображения

  • searh.jpg


#22 Castiel

Castiel

    Активный участник

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 05 Февраль 2014 - 21:19

Просмотр сообщенияP.S. (05 Февраль 2014 - 20:29) писал:

Доброго времени суток. Пытался сделать точно так же(пункты 1 и 2),как и автор этой темы, повторял все описанные выше рекомендации, но так и не получилось( точнее получилось переместить блок поиска вниз, но он почему то посередине, как не пытался его передвинуть вправо не получилось. Поле со сравнение пропало совсем. Подскажите что сделано не так?
http://besttires.storeland.ru

Здравствуйте, не могли бы вы прислать скриншот куда именно вы хотите переместить поиск и сравнение.

#23 P.S.

P.S.

    Новичок

  • Пользователи
  • Pip
  • 6 сообщений

Отправлено 05 Февраль 2014 - 21:58

1. картинка без зазоров.В настоящий момент почему-то остается снизу небольшой кусок фона.
2. переместить поиск к правому краю. в настоящий момент посередине.
3. поднять название "интернет-магазин..." выше на уровень поиска
4. сдвинуть лого и телефоны влево до границы
5. пропал блок "сравнение". пытался переместить его так же как и поиск вниз, но после проделанных манипуляций перестал отображаться вообще(

Прикрепленные изображения

  • 1.jpg
  • 2.jpg


#24 Castiel

Castiel

    Активный участник

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 05 Февраль 2014 - 22:40

Просмотр сообщенияP.S. (05 Февраль 2014 - 21:58) писал:

1. картинка без зазоров.В настоящий момент почему-то остается снизу небольшой кусок фона.
2. переместить поиск к правому краю. в настоящий момент посередине.
3. поднять название "интернет-магазин..." выше на уровень поиска
4. сдвинуть лого и телефоны влево до границы
5. пропал блок "сравнение". пытался переместить его так же как и поиск вниз, но после проделанных манипуляций перестал отображаться вообще(

Перенос поиска и сравнения
Редактируем шаблон HTML
Находим данный код 203-227
<!-- Форма поиска -->
	 <form action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Размер(205/55R16) или Бренд(Nokian)...') return false;" role="search">
	 <div>
		 <input class="search" name="q" type="search" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Размер(205/55R16) или Бренд(Nokian)...{% ENDIF %}" onfocus="if(this.value=='Размер(205/55R16) или Бренд(Nokian)...'){this.value='';}" onblur="if(this.value==''){this.value='Размер(205/55R16) или Бренд(Nokian)...';}" />
		 <input title="Искать" type="submit" value="Поиск" />
	 </div>
	 </form>
	 <!-- /Форма поиска -->
	
	 <!-- Если в тарифном плане подключен модуль сравнения товаров -->
	 {% IF TARIFF_FEATURE_GOODS_COMPARE %}
	 <!-- Если не выключен модуль сравнения товаров, то покажем этот блок -->
	 {% IFNOT SETTINGS_COMPARE_DISABLE %}
		 {% IF COMPARE_GOODS_COUNT=0 %}
		 <div class="compare hide">
			 <p>Ваш список сравнения пуст</p>
		 </div>
		 {% ELSE %}
		 <div class="compare">
			 <p><a href="{COMPARE_URL}">Сейчас на сравнении {COMPARE_GOODS_COUNT} товар{COMPARE_GOODS_COUNT | gen_word_end("","а","ов")}.</a></p>
		 </div>
		 {% ENDIF %}
	 {% ENDIF %}
	 {% ENDIF %}
	 <!-- END Если в тарифном плане подключен модуль фильтров по товарам -->

Заменяем его на
<div id="top-right">
<!-- Форма поиска -->
	 <form action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Размер(205/55R16) или Бренд(Nokian)...') return false;" role="search">
	 <div>
		 <input class="search" name="q" type="search" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Размер(205/55R16) или Бренд(Nokian)...{% ENDIF %}" onfocus="if(this.value=='Размер(205/55R16) или Бренд(Nokian)...'){this.value='';}" onblur="if(this.value==''){this.value='Размер(205/55R16) или Бренд(Nokian)...';}" />
		 <input title="Искать" type="submit" value="Поиск" />
	 </div>
	 </form>
	 <!-- /Форма поиска -->
	
	 <!-- Если в тарифном плане подключен модуль сравнения товаров -->
	 {% IF TARIFF_FEATURE_GOODS_COMPARE %}
	 <!-- Если не выключен модуль сравнения товаров, то покажем этот блок -->
	 {% IFNOT SETTINGS_COMPARE_DISABLE %}
		 {% IF COMPARE_GOODS_COUNT=0 %}
		 <div class="compare">
			 <p>Ваш список сравнения пуст</p>
		 </div>
		 {% ELSE %}
		 <div class="compare">
			 <p><a href="{COMPARE_URL}">Сейчас на сравнении {COMPARE_GOODS_COUNT} товар{COMPARE_GOODS_COUNT | gen_word_end("","а","ов")}.</a></p>
		 </div>
		 {% ENDIF %}
	 {% ENDIF %}
	 {% ENDIF %}
	 <!-- END Если в тарифном плане подключен модуль фильтров по товарам -->
</div>

Далее редактируем стили
Добавляем в любое удобное место в файле main.css
#top-right {
position: relative;
width: 100%;
height: 40px;
}

Находим
foform[role="search"] {
position: absolute;
right: 2em;
top: 20em;
}

Заменяем на
form[role="search"] {
position: relative;
right: 2em;
}

Находим
form[role="search"] div {display: block;margin: 0 auto;margin: 0 auto;position: relative;width: 30.5em;height: 2.833em;background: transparent;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;z-index: 20;}

Заменяем на
form[role="search"] div {
display: block;
margin: 0 auto;
position: relative;
float: right;
width: 30.5em;
height: 2.833em;
background: transparent;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
z-index: 20;
}

Находим
.compare {
text-align: center;
margin-bottom: 0px;
bottom: -23%;
position: absolute;
right: 31%;
padding: 20px;
}

Заменяем на
.compare {
text-align: center;
margin-bottom: 0px;
bottom: 1%;
position: relative;
padding: 5px;
width: 220px;
float: right;
}

После внесения данных изменений мы поможем вам реализовать остальные

#25 P.S.

P.S.

    Новичок

  • Пользователи
  • Pip
  • 6 сообщений

Отправлено 06 Февраль 2014 - 08:37

Большое спасибо, помогло. Поиск и блок "сравнение" на месте.  А как остальное реализовать?

#26 Castiel

Castiel

    Активный участник

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 06 Февраль 2014 - 22:20

Просмотр сообщенияP.S. (06 Февраль 2014 - 08:37) писал:

Большое спасибо, помогло. Поиск и блок "сравнение" на месте.  А как остальное реализовать?

Двигаем название
Редактируем style.css
Находим
section header h2 span, section header h1, .shop section header h1 span, .basket section header h1 span, .tandem h1 span {
color: #8a8a8a;
z-index: 15;
}

Заменяем на
section header h2 span, section header h1, .shop section header h1 span, .basket section header h1 span, .tandem h1 span {
color: #8a8a8a;
z-index: 15;
margin-top: -40px;
}

Двигаем лого
Находим
header[role="banner"] .hgroup {
position: absolute;
top: 1em;
left: 1em;
width: 39.877301%;
}

Заменяем на
header[role="banner"] .hgroup {
position: absolute;
top: 1em;
left: -1em;
width: 39.877301%;
}


#27 P.S.

P.S.

    Новичок

  • Пользователи
  • Pip
  • 6 сообщений

Отправлено 07 Февраль 2014 - 08:29

Большое спасибо)все получилось)

#28 Lamer

Lamer

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 248 сообщений

Отправлено 04 Апрель 2014 - 10:53

Цитата

5) B HTML после кода:
<!-- Время работы магазина -->
{% 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 %}
  <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="http://wwp.icq.com/s...TS}&#38;img=27" alt="Статус" width="16" height="16" />
<span class="valignMiddle">{SETTINGS_STORE_ICQ}</span>
  </div>
{% ENDIF %}
  </div>
{% ENDIF %}
  </div>
вставляем:

   <div class="baner">
<img src="{ASSETS_IMAGES_PATH}i.png"  />
   </div>
и добавляем в style.css:

.baner {
float: right;
width: 1000px;
height: 150px;
}

i.png
- название загруженной в бэкофис картинки

отсюда

как растянуть по ширине 100%  ?

#29 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 04 Апрель 2014 - 11:03

Просмотр сообщенияspytime (04 Апрель 2014 - 10:53) писал:

отсюда

ничего не изменилось, хотел изображение вставить

У Вас есть картинка в шапке, только она не растянута по всей шапке в ширину. Вам ее нужно сделать до конца, по краям? И создайте, пожалуйста, бэкап.

#30 Lamer

Lamer

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 248 сообщений

Отправлено 04 Апрель 2014 - 11:13

Вы меня опередили, я потом исправил. Да - до конца по краям. И стал фон сайта весь черный - это хорошо, но это не я сделал.
Бэкап сделал.

#31 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 04 Апрель 2014 - 11:53

Просмотр сообщенияspytime (04 Апрель 2014 - 11:13) писал:

Вы меня опередили, я потом исправил. Да - до конца по краям. И стал фон сайта весь черный - это хорошо, но это не я сделал.
Бэкап сделал.

Попробуйте загрузить этот бэкап

Прикрепленные файлы



#32 Lamer

Lamer

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 248 сообщений

Отправлено 04 Апрель 2014 - 15:08

Цитата

Попробуйте загрузить этот бэкап
Сделал. все по прежнему. Картинку и меню нужно растянуть по ширине

#33 sengun

sengun

    Активный участник

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 04 Апрель 2014 - 16:54

Просмотр сообщенияspytime (04 Апрель 2014 - 15:08) писал:

Сделал. все по прежнему. Картинку и меню нужно растянуть по ширине
Здравствуйте.
Проверьте, пожалуйста, внесли изменения на вашем сайте.

#34 Lamer

Lamer

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 248 сообщений

Отправлено 04 Апрель 2014 - 17:08

Здравствуйте.
Я вот что вижу
Изображение

#35 sengun

sengun

    Активный участник

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 04 Апрель 2014 - 19:58

Просмотр сообщенияspytime (04 Апрель 2014 - 17:08) писал:

Здравствуйте.
Я вот что вижу
Изображение
Каким браузером вы пользуетесь?
Проверили в нескольких, отображение такое:04-04-2014 20-57-41.png

#36 Lamer

Lamer

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 248 сообщений

Отправлено 04 Апрель 2014 - 20:24

Браузер Хром, только в гугль не сливает ничего, урезанный он, CoolNova зовется....проверил в Chromium - тоже самое, а это плохо много народа юзает урезанные браузеры.
Можно ли убрать расстояние между верхним меню и картинкой самой? и скажите пжст как шириной поиграться, а то сдается мне что-то великоват по высоте получился.
Меню раздвинули - СПАСИБО.

#37 pueroyad

pueroyad

    Пользователь

  • Пользователи
  • PipPip
  • 10 сообщений

Отправлено 10 Апрель 2014 - 13:06

Добрый день, уважаемая служба поддержки.

Прошу помощи. Появился ряд вопросов, связанных с редактированием:
1) Необходимо вставить большую картинку в шапку сайта и увеличить размеры под нее. Где в коде возможно сделать эти изменения и самостоятельно настроить высоту картинки?
2) Переместить поиск и сравнение товаров в указанное место.
3) Добавить изображение корзины, чтобы текст и картинка были единой ссылкой.
4) Опустить логотип с телефоном немного ниже.

сайт http://hometeks.storeland.ru/

Заранее благодарю.
Изображение

#38 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 11 Апрель 2014 - 05:31

1.В шаблоне HTML найдите:
<!-- Форма поиска -->
	  <form action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;" role="search">
перед ним вставьте:
<div class="banner"><img src="адрес картинки" alt="" /></div>
и в style.css добавьте:
.banner {
	position: absolute;
	height: 200px;
	left: 200px;
	top: 10px;
}
2. В style.css найдите:
form[role="search"] {
	position: absolute;
	right: 2em;
	top: 2.5em;
}
и
.compare {
	bottom: 1%;
	margin-bottom: 0;
	padding: 20px;
	position: absolute;
	right: 10%;
	text-align: center;
}
измените значения right, bottom, top для передвижения данных блоков в необходимое место.
3. Сейчас у вас корзина изменена, так как отличается далеко от скриншота. Актуален ли ваш вопрос, если да, то необходимо отменить изменения по корзине и реализовать немного по другому, так как сейчас она неправильно функционирует.
4. В style.css найдите:
header[role="banner"] .hgroup {
	left: 1em;
	position: absolute;
	top: 1em;
	width: 39.8773%;
}
увеличьте значение top

#39 pueroyad

pueroyad

    Пользователь

  • Пользователи
  • PipPip
  • 10 сообщений

Отправлено 11 Апрель 2014 - 14:08

Спасибо, но появились проблемы:
1) Картинка встала на свое место, но непонятно как определить размер ее. И чтобы она уходила за черные плашки верхнего и нижнего меню.
2) Поиск и сравнение исчезают, скорее всего за основной фон. Как сделать, чтобы они стали видны?
3) Реализация картины актуальна еще. Желательно еще сделать, чтобы сумма товаров в корзине не пряталась, а была видна постоянно.
4) Логотип с телефоном ушли на свои места, но хотелось бы поменять еще размер шрифта и стиль шрифта телефона.
Спасибо.

#40 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 709 сообщений

Отправлено 11 Апрель 2014 - 14:53

Добрый день

4)Найдите В HTML код
<div class="phone" title="Звоните, мы проконсультируем вас по любым вопросам">
замените
<div class="phone" title="Звоните, мы проконсультируем вас по любым вопросам"style="
	font-size: 1.3em;
font-family: arial;
">





Количество пользователей, читающих эту тему: 1

0 пользователей, 1 гостей, 0 анонимных