Добрый день!
Очень понравился шаблон рассвет, хочу попросить помощи. Как можно добавить для кнопки "Перейти в каталог" и надписи, что над ней фон вроде того что идет с меню сверху? что бы было что-то типо того?
Также хотелось бы узнать как поменять цвет кнопки, ее размер, текст в ней.
+ Подскажите как добавить большее количество слайдов на главной.
Спасибо заранее!
0
Изменение Кнопки "перейти В Каталог" И Подписи
Автор Salonplus.by, 02 окт. 2016 13:21
Сообщений в теме: 5
#1
Отправлено 02 Октябрь 2016 - 13:21
#2
Отправлено 02 Октябрь 2016 - 13:58
Salonplus.by (02 Октябрь 2016 - 13:21) писал:
Добрый день!
Очень понравился шаблон рассвет, хочу попросить помощи. Как можно добавить для кнопки "Перейти в каталог" и надписи, что над ней фон вроде того что идет с меню сверху? что бы было что-то типо того?
Также хотелось бы узнать как поменять цвет кнопки, ее размер, текст в ней.
+ Подскажите как добавить большее количество слайдов на главной.
Спасибо заранее!
Очень понравился шаблон рассвет, хочу попросить помощи. Как можно добавить для кнопки "Перейти в каталог" и надписи, что над ней фон вроде того что идет с меню сверху? что бы было что-то типо того?
Также хотелось бы узнать как поменять цвет кнопки, ее размер, текст в ней.
+ Подскажите как добавить большее количество слайдов на главной.
Спасибо заранее!
Уточните, пожалуйста, Ваш номер аккаунта
#4
Отправлено 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
Отправлено 02 Октябрь 2016 - 20:28
Danil (02 Октябрь 2016 - 14:44) писал:
Здравствуйте.
В шаблоне html найдите код
В main.css найдите код
найдите
Так же найдите код
В шаблоне 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
Отправлено 03 Октябрь 2016 - 09:18
Salonplus.by (02 Октябрь 2016 - 20:28) писал:
Спасибо!
А реально ли сделать фон для надписи так, как я писал в 1 сообщении?
А реально ли сделать фон для надписи так, как я писал в 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 анонимных