• Страница 1 из 1
  • 1
ОБЪЁМНЫЙ ВИД МАТЕРИАЛОВ ДЛЯ UCOZ
Kentos311Дата: Воскресенье, 07.01.2018, 13:33 | Сообщение # 1
Сообщений: 729
Статус:

Сейчас много можно увидеть сайты где вид маленькой новости, ещё её называют краткой новости, делают объёмный вид. Объёмный вид под собой подразумевает то что выводится большая картинка и небольшая информация.

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

Этот вид материалов для сайтов uCoz будет выводить в верхней части название материала, рейтинг и просмотры да количество загрузок. Дальше выводится большое изображение и снизу категория и раздел к которому относится тот или иной материал.

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

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

После процедуры с архивом, вам нужно взять код указанный ниже и вставить в вид материалов нужного вам модуля.
Код
<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>

Теперь установите стили к данному материалу, для этого скопируйте их ниже и добавьте в стили вашего сайта в самый низ.
Код
.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 biggrin XImageTransform.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 biggrin XImageTransform.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 biggrin XImageTransform.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;}


Скачать файл: Доступно только для пользователей

Вот и всё установка завершена, вы можете пользоваться на удачу вашему сайту.
Прикрепления: 6713625.png (500.5 Kb)
 
  • Страница 1 из 1
  • 1
Поиск: