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

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

31.12.2017 1849 0 milan_shubin Все для uCoz Вид материалов
Описание вид материала:


Здравствуйте! сегодня хочу предложить вашему внимание очередной вид материалов для сайта игровой тематике с адаптацией под разные размеры экранов.

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



Установка :
Для начало мы просто подключим стили нашего вида
для этого просто скопируйте код и добавьте его в свою таблицу стилей в самый конец

Код
.waak_vid_mat_talantlev_bc {  
  width: 29%;  
  float: left;  
  margin: 10px 2%;  
}  
.waak_vid_mat_talantlev_bc_img img {  
  object-fit: cover;  
  width: 100%;  
  max-width: 100%;  
  height: 150px;  
}  

.waak_vid_mat_talantlev_bc_fot {  
  position: relative;  
  padding-left: 70px;  
  min-height: 40px;  
  background: #FFF;  
}  
.img_cat_bs {  
  width: 50px;  
  height: 50px;  
  background: #498BFA;  
  display: block;  
  position: absolute;  
  top: -20px;  
  left: 10px;  
}  
.img_cat_bs a {  
  display: block;  
  font-size: 22px;  
  text-align: center;  
  line-height: 50px;  
  color: #FFF;  
}  
.waak_vid_mat_talantlev_name {  
  font-size: 16px;  
  font-weight: bold;  
  color: #434343;  
  padding: 5px 0;  
  display: block;  
  padding-right: 80px;  
}  

.waak_vid_mat_talantlev_cnopa {  
  display: block;  
  width: 70px;  
  padding: 4px 0;  
  text-align: center;  
  background: #498BFA;  
  position: absolute;  
  right: 10px;  
  top: 5px;  
}  
.waak_vid_mat_talantlev_cnopa a {  
  color: #FFF;  
  font-size: 11px;  
}  
.waak_vid_mat_talantlev_cnopa:hover {  
  background: #000;  
}  

@media screen and (max-width: 900px){  
.waak_vid_mat_talantlev_bc {width: 46%;}  
}  

@media screen and (max-width: 600px){  
.waak_vid_mat_talantlev_bc {width: 96%;}  
}

Теперь сам код вида материалов :
Код
<div class="waak_vid_mat_talantlev_bc">  
  <div class="waak_vid_mat_talantlev_bc_img">  
  <a href="$ENTRY_URL$" title="$TITLE$"><img src="$IMG_URL1$"></a></div>  
  <div class="waak_vid_mat_talantlev_bc_fot">  
  <span class="img_cat_bs">  
<a href="$CATEGORY_URL$" title="$CATEGORY_NAME$">  

<?if($CID$="1")?><i class="fa fa-folder-open" aria-hidden="true"></i><?endif?>  
<?if($CID$="2")?><i class="fa fa-futbol-o" aria-hidden="true"></i><?endif?>  
<?if($CID$="3")?><i class="fa fa-frown-o" aria-hidden="true"></i><?endif?>  
</a>  
</span>  
  <span class="waak_vid_mat_talantlev_name">$TITLE$</span>  
  <span class="waak_vid_mat_talantlev_cnopa"><a href="$ENTRY_URL$" title="$TITLE$">подробнее</a></span>  
  </div>  
</div>

В коде выше есть такие строчки:
Код
<?if($CID$="1")?><i class="fa fa-folder-open" aria-hidden="true"></i><?endif?>  
<?if($CID$="2")?><i class="fa fa-futbol-o" aria-hidden="true"></i><?endif?>  
<?if($CID$="3")?><i class="fa fa-frown-o" aria-hidden="true"></i><?endif?>

это и есть условие для вывода разных картинок для категорий
Код
$CID$="1"

это ид категории
Код
<i class="fa fa-futbol-o" aria-hidden="true"></i>

это иконка которая будет выводится для данной категории

Если нужно увеличить список категорий со своими картинками просто добавьте ещё такую строчку
Код
<?if($CID$="ТУТ ИД КАТЕГОРИИ")?>ТУТ КОД ИКОНКИ<?endif?>

Теперь подключим шрифтовые иконки если они не подключены для этого просто добавьте в самый вер вашей таблицы стилей вот такую строчку
Код
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);

Подчеркну этот шаг нужно делать тем у кого ещё не подключены данные иконки а у кого подключены просто пропустите этот шаг

Готово!

Автор: Waak
Материал взять с сайта: Talantlev
Вид в три колонки для сайта игровой тематике для uCoz
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: milan_shubin
ИсточникМатериал взят с другого сайта
Комментарии (0)
Добавить комментарий
class="add-comm-form clearfix add-shadow2" id="add-comm-form">
avatar