Светлый вид материалов торрент сайта для Ucoz

Светлый вид материалов торрент сайта для Ucoz

16.03.2017 850 0 SТРАННИК Все для uCoz Вид материалов
Описание:


Светлый красивый вид материала для торрент сайта, если вы решили создать торрент сайт то вам понравиться этот вид материала, вы также можете его переделать под себя, можно добавлять оператор автор материала, название раздела т т.д.

Установка:


Вид материалов - каталог файлов:

 
Код
<div class="shortstory-item">
   <div class="shortstory-img-bg">
   <div class="shortstory-poster">
   <span class="poster" style="background:url('$IMG_URL1$');"></span>
   </div>
   <a href="$COMMENTS_URL$"><span class="comnum"> $COMMENTS_NUM$</span></a>
   </div>
   <div class="shortstory-item-body">
   <div class="col-left">
   <h3><a href="$ENTRY_URL$"> $TITLE$</a></h3>
   <div class="shortstory-item-info">
   <div><a href="$CATEGORY_URL$" class="category"> $CATEGORY_NAME$</a></div>
   <span class="item-info"><i class="fa fa-clock-o"></i> $DATE$ - $TIME$</span>
   <span class="item-info"><i class="fa fa-eye"></i> $READS$</span>
   <span class="item-info"><i class="fa fa-star-half-o"></i> $RATING$ / $RATED$</span>
   <span class="item-info"><i class="size-icon-torr"></i><?if($FILE_SIZE$)?>$FILE_SIZE$<?else?>$RFILE_SIZE$<?endif?></span>
   </div>
   </div>
   <div class="col-right">
   <div class="col-right-top">
   <span class="seeds"><i class="fa fa-arrow-circle-o-up"></i><?rnd(1050)?></span>
   <span class="leechers"><i class="fa fa-arrow-circle-o-down"></i><?rnd(500)?></span>
   </div>
   <div class="col-rait">
<?if($RATING$)?><?$RSTARS$('20','/.s/img/stars/10/20.png','0','float')?><?endif?>
   </div>
   </div>
   <a href="$ENTRY_URL$" class="readmore"></a>
   </div>
   </div>


CSS стили:


Код
/* Shortstory
-----------------------------------------------------------------------------*/
.shortstory-item {position: relative; clear: both; margin-bottom: 8px; height: 110px; overflow: hidden; display: block;}
.shortstory-item-body {background: #fff; margin: 15px 0 15px 88px;padding-left: 25px; height: 80px; border-bottom: 1px solid #e6e9ed; position: relative; z-index: 1;}
.shortstory-img-bg {width: 107px; height: 107px; background: #ffffff; border-radius: 100%; position: absolute; top: 0; left: 0; text-align: center;border: solid 7px #fff; box-shadow: #e6e9ed 0px 1px 0px 0px}
.shortstory-poster {width: 100%; height: 100%;border-radius: 100%; z-index: 2; position: relative;border: solid 7px #e6e9ed;}
.shortstory-poster > .poster {background-size: 100% !important; background-position: center center !important; width: 100%; min-height: 100%; overflow: hidden; border: 2px solid #fff; border-radius: 100%; display: block;}
.col-left {display: block; position: relative; overflow: hidden; height: 80px;width: 75%; float: left;}
.col-left h3 {display: block; font-weight: 600; font-size: 12px; text-transform: uppercase; line-height: 22px; height: 22px;overflow: hidden; color: #434a54;}
.col-left h3 a {color: #434a54;display: block;}
.shortstory-item-info {display: table;margin-top: -3px;position: relative; width: 100%;}
a.category {float: left; background: #8cc152; color: #fff; font-size: 12px; border-radius: 3px; padding: 4px 10px;transition: all 0.3s ease 0s; margin-right: 15px;}
a.category:before {display: inline-table; content: "\f07c";font-family: FontAwesome; padding-right: 7px;}
a.category:hover {background: #A0D468;}
.item-info {float: left; font-size: 12px; text-transform: uppercase; color: #aab2bd; padding-right: 15px;margin-top: 5px;}
.item-info .fa {padding-right: 5px; font-size: 14px;}
.size-icon-torr {background: url(../images/size-icon-torr.png) no-repeat left top; width: 12px; height: 12px; float: left; margin-top: 2px; margin-right: 5px;}
.col-right-top {font-size: 12px; color: #aab2bd;}
.seeds .fa {color: #8cc152; padding-right:5px; font-size:14px; }
.leechers .fa {color: #e9573f; padding-right:5px; font-size:14px; }
.leechers {margin-left: 10px;}
.col-right {margin-right: 42px; padding-right: 20px; padding-top: 15px; padding-bottom: 15px; text-align: right; float: right;}
.col-rait {color: #aab2bd; margin-top: 15px; text-align: right; text-align: -moz-right; text-align: -webkit-right; text-align: -o-right; text-align: -ms-right; float:right; opacity: 0.8;}
.readmore {position: absolute; bottom: 0; right: 0; background: #e6e9ed; color: #fff; width: 42px; height: 100%;text-align: center; line-height: 76px; transition: all 0.3s ease 0s; border: none; outline: 0;}
.readmore:before {display: inline-table; content: "\f105";font-family: FontAwesome; font-size: 52px}
.readmore:hover {background: #434a54;}
.comnum {display: block; z-index: 2; text-align: center; width: 36px;height: 32px; background: url(../images/commnum-bg.png) no-repeat; position: absolute; top: -8px; left: 77px; font-size: 12px; color: #fff; line-height: 27px;}



Также вы можете добавить стили между тегами:

Код
<head>.....</head>

Вот и всё!

Turbo-S - Если будет вопросы пишите в комментариях, Если нужен помощь по установке тогда создайте тему форуме.
Светлый вид материалов торрент сайта для Ucoz
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: SТРАННИК
ИсточникМатериал взят с другого сайта
Комментарии (0)
Добавить комментарий
class="add-comm-form clearfix add-shadow2" id="add-comm-form">
avatar