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


Добавление Картинок На Страницу

Автор Swifty, 01 окт. 2013 12:18

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

#1 Swifty

Swifty

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

  • Пользователи
  • PipPip
  • 14 сообщений
  • ГородНовосибирск

Отправлено 01 Октябрь 2013 - 12:18

Подскажите как добавить картинки на пустые места в шаблоне, при этом они должны оставаться все время, на любых страницах. места указал на картинке.

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

  • 1.jpg

#2 miyako

miyako

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

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

Отправлено 01 Октябрь 2013 - 13:43

Просмотр сообщенияSwifty (01 Октябрь 2013 - 12:18) писал:

Подскажите как добавить картинки на пустые места в шаблоне, при этом они должны оставаться все время, на любых страницах. места указал на картинке.

Найдите код в шаблоне HTML - 
  <!-- Шапка сайта -->
	<div id="header" >
и замените его на - 
  <!-- Шапка сайта -->
	<div id="header" style="position:relative;">
	<div style="position:absolute;top:200px;left:-300px;"> <img width="300px" height="auto" src="путь до изображения" alt=""/></div>
	<div style="position:absolute;top:0;right:-300px;"><img width="300px" height="auto" src="путь до изображения" alt=""/>
	<br/> <img width="300px" height="auto" src="путь до изображения" alt=""/> 
	 
	</div>

Далее найдите код - 
<div class="logotype"><a href="http://{NET_DOMAIN}/"><img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}" title="{SETTINGS_STORE_NAME}" /></a></div>
		   <ul class="telephone23">
			{% IF SETTINGS_STORE_PHONE_NUMBER2 %}<li>{SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}</li>{% ENDIF %}
			{% IF SETTINGS_STORE_PHONE_NUMBER3 %}<li>{SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}</li>{% ENDIF %}
			{% IF SETTINGS_STORE_ICQ %}<li><img class="valignMiddle" src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&img=27" alt="Статус" width="16" height="16" />{SETTINGS_STORE_ICQ}</li>{% ENDIF %}
			
		  </ul>
	  </div>
и после него добавьте код -
<div style="margin: -75px 0 0 20px; float: left;"> <img src="путь до изображения" alt="" /></div>

#3 Swifty

Swifty

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

  • Пользователи
  • PipPip
  • 14 сообщений
  • ГородНовосибирск

Отправлено 01 Октябрь 2013 - 14:07

не получается. появилась рядом с логотипом маленькая иконка(картинка)


Последняя часть у меня выглядит вот так:

</div>
         <div class="logotype"><a href="http://{NET_DOMAIN}/"><img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}" title="{SETTINGS_STORE_NAME}" /></a></div>
           <ul class="telephone23">
            {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<li>{SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}</li>{% ENDIF %}
            {% IF SETTINGS_STORE_PHONE_NUMBER3 %}<li>{SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}</li>{% ENDIF %}
            {% IF SETTINGS_STORE_ICQ %}<li><img class="valignMiddle" src="http://wwp.icq.com/s...DIGITS}&img=27" alt="Статус" width="16" height="16" />{SETTINGS_STORE_ICQ}</li>{% ENDIF %}
            
          </ul>
      </div>
    </div>
     <div style="margin: -75px 0 0 20px; float: left;"> <img src="Foto-top.png" alt="" /></div>

#4 miyako

miyako

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

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

Отправлено 01 Октябрь 2013 - 14:21

Просмотр сообщенияSwifty (01 Октябрь 2013 - 14:07) писал:

не получается. появилась рядом с логотипом маленькая иконка(картинка)


Последняя часть у меня выглядит вот так:

</div>
<div class="logotype"><a href="http://{NET_DOMAIN}/"><img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}" title="{SETTINGS_STORE_NAME}" /></a></div>
   <ul class="telephone23">
{% IF SETTINGS_STORE_PHONE_NUMBER2 %}<li>{SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}</li>{% ENDIF %}
{% IF SETTINGS_STORE_PHONE_NUMBER3 %}<li>{SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}</li>{% ENDIF %}
{% IF SETTINGS_STORE_ICQ %}<li><img class="valignMiddle" src="http://wwp.icq.com/s...DIGITS}&img=27" alt="Статус" width="16" height="16" />{SETTINGS_STORE_ICQ}</li>{% ENDIF %}

  </ul>
  </div>
</div>
<div style="margin: -75px 0 0 20px; float: left;"> <img src="Foto-top.png" alt="" /></div>

Вы не указали путь до изображений.
Загрузите изображения в раздел Сайт - Файлы
Далее скопируйте сгенерированный путь до изображения через иконку бесконечности.
Далее замените путь до изображения в коде.

#5 Swifty

Swifty

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

  • Пользователи
  • PipPip
  • 14 сообщений
  • ГородНовосибирск

Отправлено 01 Октябрь 2013 - 14:34

Спасибо большое! Какими показателями можно перемещать на определенно растояние? Размер зависит от маей картинки или же можно его отрегулировать в коде?
а это можно сделать только в одном месте? можно в остальных таким же образом?

#6 miyako

miyako

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

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

Отправлено 01 Октябрь 2013 - 14:39

Просмотр сообщенияSwifty (01 Октябрь 2013 - 14:34) писал:

Спасибо большое! Какими показателями можно перемещать на определенно растояние? Размер зависит от маей картинки или же можно его отрегулировать в коде?
а это можно сделать только в одном месте? можно в остальных таким же образом?

Размер можно отрегулировать, например код - 
<div style="margin: -75px 0 0 20px; float: left;"> <img src="путь до изображения" alt="" /></div>
можете заменить на - 
<div style="margin: -75px 0 0 20px; float: left;"> <img width="300px" height:"auto" src="путь до изображения" alt="" /></div>
width="300px"  - ширина 300 пикселей
height:"auto" - автоматически определяется длина

В коде для изображений по бокам уже установлена ширина в 300 пикселей.

Перемещать можно. Какие изображения Вам нужно подвинуть?

Последний вопрос не очень понятен, сейчас у Вас на всех страницах эти баннеры.

#7 Swifty

Swifty

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

  • Пользователи
  • PipPip
  • 14 сообщений
  • ГородНовосибирск

Отправлено 01 Октябрь 2013 - 14:58

Само изображение надо переместить. допустим чуток в право :rolleyes:

как вставить картинки по бокам, где я отметил?

Просмотр сообщенияmiyako (01 Октябрь 2013 - 14:39) писал:

Размер можно отрегулировать, например код -
<div style="margin: -75px 0 0 20px; float: left;"> <img src="путь до изображения" alt="" /></div>
можете заменить на -
<div style="margin: -75px 0 0 20px; float: left;"> <img width="300px" height:"auto" src="путь до изображения" alt="" /></div>
width="300px"  - ширина 300 пикселей
height:"auto" - автоматически определяется длина




Спасибо получилось!

#8 Сake

Сake

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

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

Отправлено 02 Октябрь 2013 - 01:40

Найдите в файле стилей main.css

#container {
	margin: 0 auto;
	max-width: 1000px;
	width: 1000px;
}

и замените на

#container {
	margin: 0 auto;
	max-width: 1000px;
	width: 1000px;
	position: relative;
}

далее в шаблоне "HTML" найдите 

<div id="container">
   
		<div id="header" style="position:relative;">

и замените на

<div id="container">
  <div style="position: absolute; left: -70px; top: 40px; z-index: 2;"><img width="300px" height:"auto" src="путь до изображения" alt="" /></div>
		<div id="header" style="position:relative;">

положение добавленного блока можно менять путем изменения свойств left и top. Для добавления еще блока - просто добавьте дополнительный блок рядом например 

<div id="container">
  <div style="position: absolute; left: -70px; top: 40px; z-index: 2;"><img width="300px" height:"auto" src="путь до изображения" alt="" /></div>
  <div style="position: absolute; right: -70px; top: 40px; z-index: 2;"><img width="300px" height:"auto" src="путь до изображения" alt="" /></div>
		<div id="header" style="position:relative;">

#9 Swifty

Swifty

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

  • Пользователи
  • PipPip
  • 14 сообщений
  • ГородНовосибирск

Отправлено 02 Октябрь 2013 - 06:45

Просмотр сообщенияСake (02 Октябрь 2013 - 01:40) писал:

Найдите в файле стилей main.css

#container {
margin: 0 auto;
max-width: 1000px;
width: 1000px;
}

и замените на

#container {
margin: 0 auto;
max-width: 1000px;
width: 1000px;
position: relative;
}

далее в шаблоне "HTML" найдите

<div id="container">

	 <div id="header" style="position:relative;">

и замените на

<div id="container">
<div style="position: absolute; left: -70px; top: 40px; z-index: 2;"><img width="300px" height:"auto" src="путь до изображения" alt="" /></div>
	 <div id="header" style="position:relative;">

У меня нету таких строк:)

то что в html нашел, но менять пока что не стал

#10 miyako

miyako

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

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

Отправлено 02 Октябрь 2013 - 07:08

Просмотр сообщенияSwifty (02 Октябрь 2013 - 06:45) писал:

У меня нету таких строк :)

то что в html нашел, но менять пока что не стал

Измените пути до изображений в коде - 
   <div style="position:absolute;top:200px;left:-300px;"> <img width="300px" height="auto" src="путь до изображения" alt=""/></div>
		<div style="position:absolute;top:0;right:-300px;"><img width="300px" height="auto" src="путь до изображения" alt=""/>
		<br/> <img width="300px" height="auto" src="путь до изображения" alt=""/>

#11 Swifty

Swifty

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

  • Пользователи
  • PipPip
  • 14 сообщений
  • ГородНовосибирск

Отправлено 02 Октябрь 2013 - 10:33

Просмотр сообщенияmiyako (02 Октябрь 2013 - 07:08) писал:

Измените пути до изображений в коде - 
а как приподнять картинку в этом коде?
[img]путь до изображения[/img]

#12 miyako

miyako

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

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

Отправлено 02 Октябрь 2013 - 10:36

Просмотр сообщенияSwifty (02 Октябрь 2013 - 10:33) писал:


Укажите, какую именно картинку Вы хотите приподнять.

#13 Swifty

Swifty

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

  • Пользователи
  • PipPip
  • 14 сообщений
  • ГородНовосибирск

Отправлено 02 Октябрь 2013 - 10:40

<div style="position:absolute;top:0;right:-300px;"><img width="300px" height="auto" src="путь до изображения" alt=""/>

#14 miyako

miyako

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

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

Отправлено 02 Октябрь 2013 - 11:22

Просмотр сообщенияSwifty (02 Октябрь 2013 - 10:40) писал:

<div style="position:absolute;top:0;right:-300px;"><img width="300px" height="auto" src="путь до изображения" alt=""/>

Укажите пожалуйста путь до изображения. По скольку так не очень понятно. Когда Вы загрузите изображение, то можно будет понять либо по скриншоту, либо можно описать как-то изображение.
Изначально код был таким - http://forum.storela...ицу/#entry92624

#15 Swifty

Swifty

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

  • Пользователи
  • PipPip
  • 14 сообщений
  • ГородНовосибирск

Отправлено 02 Октябрь 2013 - 12:05

Вот именно эта строчка из кода
<div style="position:absolute;top:0;right:-130px;"><img width="230px" height="auto" src="http://st.storeland....482/Air_90.png" alt=""/>

мне полностью код прописать?

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

  • Безымянный.jpg

#16 miyako

miyako

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

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

Отправлено 02 Октябрь 2013 - 12:51

Просмотр сообщенияSwifty (02 Октябрь 2013 - 12:05) писал:

Вот именно эта строчка из кода
<div style="position:absolute;top:0;right:-130px;"><img width="230px" height="auto" src="http://st.storeland....482/Air_90.png" alt=""/>

мне полностью код прописать?

Достаточно скриншота.
Изменить расположение можно так - 
<div style="position:absolute;top:0;right:-130px;">
замените на - 
<div style="position:absolute;top:-10px;right:-140px;">
вверх поднимется на 10 пикселей(top:-10px), вправо подвинется еще на 10 пикселей(right:-140px;).
Обратно в Шаблон Пластик


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

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

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