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


Как В Шапке Фон Поменять На Картинку

Автор John, 10 апр. 2016 18:15
шапка фон картинка

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

#1 John

John

    Продвинутый пользователь

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

Отправлено 10 Апрель 2016 - 18:15

Добрый день, как в шапке серый фон (подложку) поменять на картинку?

#2 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 10 Апрель 2016 - 18:29

Просмотр сообщенияJohn (10 Апрель 2016 - 18:15) писал:

Добрый день, как в шапке серый фон (подложку) поменять на картинку?

Здравствуйте.
Для начала, сообщите нам, пожалуйста, номер аккаунта вашего интернет-магазина.
Спасибо.

#3 John

John

    Продвинутый пользователь

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

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

SL-383041

#4 RedHead

RedHead

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

  • Модераторы
  • 1 052 сообщений

Отправлено 11 Апрель 2016 - 09:37

Просмотр сообщенияJohn (11 Апрель 2016 - 05:12) писал:

SL-383041

Здравствуйте. В редакторе шаблонов, в шаблоне main.css найдите строку:

#header {position: relative;background-color: #2e2f33;}
замените ее например на:
#header {position: relative;background:url('{ASSETS_IMAGES_PATH}order-step-a.png?design=urban')}

где order-step-a.png замените на название предварительно загруженного, нужного изображения.

Так же фон встречается в строке:

#footer .footer-top {padding: 38px 0 25px;color: #fff;background-color: #494949;}
замените, например на:
#footer .footer-top {padding: 38px 0 25px;color: #fff;background:url('{ASSETS_IMAGES_PATH}order-step-current.png?design=urban')}

в строке:
#footer {background-color: #2e2f33;margin-top: 50px;}
замените, например на:
#footer {background:url('{ASSETS_IMAGES_PATH}order-step-a.png?design=urban');margin-top: 50px;}

Везде, аналогично первому пункту, замените название изображения.

#5 John

John

    Продвинутый пользователь

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

Отправлено 11 Апрель 2016 - 12:35

спасибо.
как задать прозрачность серому фону в строке с горизонтальным меню (Главная - доставка... поиск). Потому что картинка закрывается этой серой строкой

#6 Юля123

Юля123

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

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

Отправлено 11 Апрель 2016 - 12:43

Просмотр сообщенияJohn (11 Апрель 2016 - 12:35) писал:

спасибо.
как задать прозрачность серому фону в строке с горизонтальным меню (Главная - доставка... поиск). Потому что картинка закрывается этой серой строкой

Здравствуйте, в main.css найдите код:

.header-top {position: relative;background: #494949;color: #929596;height: 40px;}

и замените на код:

.header-top {position: relative;background: rgba(73, 73, 73, 0.67);color: #929596;height: 40px;



где значение  0.67 можете заменить на любое дробное промежуточное от 0 (полностью прозрачный) до 1(полностью непрозрачный)

#7 John

John

    Продвинутый пользователь

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

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

Спасибо, за быстрый ответ. Все получается.
Напишите, пожалуйста, как заменить в шапке ваши пиктограммы на наши:  грузовик, прием заказов,  100% гарантия возврата.

#8 Юля123

Юля123

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

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

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

Просмотр сообщенияJohn (11 Апрель 2016 - 14:14) писал:

Спасибо, за быстрый ответ. Все получается.
Напишите, пожалуйста, как заменить в шапке ваши пиктограммы на наши:  грузовик, прием заказов,  100% гарантия возврата.

У Вас эти изображения заданы кодом, чтобы заменить на ваши картинки, нужно эти картинки добавить в редакторе шаблонов в левом боковом меню, затем в шаблоне HTML найдите код:

	  <!-- Информационный блок -->
	  <div class="btn-close fa fa-minus" title="Закрыть"></div>
	  <div class="header-info" style="{% IF USER_INTERACTION_HEADER_INFO_DISPLAY = open %}display: none;{% ELSE %}display: block;{% ENDIF %}">
		<div class="container">
		  <div class="row">
			<ul class="info-list">
			  <li class="info-item">
				<a href="http://{NET_DOMAIN}/page/Доставка">
				  <div class="info-icon">
					<i class="fa fa-truck"></i>
				  </div>
				  <div class="info-content">
					<h6>Бесплатная доставка</h6>
					<p class="text-italic">Доставка по городу Бесплатна!</p>
				  </div>
				</a>
			  </li>
			  <li class="info-item">
				<a href="http://{NET_DOMAIN}/page/Доставка">
				  <div class="info-icon">
					<i class="fa fa-gift"></i>
				  </div>
				  <div class="info-content">
					<h6>Прием заказов 24/7</h6>
					<p class="text-italic">Оформите заказ прямо сейчас!</p>
				  </div>
				</a>
			  </li>
			  <li class="info-item">
				<a href="http://{NET_DOMAIN}/page/Доставка">
				  <div class="info-icon">
					<i class="fa fa-money"></i>
				  </div>
				  <div class="info-content">
					<h6>100% гарантия возврата</h6>
					<p class="text-italic">Возврат товара в течение 30 дней!</p>
				  </div>
				</a>
			  </li>
			</ul>
		  </div>
		</div>
	  </div>

и замените на код:

	  <!-- Информационный блок -->
	  <div class="btn-close fa fa-minus" title="Закрыть"></div>
	  <div class="header-info" style="{% IF USER_INTERACTION_HEADER_INFO_DISPLAY = open %}display: none;{% ELSE %}display: block;{% ENDIF %}">
		<div class="container">
		  <div class="row">
			<ul class="info-list">
			  <li class="info-item">
				<a href="http://{NET_DOMAIN}/page/Доставка">
				  <div class="info-icon">
					<img src="ссылка на картинку" alt="" title="" />
				  </div>
				  <div class="info-content">
					<h6>Бесплатная доставка</h6>
					<p class="text-italic">Доставка по городу Бесплатна!</p>
				  </div>
				</a>
			  </li>
			  <li class="info-item">
				<a href="http://{NET_DOMAIN}/page/Доставка">
				  <div class="info-icon">
					<img src="ссылка на картинку" alt="" title="" />
				  </div>
				  <div class="info-content">
					<h6>Прием заказов 24/7</h6>
					<p class="text-italic">Оформите заказ прямо сейчас!</p>
				  </div>
				</a>
			  </li>
			  <li class="info-item">
				<a href="http://{NET_DOMAIN}/page/Доставка">
				  <div class="info-icon">
					<img src="ссылка на картинку" alt="" title="" />
				  </div>
				  <div class="info-content">
					<h6>100% гарантия возврата</h6>
					<p class="text-italic">Возврат товара в течение 30 дней!</p>
				  </div>
				</a>
			  </li>
			</ul>
		  </div>
		</div>
	  </div>


в этом коде "ссылка на картинку" заменяйте на нужные ссылки соответствующих картинок. Далее, чтобы картинки корректно отображались, в main.css найдите код:

.info-list .info-item .info-icon {float: left;width: auto;font-size: 50px;margin-right: 20px;line-height: 78px;}

и замените на код:

.info-list .info-item .info-icon {float: left;width: 50px;margin-right: 20px;line-height: 78px;}

#9 John

John

    Продвинутый пользователь

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

Отправлено 20 Апрель 2016 - 13:26

спасибо, добавил код. Картинки появились. Но при наведении мышки на текст, подсвечивается текст, а картинка не меняет своего цвета (не становится активной).
Отдельные картинки, когда подводим мышкой к тексту у нас отрисованы.
Как их вставить в код программы.

#10 RedHead

RedHead

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

  • Модераторы
  • 1 052 сообщений

Отправлено 20 Апрель 2016 - 14:09

Просмотр сообщенияJohn (20 Апрель 2016 - 13:26) писал:

спасибо, добавил код. Картинки появились. Но при наведении мышки на текст, подсвечивается текст, а картинка не меняет своего цвета (не становится активной).
Отдельные картинки, когда подводим мышкой к тексту у нас отрисованы.
Как их вставить в код программы.

Здравствуйте. Загрузите три изображения, которые будут показываться при наведении в раздел САЙТ - РЕДАКТОР ШАБЛОНОВ с помощью зеленой кнопки "добавить файлы". Напишите нам названия этих изображений и мы вышлем инструкцию, как реализовать их появление при наведении.

#11 John

John

    Продвинутый пользователь

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

Отправлено 20 Апрель 2016 - 14:32

Спасибо, добавил.
Для показа картинок при  наведении:
1) kosh_on.gif
2) maneken_on.gif
3) cotton_on.gif

#12 Firefly

Firefly

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

  • Модераторы
  • 3 810 сообщений

Отправлено 20 Апрель 2016 - 15:36

Просмотр сообщенияJohn (20 Апрель 2016 - 14:32) писал:

Спасибо, добавил.
Для показа картинок при  наведении:
1) kosh_on.gif
2) maneken_on.gif
3) cotton_on.gif

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
		   <ul class="info-list">
		   <li class="info-item">
			<a href="http://{NET_DOMAIN}/page/Доставка">
			 <div class="info-icon">
			   <img src="{ASSETS_IMAGES_PATH}cotton.gif" alt="" title="" />
			 </div>
			 <div class="info-content">
			  <h6>Натуральные материалы</h6>
			  <p class="text-italic">Высокое качество</p>
			 </div>
			</a>
		   </li>
		   <li class="info-item">
			<a href="http://{NET_DOMAIN}/page/Доставка">
			 <div class="info-icon">
			   <img src="{ASSETS_IMAGES_PATH}maneken.gif" alt="" title="" />
			 </div>
			 <div class="info-content">
			   <h6>Индивидуальный пошив</h6>
			   <p class="text-italic">Мы можем отшить под ваш рост!</p>
			 </div>
			</a>
		  </li>
			<li class="info-item">
			  <a href="http://{NET_DOMAIN}/page/Доставка">
			   <div class="info-icon">
				 <img src="{ASSETS_IMAGES_PATH}kosh.gif" alt="" title="" />
			   </div>
			   <div class="info-content">
				<h6>Наложенный платеж</h6>
				<p class="text-italic">Оплата при получении!</p>
			   </div>
			  </a>
			</li>
		   </ul>

Замените на:
		   <ul class="info-list">
		   <li class="info-item">
			<a href="http://{NET_DOMAIN}/page/Доставка">
			 <div class="info-icon">
			  <div class="cotton"></div>
			 </div>
			 <div class="info-content">
			  <h6>Натуральные материалы</h6>
			  <p class="text-italic">Высокое качество</p>
			 </div>
			</a>
		   </li>
		   <li class="info-item">
			<a href="http://{NET_DOMAIN}/page/Доставка">
			 <div class="info-icon">
			  <div class="maneken"></div>
			 </div>
			 <div class="info-content">
			   <h6>Индивидуальный пошив</h6>
			   <p class="text-italic">Мы можем отшить под ваш рост!</p>
			 </div>
			</a>
		  </li>
			<li class="info-item">
			  <a href="http://{NET_DOMAIN}/page/Доставка">
			   <div class="info-icon">
				<div class="kosh"></div>
			   </div>
			   <div class="info-content">
				<h6>Наложенный платеж</h6>
				<p class="text-italic">Оплата при получении!</p>
			   </div>
			  </a>
			</li>
		   </ul>

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте в конце код:
.cotton {background:url({ASSETS_IMAGES_PATH}cotton.gif) no-repeat; width:66px; height:67px;}
.maneken {background:url({ASSETS_IMAGES_PATH}maneken.gif) no-repeat;width:31px; height:82px;}
.kosh {background:url({ASSETS_IMAGES_PATH}kosh.gif) no-repeat;width:54px; height:43px; margin: 20px 0;}
.cotton:hover {background:url({ASSETS_IMAGES_PATH}cotton_on.gif) no-repeat;}
.maneken:hover {background:url({ASSETS_IMAGES_PATH}maneken_on.gif) no-repeat;}
.kosh:hover {background:url({ASSETS_IMAGES_PATH}kosh_on.gif) no-repeat;}

#13 John

John

    Продвинутый пользователь

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

Отправлено 21 Апрель 2016 - 09:55

Все получилось, очень довольны результатом. Спасибо за помощь :) !

#14 lelenushka

lelenushka

    Продвинутый пользователь

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

Отправлено 29 Сентябрь 2016 - 17:46

Просмотр сообщенияЮля123 (11 Апрель 2016 - 12:43) писал:

Здравствуйте, в main.css найдите код:

.header-top {position: relative;background: #494949;color: #929596;height: 40px;}

и замените на код:

.header-top {position: relative;background: rgba(73, 73, 73, 0.67);color: #929596;height: 40px;


где значение  0.67 можете заменить на любое дробное промежуточное от 0 (полностью прозрачный) до 1(полностью непрозрачный)


Подскажите пожалуйста, пробую уже второй раз так делать, а в итоге на странице сайта все сбивается  (((( SL-392237

#15 Vaccina

Vaccina

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

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

Отправлено 30 Сентябрь 2016 - 02:04

В main.css найдите:
.header-top {position: relative;background: rgba(73, 73, 73, 0.67);color: #fff;height: 40px;

замените на:
.header-top {position: relative;background: rgba(73, 73, 73, 0.67);color: #fff;height: 40px;}

#16 lelenushka

lelenushka

    Продвинутый пользователь

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

Отправлено 30 Сентябрь 2016 - 09:41

Просмотр сообщенияVaccina (30 Сентябрь 2016 - 02:04) писал:

В main.css найдите:
.header-top {position: relative;background: rgba(73, 73, 73, 0.67);color: #fff;height: 40px;

замените на:
.header-top {position: relative;background: rgba(73, 73, 73, 0.67);color: #fff;height: 40px;}

ооооо, красота :rolleyes:  спасибо большое :rolleyes:

#17 H8uAll

H8uAll

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

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

Отправлено 16 Октябрь 2016 - 18:56

Просмотр сообщенияJohn (11 Апрель 2016 - 12:35) писал:

спасибо.
как задать прозрачность серому фону в строке с горизонтальным меню (Главная - доставка... поиск). Потому что картинка закрывается этой серой строкой

Здравствуйте, у меня такая же проблема, только в футере, пожалуйста, напишите, что заменить в этом случае..

#18 Firefly

Firefly

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

  • Модераторы
  • 3 810 сообщений

Отправлено 16 Октябрь 2016 - 19:13

Просмотр сообщенияH8uAll (16 Октябрь 2016 - 18:56) писал:

Здравствуйте, у меня такая же проблема, только в футере, пожалуйста, напишите, что заменить в этом случае..

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
.footer-fixed {position: fixed;background-color: #1e1e21;bottom: 0;width: 100%;z-index: 1001;color: #fff;}

Замените на:
.footer-fixed {position: fixed;background-color: rgba(30,30,33,0.8);bottom: 0;width: 100%;z-index: 1001;color: #fff;}

#19 H8uAll

H8uAll

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

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

Отправлено 16 Октябрь 2016 - 20:23

Спасибо за ответ, но простите, пожалуйста, я вероятно неправильно сформулировал вопрос. Мне нужно не самая нижняя часть футера, а та, которая над ней ( широкая, где меню) ...

#20 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 364 сообщений

Отправлено 17 Октябрь 2016 - 09:47

Просмотр сообщенияH8uAll (16 Октябрь 2016 - 20:23) писал:

Спасибо за ответ, но простите, пожалуйста, я вероятно неправильно сформулировал вопрос. Мне нужно не самая нижняя часть футера, а та, которая над ней ( широкая, где меню) ...
Здравствуйте.
Чтобы изменить прозрачность всего футера в файле найдите
/*** Подвал ***/
#footer {background-color: #2f3132;margin-top: 50px;}
замените на
/*** Подвал ***/
#footer {background-color: rgba(47,49,50,0.5);margin-top: 50px;}
где последнее значение 0.5 может быть от 0 до 1 (уровень прозрачности)

также можно изменить цвет новостей в футере
/* Новости в подвале */
#footer .footer-top {padding: 38px 0 25px;color: #fff;background-color: #494949;}

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



Темы с аналогичным тегами шапка, фон, картинка

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

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

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