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

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

Очень простой и понятный вид материалов в три колонки, для сайтов в системе uCoz. В данном виде есть только изображение и название. Ширина одной колонки 250px, размер изображения 240x300. Вид материалов отлично подойдет по тематики таких сайтов как - Кино, Игры, Торрент. Вид сделан в светлых тонах, при наведение на один из материалов, он обводится оранжевым бордюром, а еще при наведение курсором на название материала, он с темно-серого цвета, меняется на оранжевый. Данный вид очень легко установить, что Вам нужно будет сделать, так это добавить HTML и CSS код.

Установка:
1. Заходим в ПУ - Управление дизайном - выбираем Модуль - Вид материалов и заменяем имеющий код на этот:

Код
<div class="ie-vid">
<div class="thumb-ie ie-block">
<img style="margin:5px;" src="$IMG_URL1$" alt="$TITLE$"/>
<h3>
<div class="ie-title"><a href="$ENTRY_URL$" alt="$TITLE$" title="$TITLE$">$TITLE$</a></div>
</h3>
</div>
</div>

2. Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и в самый низ ставим данный код:
Код
/* Простой вид материала в 3 колонки для uCoz */
.ie-vid {
  width: 250px;
  float: left;
  margin-right: 15px;
  margin-bottom: 5px;
}
.thumb-ie li {
  float: left;
  margin-bottom: 20px;
  margin-left: 20px;
}
.thumb-ie {
  display: block;
  padding: 4px;
  line-height: 20px;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.thumb-ie:hover {
  border-color: #FF9337;
  -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
  -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
  box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
.thumb-ie img {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  width: 230px;
  height: 300px;
  border-radius: 4px;
}
.thumb-ie .caption {
  padding: 9px;
  color: #555555;
}

.ie-block {  
background-color: #fff;  
margin-left: 10px;  
padding-right: 13px;  
}
   
.ie-block h3 {
  font-size: 15px;
  width: 237px;
  height: 60px;
  display: table-cell;
  vertical-align: middle;
  line-height: 20px;
  text-align: center;
}

.ie-title a {
  color:#393939;
  text-decoration:none;
  font-family:'PT Sans';
  font-size:15px;
}

.ie-title:hover a {
  color:#FF9337;
  text-decoration:none;
  font-family:'PT Sans';
  font-size:15px;
}
/* InternetEmpire.Ru */


Если будут вопросы по данному материалу, пишите на форум в раздел Помощь!


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

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


Добавил: YaVi | Категория: Скрипты для uCoz | Просмотров: 704

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

Поделиться в соц. сетях:
Комментариев к материалу: 2
Владислав 09.02.2016 в 09:17Спам
Спасибо) Может как у себя воткну такой вид :)
2
Виктор Ягодин 09.02.2016 в 11:37
Не за что)
0
avatar