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


Изменение Поля Сайта


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

#1 serejekee

serejekee

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

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

Отправлено 10 Май 2015 - 16:42

Добрый вечер, подскажите как изменить тело сайта, чтобы я смог добавить к примеру вот такой фон
Аккаунт 343905.

Ну к примеру как на второй фотке

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

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


#2 Firefly

Firefly

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

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

Отправлено 11 Май 2015 - 10:33

Просмотр сообщенияserejekee (10 Май 2015 - 16:42) писал:

Добрый вечер, подскажите как изменить тело сайта, чтобы я смог добавить к примеру вот такой фон
Аккаунт 343905.

Ну к примеру как на второй фотке

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
body {background-color: #ffffff;color: #666666;font-family: Arial;font-size: 12px;line-height: 1;outline: none;position: relative;}

Замените на:
body {background-color: #92C5ED;color: #666666;font-family: Arial;font-size: 12px;line-height: 1;outline: none;position: relative;display: flex;justify-content: center;}

#92C5ED - код цвета фона, который Вы можете изменить на необходимый.

Либо измените background-color на:
background-image: url(ссылка на фоновую картинку);
В том случае, если Вам нужно сделать фоном картинку, вместо цвета.

#3 serejekee

serejekee

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

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

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

Просмотр сообщенияFirefly (11 Май 2015 - 10:33) писал:

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
body {background-color: #ffffff;color: #666666;font-family: Arial;font-size: 12px;line-height: 1;outline: none;position: relative;}

Замените на:
body {background-color: #92C5ED;color: #666666;font-family: Arial;font-size: 12px;line-height: 1;outline: none;position: relative;display: flex;justify-content: center;}

#92C5ED - код цвета фона, который Вы можете изменить на необходимый.

Либо измените background-color на:
background-image: url(ссылка на фоновую картинку);
В том случае, если Вам нужно сделать фоном картинку, вместо цвета.
Спасибо!Но мне нужно чтобы это все было блоком как на той картинке с верху, а получилось вот так

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

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


#4 Vaccina

Vaccina

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

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

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

В main.css найдите:
#main {
  margin-top: 40px;
}
замените на:
#main {
  margin-top: 0px;
}

далее найдите:
#footer {
  background-color: #f3f3f3;
  margin-top: 45px;
  padding-top: 40px;
}
замените на:
#footer {
  background-color: #f3f3f3;
  margin-top: 0px;
  padding-top: 40px;
}


#5 serejekee

serejekee

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

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

Отправлено 13 Май 2015 - 08:29

Просмотр сообщенияVaccina (13 Май 2015 - 07:30) писал:

В main.css найдите:
#main {
margin-top: 40px;
}
замените на:
#main {
margin-top: 0px;
}

далее найдите:
#footer {
background-color: #f3f3f3;
margin-top: 45px;
padding-top: 40px;
}
замените на:
#footer {
background-color: #f3f3f3;
margin-top: 0px;
padding-top: 40px;
}

Спасибо!! Получилось)
А ширину можно как-нибудь еще уменьшить? самого тела

#6 Ирина345

Ирина345

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

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

Отправлено 13 Май 2015 - 10:03

Просмотр сообщенияserejekee (13 Май 2015 - 08:29) писал:

Спасибо!! Получилось)
А ширину можно как-нибудь еще уменьшить? самого тела
Здравствуйте, найдите в main.css
.container {
  width: 1170px;
}

где изменяете значение  width: 1170px;

#7 serejekee

serejekee

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

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

Отправлено 13 Май 2015 - 11:41

Просмотр сообщенияИрина345 (13 Май 2015 - 10:03) писал:

Здравствуйте, найдите в main.css
.container {
width: 1170px;
}

где изменяете значение  width: 1170px;

Спасибо!!! Все отлично получилось, примного благодарен!

#8 serejekee

serejekee

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

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

Отправлено 14 Май 2015 - 11:12

Товарищи, еще вопрос, как опустить вот эти штуки в низ?
Чтобы они были в низу зеленого поля, или к примеру с верху

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

  • FnJjQEq0184.jpg


#9 Danil

Danil

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

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

Отправлено 14 Май 2015 - 11:21

Просмотр сообщенияserejekee (14 Май 2015 - 11:12) писал:

Товарищи, еще вопрос, как опустить вот эти штуки в низ?
Чтобы они были в низу зеленого поля, или к примеру с верху
В main.css найдите код
.products-grid .item-inner:hover .product-addto-wrap {
  top: 40%;
  left: 13%;
}
и замените на
.products-grid .item-inner:hover .product-addto-wrap {
  top: 75%;
  left: 9%;
}


#10 serejekee

serejekee

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

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

Отправлено 14 Май 2015 - 11:38

Просмотр сообщенияDanil (14 Май 2015 - 11:21) писал:

В main.css найдите код
.products-grid .item-inner:hover .product-addto-wrap {
top: 40%;
left: 13%;
}
и замените на
.products-grid .item-inner:hover .product-addto-wrap {
top: 75%;
left: 9%;
}
Спасибо!!!!

#11 serejekee

serejekee

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

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

Отправлено 14 Май 2015 - 18:13

Товарищи чето у меня в разных браузерах отображаеться все по разному, что делать?
В Мазиле так, в хроме чуть выыше фотки были
Можно как-нибудь сделать чтобы везде по одинаковому отображалось?
Дело в товарах, в хроме все нормально показывает, здесь увеличивает размер

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

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


#12 Vaccina

Vaccina

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

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

Отправлено 15 Май 2015 - 03:48

В main.css найдите:
.products-grid .product-image img {
display: block;
margin: 0 auto;
max-width: 100%;
min-height: 130px;
}

замените на:
.products-grid .product-image img {
display: block;
margin: 0 auto;
max-width: 100%;
width: 100%;
}

далее найдите:
.products-grid .item-inner .product-image {
border: 1px solid #398a3e;
display: table-cell;
height: 140px;
vertical-align: middle;
width: 140px;
}

замените на:
.products-grid .item-inner .product-image {
border: 1px solid #398a3e;
display: table-cell;
height: 200px;
vertical-align: middle;
width: 100%;
}


#13 serejekee

serejekee

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

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

Отправлено 15 Май 2015 - 05:46

Спасибо :D

#14 serejekee

serejekee

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

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

Отправлено 15 Май 2015 - 08:29

Я наверное супер идиотина и всемнадоел уже, пытаюсь сделать блок с права.
Подогнал размер под 100px, но картинка не влезает в него, можно как нибудь сделать так чтобы блок 100 пикселей остался а картинка подогналась под его размер?

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

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


#15 Cupuyc

Cupuyc

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

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

Отправлено 15 Май 2015 - 09:42

Просмотр сообщенияserejekee (15 Май 2015 - 08:29) писал:

Я наверное супер идиотина и всемнадоел уже, пытаюсь сделать блок с права.
Подогнал размер под 100px, но картинка не влезает в него, можно как нибудь сделать так чтобы блок 100 пикселей остался а картинка подогналась под его размер?

Здравствуйте, зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> Товар найдите код:
				<!-- Другие изображения товара. Отображаются если есть изображения товара -->
				{% IFNOT goods_images_empty %}
				  <div id="thumblist" class="thumblist popup-gallery">
					{% FOR goods_images %}
					  {% IFNOT goods_images.first %}
						<a itemprop="image" href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" /></a>

Замените его на:
				<!-- Другие изображения товара. Отображаются если есть изображения товара -->
				{% IFNOT goods_images_empty %}
				  <div id="thumblist" class="thumblist popup-gallery">
					{% FOR goods_images %}
					  {% IFNOT goods_images.first %}
						<a itemprop="image" href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" style="max-height: 85px;" /></a>


#16 serejekee

serejekee

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

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

Отправлено 15 Май 2015 - 10:32

Просмотр сообщенияCupuyc (15 Май 2015 - 09:42) писал:

Здравствуйте, зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> Товар найдите код:
			 <!-- Другие изображения товара. Отображаются если есть изображения товара -->
			 {% IFNOT goods_images_empty %}
				 <div id="thumblist" class="thumblist popup-gallery">
				 {% FOR goods_images %}
					 {% IFNOT goods_images.first %}
					 <a itemprop="image" href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" /></a>

Замените его на:
			 <!-- Другие изображения товара. Отображаются если есть изображения товара -->
			 {% IFNOT goods_images_empty %}
				 <div id="thumblist" class="thumblist popup-gallery">
				 {% FOR goods_images %}
					 {% IFNOT goods_images.first %}
					 <a itemprop="image" href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" style="max-height: 85px;" /></a>

Отлично, теперь бы еще в блоке "вы смотрели" картинку подогнать под 100пикселей

#17 Cupuyc

Cupuyc

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

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

Отправлено 15 Май 2015 - 10:59

Просмотр сообщенияserejekee (15 Май 2015 - 10:32) писал:

Отлично, теперь бы еще в блоке "вы смотрели" картинку подогнать под 100пикселей

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> Товар найдите код:
				 {% FOR related_views_goods %}
				 <div class="item">	
					 <div class="item-inner">
					 <div class="product-image">
						 <a href="{related_views_goods.URL_MIN_PRICE_NOW | url_amp}"><div class="bg-hover-grid"></div></a>
						 <a href="{related_views_goods.URL_MIN_PRICE_NOW | url_amp}">
						 <img src="{% IF related_views_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=orange{% ELSE %}{related_views_goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{related_views_goods.NAME}">

Замените его на:
				 {% FOR related_views_goods %}
				 <div class="item">	
					 <div class="item-inner">
					 <div class="product-image">
						 <a href="{related_views_goods.URL_MIN_PRICE_NOW | url_amp}"><div class="bg-hover-grid"></div></a>
						 <a href="{related_views_goods.URL_MIN_PRICE_NOW | url_amp}">
						 <img src="{% IF related_views_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=orange{% ELSE %}{related_views_goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{related_views_goods.NAME}"style="max-height: 100px;">


#18 serejekee

serejekee

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

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

Отправлено 15 Май 2015 - 11:10

Просмотр сообщенияCupuyc (15 Май 2015 - 10:59) писал:

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> Товар найдите код:
				 {% FOR related_views_goods %}
				 <div class="item">	
					 <div class="item-inner">
					 <div class="product-image">
						 <a href="{related_views_goods.URL_MIN_PRICE_NOW | url_amp}"><div class="bg-hover-grid"></div></a>
						 <a href="{related_views_goods.URL_MIN_PRICE_NOW | url_amp}">
						 <img src="{% IF related_views_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=orange{% ELSE %}{related_views_goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{related_views_goods.NAME}">

Замените его на:
				 {% FOR related_views_goods %}
				 <div class="item">	
					 <div class="item-inner">
					 <div class="product-image">
						 <a href="{related_views_goods.URL_MIN_PRICE_NOW | url_amp}"><div class="bg-hover-grid"></div></a>
						 <a href="{related_views_goods.URL_MIN_PRICE_NOW | url_amp}">
						 <img src="{% IF related_views_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=orange{% ELSE %}{related_views_goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{related_views_goods.NAME}"style="max-height: 100px;">

я так уже делал, в первую очередь, картинки внутри все равно не влазивают

#19 Cupuyc

Cupuyc

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

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

Отправлено 15 Май 2015 - 11:18

Просмотр сообщенияserejekee (15 Май 2015 - 11:10) писал:

я так уже делал, в первую очередь, картинки внутри все равно не влазивают

Фотографии товаров размещенные на Вашем сайте имеют соотношение сторон порядка 2:1(по ширине и высоте соответственно), для того чтобы фотографии в блоке отображались полностью, требуется либо увеличить блок, либо использовать инструкцию выше, заменив в строке "max-height: 100px;" значение "100px" на "50px".

#20 serejekee

serejekee

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

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

Отправлено 15 Май 2015 - 12:30

Просмотр сообщенияCupuyc (15 Май 2015 - 11:18) писал:

Фотографии товаров размещенные на Вашем сайте имеют соотношение сторон порядка 2:1(по ширине и высоте соответственно), для того чтобы фотографии в блоке отображались полностью, требуется либо увеличить блок, либо использовать инструкцию выше, заменив в строке "max-height: 100px;" значение "100px" на "50px".
Ага, допедрил, просто 100% поставил по ширине и высоте, и стало целиком показываться) Благодарю)




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

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