Предлагаю вам воспользоватся простым но в тоже время приятным видом материалов для сайтов uCoz. Данный вид материалов прост и не содержит графических элементов что не добавляет нагрузку на ваш сайт. Так же хочу отметить что он подойдёт под любую тему вашего сайта, но только под светлый дизайн, ну в принципе можно попробовать и на тёмный дизайн думаю можно будет под настроить немного. Вид материалов будет вам выводить с левой стороны уменьшенное изображение а с правой стороны будет краткое описание, так же можно будет узнать дату добавления, кто добавил и сколько комментариев оставлено к материалу, в общем ставьте себе на сайт и пользуйтесь!
Установите в первую очередь сам код вида материалов в нужный модуль сайта.
Код <div class="pst-i"> <div class="pst-l"> <a href="$ENTRY_URL$" class="pst-img"> <?if($IMG_URL1$)?> <span><img src="$IMG_URL1$" alt="$TITLE$" /></span> <?endif?> </a> </div> <div class="pst-r"> <div class="pst-ttl"><a href="$ENTRY_URL$">$TITLE$</a><?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?></div> <div class="pst-mt"> Добавлено - $DATE$ / <?if($USERNAME$)?>Автор - <a href="$PROFILE_URL$">$USERNAME$</a> / <?endif?> <?if($COMMENTS_URL$)?><a href="$COMMENTS_URL$">Комментарии ($COMMENTS_NUM$)</a><?endif?> </div> <div class="pst-tx">$MESSAGE$</div> </div> <div class="clrfx"></div> </div>
Далее в самый низ стилей вашего сайта допишите ниже указанные стили.
Код .pst-i {margin:0 0 20px 0;}
.pst-t {padding:0 0 20px 0;}
.pst-l {float:left;width:246px;}
.pst-img {display:block;width:240px;height:180px;border:1px solid #ddd;padding:2px;border-radius: 5px;}
.pst-img span {display:block;width:240px;height:180px;overflow:hidden;background:#fff;border-radius: 5px;}
.pst-img img {display:block;width:240px;min-height:180px;margin:0;position:relative;border-radius: 5px;}
.pst-img:hover img {opacity:0.7;}
.pst-r {float: right; width: 460px; max-height: 180px; overflow: hidden;}
.pst-ttl {font-size:18px;font-family:'Comfortaa Bold';margin:0 0 10px 0;}
.pst-ttl a {text-decoration:none;color:#444;}
.pst-mt {padding:7px 0;border-top:1px solid #ddd;border-bottom:1px solid #ddd;margin:0 0 10px 0;font-size:11px;color:#999;}
.pst-mt a {color:#999;}
.pst-tx {font-size:15px;line-height:150%;text-align: justify;color: #636363;}
.pst-m {text-align:right;font-size:13px;font-family:'Comfortaa Bold';}
.pst-m a {text-decoration:none;color:#444;}
Вот и всё, удачи вам и вашему сайту!
|