Светлый вид материалов торрент сайта для Ucoz
Описание:
Светлый красивый вид материала для торрент сайта, если вы решили создать торрент сайт то вам понравиться этот вид материала, вы также можете его переделать под себя, можно добавлять оператор автор материала, название раздела т т.д.
Установка:
Вид материалов - каталог файлов:
CSS стили:
Также вы можете добавить стили между тегами:
Вот и всё!
Turbo-S - Если будет вопросы пишите в комментариях, Если нужен помощь по установке тогда создайте тему форуме.
Светлый красивый вид материала для торрент сайта, если вы решили создать торрент сайт то вам понравиться этот вид материала, вы также можете его переделать под себя, можно добавлять оператор автор материала, название раздела т т.д.
Установка:
Вид материалов - каталог файлов:
Код
<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>
<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;}
-----------------------------------------------------------------------------*/
.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 - Если будет вопросы пишите в комментариях, Если нужен помощь по установке тогда создайте тему форуме.
Файлы для скачивания отсутствуют.
Поблагодарить автора
Автор: SТРАННИК
ИсточникМатериал взят с другого сайта
Комментарии (0)