» »

Светлый и адаптивный вид материалов uCoz


Светлый и адаптивный вид материалов uCoz

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

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

Как пример, так будет на узком экране показывать.

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

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

Это основной код под материалы.

Код
<div class="news-element relative">
<div class="row">
<div class="col-sm-3">
<div class="img-wrapper relative">
<a href="$ENTRY_URL$">
<img src="http://zornet.ru/zorner_ru_1/Veb/news-empty.png" alt="$TITLE$" style="background: url($IMG_URL1$) 50% 50% no-repeat; background-size: cover;" />
<div class="news-date">$DATE$</div>
</a>
</div>
</div>
<div class="col-sm-9">
<div class="element-content">
<h5><a href="$ENTRY_URL$">$TITLE$</a></h5>
<div class="element-info">
<span class="e-category"><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></span>
<span class="e-reads">$READS$</span>
<span class="e-comments"><a href="$ENTRY_URL$#comments">$COMMENTS_NUM$</a></span>
</div>
<div class="text"><?if(len($MESSAGE$)>160)?><?substr($MESSAGE$,0,160)?>...<?else?>$MESSAGE$<?endif?></div>
</div>
</div>
</div>
</div>

CSS:

Код
.col-sm-3, .col-sm-9 {
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
}
@media (min-width: 768px) {
.col-sm-3 {float: left;width: 25%;}
.col-sm-9 {float: left;width: 75%;}
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.row:before,
.row:after
{
display: table;
content: " ";
}
.row:after{
clear: both;
}
@media (min-width: 1230px) {
.row, .my-row {
margin-left: -10px;
margin-right: -10px;
}
}
.news-list table.dayAllEntries{
margin-bottom: 50px;
}
.news-element{
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #C7C7C7;
font-size: 17px;
}
#allEntries > div:first-of-type .news-element,
.news-list .archiveEntries > div:first-of-type .news-element{
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.news-element h5{
margin-top: -5px;
}
.news-element h5{
margin: -5px 0 20px;
font-size: 16px;
line-height: 1.2;
}
.news-element h5 a{
text-decoration: none;
color: #00487F;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.news-element h5 a:hover{
color: #2E2E2E;
}
.news-element img{
width: 100%;
}
.news-date{
position: absolute;
top: 0;
left: 0;
padding: 2px 15px;
color: #fff;
background: #00487F;
font-size: 14px;
}
.news-list .element-info{
margin: -5px 0 15px;
}
.element-info{
margin: 0 0 15px;
font-size: 16px;
color: #969696;
}
.element-info a{
text-decoration: none;
color: #969696;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.element-info a:hover{
color: #2E2E2E;
}
.element-info span{
margin-right: 10px;
}
.element-info .fa{
margin-right: 4px;
}
.img-wrapper img {width: 100%;}  
.img-wrapper{position: relative;}  
.news-element .img-wrapper a:after{
background: url(http://zornet.ru/zorner_ru_1/Veb/link-icon.png) 50% 50% no-repeat rgba(0,0,0,0.7);
background-size: 0 0;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
content:"";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
z-index: 5;
}
.news-element .img-wrapper a:hover:after{
opacity: 1;
background-size: 36px 36px;
}
@media only screen and (max-width: 767px) {
.news-element .img-wrapper{margin-bottom: 20px;}
.news-element{padding-top: 40px;}
}
.element-content{
padding: 20px;
background: #F5F5F5;
border: 1px solid #E2E6E7;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}  
@media only screen and (min-width: 768px) {
.img-wrapper .text{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
background: rgba(0,0,0,0.5);
color: #fff;
}

Как сами видите установка здесь не сложная, можно сказать стандартная, но главное это адаптивность под все размеры монитора и под мобильные аппараты.
08.05.2017 Загрузок: 3 Просмотров: 307 Комментарий: (7)

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

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

Комментарий: 7
Марковичь
Марковичь 08.05.2017 23:201
0
Для чего выкладывать не доработанный по дизайн вид материала, если он адаптированный, это не означает, что его ставить можно, но все же это редкость как адаптация, что в такой случай можно, так как в описание правильно написано, любой доработает. Все же если его сделать по дизайн, кому то не подойдет, он просто может цвета исправить, а здесь пока нужно вывести правильно изображение, чтоб ровно с описанием было.
tsakonter
tsakonter 08.05.2017 23:282
0
Мне не очень понятно, в чем он не доработан, но сократите краткое описание и все будет ровно, что рамки нет на изображение, но как то некоторые без нее обходятся, здесь дело самого админа, делать ему это или так пойдет.
ucozmental
ucozmental 09.05.2017 07:403
0
А чем интересно вам этот вид не устроил. Если он полностью адаптивный, то вам остается как на новогоднюю елку навешать игрушек, и все, у вас свой вид материалов, можно вообще в темный сделать и эффект у него под темный больше подойдет.
Kosten
Kosten 09.05.2017 08:024
0
Но с елью тут не нужно сравнивать, но по сути так, что идет скрипт, а дизайн по сути на нем отсутствует, что можно добавить.
csafrones
csafrones 13.05.2017 16:225
0
Как минимум, у вас уже есть каркас и он адаптивный, а далее все зависит от того, как вы сами хотите его видеть по дизайн или просто его по стилям изменить.
Brung
Brung 13.05.2017 16:446
0
Так про это и написано, все привыкли, что скопировал и поставил, а всегда нужно подгонять, а в этом случай, еще и создавать дизайн, хотя он по сути есть, но он простой.
ucozmental
ucozmental 13.05.2017 16:497
0
Да сделать просто шире и выше сам экран, где выводится картинка, и можно ставить, или сразу задать краткое описание по знакам и количеству, чтоб был каждый вид одинаков.
avatar