ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Вид материала Verga 2 колонки для uCoz

Вид материала Verga 2 колонки для uCoz

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

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

Так визуально, после установки:

Стильный в 2 колонки вид материала файлов uCoz

Устанавливаем на сайт:

Для начало подключим шрифтовые иконки, копируем и ставим вверх сайта.

Код

Выбираем модуль и вид материала полностью меняем.

Код

<a href="$ENTRY_URL$">
  <div class="service-details">
  <img src="$IMG_URL1$" alt="$TITLE$">
  <div class="service-hover-text">
  <h3>$TITLE$</h3>
  <span id="cats$ID$">Загрузка...</span>

  <h2><i class="fa fa-star-o"></i> $RATING$ <i class="fa fa-clock-o"></i> $DATE$</h2>
  </div>
  <div class="service-white service-text">
  <p>
  <i class="fa fa-eye fa-fw"></i> $READS$
<i class="fa fa-download fa-fw"></i> $LOADS$
<i class="fa fa-comments fa-fw"></i> $COMMENTS_NUM$
  </p>
  </div>
  </div>
</a>
<script type="text/javascript">$('span#cats$ID$').load('$ENTRY_URL$ .cats');</script>

CSS

Код

.service-details {
  width: 48%;
  min-width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
  margin: 5px;
  float: left;
  background: #10161e;
}
.service-details img {
  position: absolute;
  top: 0;
  left: 50px;
  width: 100%;
  float: left;
  transition: all 0.8s;
  -moz-transition: all 0.8s;
  margin-left: px;
  border: 0px solid #17212b;
  -webkit-transform: rotateZ(-30deg);
  -ms-transform: rotateZ(-30deg);
  transform: rotateZ(-30deg);
}

.service-details:hover img {

}

.service-details .service-hover-text h3 {
  padding: 0px;
  margin: 0px;
  color:#56B8FF;
  text-align:left;
  text-shadow:1px 1px 1px #777;
  font-size:18px;
  font-family:Arial Narrow, Arial, sans-serif;
  transition: color 1s, font-size 1s, text-shadow 1s;
  -moz-transition: color 1s, font-size 1s, text-shadow 1s;
  -webkit-transition: color 1s, font-size 1s, text-shadow 1s;
  -o-transition: color 1s, font-size 1s, text-shadow 1s;
}
.service-details:hover h3 {
  padding: 0px;
  margin: 0px;
  color:#fff;
  z-index:10;
  font-size:18px;
  text-shadow:0 0 20px #EAF8FF;
}
.service-details .service-hover-text h4 {
  margin-right: 0;
  padding: 0 5px 2px;
  color: #9A9A9A;
  border: 1px solid #5D5D5D;
  border-radius: 2px;
  font-family: tahoma,arial,sans-serif;
  margin-bottom: 10px;
  display: inline-block;
}
.service-details .service-hover-text h2 {
  position: absolute;
  z-index: 100;
  bottom:5px;
  padding: 0px;
  margin: 0px;
  color:#fff;
  text-align:left;
  text-shadow:1px 1px 1px #000;
  font-size:14px;
  font-family:Arial Narrow, Arial, sans-serif;

  transition: color 1s, font-size 1s, text-shadow 1s;
  -moz-transition: color 1s, font-size 1s, text-shadow 1s;
  -webkit-transition: color 1s, font-size 1s, text-shadow 1s;
  -o-transition: color 1s, font-size 1s, text-shadow 1s;
}
.service-details .service-hover-text p {
  padding: 0px;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  margin:0px;
  font-family: "Open Sans";
}
.service-details .service-hover-text a {
  font-size: 12px;
  background: #313b46;
  margin-right: 0;
  padding:5px;
  color: #FFF;
  border-radius: 2px;
  font-family: tahoma,arial,sans-serif;
  margin-bottom: 10px;
  display: inline-block;
  border: 0px solid #00BFFF;
}
.service-details:hover a {
  font-size: 12px;
  background: rgba(21, 126, 232, 0.8);
  color: #fff;
}
.service-details .service-hover-text{
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  padding: 10px;
  box-shadow: ;
  color: #ccc;
/* display: none;*/
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.4s;
  margin-left:5px;
}

.service-details:hover .service-hover-text {
  display: block !important;
  color: ;
  left: 0px;
  top: 0px;

}
.service-details .service-text {
  position: absolute;
  bottom: 0px;
}
.service-details .service-text p {
  padding:5px;
  text-align:right;
  font-size: 12px;
  font-family: "Open Sans";
  font-weight:300;
  color:#fafafa;
  font-style:italic;
  text-shadow:0 0 20px #fafafa;
  box-shadow: -100px 1px 67px -31px #DC143C inset;
}
.service-white {
  background: rgba(43, 139, 161, 0.8);
  width: 100%;
  height: 25px;
}

До этого был точно такой материал в одну колонку, здесь уже переделан и создан в две колонки, что больше актуален.

17 Марта 2017 Загрузок: 1 Просмотров: 1914 Комментариев: (24)

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

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

maniacvn

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

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

Комментарии: 24
Порядок вывода комментариев: Scheme 17 Марта 2017 14:42¹ 0 Один вид крутить можно и разбрасывать по файлам - как все серьезно. Kosten 17 Марта 2017 14:54² 0 Но видать на то и конструктор, чтоб можно лепить с одного материала на несколько. Tergran 17 Марта 2017 15:18³ 0 Все нормально, его можно еще редактировать, но у меня вопрос, кто ставил, он адаптирован? maniacvn 17 Марта 2017 15:22⁴ +2 Марковичь 17 Марта 2017 15:27⁵ 0 Хороший вид материала и главное уже настроен, кому не нравится, может просто зайти в стили и переделать его, это что касается дизайн, чтоб не сбить адаптацию. Марковичь 17 Марта 2017 19:14⁶ 0 Мне интересно, уже не первый раз встречаю, это одна загрузка, а когда все открывается, то не чего скачивать, или вся информация файле была и потом ее выносят в материал, но прежде скачивают, так только могу понять. Tergran 17 Марта 2017 19:17⁷ 0 Все верно, некоторые в текстовом документе представляют, и тут видать так было. maniacvn 31 Марта 2017 16:58⁸ 0 Скоро обнова ) Марковичь 31 Марта 2017 18:21⁹ 0 Что это - информер или вид материал. maniacvn 31 Марта 2017 18:41¹⁰ 0 Вид материала) JK_Torosyan 11 Октября 2017 17:01¹¹ 0 Дратути, поставил себе вид, но.. картинки на виде не отображаются, и снизу выступает синяя полоса. Kosten 11 Октября 2017 17:18¹² 0 JK_Torosyan, этот вид полностью рабочий, возможно стили покрутить.
1 2 »