Материал
По возможности мы всех призываем указывать источник материала если вы нашли у нас что-то дейстительно интересное и новое для себя.

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

Источник
Ссылки

Используйте быстрые ссылки для вставки в сообщениях форума.

Ccылка
BB-Code
HTML-код

Вид материалов для доски объявления uCoz

Дата и время публикации : 07.Фев.18 в 08:08 | Раздел : Вид материалов для uCoz


Параметр Значение
Дата публик. 07.Фев.18, Среда, 08:08
Адапт. дизайн
Обновления Не производились
Просмотрен 69

Красивый адаптивный вид материалов для модуля uCoz : Доска объявлений. Выполнен в светлых тонах, красиво будет сочетаться со светлым шаблонов, впрочем опытные веб-мастеры в CSS могут настроить и под свой дизайн каждую детальку данного скрипта. А теперь давайте перейдем к установке.

1. В вид материалов модуля :

<div class="wid_waak_bc " style="position: relative;">
  <div class="wid_waak_bc_img">
  <div class="img_num"><i class="fa fa-camera" aria-hidden="true"></i>  
   
  <?if($IMG_URL6$)?> 6 <?else?>  
  <?if($IMG_URL5$)?> 5 <?else?>  
  <?if($IMG_URL4$)?> 4 <?else?>  
  <?if($IMG_URL3$)?>3 <?else?>  
  <?if($IMG_URL2$)?> 2 <?else?>  
  <?if($IMG_URL1$)?> 1 <?else?>  
   
  <?endif?>  
  <?endif?>  
  <?endif?>  
  <?endif?>  
  <?endif?>  
  <?endif?>  
   
   
   
  </div>
  <a href="$ENTRY_URL$"><center><img src="$IMG_URL1$"></center></a>
  </div>
  <div class="wid_waak_bc_text" >
   
  <div style="float:right;">$MODER_PANEL$</div>
  <div class="wid_waak_bc_text_name"><a href="$ENTRY_URL$">$TITLE$</a></div>
  <div class="wid_waak_bc_text_cena">$OTHER1$</div>
  <div class="wid_waak_bc_text_cat">$CATEGORY_NAME$</div>
  <div class="wid_waak_bc_text_item">
  <span><i class="fa fa-calendar" aria-hidden="true"></i> $DATE$ в $TIME$</span>
  <span><i class="fa fa-eye" aria-hidden="true"></i> $READS$</span>
  </div>
   
  </div>
  <div id="clr"></div>
</div>


2. В CSS :

.wid_waak_bc {
  width: 100%;
  background: #FFF;
  margin: 20px 0;
  overflow: hidden;
  height: 190px;
  transition:1s;
}
.wid_waak_bc_img {
  width: 30%;
  height: 190px;
  float: left;
  overflow: hidden;
  position: relative;
  background: #FDA649;
   
  transition:1s;
}

.img_num {
  position: absolute;
  z-index: 2;
  color: #FFF;
  font-size: 13px;
  background: rgba(0,0,0,.6);
  padding: 4px 10px;
  bottom: 10px;
  left: 10px;
}
.wid_waak_bc_img img {
  height: 190px;
  width: 100%;
  object-fit: cover;
  transition:1s;
}
.wid_waak_bc_img img:hover {
  margin-left: -30px;
}
.wid_waak_bc_text {
  width: 70%;
  margin-left: 30%;
  padding: 20px;
  transition:1s;
}

.wid_waak_bc_text_name a {
  font-size: 24px;
  font-weight: bold;
  display: block;
  transition:1s;
}

.wid_waak_bc_text_cena {
  font-size: 24px;
  font-weight: bold;
  color: #517EAE;
  padding: 10px 0;
  transition:1s;
}

.wid_waak_bc_text_cat {
  font-size: 16px;
  color: #878787;
}

.wid_waak_bc_text_item {
  padding: 15px 0;
  color: #B5B5B5;
}
.wid_waak_bc_text_item span{
  margin-right: 15px;
}

@media screen and (max-width: 700px) {
  .wid_waak_bc_img {width: 120px;}
  .wid_waak_bc_img img {height: 100px;}
  .wid_waak_bc_text {width: auto;margin-left: 120px;padding: 10px;}
  .wid_waak_bc, .wid_waak_bc_img {height: 100px;}
  .wid_waak_bc_text_name a {font-size: 16px;}
  .wid_waak_bc_text_cena {font-size: 16px;}
  .wid_waak_bc_text_cat {display: none;}
  .wid_waak_bc_text_item {padding: 0px}
  .img_num {font-size: 10px}
}

@media screen and (max-width: 500px) {
  .wid_waak_bc_img {width: 100px;}
  .wid_waak_bc_img img {height: 90px;}
  .wid_waak_bc_text {width: auto;margin-left: 100px;padding: 10px;}
  .wid_waak_bc, .wid_waak_bc_img {height: 90px;}
  .wid_waak_bc_text_name a {font-size: 16px;}
  .wid_waak_bc_text_cena {font-size: 16px;padding: 3px 0;}
   
}

@media screen and (max-width: 350px) {
  .wid_waak_bc_img {width: 90px;}
  .wid_waak_bc_img img {height: 70px;}
  .wid_waak_bc_text {width: auto;margin-left: 90px;padding: 5px 10px;}
  .wid_waak_bc, .wid_waak_bc_img {height: 70px;}
  .wid_waak_bc_text_name a {font-size: 12px;}
  .wid_waak_bc_text_cena {font-size: 12px;padding: 2px 0;}
  .wid_waak_bc_text_item {padding: 0px;font-size: 10px;}
}

$OTHER1$ - Оператор выводит цену.
Также использовались шрифтовые иконки FontAwesome.

 

На этом установка закончена.

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

Оставить комментарий :


Требуется войти в свой аккаунт.

Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.

Вход Регистрация

Смотрите также :

Шаблон-слайдер с Parallax эффектом для uCoz

Полноэкранный красивый слайдер с возможностью перетаскивания слайдов (drag) и parallax эффектом. Очень прост в использовании и установке.