Вид материала для uCoz - этот вид отлично будет стоять в каталог файлов, он будет показывать материалы в колонках, что даже очень удобно, вид простой и очень красивый, он показывает картинку материала, название материала, кнопка подробнее, и в какой категории находится материал.
Установка вида:
Код HTML:
Код
<div style="width:50%; float:left;">
<div class="shot_load_img"><a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="Мод На Мебель и Декор"></a>
<div class="shot_load_title"><h2><a href="$ENTRY_URL$">$TITLE$</a></h2></div>
</div>
<div class="shot_load_more_bl">
<a href="$SECTION_URL$" class="btn3 left" >$SECTION_NAME$</a>
<a href="$ENTRY_URL$" class="btn2 right">Подробнее</a>
</div>
</div>
В таблицу стилей CSS вставляем этот код:
Код
.shot_load {float: left;width: 425px;background: #fff; overflow: hidden;border-radius: 3px; border: 1px solid #efefef; margin-bottom: 15px;margin-right: 12px}
.shot_story > .shot_load:nth-child(4n) {margin-right: 0px}
.shot_load_img {border-radius: 3px; overflow: hidden; margin: 0 auto; position: relative; margin: 3px; height: 270px; object-fit: cover;}
.shot_load_title {position: absolute; bottom:0px; left:0px; background: rgba(0,0,0,0.7); padding: 7px; line-height: 16px; display: block; width: 410px; }
.shot_load_title h2 {font-size: 15px; text-transform: uppercase; font-weight: normal;}
.shot_load_title h2 a {color: #dadada; display: block;}
.shot_load_title:hover {background: rgba(67,74,84,0.8); }
.shot_load_title:hover > h2 > a {color: #fcfcfc;}
.shot_load_cat {margin: 7px 5px;}
.shot_load_cat div {display: block; height: 16px;overflow: hidden; clear: both; color:#afb0b0;}
.shot_load_cat div a {color: #898989; font-weight: bold;}
.shot_load_cat div a:hover {color: #ff0000 !important;}
.shot_load_more_bl {display: block; overflow: hidden; margin: 3px;}
.btn2 {border-radius: 3px;text-align: center;display: inline-block;padding: 4px 7px;font-size: 15px;font-family: 'PT Sans', sans-serif;background: rgb(47, 156, 12);color:#fff;}
.btn2:hover {background: #4f4f4f;}
.btn3 {border-radius: 3px; text-align: center;display: inline-block; padding: 4px 7px; font-size: 14px; font-family: 'PT Sans', sans-serif; background: #4f4f4f; color:#fff;}
.btn3:hover {background: rgb(47, 156, 12);}
Автор рипа trem200