Если Вы хотите каждой категории делать отдельную картинку то нужно создать несколько файлов шорстори (вставить в них картинки которые нужно что бы выводились в категориях ) а далее в админке редактировать категории вписав к каждой нужный шаблон.
Результат: При добавлении новости в определённую категорию бедт выводится определённая картиночка. Приблезительный вывод новости
<li>
<div class="date">{date}</div>
<div class="headline">{title}</div>
<div class="newstext">
<img src="index.php/ru/Common/Image/field/small/id/199/filename/international2.gif" alt="flag" class="newsflag"/>
{short-story}
<!-- CNT TEASER -->
<div class="cnt_teaser">
<div class="left cnticon"><img alt="" src="images/icon_comments.gif"><span>{comments-num}</span></div>
<div class="left cnticon"><img alt="" src="images/icon_photo.gif"><span>{views}</span></div>
<div class="left cnticon"><img alt="" src="images/icon_tv.gif"><span>{category}</span></div>
<div class="clear"></div>
</div> </div>
</li>
css
.date
{
background: url(../images/date_bg.gif) no-repeat scroll 0px 0px ;
width: 185px;
color: #ffd500;
padding: 2px 0 0px 10px;
height: 21px;
font-weight: bold;
}
.headline
{
background: url(../images/title_bg.gif) no-repeat;
color: #FFFFFF;
padding: 4px 0 0 10px;
height: 22px;
width: 512px;
font-weight: bold;
font-size: 12px;
}
.headline a
{
color: #FFFFFF;
text-decoration: none;
}
.newstext
{
background: url(../images/news_item_bg.gif) no-repeat scroll 0px 0px ;
height: 118px;
width: 497px;
padding-left: 10px;
padding-right: 10px;
}
.cnt_teaser img
{
position: relative;
top: 2px;
right: 3px;
}
.cnt_teaser
{
margin-top: 15px;
font-size: 10px;
font-weight: bold;
color: #393D40;
}
div.clear
{
clear: both;
height: 0px;
padding: 0;
margin: 0;
}
Что то типо этого.
