» »

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

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

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

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

HTML

Код
<div class="zornet_nihili_pili-fication">
<div class="zornet_nothing_segnumug">
<div class="kawnto_hoohoord_enenthurnuk">
<?if($IMG_URL1$)?>  
<img src="$IMG_URL1$" class="ntosne_rosntuong_thuntrova"/>
<?else?>
<img src="http://zornet.ru/Ajaxoskrip/Forma_skriptov/zZdU4oy.jpg" class="ntosne_rosntuong_thuntrova"/>  
<?endif?>  
</div>  
<a href="$ENTRY_URL$"><h4 class="constit_tutio_nellemeng">$TITLE$</h4></a>
<span class="terbeam_tengesel"><i class="fa fa-user-circle-o" aria-hidden="true"></i> $USERNAME$<span style="padding-left:7.5px;"></span> <i class="fa fa-check-square-o" aria-hidden="true"></i> $CATEGORY_NAME$<span style="padding-left:7.5px;"><i class="fa fa-comments-o" aria-hidden="true"></i></span> $COMMENTS_NUM$ <span style="padding-left:7.5px;"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> $RATING$</span></span>  
<div class="gtukam_compara_tivorms">
<p>
$MESSAGE$
</p>
</div>
</div>
</div>

CSS

Код
.zornet_nihili_pili-fication {
  position: relative;
  width: 48.9%;
  margin: 9px 0.5%;
  float: left;
}  

.zornet_nothing_segnumug {
  padding: 1.95px;
  border-radius: 3.78px 3.78px 3px 3px;
  margin-bottom: 3px;
  background-clip: padding-box;
  background-color: #231f1f;
  box-shadow: 0 0 5px 1px rgba(88, 81, 81, 0.51);
  border: 1px solid rgba(94, 95, 97, 0.92);
}
a {
  text-decoration: none;
}
.constit_tutio_nellemeng {margin-bottom: 9px !important;color: #c8dbe6 !important;font-weight: 500;text-decoration:none;font-size: 15.7px;overflow: hidden;height: 18.1px;line-height: 19px;padding-left: 5.32px;}
.constit_tutio_nellemeng:hover {
color : #87d7ef !important;
text-decoration:none;
}
.terbeam_tengesel {font-size: 11.5px;margin-top: 3px !important;color: rgb(157, 250, 255);font-weight: 300;padding: 0px 0px 0px 7px;text-shadow: 0 1px 0 #0e0e0e;}
.ntosne_rosntuong_thuntrova {border-radius: 2.93px 2.93px 0px 0px;margin-bottom: -8px !important;width:100%;height: 203px;border: 1px solid #44464c;box-shadow: 0px 3px 18px 0px rgba(74, 71, 71, 0.52), 0px 9px 11px 3px rgba(31, 29, 29, 0.9);}
.tucon_siderable {font-size : 14px !important;margin-top: 8px !important;margin-bottom: 4.99px !important;color: #2e3033 !important;text-align: justify;}
.kawnto_hoohoord_enenthurnuk:hover img {opacity: 0.7;}  
.kawnto_hoohoord_enenthurnuk img {-webkit-transition: all .3s cubic-bezier(0.25, 0.1, 0.32, 0.82);}
.gtukam_compara_tivorms {overflow: hidden;height: 92.5px;line-height: 19.1px;text-align: justify;color: #ecebeb;font-size: 13.1px;padding: 0px 7px 0px 7px;opacity: 0.9;margin-bottom: 12px;}

@media screen and (max-width: 1100px) {  
  .zornet_nihili_pili-fication {width: 48%;margin: 1%;}  
}  
@media screen and (max-width: 600px) {  
  .zornet_nihili_pili-fication {width: 96%;margin: 2%;}  
}

Здесь еще закреплены шрифтовые иконки, что по тематике можно изменить.
2018-01-28 Просмотров: 585 Комментарий: (0)

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

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

Комментарий: 0
avatar