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

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

12015-12-0385438Денис Абдуллин

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

Посмотрите на предлагаемый код как на пример, посмотрите на принцип, устанавливать его на постоянной основе не рекомендуем. Просто стили, которые есть непосредственно в коде, нужно поместить в CSS-файл, да и вообще использовать табличную верстку сегодня не комильфо. Текущий вид предназначен для каталога файлов. Обычно владельцы сайтов о кино и сериалах предпочитают использовать именно этот модуль.

Установка

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

Код
<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>

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

Код
<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>

Установка стилей CSS

Мы с вами установили каркас, а теперь перейдем к применению стилей для него.

Вставим в Таблица стилей (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;
}
/*=============*/

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


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (8)
Ольга 2016-01-11 в 19:33 / МатериалСпам
Спасибо, симпатично смотрится :)
0
Денис Минов 2015-12-04 в 20:11 / МатериалСпам
padding: 5px; box-sizing: padding-box;
3
Олег 2015-12-04 в 18:24 / МатериалСпам
нужно же оставить отступ между колонками
0
Cry Deil 2015-12-03 в 20:31 / МатериалСпам
А разве не 33.33% ? Будет точнее ^-^
3
Андрей Ермолин 2016-10-07 в 10:55 / МатериалСпам
Добрый день. Установил шаблон, настроил немного под себя. Подскажите пожалуйста что добавить или изменить в CSS или в виде материалов чтобы адаптировать для моб. устройств? При уменьшении окна браузера картинки накладываются друг на друга, аналогичный вид просматривается и на смартфоне. Пробовал в виде материалов менять 33 % на auto, отступ между собой пропадает, но просмотр на моб.устройствах становится возможен.
0
Денис Минов 2016-10-08 в 00:59 / МатериалСпам
Лучше всего, для моб. версии, сделать в ширину один материал.
Для этого добавьте в CSS данный код

@media screen and (max-width: 800px) {
.class {display: block; widht: 100%; margin: 0 5px;}
}

Где .class замените на класс своего вида материалов.
0
Андрей Ермолин 2016-10-08 в 09:03 / МатериалСпам
А где берут) этот класс подскажите, просто я пока не очень в шаблонах только учусь. Нужен для вид материалов /publ и /news Спасибо.
0
Денис Минов 2016-10-10 в 00:49 / МатериалСпам
Лучше всего задавать такие вопросы на форуме и предоставлять ссылку на сайт.
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.