» »

Стильный вид новостей для сайта uCoz

Стильный вид новостей для сайта uCoz

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

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

Теперь вы можете активировать этот модуль и выставлять там свою новостную полосу, и что нужно заметить, что на главную страницу отлично подойдет. И когда гость или пользователь сайта будет заходить, он сразу будет наблюдать дату, и само изображение на нем. А это свежая статья написана или по картинке увидеть, интересна новостная ветка вас, все очень просто и доступно в этом плане.

Так он будет смотреться, если вы решили зайти вид материалов и комментариев к нему, а точнее навели курсор.

Светлый новостной блог на юкоз

В админ панели меняем полностью вид материала этой категорий:

Код
<p class="calendar">$WDAY$ <em>$DATE$</em></p>  
<a class="rel-movie img-box" href="$ENTRY_URL$">  
<img src="$IMG_URL1$" alt="$TITLE$" class="lazyOwl"/>  
<div class="rel-movie-title">$TITLE$<div class="rel-movie-title2">$MESSAGE$</div></div>  
</a>

CSS:

Код
/* Вид новостей  
----------------------------------------------- */  
.rel-movie {display:block; height:190px; box-shadow: 0px 0px 35px -9px #000000;}  
.rel-movie-title {  
  font-size: 16px; text-shadow: 0.1em 0.1em 0.2em black; color: aliceblue;  
  width: 30%; height:170px; position:absolute; right:0; bottom:0; padding:10px; text-align:center;  
background-color:rgba(0,0,0,0.6); font-weight:600;}  
.rel-movie-title2 {padding:10px; text-align:center; font-size: 10px;  
  color:#fff; text-transform: uppercase;  
  text-align: center; font-weight:300;}  
.rel-movie:hover .rel-movie-title {background-color:#232323; background: #3eb1f4;  
  border-color: #3eb1f4;  
  color: #ffffff;  
  box-shadow: 0 6px 11px 0 rgba(62, 177, 244, 0.35);}  
.rel-movie {height:190px;  
  margin: 0 auto;  
  width: 550px;  
  max-width: 100%;  
}  
.img-box {margin: 8px; overflow:hidden; position:relative;}  
.img-box img {width:100%; min-height:100%;}  
.calendar{  
  margin:.25em 10px 10px 0!important;  
  padding-top:5px;  
  float:left;  
  width:60px;  
  background:#333;  
  background: -webkit-gradient(linear, left top, left bottom, from(#1E90FF), to(#00BFFF));  
  background: -moz-linear-gradient(top, #333, #333);  
  font:bold 20px/40px Arial Black, Arial, Helvetica, sans-serif;  
  text-align:center;  
  color:#fff;  
  text-shadow:#fff 0 1px 0;  
  -moz-border-radius:3px;  
  -webkit-border-radius:3px;  
  border-radius:3px;  
  position:relative;  
  -moz-box-shadow:0 2px 2px #888;  
  -webkit-box-shadow:0 2px 2px #888;  
  box-shadow:0 2px 2px #888;  
  }  
/* иконка календарь  
----------------------------------------------- */  
.calendar em{  
  display:block;  
  font:normal bold 11px/15px Arial, Helvetica, sans-serif;  
  color:#fff;  
  text-shadow:#00365a 0 -1px 0;  
  background:#04599a;  
  background:-webkit-gradient(linear, left top, left bottom, from(#080), to(#085));  
  background:-moz-linear-gradient(top, #04599a, #00365a);  
  -moz-border-radius-bottomright:3px;  
  -webkit-border-bottom-right-radius:3px;  
  border-bottom-right-radius:3px;  
  -moz-border-radius-bottomleft:3px;  
  -webkit-border-bottom-left-radius:3px;  
  border-bottom-left-radius:3px;  
   
  }  
.calendar:before, .calendar:after{  
  content:'';  
  float:left;  
  position:absolute;  
  top:5px;  
  width:8px;  
  height:8px;  
  background:#111;  
  z-index:1;  
  -moz-border-radius:10px;  
  -webkit-border-radius:10px;  
  border-radius:10px;  
  -moz-box-shadow:0 1px 1px #fff;  
  -webkit-box-shadow:0 1px 1px #fff;  
  box-shadow:0 1px 1px #fff;  
  }  
.calendar:before{left:11px;}  
.calendar:after{right:11px;}  
.calendar em:before, .calendar em:after{  
  content:'';  
  float:left;  
  position:absolute;  
  top:-5px;  
  width:4px;  
  height:14px;  
  background:#dadada;  
  background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa));  
  background:-moz-linear-gradient(top, #f1f1f1, #aaa);  
  z-index:2;  
  -moz-border-radius:2px;  
  -webkit-border-radius:2px;  
  border-radius:2px;  
  }  
.calendar em:before{left:13px;}  
.calendar em:after{right:13px;}  
/* ucozz.top  
----------------------------------------------- */

PS - здесь видим, что нет не одной ссылки и если установить его на интернет ресурс и проверить на адаптивность под мобильные аппараты, то он по идее должен отображаться корректно и понятно.

Источник: ucozz.pro
07.03.2017 Загрузок: 4 Просмотров: 680 Комментарий: (17)

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

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

Комментарий: 17
Kolinkor
Kolinkor 07.03.2017 12:121
0
maniacvn, это же не системный вид материала, или вы его написали, если так, что смотрится красиво и под новости как не как отлично подойдет, под файлы еще бы.
Sтранник
Sтранник 07.03.2017 12:422
0
Для каталог файлов, Можно сделать и еще операторы можно добавить, Попробую изменить,)))
Kosten
Kosten 07.03.2017 12:543
0
Так не плохо смотрится, но если еще для каталога файлов, то вообще будет блеск, чтоб на одном сайте один дизайн был.
maniacvn
maniacvn 07.03.2017 12:564
+1
Да щас над этим работаю чтоб для каталога файлов)просто этот делал для садика а там не надо не лайков не коментов только название и дата)
Kosten
Kosten 07.03.2017 13:045
0
maniacvn, мне так кажется, что на новостях вообще лайки не нужны, так как там материал дают как факт и его глупо оценивать. Оценивают, то что сам сделал или статью написал, но кому нужно, тот может и лайк поставить.
Сафрон
Сафрон 07.03.2017 13:256
+1
Вот под файлы бы еще, это точно подмечено.
Kosten
Kosten 07.03.2017 13:337
0
Так как понял начали пилить под этот модуль.
csretven
csretven 07.03.2017 16:438
+1
Что в нем стильного, вид как вид, но дата выведена, здесь за это сенькью, а так точно для социального проекта сделан.
trem200
trem200 08.03.2017 19:379
0
Вид материала отменный, нормально смотрится в двух колонках.
Kosten
Kosten 08.03.2017 19:5510
0
Он же в одну колонку идет.
maniacvn
maniacvn 08.03.2017 22:4212
+1
Ну да глянул у тебя в 2 колонки тоже ни че так современо
maniacvn
maniacvn 08.03.2017 22:4111
0
Какая разница можно и в две
trem200
trem200 09.03.2017 00:4313
0
самое главное, что всё нормально смотрится
ucozmental
ucozmental 10.03.2017 14:4114
0
Что под 2 колонки не показали как смотрится?
maniacvn
maniacvn 10.03.2017 17:1715
0
Ну наверное потому что он не делался под две колонки это trem200 сам делал себе)
maniacvn
maniacvn 10.03.2017 17:2016
0
Kolinkor
Kolinkor 10.03.2017 17:3217
0
Не очень понятно, набор картинок, лучше в одну колонку.
avatar