ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Три колонки под вид материала файлов 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 Февраля 2016 Просмотров: 2409 Комментариев: (11)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 11
Порядок вывода комментариев: Сопрано 19 Февраля 2016 19:17¹ 0 Это наверно самый простой вид с колонками, но можно и сделать наверно и под 2 их. И добавить кнопом к названию, если это файлы, то разместить сколько скачали, но правильно это сейчас не важно, важно то стало, что увеличение уже не делают, а заходить на вид материала и комментариев нужно. Kosten 19 Февраля 2016 19:23² 0 Это не информер, чтоб выставлять колонки, здесь все шириной измеряется, по умолчанию стоит width: 250px делаем больше и меньше и вот вам 2 колонки, но это как то не обычно. Сафрон 19 Февраля 2016 19:26³ 0 Есть же один скрипт, где наводишь и вся информация появляется на темном фоне. Вот здесь можно было сделать и совершенно другой был бы вид материалов. А так он очень простой, чтоб не искать что то под дизайн, просто взять как заготовку этот и сделать как вам нужно. Kosten 19 Февраля 2016 19:31⁴ 0 Так про это и говорю, что не чего не изменял, так как возможно, кто то какой ищет и ему все финты эти как то до последнего места. А другой может его так нагрузить, что будет смотреться красиво а весить как пол ресурса, но зачем это, все нужно делать в меру. Специально второе изображение привел, как может подойти к простому от системы шаблону, это только как пример, может быть любой оттенок. Там есть и эффект, это обвод, который появляться будет при наведение. ucozmental 19 Февраля 2016 19:46⁵ 0 Что то не понял, одна колонка вылетает и все, просто не когда не ставил, тут попробовал, как смотреться будет. Kosten 19 Февраля 2016 19:50⁶ 0 Так это же не горизонтальный вид и нужно в админ панели не четное число выставить, сколько материала будет на главной и дальше, сейчас скрин скину. Сопрано 19 Февраля 2016 19:52⁷ 0 Но если 3 колонки, то можно прикинуть же, сколько должно быть. Kosten 19 Февраля 2016 19:53⁸ 0 Вообщем заходим в админ панель, если каталог файлов, то в настройку этого модуля, и находим где выставить ucozmental 19 Февраля 2016 19:54⁹ 0 Все сам разобрался, все правильно, нужно еще в админ панели выставлять. Maryges 19 Февраля 2016 19:56¹⁰ 0 Его бы прокачать бы хорошо, а то так простой вид, которых по дизайн очень много. Kosten 19 Февраля 2016 20:08¹¹ 0 Так за чем дело встало, прокачай, и посмотрим, так сказать оценим.