» »

Три колонки под вид материала файлов uCoz


Три колонки под вид материала файлов uCoz

Очень простой и в тоже время оригинально смотрится на сайте вид материала, который будет в 3 колонки. Можно сделать его под любой модуль, но кроме форума. Здесь все сами можете сделать, так как стили это позволяют и можно его поставить под любую гамму цвета. Он изначально был сделан под светлый ресурс, но пришлось внести немного изменение и вот к примеру как на стандартном шаблоне смотреться будет.



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

Установка:

Но это вам выбрать вид материала и туда прописать скрипт:

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


CSS:

Код
.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: #05252F;
  -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: #3187C1;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: #FFFFFF;
  text-decoration:none;
  font-family:'PT Sans';
  font-size:15px;
}  

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


Не чего не стал добавлять, так как все очень понятно сделано.
Источник: http://internetempire.ru/
19.02.2016 Просмотров: 597 Комментарий: (11)

Поделиться в социальных сетях

Материал разместил

Комментарий: 11
Сопрано
Сопрано 19.02.2016 19:171
0
Это наверно самый простой вид с колонками, но можно и сделать наверно и под 2 их. И добавить кнопом к названию, если это файлы, то разместить сколько скачали, но правильно это сейчас не важно, важно то стало, что увеличение уже не делают, а заходить на вид материала и комментариев нужно.
Kosten
Kosten 19.02.2016 19:232
0
Это не информер, чтоб выставлять колонки, здесь все шириной измеряется, по умолчанию стоит width: 250px делаем больше и меньше и вот вам 2 колонки, но это как то не обычно.
Сафрон
Сафрон 19.02.2016 19:263
0
Есть же один скрипт, где наводишь и вся информация появляется на темном фоне. Вот здесь можно было сделать и совершенно другой был бы вид материалов. А так он очень простой, чтоб не искать что то под дизайн, просто взять как заготовку этот и сделать как вам нужно.
Kosten
Kosten 19.02.2016 19:314
0
Так про это и говорю, что не чего не изменял, так как возможно, кто то какой ищет и ему все финты эти как то до последнего места. А другой может его так нагрузить, что будет смотреться красиво а весить как пол ресурса, но зачем это, все нужно делать в меру. Специально второе изображение привел, как может подойти к простому от системы шаблону, это только как пример, может быть любой оттенок. Там есть и эффект, это обвод, который появляться будет при наведение.
ucozmental
ucozmental 19.02.2016 19:465
0
Что то не понял, одна колонка вылетает и все, просто не когда не ставил, тут попробовал, как смотреться будет.
Kosten
Kosten 19.02.2016 19:506
0
Так это же не горизонтальный вид и нужно в админ панели не четное число выставить, сколько материала будет на главной и дальше, сейчас скрин скину.
Сопрано
Сопрано 19.02.2016 19:527
0
Но если 3 колонки, то можно прикинуть же, сколько должно быть.
Kosten
Kosten 19.02.2016 19:538
0
Вообщем заходим в админ панель, если каталог файлов, то в настройку этого модуля, и находим где выставить

ucozmental
ucozmental 19.02.2016 19:549
0
Все сам разобрался, все правильно, нужно еще в админ панели выставлять.
Maryges
Maryges 19.02.2016 19:5610
0
Его бы прокачать бы хорошо, а то так простой вид, которых по дизайн очень много.
Kosten
Kosten 19.02.2016 20:0811
0
Так за чем дело встало, прокачай, и посмотрим, так сказать оценим.
avatar