В вид материалов или в информер:
Код
<div class="f_viewn">
<div class="category-cnop">$CATEGORY_NAME$</div><a href="$OTHER1$" class="v_poster ulightbox"><div class="f_title" style="background-image:url(<?if($OTHER1$)?>$OTHER1$<?else?>$OTHER1$<?endif?>);"></div></a>
<div class="f_cont">
<div class="news-title" title=""><a href="$ENTRY_URL$" title="">$TITLE$<hr></a></div>
$MESSAGE$</div>
<div class="f_details">
<div class="right">
</div>
</div>
</div>
В css:
Код
/* inf_news fogame */
.f_viewn {width: 197px;height: 215px;overflow:hidden;background: #272727;box-shadow: 0px 1px 1px 0px #151515;border-radius:px;margin: 0 0 17px 6px;float:left;transition:0.3s;}
.f_viewn:hover .f_title span {background: rgba(0, 0, 0, 0.37);}
.f_title {height: 87px;overflow:hidden;border-bottom: 1px solid #585252;background-size:cover;background-position:center;background-repeat:no-repeat;}
.f_title span {transition:0.3s;background: rgba(0, 0, 0, 0.66);width: 100%;height: 89px;color:#656565;display:block;text-align:center;font-size:18px;text-shadow: 0px 2px 2px rgb(4, 4, 4);text-transform:uppercase;padding: 29px 5px 0px 5px;}
.f_cont {color: #b7aeae;font-size: 13px;padding: 5px;overflow:hidden;height: 100px;}
.f_cont br {display:none;}
.right {float:right;}
.news-title {font-size:12px;overflow:hidden;font-weight:bold;height:20px;}
.news-title a:hover, .news-short-text a:hover {color:#656565;}
.side_nav {overflow:hidden;background:#fffdfd;box-shadow:0px 5px 10px 0px #e4e4e4;padding:10px;margin-bottom:5px;font-size:14px !important;color:#3e3e3e;border-radius:2px;}
.side_nav h1 {text-transform:uppercase;}
.side_nav a:hover {text-decoration:none;}
.side_nav .add-material {background: #222122;font-size:12px;text-transform:uppercase; color: #fff; padding: 4px 8px; transition: .2s;border-radius:2px;}
.side_nav .add-material:hover {background: #464646; text-decoration: none;}
.category-cnop {
position: absolute;
margin:1px 0 0 1px;
padding: 2px 10px 4px;
font-weight:normal;
font-style:normal;
text-decoration:none;
font-size:11px;
color:#ffffff;
border-radius: 0 2px 2px 0;
-moz-border-radius: 0 2px 2px 0;
-webkit-border-radius: 0 2px 2px 0;
background-color: rgba(0, 0, 0, 0.5);
}
/*******************************************************/
ввывод название категорий взял с сайта Zornet
