Светлый вид материалов торрент сайта для Ucoz
16.03.2017 91 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 - Если будет вопросы пишите в комментариях, Если нужен помощь по установке тогда создайте тему форуме.
Скачать 1101_images.zip Размер: 2.7Kb 0
Поблагодарить автора Автор: SТРАННИК
ИсточникМатериал взят с другого сайта
Комментарии (0)
Добавить комментарий
Прокомментировать