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


Как Изменить Логотип, Цвет Панели Меню

Автор leebra, 05 мая 2013 20:16

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

#1 leebra

leebra

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

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

Отправлено 05 Май 2013 - 20:16

Добрый день. Не могу разобраться с вашим новым шаблоном.


1)как изменить цвет панели навигации сверху, подвала сайта и главного меню на мои картинки?
2) как в этот шаблон добавить карусель подобную этой?  см. картинку.
[IMG]http://savepic.net/3656130.jpg[/img]

3)как сделать чтобы изображение логотипа было больше и занимало почти всю верхнюю часть
4) номер телефона перенести и контакты перенести под поиск и сделать крупнее

#2 Stasya

Stasya

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

  • Модератоpы
  • 4 007 сообщений

Отправлено 06 Май 2013 - 17:43

1. В файле style.css найдите блок 
.global {
background: #000;
padding: 10px;
}
изменяйте значение цвета в строке background:. Например 
background: rgb(163, 218, 48);
2. Для каких именно товаров Вы хотите реализовать карусель?
3. Загрузите к себе в файлы картинку с Вашим логотипом с именем logo.png. В файле style.css найдите блок 
header[role="banner"] h1 a {
height: 127px;
width: 150px;
display: block;
font: normal 26px '';
line-height: 20px;
color: #000;
font-weight: bold;
text-align: center;
}
увеличивайте значение width: на столько, насколько Вам нужно.
4. В шаблоне html найдите блок 
<header role="banner">
	 <div class="hgroup">
	 <h1 title="{SETTINGS_STORE_NAME}"><a href="http://{NET_DOMAIN}/" title="{SETTINGS_STORE_NAME}"><img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}" /><br />{SETTINGS_STORE_NAME}</a></h1>
	 <!-- Контактный телефон -->
	 {% IF SETTINGS_STORE_PHONE_NUMBER1 %}
		 <div class="contacts">
		 <div class="phone" title="Звоните, мы проконсультируем вас по любым вопросам">
			 <!-- Первый контактный телефон -->
			 {% IF 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}
			 {% ENDIF %}
			
			 <!-- Второй контактный телефон -->
			 {% IF SETTINGS_STORE_PHONE_NUMBER2 %}
			 <br /><span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span>
			 {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %}
			 {SETTINGS_STORE_PHONE_NUMBER2}
			 {% ENDIF %}
			
			 <!-- Третий контактный телефон -->
			 {% IF SETTINGS_STORE_PHONE_NUMBER3 %}
			 <br /><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}
			 {% 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 %}
			 <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/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&amp;img=27" alt="Статус" width="16" height="16" />
			 <span class="valignMiddle">{SETTINGS_STORE_ICQ}</span>
			 </div>
		 {% ENDIF %}
		 </div>
	 {% ENDIF %}
	 </div>
	
	 <!-- Форма поиска -->
	 <form action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;" role="search">
	 <div>
		 <input class="search" name="q" type="search" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" />
		 <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 Если в тарифном плане подключен модуль фильтров по товарам -->
</header>
и замените его на 
<header role="banner">
	 <div class="hgroup">
	 <h1 title="{SETTINGS_STORE_NAME}"><a href="http://{NET_DOMAIN}/" title="{SETTINGS_STORE_NAME}"><img src="{ASSETS_IMAGES_PATH}0_d30c_56d137c2_L.jpg" alt="{SETTINGS_STORE_NAME}" /><br />{SETTINGS_STORE_NAME}</a></h1>
	
	 </div>
	 <!-- Форма поиска -->
	 <form action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;" role="search">
	 <div>
		 <input class="search" name="q" type="search" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" />
		 <input title="Искать" type="submit" value="Поиск" />
	 </div>
	 </form>
	 <!-- /Форма поиска -->
<!-- Контактный телефон -->
	 {% IF SETTINGS_STORE_PHONE_NUMBER1 %}
		 <div class="contacts">
		 <div class="phone" title="Звоните, мы проконсультируем вас по любым вопросам">
			 <!-- Первый контактный телефон -->
			 {% IF 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}
			 {% ENDIF %}
			
			 <!-- Второй контактный телефон -->
			 {% IF SETTINGS_STORE_PHONE_NUMBER2 %}
			 <br /><span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span>
			 {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %}
			 {SETTINGS_STORE_PHONE_NUMBER2}
			 {% ENDIF %}
			
			 <!-- Третий контактный телефон -->
			 {% IF SETTINGS_STORE_PHONE_NUMBER3 %}
			 <br /><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}
			 {% 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 %}
			 <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/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&amp;img=27" alt="Статус" width="16" height="16" />
			 <span class="valignMiddle">{SETTINGS_STORE_ICQ}</span>
			 </div>
		 {% ENDIF %}
		 </div>
	 {% ENDIF %}
	 </div>
	 <!-- Если в тарифном плане подключен модуль сравнения товаров -->
	 {% 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 Если в тарифном плане подключен модуль фильтров по товарам -->
</header>
Затем в файле style. css найдите блок 
.contacts {
float: left;
position: relative;
}
и замените его на 
.contacts {
position: relative;
margin-top: 72px;
font-size: 19px;
margin-left: 900px;
}

#3 leebra

leebra

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

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

Отправлено 06 Май 2013 - 17:53

Спасибо с шапкой, подвалом и навигацией разобралась.

Карусель хотелось бы сделать для магазина постельного белья.

Самый важный вопрос это логотип)) как его сделать более ощутимым на странице?)

#4 Stasya

Stasya

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

  • Модератоpы
  • 4 007 сообщений

Отправлено 06 Май 2013 - 18:07

Для какого именно товара- я имела ввиду для Новинок, Хитов продаж?

#5 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

Отправлено 06 Май 2013 - 18:10

Просмотр сообщенияleebra (06 Май 2013 - 17:53) писал:

Спасибо с шапкой, подвалом и навигацией разобралась.

Карусель хотелось бы сделать для магазина постельного белья.

Самый важный вопрос это логотип)) как его сделать более ощутимым на странице?)

У Нас есть реализация двух каруселей: 1, 2
Или Вам для категорий нужно? Куда Вы ее хотите поместить?

Логотип вы можете загрузить свой, изменяя файл logo.png (удалив этот с сайта и загрузив свой с таким же именем

#6 leebra

leebra

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

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

Отправлено 06 Май 2013 - 19:31

http://s701964.storeland.ru/

с загрузкой логотипа проблем нет. Он просто очень маленький. Хотя сам загруженный файл достаточного размера. Где можно прописать размер px?

#7 leebra

leebra

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

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

Отправлено 06 Май 2013 - 19:36

Все с увеличением логотипа все получилось. Спасибо))

#8 leebra

leebra

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

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

Отправлено 06 Май 2013 - 20:12

а вот с переносом телефона какая-то беда получается. Исчезает логотип и слайдер во всю страницу. Попробовала два раза.

#9 mikola

mikola

    Good soo good

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

Отправлено 06 Май 2013 - 22:05

Просмотр сообщенияleebra (06 Май 2013 - 20:12) писал:

а вот с переносом телефона какая-то беда получается. Исчезает логотип и слайдер во всю страницу. Попробовала два раза.
тогда попробуйте в
style.css
найти код
.contacts{float: left;position: relative;}
меняем на код
.contacts{float: left;position: relative;top: 66px;left: 550px;font-size: 21px;font-family: bold;}

#10 leebra

leebra

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

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

Отправлено 07 Май 2013 - 09:34

спасибо, все получилось.

#11 leebra

leebra

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

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

Отправлено 07 Май 2013 - 11:39

http://hoodie.me/
хотелось бы сделать слайдер как здесь, не на всю ширину, чтобы осталось место на небольшие банеры 2-3 штуки. И как загрузить их именно справа от уменьшенного баннера??


и что то случилось с подвалом, стал узким.

#12 miyako

miyako

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

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

Отправлено 07 Май 2013 - 13:06

Просмотр сообщенияleebra (07 Май 2013 - 11:39) писал:

http://hoodie.me/
хотелось бы сделать слайдер как здесь, не на всю ширину, чтобы осталось место на небольшие банеры 2-3 штуки. И как загрузить их именно справа от уменьшенного баннера??


и что то случилось с подвалом, стал узким.
Этот слайдер очень похож на http://storeland.ru/about/faq#51
Ширину можно будет отредактировать.

#13 leebra

leebra

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

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

Отправлено 07 Май 2013 - 13:35

да, у меня уже установлен такой слайдер. Как можно сделать его уже и главное добавить сбоку баннеры?

и подвал стал узким, как это исправить?

#14 miyako

miyako

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

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

Отправлено 07 Май 2013 - 14:43

Просмотр сообщенияleebra (07 Май 2013 - 13:35) писал:

да, у меня уже установлен такой слайдер. Как можно сделать его уже и главное добавить сбоку баннеры?

и подвал стал узким, как это исправить?
Найдите код в nyvo.css:
.nivoSlider {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
}
и замените на:
.nivoSlider {
position: relative;
width: 75%;
height: auto;
overflow: hidden;
}
Далее найдите код:
.theme-default .nivo-controlNav {
text-align: center;
padding: 20px 0;
}
и замените на:
.theme-default .nivo-controlNav {
text-align: center;
padding: 20px 0;
width: 70%;
float:left;
}

Баннеры вы можете вставить после кода слайдера, например так:
После кода  (примерный код слайдера)  :
<div id="slider" class="nivoSlider">
	 <img src="http://s701964.storeland.net/ftop54.jpg?8166" alt="" style="display: none; width: 1173px;">
	 <a href="/" class="nivo-imageLink" style="display: none;"><img src="http://s701964.storeland.net/345233_modeli_tri_devushki_nizhe_2600x1625_(www.jpg?7882" alt="" style="display: none;"></a>
	 <img src="http://s701964.storeland.net/incanto2.jpg?7882" alt="" title="Пример картинки с заголовком" style="display: none; width: 1173px;">
	 <img src="http://s701964.storeland.net/345233_modeli_tri_devushki_nizhe_2600x1625_(www.jpg?7882" alt="" style="display: none; width: 1173px;">
	 <img class="nivo-main-image" src="http://s701964.storeland.net/ftop54.jpg?8166" style="display: inline; width: 1173px; height: auto;"><div class="nivo-caption"></div><div class="nivo-directionNav" style="display: block;"><a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div></div>
Вставьте код:
<div style="width: 25%;height: auto;float: right;">
<div style="background:url({ASSETS_IMAGES_PATH}банер1.jpg);">banner1</div>
<div style="background:url({ASSETS_IMAGES_PATH}банер2.jpg);">banner1</div>
</div>

#15 leebra

leebra

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

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

Отправлено 07 Май 2013 - 15:16

Далее найдите код:

.theme-default .nivo-controlNav {
text-align: center;
padding: 20px 0;
}
и замените на:

.theme-default .nivo-controlNav {
text-align: center;
padding: 20px 0;
width: 70%;
float:left;
}



Все получилось кроме этого момента. Это видимо, чтобы блок баннеров отражался справа. Товары на главной просто съехали.

#16 Stasya

Stasya

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

  • Модератоpы
  • 4 007 сообщений

Отправлено 07 Май 2013 - 17:12

Данный блок перемещает точки под слайдером влево. Чтобы они были под слайдером.
Вот этот блок отвечает за баннеры справа от слайдера
<div style="width: 25%;height: auto;float: right;">
<div style="background:url({ASSETS_IMAGES_PATH}банер1.jpg);">banner1</div>
<div style="background:url({ASSETS_IMAGES_PATH}банер2.jpg);">banner1</div>
</div>
Это у Вас получилось проделать?

#17 leebra

leebra

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

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

Отправлено 07 Май 2013 - 17:34

к сожалению при вставке данного кода баннеры отображаются в товарах или под слайдером.

#18 Stasya

Stasya

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

  • Модератоpы
  • 4 007 сообщений

Отправлено 07 Май 2013 - 18:36

На данный момент Ваш сайт выглядит вот так. Или Вы что-то другое хотите?

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

  • баннеры.png

#19 leebra

leebra

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

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

Отправлено 08 Май 2013 - 19:58

это не мой сайт))))). Я хотела банеры такие как там. мой сайт http://bustshopping.ru/

1) как сделать, чтобы в нуво слайдере в уголке не мелькали маленькие картинки, чтобы их вообще не было??

#20 Сake

Сake

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

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

Отправлено 09 Май 2013 - 03:47

Попробуйте добавить в ваш файл стилей main.css

.theme-default .nivoSlider img {
   z-index: 10;
}

Обратно в Изменение общей стилистики


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Вечность
  5. → Изменение общей стилистики
  6. Privacy Policy