« Минималистичный вид материалов для сайтов uCoz на чистом CSS »

Описание материала:

Сегодня я хочу вам предоставить не плохой материал для вашего сайта, а именно это минималистичный вид материалов, который подойдёт для любого сайта созданного при помощи конструктора uCoz.

Сам вид материалов сделан ровно и аккуратно без лишних элементов в темных оттенках. Он подойдёт под любой сайт у которого светлый или темный дизайн и думаю тема у него не определена так как можно использовать и на игровом сайте, а так же и на новостном сайте. В общем решать вам, как и где его использовать.

Так же, вы сможете подстроить оттенки под свой сайт, все это легко меняется в CSS стилях, если у вас есть хоть какие-то знания, то вы легко с этим справитесь.

Установка:

Заходим в ПУ - Управление дизайном - Каталог файлов(в нашем случае) - Вид материалов и заменяем текущий HTML код на этот:

Код
<div class="ufive_vid"><div class="ups">
<a class="name" href="$ENTRY_URL$" title="$TITLE$">$TITLE$</a>
</div>
<div class="cont">
<div class="info_u" title="">Добавил: <a href="$PROFILE_URL$" target="_blank" title="Спасибо $USERNAME$ за материал!">$USERNAME$</a> | Категория: <a href="$CATEGORY_URL$" title="Категория: $CATEGORY_NAME$">$CATEGORY_NAME$</a> | Просмотров: $READS$ | Дата $DATE$, $TIME$</div>
<div style="background:#fff; overflow:hidden; border-radius:3px; margin:3px 3px;">
<a href="$IMG_URL1$" title="Увеличить изображение" class="ulightbox"><img src="$IMG_URL1$" width="150" height="150" class="u5_img" alt="$TITLE$" ></a>
<div class="text"><p>$MESSAGE$</p></div>
<a class="podr" href="$ENTRY_URL$" title="Подробнее о материале $TITLE$">Подробнее...</a>
</div>
</div></div>


Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и ставим CSS код:
Код
/* Минималистичный вид материалов для сайтов uCoz на чистом CSS */
.ufive_vid {background:#393939 repeat; margin:10px 0 10px 4px; border-radius:3px; padding-bottom:5px;}
.ufive_vid a {text-decoration:none;}
.ufive_vid .cont {background:#fbf0e5 repeat; margin:8px 7px; border-radius:3px; padding:5px; overflow:hidden; position:relative;}
.ufive_vid .ups {background:#393939 no-repeat ; height:36px; border-radius:3px;}
.ufive_vid .ups .name {color:#393939; display:inline-block; background:#ffbe7a repeat-x; height:24px; font:14px/25px vidok; text-transform:uppercase; padding:0 15px; border-radius:3px; margin:8px 9px; float:left;}
.ufive_vid .cont .u5_img {border:8px solid #fbf0e5; margin:5px; float:left;}
.ufive_vid .cont .text {font:11px/17px Tahoma; color:#393939; float:none; margin:5px 0 5px 180px;}
.ufive_vid .cont .podr {background: #ffbe7a no-repeat;color: #393939; width:133px; height:19px; position:absolute; bottom:10px; right:10px; display:block;text-align: center;border-radius: 3px;}
.ufive_vid .info_u {overflow:hidden; font:11px/30px Tahoma; margin-left:10px; border-bottom:1px dotted #393939; margin-right:6px;}
.ufive_vid .info_u a {color:#393939; text-decoration:underline;}
/* uFive.Ru */


Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Скрипты для uCoz | Просмотров: 46


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев: 0
avatar