» »

Вид материалов Торрент для сайта uCoz

Вид материалов Торрент для сайта uCoz

Вид материалов Торрент для сайта uCoz
Светлый красивый вид материала для сайта, если вы решили создать торрент сайт то вам понравиться этот оригинально и в тоже время просто в дизайн вид материала . Вы также можете его переделать под себя, можно добавлять оператор автор материала, название раздела. На нес выведено изображение, также все формулировки, где также идут кнопки, что можно просматривать, как просмотры так и рейтинг и многое другое. Здесь если у вас дизайн другой и кнопка, которая идет в зеленой гамме, то в стилях вы можете изменить цветовую гамму под ваш интернет ресурс.

Это эффект при наведение клика:

Вид материала на сайт торрент

Приступаем к установке:

Первый делом подключим шрифтовые иконки на своем сайте.

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Вид материала:

Код
<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-item {position: relative; clear: both; margin-bottom: 8px; height: 130px; 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: 85px; height: 85px; 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: 170% !important; background-position: center center !important; width: 100%; min-height: 100%; overflow: hidden; border: 0px 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: #323538;display: block;}  
.shortstory-item-info {display: table;margin-top: 17px;position: relative; width: 100%;}  
a.category {float: left; background: #8cc152; color: #fff; font-size: 12px; border-radius: 3px; padding: 4px 15px;transition: all 0.3s ease 0s; margin-right: 19px;}  
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(http://zornet.ru/Aben/Aben-Abag/fer/6baa5376d7014679824622162c5c2b68.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(http://zornet.ru/Aben/Aben-Abag/fer/f9d2286419e54a1faf6ce5d38e75df4c.png) no-repeat; position: absolute; top: -8px; left: 77px; font-size: 12px; color: #fff; line-height: 27px;}

Здесь нужно заметить, что весь дизайн регулируется на стилях, это можно где изображение стоит не круглым сделать, а к примеру под 5 пикселей.
18.03.2017 Загрузок: 3 Просмотров: 864 Комментарий: (11)

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

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

Комментарий: 11
Start
Start 18.03.2017 21:461
0
Для статей очень хорошо подойдет!
-SAM-
-SAM- 18.03.2017 22:542
+2
Код
<p><link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">

Дай угадаю, как раз этого в виде материалов, откуда рипалось, и не было - вот и была сделана откровенная глупость, когда туда сунули это (так и запишем).
Sтранник
Sтранник 19.03.2017 17:505
0
Точно говоря, я не видел код )))
Kosten
Kosten 19.03.2017 17:193
0
Да, что такое, проверил этот вид материала и он не корректно стоит.
Sтранник
Sтранник 19.03.2017 17:484
0
Думаю дело в ширине, или не знаю.
Kosten
Kosten 19.03.2017 17:576
+1
На тестовый сайт поставил и настроил по стилям, просто здесь как и весь материал нужно подгонять под свой портал.
Kolinkor
Kolinkor 19.03.2017 18:037
0
Вообщем в торрентах не понимаю, не разу с них не скачивал, но вид материала понятен, но аот мне кто то объяснить, почему такие большие цифры у зеленой и красной кнопки.
Sтранник
Sтранник 19.03.2017 18:128
+1
Эта раздача, Ана на php работает, ну ана тоже работает, только каждый раз цифры меняются при обновление страниц.
Kosten
Kosten 19.03.2017 18:199
0
Но кто торреном занимается, думаю разберется, главное, чтоб дизайн кривой не был, что проверил, и по стилям на сайт подогнал.
Critic©
Critic© 02.07.2017 19:4410
0
Красивый шаблон [color=red]8 из 10 подойдет для форумов
Kosten
Kosten 04.07.2017 02:0611
0
Это не шаблон, хотя элемент шаблона, хотя он совершенно идет на ту тематику, где реально не понимаю не чего, если только понятно, это сколько скачали, здесь показано оригинально.
avatar