» »

Светлый вид материала с тенями на uCoz


Светлый вид материала с тенями на uCoz

Данный материал создан в светлом оттенке цвета с приятным визуально видом. В нем присутствуют тени, также кнопки на стилях для стилистики сайта. Не чем от других он почти не отличается, разве что на белом фоне он будет выделятся больше, просто нет, которые присутствуют делают ему форму. Увеличение у него нет, что плюс, нужно будет переходить на основной пост, где и будет или статья или файл скачать. Выводит автора и также раздел, где он находится, можно поставить категорию, здесь кому как лучше видеться.

К тематике он не прикреплен, что можно как на игровую установить, и также на софт портал. При наведение на надпись "Комментарий" будет эффект перемена цвета. И главное, когда зайдете на вид материалов и комментариев к нему, то темная полоса там будет. Просто проверял на тестовом сайте, и так было, возможно стили подошли, но смотрелось отлично. И здесь еще подключим шрифт кнопок от Font Awesome, что даст вам больше возможностей устанавливать разные кнопки.

Установка:

Первое что делаем, закрепляем стиль на иконки, вверх сайта в самый потолок ставим.

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


Вил материала:

Код
<div class="eBlock-vid">  
<div class="eTitle" style="text-align:left;"><a href="$ENTRY_URL$">$TITLE$</a></div>
<span class="post-details">Автор: <i class="fa fa-user" aria-hidden="true"></i> <a href="$PROFILE_URL$">$USERNAME$</a> | Раздел: <i class="fa fa-wifi" aria-hidden="true"></i> <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></span>  
<span class="post-dt"><i class="fa fa-clock-o" aria-hidden="true"></i> <span class="post-date">$DATE$</span>, $TIME$ </span>  
<div class="img-poster"><img src="$IMG_URL1$" alt="$TITLE$"></div>  
<?if($MESSAGE$)?><div class="eMessage" style="text-align: justify; max-height: 70px; overflow: hidden;">$MESSAGE$</div><?endif?>  
<div class="eDetails" style="clear:both;">  
<?if($COMMENTS_URL$)?><div class="com-vid"><a href="$COMMENTS_URL$"><i class="fa fa-comments-o" aria-hidden="true"></i> Комментарии ($COMMENTS_NUM$)</a></div><?endif?>  
</div></div>


CSS:

Код
.eTitle {font-size: 17px; font-family: 'PT Sans'; margin-bottom: 15px; color: #FFFFFF; font-weight: 600;padding: 7px 7px 7px 10px; -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30);box-shadow: 0px 2px 5px 0px rgb(152, 152, 152);border-bottom: solid #3F3F3F; background-color: #3F3F3F;border-radius: 3px;}  
.eTitle a {text-decoration: none; color: #fff; font-weight: 600; padding: 7px;}  
.eTitle a:hover {color:#E7E7E7;}  
.post-details, .post-dt {color: #94999e; font-size: 11px;padding-right: 25px; font-family: 'PT Sans';}  
.post-details a { color: #383e47; font-weight: 600; font-family: 'PT Sans';font-size: 12px;}  
.post-details a:hover { color: #1abc9c;}  
.eBlock-vid {font-family: 'PT Sans'; margin: 0 0 20px; padding: 10px; -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30); box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30); border-bottom: solid #ccc;}  
.com-vid {float:right; margin-top: -30px;}  
.com-vid a {color: #383e47; font-weight: 600;}  
.com-vid a:hover {color: #1A68BC;}  
.com-vid i {font-size: 21px;}  
.img-poster {float: left; margin-right: 10px;}  
.img-poster img {width: 250px; height: 150px;-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30); box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30); border-bottom: solid #ccc;border-radius: 3px 3px 5px 5px;}


Так идет один вид, это картинка немного закруглена по углам.

Красивый вид материала для uCoz

PS - если решите кнопки поменять, то все описано здесь по их выводу, а также как сделать размер больше.

Источник: uconet.ru
10.10.2016 Просмотров: 383 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
FeStemBer
FeStemBer 10.10.2016 00:581
0
Хотел написать, как все старо, просто уже привык в колонками, а такой вид материалов очень редко увидишь.
Kosten
Kosten 10.10.2016 01:032
0
Не думаю, что в колонку вид материалов такой популярный, он просто на какие то тематике вообще не подойдет. Если не считая, такие как кино онлайн или игровые, вообщем еще где можно скачать.

А на простых пабликах как к примеру этот сайт, то здесь вот как раз этот материал больше подойдет. Просто этот еще идет с тенями, и его визуально наблюдать намного лучше и красивее.
avatar
Start 10.10.2016 08:494
0
Ограничение описание поставить и норм будет...
Kosten
Kosten 10.10.2016 14:085
0
Можно и так в кратком описание если для файлов.
Brung
Brung 10.10.2016 01:083
0
FeStemBer, а чем он так не понравился, раньше все на таком виде сайты были и есть и очень много, больше чем на колонке. Просто ему бы шрифт немного увеличить, но это кто ставить будет, так просто мнение.
avatar