В данном материале я хочу поделиться с вами одним интересным видом материалов для ваших сайтов, которые вы создали в системе uCoz. Сам вид этого материала не чем не выделяется нежели приятным и нежным видом и небольшим эффектом, который даёт объёмный вид этому решению.
Этот вид материалов для uCoz, отлично будет красит ваш сайт или блог который вы делаете для себя и своих пользователей а так же гостей.
Для установки вам нужно, скопировать ниже приведённый код и вставить в вид материалов нужного вам модуля.
Код
<div class="eBlock-vid">
<h2 class="eTitle" style="text-align:left;"><a href="$ENTRY_URL$">$TITLE$</a></h2>
<span class="post-details">Автор: <a href="$PROFILE_URL$">$USERNAME$</a> | Раздел: <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>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Далее дополните свои стили сайта ниже приведёнными, добавьте их в самый низ стилей и сохраните.
Код
.eTitle {font-size: 19px; font-family: 'PT Sans'; margin-bottom: 15px; color: #FFFFFF; font-weight: 600; padding: 5px 5px 5px 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; background-color: #3F3F3F;}
.eTitle a {text-decoration: none; color: #fff; font-weight: 600;}
.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: #1abc9c;}
.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;}
Установка завершена, если вы заметили, не чего сложного и невозможного мы с вами не делали.
В материале используются шрифтовые иконки Font Awesome, как их подключить на свой сайт можно узнать в этой статье которое находится на форуме!
