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

Светлый вид материала на блог для uCoz

Светлый вид материала на блог для uCoz
Создан в 2 колонки вид материала каталок блог на светлый дизайн сайта. Где на изображение красиво будет прописана рубрика материала. Автоматически будет показывать на нем три строчки краткого описание, что смотрится стильно. Просто снизу идет штора, которая остальные закрывает. И здесь нужно при установке будет редактировать, так как у сайта разная ширина. Но безусловно поставлены операторы на дату и на комментарий. По клику как по картинке или по названию, вы перейдете на основной материал.

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

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

Код:

Код
<div class="publ_vid">  
  <div class="publ_vid_img"><a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$"></a></div>  
  <div class="publ_vid_cat">Рубрика: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></div>
  <div class="publ_vid_title"><a href="$ENTRY_URL$">$TITLE$</a></div>
  <span>$DATE$</span> | <span><i class="comment-icon"></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?></span>
  <div class="publ_vid_message">$MESSAGE$</div>
</div>


CSS:

Код
.publ_vid {margin-bottom: 10px; display: inline-block; background-color: #fff; width: 330px; height: 412px; float: left; margin-right: 10px; text-align: center; padding-bottom: 10px;}  
  .publ_vid span {font-family: "PT Sans"; font-size: 11px; color: #000000;}
  .publ_vid_img {}  
  .publ_vid_img img {width: 100%; height: 220px; object-fit: cover;border-radius: 3px;}
  .publ_vid_title {padding: 3px 3px 5px 5px;}
  .publ_vid_title a {font-family: "PT Sans"; color: #555555; font-size: 14px; text-transform: uppercase;}
  .publ_vid_title a:hover {color: #C47575;}
  .publ_vid_message {padding: 9px; height: 45px; overflow: hidden; line-height: 135%;}
  .publ_vid_cat {background: #2D83C1; color: #fff; display: block; font-size: 13px; height: 28px; line-height: 28px; margin: -33px 0 0 0px; padding: 0 15px; position: absolute; width: auto; font-family: monospace;}
  .publ_vid_cat a {color: #fff;font-family: monospace;}
  .publ_vid_cat a:hover {text-decoration: underline;}

  .publ_vid_populyar {margin-bottom: 10px; display: inline-block; background-color: #fff;text-align: center;}  
  .publ_vid_img_populyar {}  
  .publ_vid_img_populyar img {width: 100%;height: 220px; object-fit: cover;}
  .publ_vid_title_populyar {padding: 3px 3px 5px 5px;}
  .publ_vid_title_populyar a {font-family: "PT Sans"; color: #555555; font-size: 14px; padding: 0; text-transform: uppercase; line-height: 1.5; word-spacing: 2px;}
  .publ_vid_title_populyar a:hover {color: #C47575;}
  .publ_vid_cat_populyar {background: #75BCC4; color: #fff; display: block; font-size: 13px; height: 28px; line-height: 28px; margin: -33px 0 0 0px; padding: 0 15px; position: absolute; width: auto; font-family: monospace;}
  .publ_vid_cat_populyar a {color: #fff;font-family: monospace;}
  .publ_vid_cat_populyar a:hover {text-decoration: underline;}


PS - здесь также стоит склонение комментариев, что на других очень редко встретишь.

Источник: uconet.ru
2016-12-21 Просмотров: 1091 Комментарий: (7)

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

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

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

Комментарий: 7
Kolinkor
Kolinkor 2016-12-21 06:161
0
Так он не чем не отличается от других, но вот с кратким описанием придумано здорово, чтоб не было какой то выше материал а какой то ниже, разве что само название будет большим и будет в две колонки написано.
Сафрон
Сафрон 2016-12-21 06:282
0
Здесь нужно в титле в название поставить жирный шрифт, то не очень название видно и минус в том, что название как было сказано по знаком меньше писать нужно.
Kosten
Kosten 2016-12-21 06:353
0
Здесь всегда можно же настроить под себя, это просто так создан, можно и жирным выделить и поставить красивый эффект при наведение, все можно уже самому доработать, главное, что код полный и рабочий.
avatar
KhakimJON 2016-12-21 08:364
0
Можно как то сделать на вид новостей? 07a
Kosten
Kosten 2016-12-21 20:315
0
Но а почему бы и нет, там операторы свои только, нужно поменять и на вид материалов новостей он подойдет.
csretven
csretven 2016-12-22 05:036
0
Если хотите поменять, то зайдите вид материала и ниже будут все операторы. И там написано, какой за что отвечает, и просто смените, дело 5 минут.
ZruBkul
ZruBkul 2016-12-22 05:157
0
А что там разные операторы, знаю что на новостях можно сделать краткое описание и выставить автоматически на 120 знаков с без пробелов.
avatar