• Страница 1 из 1
  • 1
Форум Kentos311 » uCoz » Скрипты для сайта » Адаптированный вид материалов для uCoz (Красивый и особенный вид материала для uCoz)
Адаптированный вид материалов для uCoz
Kentos311Дата: Вторник, 09.01.2018, 14:09 | Сообщение # 1
Сообщений: 452
Статус:

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

Установка:
Для начало нужно подключить ШРИФТОВЫЕ ИКОНКИ FONT AWESOME, В верхняя часть сайта вставляем следующий код:
Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


1. Таблица стилей CSS:
Код
.f_viewn {width: 387px;height: 195px;overflow:hidden;background:#fffdfd;box-shadow:0px 5px 10px 0px #e4e4e4;border-radius:5px;margin: 0 0 17px 6px;float:left;transition:0.3s;}  
.f_viewn:hover {background:#f5f5f5;}  
.f_viewn:hover .f_title span {background:rgba(0, 0, 0, 0.2);}  
.f_title {height:62px;overflow:hidden;border-bottom:1px solid #f0f0f0;background-size:cover;background-position:center;background-repeat:no-repeat;}  
.f_title span {transition:0.3s;background:rgba(0, 0, 0, 0.5);width: 375px;height:52px;color:#fffdfd;display:block;text-align:center;font-size:18px;text-shadow:0px 2px 2px #000;text-transform:uppercase;padding:15px 5px 0px 5px;}  
.f_cont {color:#757575;font-size: 14px;padding: 5px;overflow:hidden;height:65px;}  
.f_cont br {display:none;}  
.f_details {height:41px;display:block;border-top: 1px solid #E5E5E5;line-height:40px;color:#222121;padding:0 10px;color:#757575;}  
.f_details span {font-size:13px;  
color:#757575;  
padding: 4px 8px;  
border-radius: 5px;  
border: 1px solid #8a8a8a;}  
.f_details span i {font-size:12px;}  

.left {float:left;}  
.right {float:right;}  
.center {text-align:center;}  
.hidden {overflow:hidden;}  
.side_content {width:1150px;display:table;}  
.side_left {float:left;width:250px;margin:0 8px 0 0;}  
.side_middle {width:635px;overflow:hidden;}  
.side_right {float:right;width:250px;}  
.side_cont {overflow:hidden;background:#fffdfd;box-shadow:0px 5px 10px 0px #e4e4e4;border-radius:5px;}  
.side_bg {overflow:hidden;background:#fffdfd;box-shadow:0px 5px 10px 0px #e4e4e4;border-radius:5px;padding:5px;margin-bottom:5px;color:#3e3e3e;}  
.side_bg a {text-decoration:underline;}  
.side_bg a:hover {text-decoration:none;}  
.side_bg h1 {font-size:18px;padding-left:3px;}  
.side_nav {overflow:hidden;background:#fffdfd;box-shadow:0px 5px 10px 0px #e4e4e4;border-radius:5px;padding:5px;margin-bottom:5px;font-size:14px;color:#3e3e3e;}  
.side_nav span {font-size:12px;text-transform:uppercase;}  
.side_nav span a {color:#7f7f7f;}  
.side_nav a:hover {text-decoration:underline;}  
.side_smtext {font-size:12px;color:#888;padding:5px 3px;}  

#wrapper {width:1150px;margin:0 auto;}


2. Вид материала:
Код
<div id="entryID1" title=""><a href="$ENTRY_URL$" title="">  
<div class="f_viewn" title="$TITLE$">  
<div class="f_title" style="background-image:url($IMG_URL1$);" title=""><span>$TITLE$ </span></div>  
<div class="f_cont" title="$TITLE$">$MESSAGE$</div>  
<div class="f_details" title="">  
<span>$CATEGORY_NAME$</span>  
<div class="right">  
<span><i class="fa fa-eye fa-fw"></i> $READS$</span>  
<span><i class="fa fa-download fa-fw"></i> $LOADS$</span>  
<span><i class="fa fa-comments fa-fw"></i> $COMMENTS_NUM$</span>  
</div>  
</div>  
</div>  
</a></div>


Красивый и особенный вид материала для uCoz, также он адаптирован под мобильные устройства, на телефоне смотрится очень красиво.
Прикрепления: 6408396.jpg(60.6 Kb)
 
Форум Kentos311 » uCoz » Скрипты для сайта » Адаптированный вид материалов для uCoz (Красивый и особенный вид материала для uCoz)
  • Страница 1 из 1
  • 1
Поиск: