Сегодня решил выложить вам очень удобный вид материалов, удобный по моему мнению в первую очередь потому что он не имеет особой тематики и подойдёт под любой тематический сайт. Так же думаю что он смотрится не плохо и великолепно впишеться в рабочие будни вашего сайта.
Установка
Скопируйте HTML код вида материала и установите его в нужный вам модуль соответственно в дизайн вид материалов
Код <div class="h_mtr"> <div class="h_mtr_in"> <div class="h_mtr_image"> <div class="h_mtr_image_over"><a href="$IMG_URL1$" class="ulightbox" target="_blank"><img src="$IMG_URL1$" alt="$TITLE$"></a></div> </div> <div class="h_mtr_content"> <h2 class="h_mtr_title"><a href="$ENTRY_URL$">$TITLE$</a></h2> <hr> <div class="h_mtr_date"> <span class="hm_d hm_date">$DATE$ в $TIME$</span> <span class="hm_d hm_user"><a href="$PROFILE_URL$">$USERNAME$</a></span> <span class="hm_d hm_views">$READS$</span> <span class="hm_d hm_comm"><a href="$COMMENTS_URL$">$COMMENTS_NUM$</a></span> <span class="hm_d hm_cat"><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></span> </div> <hr> <div class="h_mtr_text post-d">$MESSAGE$</div> <hr> </div> </div> </div>
Далее скопируйте CSS стили вида материалов и установите их в самый низ стилей вашего сайта.
Код .h_mtr{margin-bottom:30px;}
.h_mtr_in{display:table;width:100%;}
.h_mtr_image{display:table-cell;vertical-align:top;width:300px;}
.h_mtr_content{display:table-cell;vertical-align:top}
.h_mtr_image_over{width:270px;height:230px;}
.h_mtr_image_over{object-fit: cover; border: 4px solid #FCFCFC; box-shadow: 0px 0px 1px 1px #DDD;}
.h_mtr_image_over img{width:270px;height:230px;object-fit:cover;}
.h_mtr_image_over a:hover img{opacity:0.7;}
.dir_foto_image{display:table-cell;vertical-align:top;width:825px;}
.dir_foto{width:825px;height:470px;}
.dir_foto img{width:825px;height:470px;object-fit:cover;}
.dir_foto a:hover img {opacity:0.7;}
.h_mtr_title{font-size: 19px; font-family: serif; font-weight: bold}
.h_mtr_title_mat{font-size:20px;font-family:'Lora',sans-serif;font-weight:bold;margin-bottom:10px;}
.h_mtr_text{text-align:justify;color:#636363;max-height: 110px; overflow: hidden;}
.h_mtr_date{margin-top:12px;font-size:14px;color:#818181;}
.h_mtr_date a{color:#818181}
.hm_d{display:inline-block;padding-left:22px;padding-right:10px;}
.hm_date{background:url('http://dimanik.ru/images/i_time.png') 0px 1px no-repeat;}
.hm_user{background:url('http://dimanik.ru/images/i_user.png') 0px 1px no-repeat;}
.hm_views{background:url('http://dimanik.ru/images/i_views.png') 0px 1px no-repeat;}
.hm_comm{background:url('http://dimanik.ru/images/i_comm.png') 0px 1px no-repeat;}
.hm_cat{background:url('http://dimanik.ru/images/i_cat.png') 0px 1px no-repeat;}
Установка завершена!
| 
