« Игровой вид материалов для сайтов uCoz »

Описание материала:

Всем привет!

Сегодня я хочу предоставить вам не плохой вид материалов, в этот раз он скорее всего подойдёт для каталогов файлов игровой тематики, такие как торрент игры или по игре CS:S. Может я и ошибаюсь и вы видите этот вид материалов на других сайтах, то можете смело его ставить куда вам угодно.

Для начало хочу вам сказать что этот вид материалов будет вам выводить такую информацию о материале как его название, рейтинг файла, сколько раз просмотрели этот файл и даже сколько скачали его. В низу же расположены название как раздела файла так и категории. Не плохо вписалась и кнопка ПОДРОБНЕЕ / СКАЧАТЬ . Вы так же видите что выводится большое изображение что щас часто встретишь на сайтах такое, это удобно и сразу видно что за материал.

Для установки вам нужно скопировать ниже приведённые стили в самый низ стилей вашего сайта.

Код
.eTitle {font-size: 19px; color: #5e6d81; font-family: 'PT Sans'; background: url(/img/title.png) repeat-x; height: 30px; line-height: 23px; padding: 9px 0 0 9px;}
.eTitle a {background: rgba(0,0,0,.2); text-shadow: 0 1px 0 rgba(0,0,0,.2); box-shadow: 0 1px 1px rgba(0,0,0,.2) inset, 0 1px 0 rgba(255,255,255,.4); color: #FFF; border-radius: 1px; padding: 0 5px;}
.eTitle a:hover {background: rgba(0,0,0,.3) }
.vid-eBlock {border-spacing: 0; margin: 0 0 10px; clear: both; background-color: #fff; -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30); box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30); padding-bottom: 2px;}
img.poster1 {width: 600px; height: 350px; margin: 10px 10px 10px 6px; background: rgba(0,0,0,.2); text-shadow: 0 1px 0 rgba(0,0,0,.2); box-shadow: 0 1px 1px rgba(0,0,0,.2) inset, 0 1px 0 rgba(255,255,255,.4); padding: 5px; border-radius: 1px;}
.vid-detali {margin: 5px; padding: 3px; height: 25px; background: #f6f6f6; border-width: 1px 1px 0 1px; border-style: solid; border-color: #d6d6d6 #eaeaea transparent #ebebeb; box-shadow: inset 0 1px 1px 0 #e1e1e1; -moz-box-shadow: inset 0 1px 1px 0 #e1e1e1; -webkit-box-shadow: inset 0 1px 1px 0 #e1e1e1;}
.vid-detali span {display: inline-block; margin-top: 0; vertical-align: top; zoom: 1; height: 21px; line-height: 21px; padding: 0 10px 0 5px; border-width: 1px; border-style: solid; border-color: #dedede #ddd #a7a8aa #ddd; background: #fefefe; background: -moz-linear-gradient(top,#fefefe 0,#e9e9e9 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(100%,#e9e9e9)); background: -webkit-linear-gradient(top,#fefefe 0,#e9e9e9 100%); background: -o-linear-gradient(top,#fefefe 0,#e9e9e9 100%); background: -ms-linear-gradient(top,#fefefe 0,#e9e9e9 100%); background: linear-gradient(to bottom,#fefefe 0,#e9e9e9 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#e9e9e9',GradientType=0 ); box-shadow: 0 1px 0 0 #ccc; -moz-box-shadow: 0 1px 0 0 #ccc; -webkit-box-shadow: 0 1px 0 0 #ccc; color: #424242; font-weight: bold; font-size: 11px;}
.vid-detali b {color: #616161; font-weight: normal;}
.vid-data {float: right;}
.vid-detalis {clear: both; margin: 5px; padding: 3px; height: 25px; background: #f6f6f6; border-width: 1px 1px 0 1px; border-style: solid; border-color: #d6d6d6 #eaeaea transparent #ebebeb; box-shadow: inset 0 1px 1px 0 #e1e1e1; -moz-box-shadow: inset 0 1px 1px 0 #e1e1e1; -webkit-box-shadow: inset 0 1px 1px 0 #e1e1e1;}
.vid-detalis span {color: #424242; font-weight: bold; font-size: 12px; font-family: 'PT Sans'; padding: 0px 5px; line-height: 25px;}
.vid-detalis b {color: #616161;}
.r-tor {color: #252D24; font-weight: 600;font-style: normal;}
.r-igr {color: #252D24; font-weight: 600;font-style: normal;}
.vid-dalee {float: right; padding: 0!important;}
.vid-dalee a {display: inline-block; margin-top: 0; vertical-align: top; zoom: 1; height: 23px; line-height: 23px!important; padding: 0 10px 0 10px!important; border-width: 1px; border-style: solid; border-color: #dedede #ddd #a7a8aa #ddd; background: #fefefe; background: -moz-linear-gradient(top,#fefefe 0,#e9e9e9 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(100%,#e9e9e9)); background: -webkit-linear-gradient(top,#fefefe 0,#e9e9e9 100%); background: -o-linear-gradient(top,#fefefe 0,#e9e9e9 100%); background: -ms-linear-gradient(top,#fefefe 0,#e9e9e9 100%); background: linear-gradient(to bottom,#fefefe 0,#e9e9e9 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#e9e9e9',GradientType=0 ); box-shadow: 0 1px 0 0 #ccc; -moz-box-shadow: 0 1px 0 0 #ccc; -webkit-box-shadow: 0 1px 0 0 #ccc; color: #424242; font-size: 11px; text-transform: uppercase;}
.vid-dalee a:hover { background: #fefefe; background: -moz-linear-gradient(top,#AEADAD 0,#e9e9e9 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#AEADAD),color-stop(100%,#e9e9e9)); background: -webkit-linear-gradient(top,#AEADAD 0,#e9e9e9 100%); background: -o-linear-gradient(top,#AEADAD 0,#e9e9e9 100%); background: -ms-linear-gradient(top,#AEADAD 0,#e9e9e9 100%); background: linear-gradient(to bottom,#AEADAD 0,#e9e9e9 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AEADAD', endColorstr='#e9e9e9',GradientType=0 ); box-shadow: 0 1px 0 0 #ccc; -moz-box-shadow: 0 1px 0 0 #ccc; -webkit-box-shadow: 0 1px 0 0 #ccc;}


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

Код
<div class="vid-eBlock"><tr><td style="padding:3px;">
<div class="eTitle"><a href="$ENTRY_URL$">$TITLE$</a> <?if($RATING$)?><div style="float:right;margin-top: -4px;"><?$RSTARS$('30','/img/rating_zvezda_01.png','0','float')?></div><?endif?></div>
  <div class="vid-detali"><span>Просмотров: <b>$READS$</b></span> <span>Загрузок: <b>$LOADS$</b></span> <span class="vid-data">Дата добавления: <b>$DATE$ в $TIME$</b></span></div>
  <center><a href="$ENTRY_URL$"><img class="poster1" src="$IMG_URL1$" title="Скачать $TITLE$" alt="$TITLE$"></a></center>
  <?if($MESSAGE$)?><div class="eMessage" style="padding-bottom: 10px; max-height: 50px; overflow: hidden;"><b>Описание:</b> $MESSAGE$</div><?endif?>
  <div class="vid-detalis"><span><i class="r-tor">Раздел:</i> <b><a href="$SECTION_URL$">$SECTION_NAME$</a></b></span> | <span><i class="r-igr">Категория:</i> <b><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></b></span> <span class="vid-dalee"><a href="$ENTRY_URL$">Подробнее/Скачать</a></span></div>
</td></tr></div>


Так же не забываем скачать архив с двумя картинками, которые буду выводить рейтинг и настроит фон названия в виде материалов.

Я на этом всё, как всегда был ваш Dimstrik, который вёл трансляцию материала с ПК на сайт «InternetEmpire.Ru»


Скачать ( Размер архива 3.4Kb )

По данной ссылке, Вы можете скачать или купить архив данного материала

Установка материала

Мы поможем установить данный материал к Вам на сайт

Источник

Материал взят со стороннего ресурса и был проверен нами


Теги к материалу: материалов, сайтов, вид, ucoz, игровой, для
Всего комментариев: 3
Александр Яхин 27.08.2016 в 16:04
Классно выглядит
0
По другому не как не может быть! smile
0
Александр Яхин 27.08.2016 в 16:13
Ждём всё больше новы скриптов.
0
avatar