» »

Универсальный вид материалов файлов для uCoz

Универсальный вид материалов файлов для uCoz

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

Описание его идет полное для поисковой системы, просто так сделано, что половина скрыта. Это делается для того, чтоб корректно все смотрелось. Что по изображению, да оно не широкое, но на нем отлично видно название материала. Просто там установлен темно прозрачный фон, где при наведении курсора происходит эффект и он исчезает. Здесь подключены шрифтовые иконки, которые и дополняют основную стилистику.

Его разрабатывали под файлы игровые, где выставлены просмотр, и сколько их было и скачивание, и кнопка под комментарий, что также выводит их. Кто имеет на сайте больше одного модуля, вы можете выставить на этот вид материала на новости как пример. Но кому понравился и считает его, чтоб был главным видом на портале, то здесь вы еще можете его редактировать и вывести изображение больше или описание, просто сделать как вам нужно.

Эти стили поставлены на фиксированную ширину, как здесь на портале.

Вид материала модуля блог сайта uCoz

Приступаем к установке:

Для начало нужно подключить шрифтовые иконки на материал, копируем стиль и ставим вверх сайта, и сохранить и на этом все подключение.

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


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

Код
<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>


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;}

Здесь также можно оператор который выводит краткое описание поставить в условие, что даст вам возможность выставить столько знаков, то количество, которое появится. Вообщем есть очень много возможностей его доработать и сделать оригинальным, или если вам такой стиль нравится, то установить.
15.03.2017 Просмотров: 542 Комментарий: (9)

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

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

Комментарий: 9
Scheme
Scheme 15.03.2017 02:341
0
Прикольный вид материала, но его если ставить, чтоб сайт был сильно фиксирован по ширине, на широкий он подойдет, но смотреться не так будет на на узком формате.
Марковичь
Марковичь 15.03.2017 02:382
0
Сейчас уже вид материала без шрифтовых иконок не найдешь, а этот вид не очень нравится, можно его применить, но даже не представляю тему для него, но если игровая была, видать подошел.
Kolinkor
Kolinkor 15.03.2017 02:443
0
Не чего не понимаете в минимализме, хотя этот вид не относится к нему, но лучше его поставить, чем все один и тот же устанавливают.
maniacvn
maniacvn 15.03.2017 09:264
0
Узкий широкий все в стилях можно подправить под себя 11a
Kosten
Kosten 15.03.2017 13:185
0
Чем этот вид не понравился?
maniacvn
maniacvn 15.03.2017 13:216
0
А я что сказал что мне не понравился?
Kosten
Kosten 15.03.2017 13:237
0
Забыл проверить на адаптивность, сейчас хорошо что на тестовом остался, так почти все нормально, под планшет точно корректно будет смотреться.

maniacvn
maniacvn 15.03.2017 13:258
0
отлично выглядит.
Kolinkor
Kolinkor 15.03.2017 13:429
0
А что через браузер не проверить?
avatar