» »

Универсальный информер материалов для uCoz


Универсальный информер материалов для uCoz

Предлагаю вам скачать простенький но удобный информер материалов для сайтов uCoz.
Информер сам собой универсальный и подойдёт хоть для игрового сайта или кино сайта пусть будет это и новостной сайт без разницы так как вам просто нужно будет поменять цвет и название кнопки "СМОТРЕТЬ" .

В общем давайте установим его!

Установка информера материалов для uCoz


И так давайте для начало создадим информер я создал такой
[ Новости сайта · Материалы · Дата добавления материала D · Материалы: 5 · Колонки: 1 ]

Но вы можете создать под любой модуль и в любой сортировкой и вставить туда шаблон информера.

Код
<div class="recom_inform"> <div class="recom_inform_img left"><a href="$ENTRY_URL$" title=""><img src="$IMG_URL1$" alt=""></a></div> <div class="recom_inform_cont"> <h3><a href="$ENTRY_URL$" title="">$TITLE$</a></h3> <div class="recom_inform_cont_mess"> <div class="perhaps_like_descr"> <div>$MESSAGE$</div> </div> </div> <div class="files_cat_more"> <a href="$ENTRY_URL$" class="right btn" title="">Смотреть <i class="fa fa-chevron-right"></i></a> </div> <div class="clear"></div> </div> <div class="clear"></div> </div><br>


Теперь нам нужно прописать стили и для этго пройдите в стили вашего сайта и в любое место (обычно ставят в самый низ) устанавливаем стили которые расположены ниже.

Код
/*Recomed*/
.recom_inform{margin-bottom:12px;}
.recom_inform:last-child{margin-bottom:0;}
.recom_inform_img{border-radius:3px; width:65px; height:96px; overflow:hidden; margin-right:12px; }
.recom_inform_img img{width:100%; min-height:96px;}
.recom_inform_cont{display:block;}
.recom_inform_cont h3{text-transform:uppercase; font-size:12px; font-weight:bold; overflow:hidden; width:182px; height:18px;line-height:18px;}
.recom_inform_cont h3 a{color:#5f8d9c;}
.recom_inform_cont_mess{margin-top:3px; margin-bottom:8px; color:#999999; font-style:italic; font-size:12px; }
.recom_inform_cont_mess p{overflow:hidden; height:43px; line-height:14px;}
.recom_inform_more{font-size:12px; font-weight:normal; margin-left:7px;}
.recom_inform:hover > .recom_inform_cont > a.btn{background:#80c10d}
.recom_inform > .recom_inform_cont > a.btn:hover{background:#999999}
.files_cat_more a {
font-size: 10px;
font-weight: normal;
font-family: 'PT Sans',sans-serif;
}
.btn {
display: inline-block;
padding: 2px 10px 0;
line-height: 22px;
border-radius: 3px;
background: #87d8f3;
color: #fff;
text-transform: uppercase;
cursor: pointer;
position: relative;
}
.btn:hover {
display: inline-block;
padding: 2px 10px 0;
line-height: 22px;
border-radius: 3px;
background: #43BE08;
color: #fff;
text-transform: uppercase;
cursor: pointer;
position: relative;
}

.right {
float: right;
}
.left {
float: left;
}

.perhaps_like_descr {
line-height: 16px;
height: 48px;
overflow: hidden;
color: #858585;
font-size: 12px;
}
* {
margin: 0;
padding: 0;
}
/*------------------*/


Вот и всё вам осталось только разместить код вашего созданного информера в то место где вы желаете его видеть.

Я всё, удачи вам и вашему сайту!
13.03.2015 Просмотров: 744 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
Kosten
Kosten 13.03.2015 16:051
0
Отличная работа, под светлый дизайн шикарно и ново.
kredit-oformi
kredit-oformi 11.05.2015 21:482
0
Вот и мне пригодился данный информер, Dimstrikу отдельное Спасибо
avatar