» »

Вид материалов для модуля блог 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.01.2017 Загрузок: 3 Просмотров: 910 Комментарий: (2)

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

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

Комментарий: 2
tsakonter
tsakonter 15.01.2017 18:171
0
Видать старый вид материала, коль кнопки все на ссылках, сейчас делают уже все почти на шрифтовые иконки, но здесь будет стабильно отображаться, а там могут и заглючить и не показаться, все что идет от отдаленного сервис, всегда нужно ждать подвоха, но пока не разу не заметил.
Kosten
Kosten 20.01.2017 20:562
0
Может и старый, но по мне смотрится нормально и не очень отличается своим дизайн от вид материала, что сейчас на сайте установлен.
avatar