Данный вид материалов отлично подходит под видео материалы, сделан под 3 колонки то есть в 33% от общего каждая колонка блока вида новостей.Вид материала в 3 колонки оформленные
Тестировал вид материалов в мазиле, в IE8 вид выходит лесенкой как и все таблицы, извечная проблема браузера, нужно писать отдельный стиль блоков для него.
Создавал я его на своем сайте почти тестовом criuleni.do.am , там же можно и увидеть живой вид в разделе видео криулян, создавался для пользователей нашего сайта ucozon.ru, для удобного вида отображения материалов.
Установка 3 блока вида материалов
Этот код вставляем в вид материалов
Code
<div style="width: 33%; float: left;"><center><fieldset>
<?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?>
<div class="eTitle" style="text-align:left;"><a href="$ENTRY_URL$">
<?if(len($TITLE$)>33)?><?substr($TITLE$,0,31)?><?else?>$TITLE$<?endif?>..</a></div>
<div style="height:3px;"></div>
<div align="center">Дата: <span title="$TIME$">$DATE$</span><div style="height:3px;"></div>
<table style="border: 1px solid black; background-color: rgb(169, 169, 169);" align="" width=""><tbody><tr>
<td style="text-align: center; vertical-align: middle; padding: 3px; background-color: rgb(220, 220, 220); letter-spacing: 0pt; word-spacing: 0pt; border: 1px solid black;">
<div class="feature-thumb"><a href="$ENTRY_URL$" title="$TITLE$"><img class="feature" alt="" src="$OTHER1$" width="185" height="152" alt="$TITLE$"></a><span style="top: 124px; left: -7px;"><b>$CATEGORY_NAME$</b></span></div>
</td></tr></tbody></table>
</div><div style="height:3px;"></div>
Просмотров: $READS$ <?if($COMMENTS_URL$)?>| <a href="$COMMENTS_URL$">Комментарии ($COMMENTS_NUM$)</a><?endif?>
</div> </fieldset></center></div>
для вывода скриншота я использую дополнительное поле 1
$OTHER1$ В таблицу стилей вставляем стиль вывод картинки фона для категорий
Code
.feature-thumb span {background: url(http://criuleni.do.am/img/feature-thumb.png) 0 0 no-repeat;color: #fff;}
img.feature {border: 4px solid #666;}
.dark img.feature {border: 4px solid #444;}
.feature-thumb, .feature-thumb2 {float: left;margin:0 0px 0px 0 ;position: relative;}
.feature-thumb span, .feature-thumb2 span {position: absolute;top: 80px;left: -7px;width: 133px;height: 28px;text-transform: uppercase;line-height: 180%;text-indent: 8px;}
автор вида материалов: mdbaner
сайт автора материалов :
http://ucozon.ru так как отображается вид у вас может быть иначе исходя из стилей вашего сайта, так как используется стандартный стиль
class="eTitle" ucoz