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

Вид материалов uCoz в две колонки на сайт

Под темный фон вид материала в 2 колонки на изображение на модули сайта uCoz. По конструкций он простой и имеет код и под него стили. С левой стороны будет изображение материала, почти на всю высоту и название, где есть еще пространство. Где как пример, можно вывести под краткое описание того материала, которое распространяете на интернет ресурсе.

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

Так после установки должен быть:

Вид материала:

Код

<a href="$ENTRY_URL$">
  <div class="service-details">
  <img src="$IMG_URL1$" alt="$TITLE$">
  <div class="service-hover-text">
  <h3>$DATE$</h3>
  <h4>$CATEGORY_NAME$</h4>
  <p><?if(len($MESSAGE$)>135)?><?substr($MESSAGE$,0,135)?>.....<?else?>$MESSAGE$<?endif?></p>
  </div>
  <div class="service-white service-text">
  <p>$TITLE$</p>
  </div>
  </div>
</a>

CSS:

Код

.service-details {
  width: 48%;
  min-width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
  margin: 5px;
  float: left;
}

.service-details img {
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: 100%;
  height: 100%;
  float: left;
  transition: all 0.8s;
  -moz-transition: all 0.8s;
  margin-left: 5px;
  border: 10px solid #17212b;

}

.service-details:hover img {
  /*opacity: 0.4 !important;*/
}

.service-details .service-hover-text h3 {
  padding: 0px;
  margin: 0px;
  color:#00BFFF;
  font-size: 16px;
  font-weight:300;
  font-family: "Open Sans";
}

.service-details .service-hover-text h4 {
  padding: 0px;
  padding-bottom: 5px;
  margin: 0px;
  font-size: 12px;
  letter-spacing: 3px;
  width: 90%;
  font-family: "Open Sans";
  text-transform:uppercase;
  border-bottom: 2px solid #00BFFF;
}

.service-details .service-hover-text p {
  padding-top: 5px;
  font-size: 14px;
  line-height: 20px;
  font-family: "Open Sans";
}

.service-details .service-hover-text{
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 50%;
  padding: 3% 4%;
  background: #000;
  color: rgba(186, 41, 41, 0.9);
/* 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: rgba(255,255,255,1);
  background:rgba(0, 0, 0, 0.9);
  left: 0px;
  top: 0px;
}

.service-details .service-text {
  width: 50%;
  height: inherit;
  background: #000;
  float: left;
  position: absolute;
  left: 50%;
}

.service-details .service-text p {
  padding:10px 10px 0px 10px;
  font-size: 18px;
  font-family: "Open Sans";
  font-weight:500;
  color: #fff;
}

.service-details .service-text p span {
  font-family: "Open Sans" !important;
}

.service-details .service-text a , .service-white .service-text {
  padding: 10px 0 0 20px;
  font-size: 14px !important;
  color:#DC143C !important;
  font-family: "Open Sans" !important;
  text-decoration: none !important;
}

.service-white {
  background: #17212b !important;
  width: 50% !important;
  height: inherit !important;
}

.service-white p {
  color: #fff !important;
}

Сам скрипт на его не сложный и уже на краткое описание выставлены знаки, что потом регулируем по своему.

Источник: uCozz.pRo

14 Марта 2017 Загрузок: 4 Просмотров: 2282 Комментариев: (8)

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

СКАЧАТЬ

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

maniacvn

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

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

Комментарии: 8
Порядок вывода комментариев: Kolinkor 15 Марта 2017 00:10¹ 0 Что то не пойму, краткое выставлено, на скрине нет, так нужно было написать, так гораздо респектабельно бы смотрелось, чем так с дырой.) maniacvn 15 Марта 2017 00:17⁴ 0 Я специально ничего не добавлял туда просто все по разному и в разных модулях будут ставить а так там можно расположить иконки кнопки инфу дополнительную просто если для новостей особено с длиным названием то в самый раз а при наведении показывает дату раздел и само описание) maniacvn 15 Марта 2017 00:13² 0 Завтра сделаю скрин рабочий с эффектом при наведении выдвигаетса в лево шторка Kosten 15 Марта 2017 00:23⁵ 0 maniacvn, добавь краткое описание, можно одно на всех, то так реально будет вид красиво смотреться, да скриг или ссылку скинешь, я скрин сниму! Kosten 15 Марта 2017 00:14³ 0 Нет у меня такого шаблона и на темном скрин как то делать не то, а что пространство, но в коде все верно maniacvn установил, больше всего, что он не писал краткое описание и оно не вывелось, так как его не было. maniacvn 15 Марта 2017 00:24⁶ 0 Kosten 15 Марта 2017 00:26⁷ 0 Дай ссылку сам сниму скрин.) Scheme 15 Марта 2017 00:31⁸ 0 Краткое описание и без эффекта должно быть.