« Вид материалов в 3 колонки для uCoz »

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

Не плохое решение для сайтов с тематикой - фильмы. Его конечно можно поставить на любой портал,под любую тематику, но большой спрос на вид материалов в 2 и 3 колонки - ставить обычно администраторы кино-порталов. Так же у нас на сайте есть вид материалов в 2 колонки.

Установка:
1. Зайдите в Панель управления » Управление дизайном » Каталог файлов » Вид материалов и замените весь код который там находится на следующий.

Код

<div style="width:33%;float:left;">  
<table align="center" cellpadding="0" cellspacing="0" width="100%" class="bk">  
<tr><td> <a class="thumbnail" href="$ENTRY_URL$"> <span><br><b>Жанр:</b> $CATEGORY_NAME$<br><br>  
<b>Год:</b> $FILTER1_VALUE$<br><br>  
<b>Страна:</b> $VERSION$<br><br>  
<b>Перевод</b> $FILTER2_VALUE$<br><br>  
<b>Время: </b> $RFILE_SIZE$<br><br>  
<b>Режиссер:</b> $AUTHOR_EMAIL$<br><br>  
<b>В ролях:</b> $SOURCE_URL$  
</span>  
<img src="$IMG_URL1$" width="210" height="300"> </a> </td></tr> <tr id="bk_title">  
<td>  
<a href="$ENTRY_URL$">$TITLE$</a>  
</td>  
</tr> <tr>  
<td>  
<div class="bkrating"><b>$AUTHOR_NAME$</b></div>  
<div class="bkreads"><img src="/.s/img/vi/vico-views.png"> $READS$</div>  
</td>  
</tr>  
</table> </div>

2. Для остальных модулей можно использовать следующий код. Его вы так же заменяете в виде материала того модуля в котором хотите получить такой результат.
Код

<div style="width:33%;float:left;">  
<table align="center" cellpadding="0" cellspacing="0" width="100%" class="bk">  
<tr>  
<td>  
<a class="thumbnail" href="$ENTRY_URL$">  
<span><br><b>Жанр:</b> $CATEGORY_NAME$<br><br>  
$MESSAGE$  
</span>  
<img src="$IMG_URL1$" width="210" height="300">  
</a>  
</td>  
</tr>  
<tr id="bk_title">  
<td>  
<a href="$ENTRY_URL$">$TITLE$</a>  
</td>  
</tr>  
<tr>  
<td>  
<div class="bkrating"><b>$AUTHOR_NAME$</b></div>  
<div class="bkreads"><img src="/.s/img/vi/vico-views.png"> $READS$ </div>  
</td>  
</tr>  
</table>  
</div>

3. Вставим в Таблица стилей CSS следующие стили.
Код

.thumbnail{  
  position: relative;  
  z-index: 50;  
  }  
  .thumbnail:hover{  
  background-color: transparent;  
  z-index: 150;  
  }  
  .thumbnail span{  
  position: absolute;  
  background-color: rgba(0, 0, 0, 0.63);  
  padding: 2px;  
  left: 10px;  
  border: 0px solid white;  
  visibility: hidden;  
  color: #fff;  
  text-decoration: none;  
  border-radius: 0px 0px 0px 0px;  
  -moz-border-radius: 0px 0px 0px 0px;  
  -webkit-border-radius: 0px 0px 0px 0px; height: 300px;  
  }  
  .thumbnail span img{  
  border-width: 0;  
  padding: 2px;  
  }  
  .bk:hover .thumbnail span{  
  visibility: visible;  
  top: -288px;  
  left: 0px; height: 298px;witdh:210px;padding-left: 10px;  
  }  
   
.bk {  
background-color: #fff;  
border:1px solid #f6f5f5;  
width:180px;  
height:363px;  
align:center;  
border-radius:0px;  
margin-bottom:15px;  
-webkit-box-shadow: 0 0 2px 0 rgba(0,0,0,.15);  
}  

.bk:hover {  
background: #f8f8f8;  
}  

#bk_title{  
height:50px;  
text-align:center;  
margin:0;  
padding:0;  
}  

.bkrating {  
margin-left:14px;  
margin-bottom:8px;  
width:130px;  
}  

.bkreads{  
float:right;  
margin-right:10px;  
margin-top:-22px;  
}  
/*=============*/

На этом установка закончена. Вы можете так же подредактировать этот код под себя как вам будет удобно.


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

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

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

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

Источник

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


Добавил: maksim | Категория: Скрипты для uCoz | Просмотров: 807 | Загрузок: 34

Теги к материалу: материалов, вид, ucoz, для, колонки

Поделиться в соц. сетях:
Комментариев к материалу: 2
Вероника 28.01.2016 в 08:22Спам
Спасибо. Подскажите, а можно ли как -то сделать, чтобы название материала автоматом обрезалось ,если введено больше 100 символов ?
0
Виктор Ягодин 28.01.2016 в 14:37
Да, конечно можно, вот код <?substr($TITLE$,0,23)?>
0
avatar