• Страница 1 из 1
  • 1
СВЕТЛЫЙ ВИД МАТЕРИАЛОВ В ДВЕ КОЛОНКИ ДЛЯ UCOZ
Kentos311Дата: Вторник, 09.01.2018, 01:07 | Сообщение # 1
Сообщений: 729
Статус:

Новый вид материала для системы uCoz. Этот вид по своей конструкции очень уникальный, он идет в две колонки, естественно в вашем виде расположено будет по больше файлов чем обычно. Сам вид светлый, выводит информацию о материале, это сколько просмотров, какая категория, сколько скачало, изображение материала, название, и краткое описание.
Данный материал не может быть присвоен к той или иной теме сайта, так как его можно установить хоть на игровой или новостной сайт или же блог.

Для установки вам нужно скопировать код ниже, затем вставить в вид материалов нужного вам модуля.

Вид материала
Код
<div class="game-vid">  
<div class="game-title"><span class="xml-text"><a href="$ENTRY_URL$" >$TITLE$</a></span></div>  
<div class="game-img"><a href="$ENTRY_URL$" title="$TITLE$"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$"></a></div>  
<div class="game-detali"><li><i class="fa fa-eye"></i>$READS$</li><li><i class="fa fa-download"></i>$LOADS$</li> <li style=" float: right; margin-right: 2px; "><i class="fa fa-wifi"></i><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></li></div>  
<div class="game-text">$MESSAGE$</div>  
</div>  
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


В таблицу стилей CSS:
Код
.game-vid {width: 301px; margin: 9px; float: left; background-color: #fff; padding: 14px 10px; border-radius: 3px; -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30); box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30);}  
.game-text {margin-top: 5px; height: 65px; overflow: hidden; text-align: justify; padding-left: 5px; padding-right: 5px; padding-bottom: 5px; font-size: 12px; font-family: Tahoma,Arial; line-height: 17px;}  
.game-img img {object-fit: cover; height: 200px; width: 100%; }  
.game-img2 img {height: 300px; width: 350px; box-shadow: 0px 3px 10px #969696;}  
.game-title {white-space: nowrap; overflow: hidden; -webkit-mask: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0) 86px, rgba(0, 0, 0, 0)); padding: 0 0 10px 0;}  
.game-title a {line-height: 1.3; word-wrap: break-word; color: #4B4D52; font-size: 17px; font-weight: normal;}  
.game-title a:hover {color: #CD8121;}  
.game-detali {padding-left: 3px; margin-top: 5px; height: 20px; line-height: 20px; font-size: 13px; border-bottom: #e7e7e7 1px solid; padding-bottom: 5px;}  
.game-detali li {list-style: none; margin-right: 15px; display: inline-block;}  
.game-detali i {color: #6B6B6B; padding-right: 5px;}  
.game-detali a {color: #545457;}  
.game-detali a:hover {color: #F27935;}


В материале используются шрифтовые иконки Font Awesome, у вас они должны быть обязательно.
Прикрепления: 0460825.png (397.3 Kb)
 
  • Страница 1 из 1
  • 1
Поиск: