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


Изменение Кнопки "перейти В Каталог" И Подписи


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

#1 Salonplus.by

Salonplus.by

    Новичок

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

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

Добрый день!
Очень понравился шаблон рассвет, хочу попросить помощи. Как можно добавить для кнопки "Перейти в каталог" и надписи, что над ней фон вроде того что идет с меню сверху? что бы было что-то типо того?
Также хотелось бы узнать как поменять цвет кнопки, ее размер, текст в ней.
+ Подскажите как добавить большее количество слайдов на главной.
Спасибо заранее!

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

  • kookoo.jpg


#2 MikDark

MikDark

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

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

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

Просмотр сообщенияSalonplus.by (02 Октябрь 2016 - 13:21) писал:

Добрый день!
Очень понравился шаблон рассвет, хочу попросить помощи. Как можно добавить для кнопки "Перейти в каталог" и надписи, что над ней фон вроде того что идет с меню сверху? что бы было что-то типо того?
Также хотелось бы узнать как поменять цвет кнопки, ее размер, текст в ней.
+ Подскажите как добавить большее количество слайдов на главной.
Спасибо заранее!

Уточните, пожалуйста, Ваш номер аккаунта

#3 Salonplus.by

Salonplus.by

    Новичок

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

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

Просмотр сообщенияMikDark (02 Октябрь 2016 - 13:58) писал:

Уточните, пожалуйста, Ваш номер аккаунта
396125

#4 Danil

Danil

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

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

Отправлено 02 Октябрь 2016 - 14:44

Просмотр сообщенияSalonplus.by (02 Октябрь 2016 - 14:33) писал:

396125
Здравствуйте.
В шаблоне html найдите код
<div class="title">Расширенный ассортимент</div>
<a href="{CATALOG_URL}" class="button big">Перейти в каталог</a>
и замените в нем текст на свой.
В main.css найдите код
.button.big {font-size: 21px;height: 50px;line-height: 46px;text-transform: none;padding: 0 30px;}
и замените на
.button.big {font-size: 21px;height: 50px;line-height: 46px;text-transform: none;padding: 0 30px;color: #22121e;border-color: #22121e;background: #c6b19b;}
изменяйте font-size(размер шрифта) и color(цвет).
найдите
#slideshow .text .title {color: #8C2C29;margin-bottom: 15px;font-weight: 500;font-size: 36px;text-transform: uppercase;}
изменяйте font-size(размер шрифта) и color(цвет).
Так же найдите код
#slideshow .text {position: absolute;top: 60%;right: 10%;padding: 0 15px;}
и замените на
#slideshow .text {position: absolute;top: 60%;right: 10%;padding: 0 15px;background-color: rgba(220, 220, 220, 0.5);}
В шаблоне html найдите код
	<!-- Slider Слайдер -->
	{% IF index_page %}
	<div id="slideshow">
	  <div class="preloading"><div class="folding-cube"><div class="cube1 cube"></div><div class="cube2 cube"></div><div class="cube4 cube"></div><div class="cube3 cube"></div></div></div>
	  <div class="slide"></div>
	  <div class="text">
		<div class="title">Расширенный ассортимент</div>
		<a href="{CATALOG_URL}" class="button big">Перейти в каталог</a>
	  </div>
	  <div class="image">
		<img src="{ASSETS_IMAGES_PATH}slide.jpg?design=sunrise"/>
	  </div>
	</div>
	{% ENDIF %}
	<!-- /END Slider Слайдер -->
и замените на

	<!-- Slider Слайдер -->
	{% IF index_page %}
	<div id="slideshow">
	  <div class="preloading"><div class="folding-cube"><div class="cube1 cube"></div><div class="cube2 cube"></div><div class="cube4 cube"></div><div class="cube3 cube"></div></div></div>
	  <div class="slide"></div>
	  <div class="text">
		<div class="title">Расширенный ассортимент</div>
		<a href="{CATALOG_URL}" class="button big">Перейти в каталог</a>
	  </div>
	  <div class="image">
		<img src="{ASSETS_IMAGES_PATH}slide.jpg?design=sunrise"/>
	  </div>

	  <div class="image">
		<img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=sunrise"/>
	  </div>

	  <div class="image">
		<img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=sunrise"/>
	  </div>
	</div>
	{% ENDIF %}
	<!-- /END Slider Слайдер -->
после замены загрузите изображения с названием slide2.jpg и slide3.jpg, если Вам нужно больше слайдов, то просто по аналогии добавляйте в код строки для новых слайдов.

#5 Salonplus.by

Salonplus.by

    Новичок

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

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

Просмотр сообщенияDanil (02 Октябрь 2016 - 14:44) писал:

Здравствуйте.
В шаблоне html найдите код
<div class="title">Расширенный ассортимент</div>
<a href="{CATALOG_URL}" class="button big">Перейти в каталог</a>
и замените в нем текст на свой.
В main.css найдите код
.button.big {font-size: 21px;height: 50px;line-height: 46px;text-transform: none;padding: 0 30px;}
и замените на
.button.big {font-size: 21px;height: 50px;line-height: 46px;text-transform: none;padding: 0 30px;color: #22121e;border-color: #22121e;background: #c6b19b;}
изменяйте font-size(размер шрифта) и color(цвет).
найдите
#slideshow .text .title {color: #8C2C29;margin-bottom: 15px;font-weight: 500;font-size: 36px;text-transform: uppercase;}
изменяйте font-size(размер шрифта) и color(цвет).
Так же найдите код
#slideshow .text {position: absolute;top: 60%;right: 10%;padding: 0 15px;}
и замените на
#slideshow .text {position: absolute;top: 60%;right: 10%;padding: 0 15px;background-color: rgba(220, 220, 220, 0.5);}
В шаблоне html найдите код
<!-- Slider Слайдер -->
{% IF index_page %}
<div id="slideshow">
<div class="preloading"><div class="folding-cube"><div class="cube1 cube"></div><div class="cube2 cube"></div><div class="cube4 cube"></div><div class="cube3 cube"></div></div></div>
<div class="slide"></div>
<div class="text">
<div class="title">Расширенный ассортимент</div>
<a href="{CATALOG_URL}" class="button big">Перейти в каталог</a>
</div>
<div class="image">
<img src="{ASSETS_IMAGES_PATH}slide.jpg?design=sunrise"/>
</div>
</div>
{% ENDIF %}
<!-- /END Slider Слайдер -->
и замените на

<!-- Slider Слайдер -->
{% IF index_page %}
<div id="slideshow">
<div class="preloading"><div class="folding-cube"><div class="cube1 cube"></div><div class="cube2 cube"></div><div class="cube4 cube"></div><div class="cube3 cube"></div></div></div>
<div class="slide"></div>
<div class="text">
<div class="title">Расширенный ассортимент</div>
<a href="{CATALOG_URL}" class="button big">Перейти в каталог</a>
</div>
<div class="image">
<img src="{ASSETS_IMAGES_PATH}slide.jpg?design=sunrise"/>
</div>

<div class="image">
<img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=sunrise"/>
</div>

<div class="image">
<img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=sunrise"/>
</div>
</div>
{% ENDIF %}
<!-- /END Slider Слайдер -->
после замены загрузите изображения с названием slide2.jpg и slide3.jpg, если Вам нужно больше слайдов, то просто по аналогии добавляйте в код строки для новых слайдов.
Спасибо!
А реально ли сделать фон для надписи так, как я писал в 1 сообщении?

#6 Danil

Danil

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

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

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

Просмотр сообщенияSalonplus.by (02 Октябрь 2016 - 20:28) писал:

Спасибо!
А реально ли сделать фон для надписи так, как я писал в 1 сообщении?
Здравствуйте.
В инструкции присланной ранее есть пункт для добавления фона:
Так же найдите код
#slideshow .text {position: absolute;top: 60%;right: 10%;padding: 0 15px;}
и замените на
#slideshow .text {position: absolute;top: 60%;right: 10%;padding: 0 15px;background-color: rgba(220, 220, 220, 0.5);}





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

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