• Страница 1 из 1
  • 1
Вид материала для кино сайта uCoz
Kentos311Дата: Вторник, 09.01.2018, 13:43 | Сообщение # 1
Сообщений: 729
Статус:

Классический и современный вид материала для системы uCoz. Этот вид отлично подойдет под светлый дизайн сайта, также он адаптирован под мобильные устройства, и сразу же подстраивается под них. Такой вид материала можно использовать на игровом, или блог или тот-же кино сайта. Он выводит следующие информацию, это изображение самого файла, его название, просмотров, комментарий, рейтинг, дату когда был добавлен, и кнопку "Смотреть". Данную кнопку можно изменить на любое слово, также при наведении на неё, она делает анимацию цвета, в зеленый. Всё очень красиво и эффекто смотрится. Расположение ваших файлов будет в колонку, вы сами будете его подстраивать под ширину своего дизайна.

Установка:

1. В таблицу стилей CSS вставить:
Код
.load-vid-eTitle {  
  color: #FFFFFF;  
  padding: 3px 5px 10px 5px;  
  background-color: rgba(18, 18, 18, 0.8);  
  height: 70px;  
  text-align: center;  
  opacity: 0.9;  
  margin-top: -83px;  
  border-radius: 0 0 8px 8px;  
}  

.load-vid-eTitle h2 {  
  font-size: 13px;  
  color: #fff;  
  font-family: Play;  
  font-weight: bold;  
}  

.load-vid-img {  
  height: 350px;  
}  
.load-vid-img img {  
object-fit: cover;  
  height: 350px;  
  border-radius: 8px;  
}  

a.dalee-knopochka {  
display: inline-block;  
  padding: 2px 10px;  
  background-color: #3498DB;  
  color: #ffffff;  
  position: relative;  
  font-family: Play;  
  border-radius: 8px;  
}  

a.dalee-knopochka:before {  
background-color: rgba(255,255,255,0.3);  
content: "";  
width: 80px;  
height: 40px;  
position: absolute;  
left: -40px;  
top: -10px;  
transform: rotate(-45deg);  
}  

a.dalee-knopochka:hover {  
background-color: #658539;  
color: #ffffff;  
}  
.eDetails3 {  
  font-family: Play;  
  font-size: 12px;  
  color: #939fae;  
  border-top: solid 2px #E4E4E4;  
  overflow: hidden;  
  padding: 5px 0 5px 0;  
}  

#allEntries div[id*="entryID"]{margin:0 2% 20px 0;width:23.5%;float:left;}  
#allEntries div[id*="entryID"]:nth-child(4n){margin:0 0 20px 0;}  

@media only screen and (max-width: 940px) {  
#allEntries div[id*="entryID"]{width:48%;margin: 0 4% 20px 0;}  
#allEntries div[id*="entryID"]:nth-child(2n){margin: 0 0 20px 0 !important;}  
#allEntries div[id*="entryID"]:nth-child(3n){margin: 0 4% 20px 0;}  
}  
@media screen and (max-width: 640px) {  
#allEntries div[id*="entryID"]{width:auto !important;margin: 0 0 20px 0 !important;float:none !important;}  
}


2. Вид материала:
Код
<div class="load-vid">  

  <div class="load-vid-img">  
  <a href="$ENTRY_URL$">  
<img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$">  
  </a>  
  </div>  
  <div class="load-vid-eTitle"><h2>$TITLE$</h2></div>  
<div class="eDetails">  
  <div style="float:right"><?if($RATING$)?><span class="e-rating"><span class="ed-value"><span id="entRating$ID$">$RATING$</span>/<span id="entRated$ID$">$RATED$</span></span></span><?endif?></div>  
<span class="e-reads"><span class="ed-value">$READS$</span></span>  
  <?if($COMMENTS_URL$)?><a class="e-comments" href="$COMMENTS_URL$">($COMMENTS_NUM$)</a><?endif?>  
</div>  
<div class="eDetails3"><div style="float:right"><a href="$ENTRY_URL$" class="dalee-knopochka">Смотреть</a></div> <span class="e-date"><span class="ed-value" title="$TIME$">$DATE$</span></span> </div>  
</div>


Автор: Дмитрий Николаев

Хороший вид материала, рекомендую установить!
Прикрепления: 7315944.png (377.0 Kb)
 
  • Страница 1 из 1
  • 1
Поиск: