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


Добавить Категории


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

#1 UGIN

UGIN

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

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

Отправлено 17 Декабрь 2015 - 13:41

как добавить, вот таких 5 блоков с категориями под слайды? визуально чтоб они выглядели как на скрине. спасибо!

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

  • 2015-12-17 13-38-31 FIGHT  – Yandex.png


#2 RedHead

RedHead

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

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

Отправлено 17 Декабрь 2015 - 14:15

Просмотр сообщенияUGIN (17 Декабрь 2015 - 13:41) писал:

как добавить, вот таких 5 блоков с категориями под слайды? визуально чтоб они выглядели как на скрине. спасибо!

Здравствуйте! Уточните, пожалуйста, какие блоки Вы хотите выводить  в указанном месте?
Это будут кликабельные картинки, или товарные категории? Они будут отображаться только на главной, или на всех страницах сайта?

#3 UGIN

UGIN

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

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

Отправлено 17 Декабрь 2015 - 14:36

Просмотр сообщенияRedHead (17 Декабрь 2015 - 14:15) писал:

Здравствуйте! Уточните, пожалуйста, какие блоки Вы хотите выводить  в указанном месте?
Это будут кликабельные картинки, или товарные категории? Они будут отображаться только на главной, или на всех страницах сайта?
Отображаться только на главной. это должны быть кликабельные картинки. Спасибо.

#4 RedHead

RedHead

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

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

Отправлено 17 Декабрь 2015 - 16:03

Просмотр сообщенияUGIN (17 Декабрь 2015 - 14:36) писал:

Отображаться только на главной. это должны быть кликабельные картинки. Спасибо.

Подготовьте изображения необходимого размера. Сумма длин первых двух картинок должны быть равны сумме длин трех нижних картинок.
Загрузите их в разделе Сайт --> Редактор шаблонов --> Добавить файлы.

В шаблоне html после строки
<!-- /END Хлебные крошки -->
вставьте:
<!-- Картинки на главной -->
		{% IF index_page %}
		<br>
		 <div class="header-image">
		 <div class="header-content-left col-md-6 col-sm-6 col-xs-12"><a href="ссылка на страницу"><img src="ссылка на картинку" alt="" title="" / ></a></div>
		 <div class="header-content-right col-md-6 col-sm-6 col-xs-12"><a href="ссылка на страницу"><img src="ссылка на картинку" alt="" title="" / ></a></div>
		 </div>
		 <div class="header-image">
		 <div class="header-content-left col-md-4 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src="ссылка на картинку" alt="" title="" / ></a></div>
		 <div class="header-content-left col-md-4 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src="ссылка на картинку" alt="" title="" / ></div>
		 <div class="header-content-right col-md-4 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src="ссылка на картинку" alt="" title="" / ></a></div>
		 </div>
		{% ENDIF %}  
		<!-- /END Картинки на главной -->
Проставьте все необходимые ссылки. Дальнейшие инструкции по стилям необходимо смотреть на основании загруженных картинок. Напишите, пожалуйста, когда выполните этот шаг.

#5 UGIN

UGIN

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

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

Отправлено 17 Декабрь 2015 - 23:08

Просмотр сообщенияRedHead (17 Декабрь 2015 - 16:03) писал:

Подготовьте изображения необходимого размера. Сумма длин первых двух картинок должны быть равны сумме длин трех нижних картинок.
Загрузите их в разделе Сайт --> Редактор шаблонов --> Добавить файлы.

В шаблоне html после строки
<!-- /END Хлебные крошки -->
вставьте:
<!-- Картинки на главной -->
	 {% IF index_page %}
	 <br>
		 <div class="header-image">
		 <div class="header-content-left col-md-6 col-sm-6 col-xs-12"><a href="ссылка на страницу"><img src="ссылка на картинку" alt="" title="" / ></a></div>
		 <div class="header-content-right col-md-6 col-sm-6 col-xs-12"><a href="ссылка на страницу"><img src="ссылка на картинку" alt="" title="" / ></a></div>
		 </div>
		 <div class="header-image">
		 <div class="header-content-left col-md-4 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src="ссылка на картинку" alt="" title="" / ></a></div>
		 <div class="header-content-left col-md-4 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src="ссылка на картинку" alt="" title="" / ></div>
		 <div class="header-content-right col-md-4 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src="ссылка на картинку" alt="" title="" / ></a></div>
		 </div>
	 {% ENDIF %}
	 <!-- /END Картинки на главной -->
Проставьте все необходимые ссылки. Дальнейшие инструкции по стилям необходимо смотреть на основании загруженных картинок. Напишите, пожалуйста, когда выполните этот шаг.
Добавил. правда пока только две картинки, ниже будут 3 картинки, но уже с категориями. теперь бы допилить как на скрине.

#6 Vaccina

Vaccina

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

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

Отправлено 18 Декабрь 2015 - 01:53

Добавьте пожалуйста все 5, чтобы выровнять их относительно друг друга.

#7 UGIN

UGIN

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

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

Отправлено 18 Декабрь 2015 - 13:01

Просмотр сообщенияVaccina (18 Декабрь 2015 - 01:53) писал:

Добавьте пожалуйста все 5, чтобы выровнять их относительно друг друга.
фото залил, 2 верхние работают, и как 3 нижнии сделать ссылками на категории?

#8 Юля123

Юля123

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

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

Отправлено 18 Декабрь 2015 - 13:21

Просмотр сообщенияUGIN (18 Декабрь 2015 - 13:01) писал:

фото залил, 2 верхние работают, и как 3 нижнии сделать ссылками на категории?

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

.header-content-left.col-md-6.col-sm-6.col-xs-12 a img {
float: right;
}

.header-content-left.col-md-5.col-sm-4.col-xs-12 a img {
float: right;
}


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

<!-- <!-- Картинки на главной -->
{% IF index_page %}
<br>
<div class="header-image">
<div class="header-content-left col-md-6 col-sm-6 col-xs-12"><a href=http://store-ip.ru/page/Umnyj-dom><img src=http://st.store-ip.ru/9/1788/411/large-home.jpg alt="" title="" / ></a></div>
<div class="header-content-right col-md-6 col-sm-6 col-xs-12"><a href=http://store-ip.ru/page/Hranenie-dannyh><img src=http://st.store-ip.ru/9/1788/412/sln.jpg alt="" title="" / ></a></div>
</div>
<div class="header-image">
<div class="header-content-left col-md-4 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src=http://st.store-ip.ru/9/1788/408/blogger.jpg alt="" title="" / ></a></div>
<div class="header-content-left col-md-4 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src=http://st.store-ip.ru/9/1788/409/fiber-optic-.jpg alt="" title="" / ></div>
<div class="header-content-right col-md-4 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src=http://st.store-ip.ru/9/1788/410/hands.jpg alt="" title="" / ></a></div>
</div>
{% ENDIF %}
<!-- /END Картинки на главной -->

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

<!-- Картинки на главной -->
<!-- <!-- Картинки на главной -->
{% IF index_page %}
<br>
<div class="header-image">
<div class="header-content-left col-md-6 col-sm-6 col-xs-12"><a href=http://store-ip.ru/page/Umnyj-dom><img src=http://st.store-ip.ru/9/1788/411/large-home.jpg alt="" title="" / ></a></div>
<div class="header-content-right col-md-6 col-sm-6 col-xs-12"><a href=http://store-ip.ru/page/Hranenie-dannyh><img src=http://st.store-ip.ru/9/1788/412/sln.jpg alt="" title="" / ></a></div>
</div>
<div class="header-image">
<div class="header-content-left col-md-5 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src=http://st.store-ip.ru/9/1788/408/blogger.jpg alt="" title="" / ></a></div>
<div class="header-content-left col-md-2 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src=http://st.store-ip.ru/9/1788/409/fiber-optic-.jpg alt="" title="" / ></div>
<div class="header-content-right col-md-5 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src=http://st.store-ip.ru/9/1788/410/hands.jpg alt="" title="" / ></a></div>
</div>
{% ENDIF %}
<!-- /END Картинки на главной -->

Замените "ссылка на страницу" в оставшихся трех картинках на соответствующие ссылки.

#9 UGIN

UGIN

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

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

Отправлено 19 Декабрь 2015 - 13:12

Просмотр сообщенияЮля123 (18 Декабрь 2015 - 13:21) писал:

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

.header-content-left.col-md-6.col-sm-6.col-xs-12 a img {
float: right;
}

.header-content-left.col-md-5.col-sm-4.col-xs-12 a img {
float: right;
}


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

<!-- <!-- Картинки на главной -->
{% IF index_page %}
<br>
<div class="header-image">
<div class="header-content-left col-md-6 col-sm-6 col-xs-12"><a href=http://store-ip.ru/page/Umnyj-dom><img src=http://st.store-ip.ru/9/1788/411/large-home.jpg alt="" title="" / ></a></div>
<div class="header-content-right col-md-6 col-sm-6 col-xs-12"><a href=http://store-ip.ru/page/Hranenie-dannyh><img src=http://st.store-ip.ru/9/1788/412/sln.jpg alt="" title="" / ></a></div>
</div>
<div class="header-image">
<div class="header-content-left col-md-4 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src=http://st.store-ip.ru/9/1788/408/blogger.jpg alt="" title="" / ></a></div>
<div class="header-content-left col-md-4 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src=http://st.store-ip.ru/9/1788/409/fiber-optic-.jpg alt="" title="" / ></div>
<div class="header-content-right col-md-4 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src=http://st.store-ip.ru/9/1788/410/hands.jpg alt="" title="" / ></a></div>
</div>
{% ENDIF %}
<!-- /END Картинки на главной -->

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

<!-- Картинки на главной -->
<!-- <!-- Картинки на главной -->
{% IF index_page %}
<br>
<div class="header-image">
<div class="header-content-left col-md-6 col-sm-6 col-xs-12"><a href=http://store-ip.ru/page/Umnyj-dom><img src=http://st.store-ip.ru/9/1788/411/large-home.jpg alt="" title="" / ></a></div>
<div class="header-content-right col-md-6 col-sm-6 col-xs-12"><a href=http://store-ip.ru/page/Hranenie-dannyh><img src=http://st.store-ip.ru/9/1788/412/sln.jpg alt="" title="" / ></a></div>
</div>
<div class="header-image">
<div class="header-content-left col-md-5 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src=http://st.store-ip.ru/9/1788/408/blogger.jpg alt="" title="" / ></a></div>
<div class="header-content-left col-md-2 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src=http://st.store-ip.ru/9/1788/409/fiber-optic-.jpg alt="" title="" / ></div>
<div class="header-content-right col-md-5 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src=http://st.store-ip.ru/9/1788/410/hands.jpg alt="" title="" / ></a></div>
</div>
{% ENDIF %}
<!-- /END Картинки на главной -->

Замените "ссылка на страницу" в оставшихся трех картинках на соответствующие ссылки.
вот что получилось. как теперь подогнать как на скрине? добавить текст, такого же вида, плюс при на ведении на них мышкой что-бы они становились светлее.

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

  • 2015-12-17 16-46-24 FIGHT FIT GEARS - экипировка для Единоборств и Силовых видов спорта – Yandex.png


#10 Vaccina

Vaccina

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

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

Отправлено 22 Декабрь 2015 - 08:01

Попробуйте привести структуру к примерно следующему виду:
<div class="header-content-right col-md-5 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src=http://st.store-ip.ru/9/1788/410/hands.jpg alt="" title="" / ></a><span>текст</span></div>

то есть рядом с изображением мы вставляем текст:
<span>текст</span>

далее в стилях мы его скрываем и отображаем при наведении, для этого в main.css найдите:
.header-content-left.col-md-6.col-sm-6.col-xs-12 a img {
	float: right;
}

после него пропишите:
.header-image span {
	position: absolute;
	left: 0;
	right: 0;
	display: none;
	height: 100%;
	text-align: center;
	line-height: 300px;
	color: #fff;
	font-size: 26px;
}
.header-image > div:hover span {
	display: block;
}


#11 UGIN

UGIN

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

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

Отправлено 22 Декабрь 2015 - 21:15

Просмотр сообщенияVaccina (22 Декабрь 2015 - 08:01) писал:

Попробуйте привести структуру к примерно следующему виду:
<div class="header-content-right col-md-5 col-sm-4 col-xs-12"><a href="ссылка на страницу"><img src=http://st.store-ip.ru/9/1788/410/hands.jpg alt="" title="" / ></a><span>текст</span></div>

то есть рядом с изображением мы вставляем текст:
<span>текст</span>

далее в стилях мы его скрываем и отображаем при наведении, для этого в main.css найдите:
.header-content-left.col-md-6.col-sm-6.col-xs-12 a img {
float: right;
}

после него пропишите:
.header-image span {
position: absolute;
left: 0;
right: 0;
display: none;
height: 100%;
text-align: center;
line-height: 300px;
color: #fff;
font-size: 26px;
}
.header-image > div:hover span {
display: block;
}
мне бы хотелось привести данные блоки в такой вид как на сайте http://ffgears.ru/
пусть простит меня создатель этого магазина.

#12 Vaccina

Vaccina

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

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

Отправлено 23 Декабрь 2015 - 01:38

Примерно поняла, спасибо.
В шаблоне HTML найдите:
<div class="header-image">
<div class="header-content-left col-md-6 col-sm-6 col-xs-12"><a href=http://store-ip.ru/page/Umnyj-dom><img src=http://st.store-ip.ru/12/1790/191/home.png alt="" title="" / ></a></div>
<div class="header-content-right col-md-6 col-sm-6 col-xs-12"><a href=http://store-ip.ru/page/Hranenie-dannyh><img src=http://st.store-ip.ru/9/1788/412/sln.jpg alt="" title="" / ></a></div>
</div>
<div class="header-image">
<div class="header-content-left col-md-5 col-sm-4 col-xs-12"><a href=http://store-ip.ru/catalog/IP-domofony-True-IP><img src=http://st.store-ip.ru/9/1788/408/blogger.jpg alt="" title="" / ></a></div>
<div class="header-content-left col-md-2 col-sm-4 col-xs-12"><a href=http://store-ip.ru/catalog/SKS><img src=http://st.store-ip.ru/9/1788/409/fiber-optic-.jpg alt="" title="" / ></div>
<div class="header-content-right col-md-5 col-sm-4 col-xs-12"><a href=http://store-ip.ru/catalog/Sistemy-ucheta-i-kontrolya><img src=http://st.store-ip.ru/9/1788/410/hands.jpg alt="" title="" / ></a></div>
</div>

замените на:
<div class="container header-image">
<div class="header-content-left"><a href=http://store-ip.ru/page/Umnyj-dom><img src=http://st.store-ip.ru/12/1790/191/home.png alt="" title="" / ><div class="text">Пропишите здесь необходимый текст</div></a></div>
<div class="header-content-right"><a href=http://store-ip.ru/page/Hranenie-dannyh><img src=http://st.store-ip.ru/9/1788/412/sln.jpg alt="" title="" /><div class="text">Пропишите здесь необходимый текст</div></a></div>
<div class="clear"></div>
<div class="header-content-left"><a href=http://store-ip.ru/catalog/IP-domofony-True-IP><img src=http://st.store-ip.ru/9/1788/408/blogger.jpg alt="" title="" / ><div class="text">Пропишите здесь необходимый текст</div></a></div>
<div class="header-content-left"><a href=http://store-ip.ru/catalog/SKS><img src=http://st.store-ip.ru/9/1788/409/fiber-optic-.jpg alt="" title="" /><div class="text">Пропишите здесь необходимый текст</div></a></div>
<div class="header-content-right"><a href=http://store-ip.ru/catalog/Sistemy-ucheta-i-kontrolya><img src=http://st.store-ip.ru/9/1788/410/hands.jpg alt="" title="" /><div class="text">Пропишите здесь необходимый текст</div></a></div>
</div>
Текст замените в блоках на необходимый.

Далее в main,css добавьте:
.container.header-image {
text-align: center;
}
.container.header-image > div {
display: inline-block;
position: relative;
}
.container.header-image .text {
position: absolute;
z-index: 9;
top: 0;
text-align: center;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
font: 26px Arial;
color: #fff;
padding-top: 30%;
}
.container.header-image > div:hover .text {
background: rgba(0, 0, 0, 0.2);
}


#13 UGIN

UGIN

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

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

Отправлено 23 Декабрь 2015 - 12:38

Просмотр сообщенияVaccina (23 Декабрь 2015 - 01:38) писал:

Примерно поняла, спасибо.
В шаблоне HTML найдите:
<div class="header-image">
<div class="header-content-left col-md-6 col-sm-6 col-xs-12"><a href=http://store-ip.ru/page/Umnyj-dom><img src=http://st.store-ip.ru/12/1790/191/home.png alt="" title="" / ></a></div>
<div class="header-content-right col-md-6 col-sm-6 col-xs-12"><a href=http://store-ip.ru/page/Hranenie-dannyh><img src=http://st.store-ip.ru/9/1788/412/sln.jpg alt="" title="" / ></a></div>
</div>
<div class="header-image">
<div class="header-content-left col-md-5 col-sm-4 col-xs-12"><a href=http://store-ip.ru/catalog/IP-domofony-True-IP><img src=http://st.store-ip.ru/9/1788/408/blogger.jpg alt="" title="" / ></a></div>
<div class="header-content-left col-md-2 col-sm-4 col-xs-12"><a href=http://store-ip.ru/catalog/SKS><img src=http://st.store-ip.ru/9/1788/409/fiber-optic-.jpg alt="" title="" / ></div>
<div class="header-content-right col-md-5 col-sm-4 col-xs-12"><a href=http://store-ip.ru/catalog/Sistemy-ucheta-i-kontrolya><img src=http://st.store-ip.ru/9/1788/410/hands.jpg alt="" title="" / ></a></div>
</div>

замените на:
<div class="container header-image">
<div class="header-content-left"><a href=http://store-ip.ru/page/Umnyj-dom><img src=http://st.store-ip.ru/12/1790/191/home.png alt="" title="" / ><div class="text">Пропишите здесь необходимый текст</div></a></div>
<div class="header-content-right"><a href=http://store-ip.ru/page/Hranenie-dannyh><img src=http://st.store-ip.ru/9/1788/412/sln.jpg alt="" title="" /><div class="text">Пропишите здесь необходимый текст</div></a></div>
<div class="clear"></div>
<div class="header-content-left"><a href=http://store-ip.ru/catalog/IP-domofony-True-IP><img src=http://st.store-ip.ru/9/1788/408/blogger.jpg alt="" title="" / ><div class="text">Пропишите здесь необходимый текст</div></a></div>
<div class="header-content-left"><a href=http://store-ip.ru/catalog/SKS><img src=http://st.store-ip.ru/9/1788/409/fiber-optic-.jpg alt="" title="" /><div class="text">Пропишите здесь необходимый текст</div></a></div>
<div class="header-content-right"><a href=http://store-ip.ru/catalog/Sistemy-ucheta-i-kontrolya><img src=http://st.store-ip.ru/9/1788/410/hands.jpg alt="" title="" /><div class="text">Пропишите здесь необходимый текст</div></a></div>
</div>
Текст замените в блоках на необходимый.

Далее в main,css добавьте:
.container.header-image {
text-align: center;
}
.container.header-image > div {
display: inline-block;
position: relative;
}
.container.header-image .text {
position: absolute;
z-index: 9;
top: 0;
text-align: center;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
font: 26px Arial;
color: #fff;
padding-top: 30%;
}
.container.header-image > div:hover .text {
background: rgba(0, 0, 0, 0.2);
}
получилось. а каким образом можно выделить текст горизонтальними линиями? и сами блоки друг от друга раздвинуть?

#14 Danil

Danil

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

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

Отправлено 23 Декабрь 2015 - 19:55

Просмотр сообщенияUGIN (23 Декабрь 2015 - 12:38) писал:

получилось. а каким образом можно выделить текст горизонтальними линиями? и сами блоки друг от друга раздвинуть?
В шаблоне html найдите код
<!-- <!-- Картинки на главной -->
{% IF index_page %}
<br>
<div class="container header-image">
<div class="header-content-left"><a href=http://store-ip.ru/page/Umnyj-dom><img src=http://st.store-ip.ru/12/1790/191/home.png alt="" title="" / ><div class="text">Система Умный Дом</div></a></div>
<div class="header-content-right"><a href=http://store-ip.ru/page/Hranenie-dannyh><img src=http://st.store-ip.ru/9/1788/412/sln.jpg alt="" title="" /><div class="text">Облачное хранения данных</div></a></div>
<div class="clear"></div>
<div class="header-content-left"><a href=http://store-ip.ru/catalog/IP-domofony-True-IP><img src=http://st.store-ip.ru/9/1788/408/blogger.jpg alt="" title="" / ><div class="text">IP домофония нового поколения</div></a></div>
<div class="header-content-left"><a href=http://store-ip.ru/catalog/SKS><img src=http://st.store-ip.ru/9/1788/409/fiber-optic-.jpg alt="" title="" /><div class="text">Структурирированные Кабельные Сети</div></a></div>
<div class="header-content-right"><a href=http://store-ip.ru/catalog/Sistemy-ucheta-i-kontrolya><img src=http://st.store-ip.ru/9/1788/410/hands.jpg alt="" title="" /><div class="text">Системы учета и контроля</div></a></div>
</div>
{% ENDIF %}
<!-- /END Картинки на главной -->
и замените на
<!-- <!-- Картинки на главной -->
{% IF index_page %}
<br>
<div class="container header-image">
<div class="header-content-left"><a href="http://store-ip.ru/page/Umnyj-dom"><img src=http://st.store-ip.ru/12/1790/191/home.png" alt="" title="" / ><div class="text"><p>Система Умный Дом</p></div></a></div>
<div class="header-content-right"><a href="http://store-ip.ru/page/Hranenie-dannyh"><img src=http://st.store-ip.ru/9/1788/412/sln.jpg" alt="" title="" /><div class="text"><p>Облачное хранения данных</p></div></a></div>
<div class="clear"></div>
<div class="header-content-left"><a href="http://store-ip.ru/catalog/IP-domofony-True-IP"><img src="http://st.store-ip.ru/9/1788/408/blogger.jpg" alt="" title="" / ><div class="text"><p>IP домофония нового поколения</p></div></a></div>
<div class="header-content-left"><a href="http://store-ip.ru/catalog/SKS"><img src="http://st.store-ip.ru/9/1788/409/fiber-optic-.jpg" alt="" title="" /><div class="text"><p>Структурирированные Кабельные Сети</p></div></a></div>
<div class="header-content-right"><a href="http://store-ip.ru/catalog/Sistemy-ucheta-i-kontrolya"><img src="http://st.store-ip.ru/9/1788/410/hands.jpg" alt="" title="" /><div class="text"><p>Системы учета и контроля</p></div></a></div>
</div>
{% ENDIF %}
<!-- /END Картинки на главной -->
В main.css найдите код
.container.header-image > div {
display: inline-block;
position: relative;
}
и замените на
.container.header-image > div {
display: inline-block;
position: relative;
margin-top: 3px;
}
.container.header-image .text p {
font-size: 100%;
text-align: center;
border-bottom: 2px solid #FFF;
}


#15 UGIN

UGIN

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

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

Отправлено 25 Декабрь 2015 - 10:13

Просмотр сообщенияDanil (23 Декабрь 2015 - 19:55) писал:

В шаблоне html найдите код
<!-- <!-- Картинки на главной -->
{% IF index_page %}
<br>
<div class="container header-image">
<div class="header-content-left"><a href=http://store-ip.ru/page/Umnyj-dom><img src=http://st.store-ip.ru/12/1790/191/home.png alt="" title="" / ><div class="text">Система Умный Дом</div></a></div>
<div class="header-content-right"><a href=http://store-ip.ru/page/Hranenie-dannyh><img src=http://st.store-ip.ru/9/1788/412/sln.jpg alt="" title="" /><div class="text">Облачное хранения данных</div></a></div>
<div class="clear"></div>
<div class="header-content-left"><a href=http://store-ip.ru/catalog/IP-domofony-True-IP><img src=http://st.store-ip.ru/9/1788/408/blogger.jpg alt="" title="" / ><div class="text">IP домофония нового поколения</div></a></div>
<div class="header-content-left"><a href=http://store-ip.ru/catalog/SKS><img src=http://st.store-ip.ru/9/1788/409/fiber-optic-.jpg alt="" title="" /><div class="text">Структурирированные Кабельные Сети</div></a></div>
<div class="header-content-right"><a href=http://store-ip.ru/catalog/Sistemy-ucheta-i-kontrolya><img src=http://st.store-ip.ru/9/1788/410/hands.jpg alt="" title="" /><div class="text">Системы учета и контроля</div></a></div>
</div>
{% ENDIF %}
<!-- /END Картинки на главной -->
и замените на
<!-- <!-- Картинки на главной -->
{% IF index_page %}
<br>
<div class="container header-image">
<div class="header-content-left"><a href="http://store-ip.ru/page/Umnyj-dom"><img src=http://st.store-ip.ru/12/1790/191/home.png" alt="" title="" / ><div class="text"><p>Система Умный Дом</p></div></a></div>
<div class="header-content-right"><a href="http://store-ip.ru/page/Hranenie-dannyh"><img src=http://st.store-ip.ru/9/1788/412/sln.jpg" alt="" title="" /><div class="text"><p>Облачное хранения данных</p></div></a></div>
<div class="clear"></div>
<div class="header-content-left"><a href="http://store-ip.ru/catalog/IP-domofony-True-IP"><img src="http://st.store-ip.ru/9/1788/408/blogger.jpg" alt="" title="" / ><div class="text"><p>IP домофония нового поколения</p></div></a></div>
<div class="header-content-left"><a href="http://store-ip.ru/catalog/SKS"><img src="http://st.store-ip.ru/9/1788/409/fiber-optic-.jpg" alt="" title="" /><div class="text"><p>Структурирированные Кабельные Сети</p></div></a></div>
<div class="header-content-right"><a href="http://store-ip.ru/catalog/Sistemy-ucheta-i-kontrolya"><img src="http://st.store-ip.ru/9/1788/410/hands.jpg" alt="" title="" /><div class="text"><p>Системы учета и контроля</p></div></a></div>
</div>
{% ENDIF %}
<!-- /END Картинки на главной -->
В main.css найдите код
.container.header-image > div {
display: inline-block;
position: relative;
}
и замените на
.container.header-image > div {
display: inline-block;
position: relative;
margin-top: 3px;
}
.container.header-image .text p {
font-size: 100%;
text-align: center;
border-bottom: 2px solid #FFF;
}
нижние блоки чуть-чуть уехали вправо, к сожалению не получается их сдвинуть.

#16 RedHead

RedHead

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

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

Отправлено 25 Декабрь 2015 - 10:35

Просмотр сообщенияUGIN (25 Декабрь 2015 - 10:13) писал:

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

Здравствуйте! В шаблоне html найдите строки:
<div class="header-content-left"><a href="http://store-ip.ru/page/Umnyj-dom"><img src=http://st.store-ip.ru/12/1790/191/home.png" alt="" title="" / ><div class="text"><p>Система Умный Дом</p></div></a></div>
<div class="header-content-right"><a href="http://store-ip.ru/page/Hranenie-dannyh"><img src=http://st.store-ip.ru/9/1788/412/sln.jpg" alt="" title="" /><div class="text"><p>Облачное хранения данных</p></div></a></div>
замените на:
<div class="header-content-left" style="left: 3px;"><a href="http://store-ip.ru/page/Umnyj-dom"><img src=http://st.store-ip.ru/12/1790/191/home.png" alt="" title="" / ><div class="text"><p>Система Умный Дом</p></div></a></div>
<div class="header-content-right" style="left: 4px;"><a href="http://store-ip.ru/page/Hranenie-dannyh"><img src=http://st.store-ip.ru/9/1788/412/sln.jpg" alt="" title="" /><div class="text"><p>Облачное хранения данных</p></div></a></div>

1.jpg




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

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