Классический и современный вид материала для системы 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>
Автор: Дмитрий Николаев
Хороший вид материала, рекомендую установить!
