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

Вид материалов для модуля блог uCoz

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

Такой вид можно больше увидеть на многих темах, его на новости можно поставить, и не исключаю, что на игровые подойдет. Здесь только добавил, что ширина автоматически будет устанавливаться на конструкторе сайта. Но вот остальное вам нужно выставить в ручную, все делается в стилях.

Вот как пример в светло синем оттенке.

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

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

Код

<div class="articles2 opacity">
  <div class="articles2_img">
  <span><a href="$IMG_URL1$" class="ulightbox" data-fancybox-group="ultbx" title="$TITLE$">
  <img align="left" title="$TITLE$" src="$IMG_URL1$"></a></span>
  </div>
  <a href="$ENTRY_URL$"><div class="articles2_title"><b><?if(len($TITLE$)>35)?><?substr($TITLE$,0,33)?>...<?else?><span>$TITLE$</span><?endif?></b></div></a>
  <div class="articles2_message">$MESSAGE$
  </div>
  <div class="articles2_bottom">
  <div class="articles2_category">
  <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a>
  </div>
  <ul class="articles2_statistics">
  <li><span>$RATING$ ($RATED$)</span><img src="http://zornet.ru/Aben/AbuG/ico_like.png" alt="рейтинг"></li>
  <li><span>$READS$</span><img src="http://zornet.ru/Aben/AbuG/ico_Eye.png" alt="просмотров"></li>
  <?if($COMMENTS_NUM$)?><li><span>$COMMENTS_NUM$</span><img src="http://zornet.ru/Aben/AbuG/ico_comment.png" alt="комментарий"></li> <?endif?>
  </ul>
  </div>

И стили, здесь же ниже их прописать в style стили /style или попробовать в CSS, просто там почему то ене выводит, что пришлось ниже их ставить.

Код

.articles2 {
  width: auto;
  margin: 5px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ACACAC;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color: #888;
  text-shadow: 1px 1px 1px #fff;
  border-radius: 3px;
}

.articles2_title {
  height: 20px;
  float:left;
  width:594px;
  background:#f4f4f4;
  padding: 4px 4px;
  font: 125% Verdana,Arial,Helvetica, sans-serif; font-weight: 700;
  color: #737272;
  border-bottom: 1px solid #d1d1d1;
}

.articles2_title span {
  margin-left: 5px;
}

.articles2_title:hover {
color: #c9c4c4;
}

.articles2_message {
  display: block;
  height: 70px;
  margin-top: 35px;
  margin-left: 190px;
  margin-right: 10px;
  margin-bottom: 9px;
  overflow: hidden;
  font: 105% Verdana,Arial,Helvetica, sans-serif; text-align:justify;
}

.articles2_img span
{float: left;
  display: block;
  height: 120px;
width: 160px;
  background:#f4f4f4;
  padding: 10px;
  border-right: 1px solid #d1d1d1;
  overflow: hidden;}

.articles2_img span img {
  border-radius: 3px;
  width: 250px;
  height: 120px;
}

.articles2_bottom {
  float: left;
  width: 600px;
  background: #f4f4f4;
  border-top: 1px solid #d1d1d1;
}

.articles2_category {
  float:left;
  margin-left: 5px;
  }

.articles2_category a {
  float:left;
  font-weight: 700;
  margin: 3px 3px 2px 3px;
  color: #737272;
  text-decoration: none;
}
.articles2_statistics{
  float:right;
  margin:0;
  padding: 0;
  margin-right: -2px;
  list-style:none;
  border-left: 1px solid #d1d1d1;


}

.articles2_statistics li {
  float:left;
  height:20px;
  padding: 3px 3px 2px 3px;
  border-right: 1px solid #d1d1d1;
  border-left: 1px solid #fff;
}

.articles2_statistics span{
  float:left;
  margin: 0px 5px 0px 0px;
}

.opacity a:hover img {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=85);}

.articles2_statistics li {
  float:left;
  height:20px;
  padding: 3px 3px 2px 3px;
  border-right: 1px solid #d1d1d1;
  border-left: 1px solid #fff;
}

.articles2_statistics span{
  float:left;
  margin: 0px 5px 0px 0px;
}

.opacity a:hover img {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=85);}

PS - что по проверке адаптаций под мобильные устройства, то она есть, но не корректно выводит.

15 Января 2017 Загрузок: 4 Просмотров: 2264 Комментариев: (2)

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

СКАЧАТЬ

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

Kosten

Комментарии: 2
Порядок вывода комментариев: tsakonter 15 Января 2017 18:17¹ 0 Видать старый вид материала, коль кнопки все на ссылках, сейчас делают уже все почти на шрифтовые иконки, но здесь будет стабильно отображаться, а там могут и заглючить и не показаться, все что идет от отдаленного сервис, всегда нужно ждать подвоха, но пока не разу не заметил. Kosten 20 Января 2017 20:56² 0 Может и старый, но по мне смотрится нормально и не очень отличается своим дизайн от вид материала, что сейчас на сайте установлен.