Как добавить таки информационные блоки как в теме цитрус под баннер ?
1
Изменение На Главной
Автор vadim777, 13 февр. 2015 19:42
В теме одно сообщение
#1
Отправлено 13 Февраль 2015 - 19:42
#2
Отправлено 14 Февраль 2015 - 02:13
В необходимом месте шаблона HTML вставьте:
а в main.css разместите:
<!-- Баннеры на главной --> {% IF index_page %} <div class="yt-bannertop"> <div class="container"> <div class="row"> <div class="banner-top"> <ul> <li class="li-1 col-lg-4 col-md-4 col-sm-4 col-xs-12"><a class="banner-top-img" href="#"><img src="{ASSETS_IMAGES_PATH}ico1-banner-top2.jpg?design=orange" alt=""></a> <div class="li1-content"><a href="#">Бесплатная доставка!</a> <p>Доставка по городу и области Бесплатна!</p> </div> </li> <li class="li-2 col-lg-4 col-md-4 col-sm-4 col-xs-12"><a class="banner-top-img" href="#"><img src="{ASSETS_IMAGES_PATH}ico2-banner-top2.jpg?design=orange" alt=""></a> <div class="li2-content"><a href="#">30 дней Гарантии</a> <p>Вы можете вернуть товар в течении 30 дней после получения заказа</p> </div> </li> <li class="li-3 col-lg-4 col-md-4 col-sm-4 col-xs-12"><a class="banner-top-img" href="#"><img src="{ASSETS_IMAGES_PATH}ico3-banner-top2.jpg?design=orange" alt=""></a> <div class="li3-content"><a href="#">Прием заказов 24/7</a> <p>Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</p> </div> </li> </ul> </div> </div> </div> </div> {% ENDIF %} <!-- /END Баннеры на главной -->
а в main.css разместите:
/* Баннеры на главной */ .yt-bannertop {background-color:#f3f3f3;padding:50px 0 30px;} .yt-bannertop .banner-top {display: block;margin: 0;} .yt-bannertop .banner-top ul li {background-repeat: no-repeat;float: left;list-style:none;} .yt-bannertop .banner-top ul li a.banner-top-img {float: left;margin-right: 30px;margin-bottom:20px;position: relative;display: block;overflow: hidden;} .yt-bannertop .banner-top ul li a.banner-top-img:before {content: "";height: 100%;left: 0;position: absolute;top: 0;width: 100%;} .yt-bannertop .banner-top ul li:hover a.banner-top-img:before {box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.4) inset;} .yt-bannertop .banner-top ul li div a {font-size: 200%;display: block;line-height: 100%;padding-bottom: 10px;font-weight: 300;font-family: 'Open Sans Condensed', sans-serif;} .yt-bannertop .banner-top ul li:hover a.banner-top-img img {transform: rotateY(360deg);-ms-transform: rotateY(360deg);-moz-transform: rotateY(360deg);-webkit-transform: rotateY(360deg);-o-transform: rotateY(360deg);}
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных