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


Банеры На Главной


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

#1 Ast

Ast

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

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

Отправлено 16 Июнь 2016 - 18:32

Аккаунт SL-368333
Здравствуйте
Необходимо добавить еще один банер на главной, чтобы их стало 5, и заменить картинки шаблонных банеров на те, которые стоят сейчас на странице.
Как это сделать правильно? Спасибо.

#2 MikDark

MikDark

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

  • Модераторы
  • 6 468 сообщений

Отправлено 16 Июнь 2016 - 18:37

Просмотр сообщенияAst (16 Июнь 2016 - 18:32) писал:

Аккаунт SL-368333
Здравствуйте
Необходимо добавить еще один банер на главной, чтобы их стало 5, и заменить картинки шаблонных банеров на те, которые стоят сейчас на странице.
Как это сделать правильно? Спасибо.

Здравствуйте. Вам нужно в шаблоне HTML найти код:
<div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=azure" />
			</div>
			<!--<div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" />
			</div>
			<div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" />
			</div>
			<div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" />
			</div>
			 <div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" />
			</div>-->

и заменить его на:


 <div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=azure" />
			</div>
			<div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" />
			</div>
			<div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" />
			</div>
			<div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" />
			</div>
			 <div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" />
			</div>

Далее в разделе Сайт - Редактор шаблонов в левой колонке найти раздел Изображения и в нем 5 названий: slide1.jpg, slide2.jpg, slide3.jpg, slide4.jpg, slide5.jpg

Кликните на каждое из них и в появившемся окне нажмите кнопку Заменить.

#3 Ast

Ast

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

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

Отправлено 19 Июнь 2016 - 09:53

[Цитата имя типа timestamp='MikDark'='1466091433' пост='240254']
Здравствуйте. Вам нужно в шаблоне найти код HTML код:
[Код]
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide1.в jpg?дизайн=лазурь" />
</див>
<!--<див>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide2.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}длины планки slide3.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide4.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide5.ПНГ?дизайн=лазурь" />
</div>с-->[/код]

и заменить его на:


[Код]
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide1.в jpg?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide2.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}длины планки slide3.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide4.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide5.ПНГ?дизайн=лазурь" />
тег </div>[/код]

Далее в разделе Сайт - Редактор шаблонов в левой колонке найти раздел Изображения и в нем 5 названий: slide1.jpg, slide2.jpg, slide3.jpg, slide4.jpg, slide5.jpg

Кликните на каждое из них и в появившемся окне нажмите кнопку Заменить.
[/Цитата]

Это слайдер, а я говорю о банерах, которые в шаблоне под слайдером (сейчас на сайте закрыл показ). В оригинале их 4, а мне необходимо установить 5 штук. Если копипастить дополнительный блок, то не помещается по ширине. Не понятно где уменьшить ширину, чтобы всё умещалось.

#4 Firefly

Firefly

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

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

Отправлено 19 Июнь 2016 - 10:06

Просмотр сообщенияAst (19 Июнь 2016 - 09:53) писал:

[Цитата имя типа timestamp='MikDark'='1466091433' пост='240254']
Здравствуйте. Вам нужно в шаблоне найти код HTML код:
[Код]
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide1.в jpg?дизайн=лазурь" />
</див>
<!--<див>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide2.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}длины планки slide3.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide4.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide5.ПНГ?дизайн=лазурь" />
</div>с-->[/код]

и заменить его на:


[Код]
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide1.в jpg?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide2.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}длины планки slide3.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide4.ПНГ?дизайн=лазурь" />
</див>
тег <div>
<имг у="изображение" срц="{ASSETS_IMAGES_PATH}slide5.ПНГ?дизайн=лазурь" />
тег </div>[/код]

Далее в разделе Сайт - Редактор шаблонов в левой колонке найти раздел Изображения и в нем 5 названий: slide1.jpg, slide2.jpg, slide3.jpg, slide4.jpg, slide5.jpg

Кликните на каждое из них и в появившемся окне нажмите кнопку Заменить.
[/Цитата]

Это слайдер, а я говорю о банерах, которые в шаблоне под слайдером (сейчас на сайте закрыл показ). В оригинале их 4, а мне необходимо установить 5 штук. Если копипастить дополнительный блок, то не помещается по ширине. Не понятно где уменьшить ширину, чтобы всё умещалось.

Здравствуйте.
В шаблоне HTML в коде:
	 <!-- Баннеры -->
	 <!--{% IF index_page %}
	 <div id="topsl" class="wrap">
	 <div class="container">
		 <div class="row">
		 <div class="block free-shipping col-sm-3 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Бесплатная доставка</span></div>
			 <div class="block-content">Доставка по городу и области Бесплатна!</div>
		 </div>
		 <div class="block money-back col-sm-3 col-sms-6 col-smb-12">
			 <div class="block-title"><span>30 дней гарантии</span></div>
			 <div class="block-content">Вы можете вернуть товар в течении 30 дней после получения заказа</div>
		 </div>
		 <div class="block orders-247 col-sm-3 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Прием заказов 24/7</span></div>
			 <div class="block-content">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</div>
		 </div>
		 <div class="block secured-payment col-sm-3 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Безопасная оплата</span></div>
			 <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div>
		 </div>
		 </div>
	 </div>
	 </div>
	 {% ENDIF %}-->
	 <!-- /END Баннеры -->

баннеры располагаются в размерах процентного соотношения, где цифра в col-sm-3 означает, что один блок занимает 3 части от 12 возможных. Следовательно, при делении 12 на 3 и получается 4 баннера.
Разместить корректно 5 баннеров с сохранением адаптивности и использованием стандартного кода в одну строку не получится (12 не делится на 5), только если делать размер каждого баннера по 2 части (col-sm-2) - будет пустой блок справа, так же в этом случае возможен вариант, что картинки будут не помещаться и обрезаться.

Как рабочий вариант для 5 картинок (по примеру расположенных у Вас окон ниже) можно стандартный код заменить на:
	 <!-- Баннеры -->
	 {% IF index_page %}
	 <div id="topsl" class="wrap">
	 <div class="container">
		 <div class="row">
		 <div class="block free-shipping sixparts">
			 <div class="block-title"><span>Бесплатная доставка</span></div>
			 <div class="block-content">Доставка по городу и области Бесплатна!</div>
		 </div>
		 <div class="block money-back sixparts">
			 <div class="block-title"><span>30 дней гарантии</span></div>
			 <div class="block-content">Вы можете вернуть товар в течении 30 дней после получения заказа</div>
		 </div>
		 <div class="block orders-247 sixparts">
			 <div class="block-title"><span>Прием заказов 24/7</span></div>
			 <div class="block-content">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</div>
		 </div>
		 <div class="block secured-payment sixparts">
			 <div class="block-title"><span>Безопасная оплата</span></div>
			 <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div>
		 </div>
		 </div>
	 </div>
	 </div>
	 {% ENDIF %}
	 <!-- /END Баннеры -->


#5 Ast

Ast

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

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

Отправлено 19 Июнь 2016 - 10:13

[Цитата имя='Светлячок' типа timestamp='1466319980' пост='240427']
Здравствуйте.
В в шаблоне в HTML коде:
[Код]
<!-- Баннеры -->
<!--{% Если index_page %}
<див ИД="topsl" класс="обертка">
<див класс="контейнер">
<див класс="строка">
<див класс="бесплатная-доставка блок коль-см-3 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Бесплатная доставка</пролет></див>
<див класс="блок-контент">Доставка по городу и области Бесплатна!</див>
</див>
<див класс="блок возврата денег коль-см-3 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>30 дней гарантии на</span></дел>
<див класс="блок-контент">Вы можете вернуть товар в течении 30 дней после получения заказа</див>
</див>
<див класс="блок заказов-247 коль-см-3 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Прием заказов 24/7</пролет></див>
<див класс="блок-контент">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</див>
</див>
<див класс="блок обеспеченного платежа Кол-см-3 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
</див>
</див>
</див>
{% За endif %}-->
<!-- /Конец Баннеры -->
[/Код]

баннеры располагаются в размерах процентного соотношения, где цифра в коль-см-3 означает, что один блок занимает 3 части от 12 возможных. Следовательно, при делении 12 на 3 и получается 4 баннера.
Корректно Разместить 5 баннеров с сохранением адаптивности и использованием стандартного кода в одну строку не получится (12 не делится на 5), только если делать размер каждого баннера по 2 части (Кол-см-2) - будет пустой блок справа, так же в этом случае возможен вариант, что картинки будут не помещаться и обрезаться.

Как рабочий вариант для 5 картинок (по примеру расположенных у Вас окон ниже) можно стандартный код заменить на:
[Код]
<!-- Баннеры -->
{% Если index_page %}
<див ИД="topsl" класс="обертка">
<див класс="контейнер">
<див класс="строка">
<див класс="бесплатная-доставка блок sixparts">
<див класс="блок-Заголовок"><Спан>Бесплатная доставка</пролет></див>
<див класс="блок-контент">Доставка по городу и области Бесплатна!</див>
</див>
<див класс="блок манибэк sixparts">
<див класс="блок-Заголовок"><Спан>30 дней гарантии на</span></дел>
<див класс="блок-контент">Вы можете вернуть товар в течении 30 дней после получения заказа</див>
</див>
<див класс="блок заказов-247 sixparts">
<див класс="блок-Заголовок"><Спан>Прием заказов 24/7</пролет></див>
<див класс="блок-контент">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</див>
</див>
<див класс="блок обеспеченного оплаты sixparts">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
</див>
</див>
</див>
{% За endif %}
<!-- /Конец Баннеры -->
[/Код]
[/Цитата]
А если делить на 6 частей? получится корректное отображение?

#6 Firefly

Firefly

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

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

Отправлено 19 Июнь 2016 - 10:17

Просмотр сообщенияAst (19 Июнь 2016 - 10:13) писал:

[Цитата имя='Светлячок' типа timestamp='1466319980' пост='240427']
Здравствуйте.
В в шаблоне в HTML коде:
[Код]
<!-- Баннеры -->
<!--{% Если index_page %}
<див ИД="topsl" класс="обертка">
<див класс="контейнер">
<див класс="строка">
<див класс="бесплатная-доставка блок коль-см-3 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Бесплатная доставка</пролет></див>
<див класс="блок-контент">Доставка по городу и области Бесплатна!</див>
</див>
<див класс="блок возврата денег коль-см-3 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>30 дней гарантии на</span></дел>
<див класс="блок-контент">Вы можете вернуть товар в течении 30 дней после получения заказа</див>
</див>
<див класс="блок заказов-247 коль-см-3 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Прием заказов 24/7</пролет></див>
<див класс="блок-контент">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</див>
</див>
<див класс="блок обеспеченного платежа Кол-см-3 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
</див>
</див>
</див>
{% За endif %}-->
<!-- /Конец Баннеры -->
[/Код]

баннеры располагаются в размерах процентного соотношения, где цифра в коль-см-3 означает, что один блок занимает 3 части от 12 возможных. Следовательно, при делении 12 на 3 и получается 4 баннера.
Корректно Разместить 5 баннеров с сохранением адаптивности и использованием стандартного кода в одну строку не получится (12 не делится на 5), только если делать размер каждого баннера по 2 части (Кол-см-2) - будет пустой блок справа, так же в этом случае возможен вариант, что картинки будут не помещаться и обрезаться.

Как рабочий вариант для 5 картинок (по примеру расположенных у Вас окон ниже) можно стандартный код заменить на:
[Код]
<!-- Баннеры -->
{% Если index_page %}
<див ИД="topsl" класс="обертка">
<див класс="контейнер">
<див класс="строка">
<див класс="бесплатная-доставка блок sixparts">
<див класс="блок-Заголовок"><Спан>Бесплатная доставка</пролет></див>
<див класс="блок-контент">Доставка по городу и области Бесплатна!</див>
</див>
<див класс="блок манибэк sixparts">
<див класс="блок-Заголовок"><Спан>30 дней гарантии на</span></дел>
<див класс="блок-контент">Вы можете вернуть товар в течении 30 дней после получения заказа</див>
</див>
<див класс="блок заказов-247 sixparts">
<див класс="блок-Заголовок"><Спан>Прием заказов 24/7</пролет></див>
<див класс="блок-контент">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</див>
</див>
<див класс="блок обеспеченного оплаты sixparts">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
</див>
</див>
</див>
{% За endif %}
<!-- /Конец Баннеры -->
[/Код]
[/Цитата]
А если делить на 6 частей? получится корректное отображение?

Попробуйте использовать второй предложенный код с использованием класса sixparts.
Так же можно разделить на 6 частей по 2 части на каждую иконку, для этого, как написал ранее, нужно в стандартном коде col-sm-3 col-sms-6 col-smb-12 заменить на col-sm-2 col-sms-6 col-smb-12

#7 Ast

Ast

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

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

Отправлено 19 Июнь 2016 - 10:25

[Имя Цитата='Светлячок' типа типа timestamp='1466320635' пост='240429']
Попробуйте использовать второй предложенный код с использованием класса sixparts.
Так же можно разделить на 6 частей по 2 части на каждую иконку, для этого, как написал ранее, нужно в стандартном коде коль-см-3 Кол-смс-6 Кол-СМБ-12 заменить на коль-см-2 Кол-смс-6 Кол-СМБ-12
[/Цитата]

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

#8 Firefly

Firefly

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

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

Отправлено 19 Июнь 2016 - 10:44

Просмотр сообщенияAst (19 Июнь 2016 - 10:25) писал:

[Имя Цитата='Светлячок' типа типа timestamp='1466320635' пост='240429']
Попробуйте использовать второй предложенный код с использованием класса sixparts.
Так же можно разделить на 6 частей по 2 части на каждую иконку, для этого, как написал ранее, нужно в стандартном коде коль-см-3 Кол-смс-6 Кол-СМБ-12 заменить на коль-см-2 Кол-смс-6 Кол-СМБ-12
[/Цитата]

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

Найдите код:
	 <div id="topsl" class="wrap">
	 <div class="container">
		 <div class="row">
		 <div class="block free-shipping col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Бесплатная доставка</span></div>
			 <div class="block-content">Доставка по городу и области Бесплатна!</div>
		 </div>
		 <div class="block money-back col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>30 дней гарантии</span></div>
			 <div class="block-content">Вы можете вернуть товар в течении 30 дней после получения заказа</div>
		 </div>
		 <div class="block orders-247 col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Прием заказов 24/7</span></div>
			 <div class="block-content">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</div>
		 </div>
		 <div class="block secured-payment col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Безопасная оплата</span></div>
			 <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div>
		 </div>
		 <div class="block secured-payment col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Безопасная оплата</span></div>
			 <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div>
		 </div>
		 <div class="block secured-payment col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Безопасная оплата</span></div>
			 <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div>
		 </div>
		 </div>
	 </div>
	 </div>

Замените на:
	 <div id="topsl" class="wrap">
	 <div class="container">
		 <div class="row">
		 <div class="block free-shipping col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Бесплатная доставка</span></div>
			 <div class="block-content">Доставка по городу и области Бесплатна!</div>
		 </div>
		 <div class="block money-back col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>30 дней гарантии</span></div>
			 <div class="block-content">Вы можете вернуть товар в течении 30 дней после получения заказа</div>
		 </div>
		 <div class="block orders-247 col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Прием заказов 24/7</span></div>
			 <div class="block-content">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</div>
		 </div>
		 <div class="block secured-payment col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Безопасная оплата</span></div>
			 <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div>
		 </div>
		 <div class="block new1 col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Безопасная оплата</span></div>
			 <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div>
		 </div>
		 <div class="block new2 col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Безопасная оплата</span></div>
			 <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div>
		 </div>
		 </div>
	 </div>
	 </div>

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#topsl .block.secured-payment .block-title span:after {background-position: -546px top;}

Замените на:
#topsl .block.secured-payment .block-title span:after {background-position: -546px top;}
#topsl .block.new1 .block-title span:after {background:url("ссылка на иконку")center center;}
#topsl .block.new2 .block-title span:after {background:url("ссылка на иконку")center center;}

Иконки нужно будет загрузить в редакторе шаблонов с размерами 78x78px с фоном, либо с размером меньше без фона (в формате .png), чтобы они были примерно равны другим иконкам. Их Вы можете найти, например на сайте iconfinder.com.

#9 Ast

Ast

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

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

Отправлено 19 Июнь 2016 - 10:48

[Цитата имя='Светлячок' типа timestamp='1466322287' пост='240434']
Найдите код:
[Код]
<див ИД="topsl" класс="обертка">
<див класс="контейнер">
<див класс="строка">
<див класс="бесплатная-доставка блок коль-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Бесплатная доставка</пролет></див>
<див класс="блок-контент">Доставка по городу и области Бесплатна!</див>
</див>
<див класс="блок возврата денег коль-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>30 дней гарантии на</span></дел>
<див класс="блок-контент">Вы можете вернуть товар в течении 30 дней после получения заказа</див>
</див>
<див класс="блок заказов-247 коль-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Прием заказов 24/7</пролет></див>
<див класс="блок-контент">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</див>
</див>
<див класс="блок обеспеченного платежа Кол-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
<див класс="блок обеспеченного платежа Кол-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
<див класс="блок обеспеченного платежа Кол-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
</див>
</див>
</див>
[/Код]

Замените на:
[Код]
<див ИД="topsl" класс="обертка">
<див класс="контейнер">
<див класс="строка">
<див класс="бесплатная-доставка блок коль-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Бесплатная доставка</пролет></див>
<див класс="блок-контент">Доставка по городу и области Бесплатна!</див>
</див>
<див класс="блок возврата денег коль-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>30 дней гарантии на</span></дел>
<див класс="блок-контент">Вы можете вернуть товар в течении 30 дней после получения заказа</див>
</див>
<див класс="блок заказов-247 коль-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Прием заказов 24/7</пролет></див>
<див класс="блок-контент">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</див>
</див>
<див класс="блок обеспеченного платежа Кол-см-2 Кол-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
<див класс="заблокировать сайт new1 коль-см-2 колонка-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
<див класс="блок новый2 коль-см-2 колонка-смс-6 Кол-СМБ-12">
<див класс="блок-Заголовок"><Спан>Безопасная оплата</промежуток></див>
<див класс="блок-контент">Оплата товаров с использованием технологии 3Д надежности.</див>
</див>
</див>
</див>
</див>
[/Код]

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> основные.в CSS, найдите код:
[Код]
#topsl .блок.обеспеченный-оплаты .блок-Заголовок промежуток:после {фон положение: -546px топ;}
[/Код]

Замените на:
[Код]
#topsl .блок.обеспеченный-оплаты .блок-Заголовок промежуток:после {фон положение: -546px топ;}
#topsl .блок.сайт new1 .блок-Заголовок цикла:после {справочная информация:URL-адрес("ссылка на иконку")центр;}
#topsl .блок.новый2 .блок-Заголовок цикла:после {справочная информация:URL-адрес("ссылка на иконку")центр;}
[/Код]

Иконки нужно будет загрузить в редакторе шаблонов с размерами 78x78px с фоном, либо с размером меньше без фона (в формате .ПНГ), чтобы они были примерно равны другим иконкам. Их Вы можете найти, например на сайте iconfinder.com.
[/Цитата]
Спасибо большое!

#10 Ast

Ast

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

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

Отправлено 19 Июнь 2016 - 12:09

Просмотр сообщенияFirefly (19 Июнь 2016 - 10:44) писал:

Найдите код:
	 <div id="topsl" class="wrap">
	 <div class="container">
		 <div class="row">
		 <div class="block free-shipping col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Бесплатная доставка</span></div>
			 <div class="block-content">Доставка по городу и области Бесплатна!</div>
		 </div>
		 <div class="block money-back col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>30 дней гарантии</span></div>
			 <div class="block-content">Вы можете вернуть товар в течении 30 дней после получения заказа</div>
		 </div>
		 <div class="block orders-247 col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Прием заказов 24/7</span></div>
			 <div class="block-content">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</div>
		 </div>
		 <div class="block secured-payment col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Безопасная оплата</span></div>
			 <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div>
		 </div>
		 <div class="block secured-payment col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Безопасная оплата</span></div>
			 <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div>
		 </div>
		 <div class="block secured-payment col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Безопасная оплата</span></div>
			 <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div>
		 </div>
		 </div>
	 </div>
	 </div>

Замените на:
	 <div id="topsl" class="wrap">
	 <div class="container">
		 <div class="row">
		 <div class="block free-shipping col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Бесплатная доставка</span></div>
			 <div class="block-content">Доставка по городу и области Бесплатна!</div>
		 </div>
		 <div class="block money-back col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>30 дней гарантии</span></div>
			 <div class="block-content">Вы можете вернуть товар в течении 30 дней после получения заказа</div>
		 </div>
		 <div class="block orders-247 col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Прием заказов 24/7</span></div>
			 <div class="block-content">Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</div>
		 </div>
		 <div class="block secured-payment col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Безопасная оплата</span></div>
			 <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div>
		 </div>
		 <div class="block new1 col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Безопасная оплата</span></div>
			 <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div>
		 </div>
		 <div class="block new2 col-sm-2 col-sms-6 col-smb-12">
			 <div class="block-title"><span>Безопасная оплата</span></div>
			 <div class="block-content">Оплата товаров с использованием технологии 3D Secure.</div>
		 </div>
		 </div>
	 </div>
	 </div>

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#topsl .block.secured-payment .block-title span:after {background-position: -546px top;}

Замените на:
#topsl .block.secured-payment .block-title span:after {background-position: -546px top;}
#topsl .block.new1 .block-title span:after {background:url("ссылка на иконку")center center;}
#topsl .block.new2 .block-title span:after {background:url("ссылка на иконку")center center;}

Иконки нужно будет загрузить в редакторе шаблонов с размерами 78x78px с фоном, либо с размером меньше без фона (в формате .png), чтобы они были примерно равны другим иконкам. Их Вы можете найти, например на сайте iconfinder.com.

Все получилось, но остался вопрос как заменить оригинальные 4 картинки из шаблона? Перерисовать  ico-shoppolicy.png? Тогда может заодно добавить к нему дополнительные 2 картинки? Какая длина должна ico-shoppolicy.png быть в этом случае? Или сделать все картинки отдельными как с двумя добавленными? Что посоветуете?

#11 Ast

Ast

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

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

Отправлено 19 Июнь 2016 - 12:49

попробовал увеличить длину ико-shoppolicy.ПНГ картинки совместились, но не так как надо, в новых окошках показывается машина, хотя должны были вертикальная полоса и крестик. видимо не правильно рассчитал длину

#12 Ast

Ast

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

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

Отправлено 19 Июнь 2016 - 13:09

Просмотр сообщенияAst (19 Июнь 2016 - 12:49) писал:

попробовал увеличить длину ико-shoppolicy.ПНГ картинки совместились, но не так как надо, в новых окошках показывается машина, хотя должны были вертикальная полоса и крестик. видимо не правильно рассчитал длину
Разобрался, прорисую в ico-shoppolicy.png все иконки, тестовый рисунок хорошо работает. Спасибо вам за помощь!

#13 Ast

Ast

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

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

Отправлено 21 Июнь 2016 - 14:07

Перерисовал ико-shoppolicy.ПНГ , всё хорошо показывает, но поскольку увеличил размер иконок, текст под иконками сместился влево. не пойму как центровать.
И еще вопрос как сделать чтобы иконки и текст были кликабельны. Текст понятно, добавить тэк ссылки, а как с иконками непонятно. Подскажите пожалуйста.

#14 Vaccina

Vaccina

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

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

Отправлено 22 Июнь 2016 - 04:25

Уточните пожалуйста, ваш вопрос еще актуален? Так как у первой иконки "пластиковые окна" ссылка установлена.

#15 Ast

Ast

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

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

Отправлено 22 Июнь 2016 - 08:19

Да, актуально выравнивание текста по центру под иконками. Сейчас текст смещен влево, непонятно как центровать. Ссылки установил. Не знаю насколько корректно, но переходы по ним работают.

#16 Firefly

Firefly

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

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

Отправлено 22 Июнь 2016 - 10:36

Просмотр сообщенияAst (22 Июнь 2016 - 08:19) писал:

Да, актуально выравнивание текста по центру под иконками. Сейчас текст смещен влево, непонятно как центровать. Ссылки установил. Не знаю насколько корректно, но переходы по ним работают.

Здравствуйте.
Внес Вам корректировки в код. Проверьте, пожалуйста.

#17 Ast

Ast

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

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

Отправлено 22 Июнь 2016 - 11:35

Просмотр сообщенияFirefly (22 Июнь 2016 - 10:36) писал:

Здравствуйте.
Внес Вам корректировки в код. Проверьте, пожалуйста.

Спасибо большое! Всё отлично

#18 Silver

Silver

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

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

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

Здравствуйте!
Появилась необходимость, добавить на сайт два кликабельных рекламных блока (см. вложение) Размеры - приблизительные, какие размеры порекомендуете, чтобы это смотрелось наиболее удачно, такие и сделаем ) Это будут 2 обычные картинки, при клике на которые должны открываться окна с информацией. Будет здорово, если ещё можно будет эти картинки как-то выделить - например мигающей рамкой или какой-либо анимацией. Помогите, пожалуйста, решить эту задачу.
Заранее спасибо.

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

  • Pic1.jpg


#19 Vaccina

Vaccina

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

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

Отправлено 08 Сентябрь 2016 - 01:58

Попробуйте повторно прикрепить файл, также уточните пожалуйста, где на сайте вы хотите их расположить?

#20 Silver

Silver

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

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

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

Виноват, не заметил что не прикрепилось ( Теперь всё ок. На рисунке видно в каком месте надо их расположить.




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

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