ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Серый вид материалов файлов для uCoz сайта

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

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

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

HTML

Код

<div class="talernuv-vid">
<h2 class="fernumig-vid"><a href="$ENTRY_URL$">$TITLE$</a></h2>
<div class="img-poster"><img src="$IMG_URL1$" alt="$TITLE$"></div>
<div class="vunersa-detali">
<li><i class="fa fa-eye"></i> Просмотров: $READS$</li>
<li><i class="fa fa-download"></i> Скачали: $LOADS$</li>
<li><i class="fa fa-comments" aria-hidden="true"></i> <?if($COMMENTS_NUM$)?>$COMMENTS_NUM$ комментар<?if($COMMENTS_NUM$%10=1&&$COMMENTS_NUM$%100!=11)?>ий<?else?><?if($COMMENTS_NUM$%10>=2&&$COMMENTS_NUM$%10<=4&&($COMMENTS_NUM$%100<10||$COMMENTS_NUM$%100>=20))?>ия<?else?>иев<?endif?><?endif?><?else?>нет комментариев<?endif?></li>
<li><i class="fa fa-wifi"></i><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></li>
</div>
<div class="eMessage">$MESSAGE$</div>
</div>

CSS

Код

.talernuv-vid{
float: left;
width: 98%;
margin: 10px 4px 5px -2px;
padding: 10px;
box-shadow: 0px 2px 5px 0px rgba(23, 22, 22, 0.46);
border-bottom: solid #6b5e5e;
border: 1px solid #b9b6b6;
border-radius: 3px;
background: #e0e1e2;
}

.img-poster img{
width: 99.5%;
height: 230px;
border: 2px solid #6e6f73;
border-radius: 3px;
object-fit: cover;
box-shadow: 0px 4px 10px rgba(132, 129, 129, 0.04), 0px 10px 30px -15px rgb(152, 152, 152);
}

.vunersa-detali{clear:both;
padding-left: 3px;
margin-top: 5px;
height: 25px;
line-height: 15px;
font-size: 12px;
border-bottom: #c1bcbc 1px solid;
padding-bottom: 5px;
color: #313748;
font-weight: bold;
}

.vunersa-detali li{
list-style: none;
margin-right: 15px;
display: inline-block;
margin-top: 5px;
}

.vunersa-detali li:last-child {float: right; margin-right: 2px;}

.vunersa-detali i{
color: #323852;
padding-right: 5px;
}

.vunersa-detali a{
color: #545457;
}

.vunersa-detali a:hover{
color: rgba(46, 120, 185, 0.95);
}

.talernuv-vid .eMessage {height: 67px;overflow: hidden;padding: 10px 0 10px!important;color: #393a3c;}

.fernumig-vid{
margin-bottom: 3px;
color: #FFFFFF;
padding: 5px 5px 10px 10px;
background-color: #565252;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 3px;
border: 1px solid #abacaf;
}

.fernumig-vid a{
text-decoration: none;
color: #fff;
font-size: 18px;
}

.fernumig-vid a:hover{
color: rgba(228, 228, 228, 0.91);
}

@media only screen and (max-width:360px){
.talernuv-vid{
float:none!important;
width:auto !important;
margin:0!important;
padding:10px;
!important;
}

}

@media only screen and (max-width:480px){
.talernuv-vid{
float:none!important;
width:auto !important;
margin:0!important;
padding:10px;
!important;
}

.img-poster{
float:none!important;
margin-right:0!important;
}

.img-poster img{
width:100%!important;
height:150px;
}

}

@media only screen and (max-width:640px){
.talernuv-vid{
float:none!important;
width:auto !important;
margin:0!important;
padding:10px;
!important;
}

}

@media only screen and (min-device-width:240px) and (max-device-width:768px){
.vunersa-detali,.post-time,.fa-clock-o::before{
display:none;
}

.fernumig-vid{
background-color:#283450;
}

.talernuv-vid{
margin:10px 0 !important;
width:auto !important;
}

.img-poster img{
border:0;
}

}

Проверено на тестовом:

Это по умолчанию, зависит от фиксаций;

Планшет:

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

Смартфон:

Стандартный телефон;

Адаптивный вид материалов для сайта uCoz

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

Чтоб формы все производились, для этого шрифтовые кнопки в обязательно подключаем.

Идея от: D-melochi.Ru

20 Октября 2017 Просмотров: 1334 Комментариев: (5)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 5
Порядок вывода комментариев: Kosten 20 Октября 2017 02:25¹ 0 Здесь идентичный вид материалов, только уже в темном дизайн, что кроме палитры не чего не менялось. Что как понимаете, вы можете под любой оттенок выставить. Это по умолчанию под фиксированную ширину. Где то планшет или другой гаджет. Нужно скачать архив и в нем текстовой документ. где представлен код и CSS по материал. СКАЧАТЬ VIP36RUS 20 Октября 2017 12:30² 0 Все похожи на один только вид малость меняется. Сделал бы лучше типо такого же только с дополнительными изображениями по вверх основного. Что бы приблизительно было понятно можешь посмотреть у меня в загрузках Там блок "Наш выбор" У меня на 2м форуме ipsguru.ru/files/ Kosten 20 Октября 2017 14:14³ 0 Просто вид материала переделан и где по адаптивности доработан, изначально шел в две колонки, сейчас стилистики немного добавлены, выставлен на адаптивность, и в одну колонку. По умолчанию в таком формате. По сути эти вид материала не сильно кому нужны, это просто фан перекраивать. workman 20 Октября 2017 16:14⁴ 0 Все медиа заменить одним чтобы было меньше запросов Код @media only screen and (min-device-width:240px) and (max-device-width:768px){.vunersa-detali,.post-time,.fa-clock-o::before{display:n one;} .talernuv-vid{float:none!important;width:auto !important;margin:10!important;padding:10px;!important;background-color:#283450;} .img-poster{float:none!important;margin-right:0!important;} .img-poster img{border:0;width:100%!important;height:300px;} } Kosten 22 Октября 2017 18:41⁵ 0 Сейчас в кода все стили убраны и прописаны в CSS. А эти стили можете заменить на медео, что отвечают за адаптивность, просто они собраны, в материале прописаны по классом отдельно.