Универсальный информер материалов для 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; } /*------------------*/ Вот и всё вам осталось только разместить код вашего созданного информера в то место где вы желаете его видеть. Я всё, удачи вам и вашему сайту! | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
