» »

Вид материалов FeGa в колонку для uCoz


Вид материалов FeGa в колонку для uCoz

Стильный и красивый по своему стилю и функциям вид материалов FeGa, который идет в колонку и имеет функцию при наведении рейтинг. Он изначально был создан под тематику Torrent, где можно поставить его на простой софт портал, что изображение материала будет выводить корректно. Безусловно у него есть свой эффект, который заключается в том, что по умолчанию только видно название и картинку, что перекреплено к нему. Что по колонкам, то здесь будет четыре, но все также не нужно забывать про фиксацию самого ресурса.

Но только стоит навести клик, то сразу сверху появится светло темная полоса, где будет написана категорий, где находится тот или иной файл. А внизу можно будет выставить оценку ему, так как там будет рейтинг в виде звездочек на зеленом фоне. А так по своей стилистике он не чем, не отличается от других и много форматный в плане установке на тематический интернет ресурс. Также он отлично будет смотреться как на светлом фоне и не исключаю, что на темном красивее визуализация.

Это проверка его на тестовом сайте, так как в сети интернет ходит точно такой материал, но он полон ошибок, этот полностью рабочий и пользователь First, довел его до ума, чтоб работал и корректно смотрелся.

Красивый в колонку вид материала на сайт uCoz

Приступаем к установке:

Идем в админ панель и нужно в модуле, это новости или файлы, в них полностью заметить вид материала.

Код
<script type="text/javascript" src="http://zornet.ru/Ajaxoskrip/AbavAg/libs.min.js"></script>  
<div class="article-bl">  
<div class="article-film">  
<div class="article-film-image">  
<div class="article-film-overlay" style="display: none; top: -100px; opacity: 0;">  
<div class="article-film-overlay-content">  
<div class="article-film-date"><span title="Категория: $CATEGORY_NAME$">$CATEGORY_NAME$</span></div>  
</div>  
</div>  
<div class="article-film-rating">  
<div class="article-film-rating-stars" style="padding: 5px 0 1px 8px; margin-bottom: 18px;">  
<ul id="uStarRating$ID$" class="uStarRating$ID$ u-star-rating-30" title="Рейтинг: $RATING$">  
<?if($RATING$)?><div style="float:left;opacity: 0.8;"><?$RSTARS$('30','http://zornet.ru/Ajaxoskrip/AbavAg/rating_zvezda_03.png','1','float')?><?endif?></ul>  
</div></div>  
<a href="$ENTRY_URL$"><img class="article-img" src="$IMG_URL1$" alt="$TITLE$"></a>  
</div>  
<div class="article-film-title"><a href="$ENTRY_URL$">$TITLE$</a></div>  
</div>  
</div>


CSS:

Код
.article-bl {  
width:25%;  
float:left;  
}  

.article-film {  
display: inline-block;  
margin-right: 22px;  
min-height: 300px;  
padding-bottom: 16px;  
position: relative;  
vertical-align: top;  
width: 163px;  
}  

.article-film-image {  
height: 230px;  
margin-bottom: 12px;  
overflow: hidden;  
position: relative;  
width: 163px;  
}  

.article-film-overlay {  
background: rgba( 0, 0, 0, 0.5);  
height: 40px;  
position: absolute;  
top: -100px;  
width: 163px;  
}  
.article-film-overlay-content {  
padding: 12px 10px 0 10px;  
position: relative;  
}  

.article-film-date {  
background: url('http://zornet.ru/Ajaxoskrip/AbavAg/icons1.png') no-repeat 0 -726px;  
color: #ffffff;  
display: inline-block;  
font-size: 13px;  
height: 18px;  
line-height: 18px;  
padding-left: 23px;  
}  
.article-film-date a, .article-film-date span {  
color: #ffffff;  
font-size: 13px;  
}  

.article-film-rating {  
display: none;  
opacity: 0;  
position: absolute;  
top: 230px;  
width: 163px;  
z-index: 6;  
}  

.article-film-rating-stars {  
background: #27ae60;  
border-top: 3px solid #196f3e;  
color: #ffffff;  
padding: 7px 0 11px 0;  
}  

.article-film-rating-stars ul {  
display: inline-block;  
}  

.article-film-rating-stars a, .article-film-rating-stars b, .article-film-rating-stars span {  
color: #ffffff !important;  
font-size: 13px;  
font-weight: normal;  
}  

img.article-img {  
height: 230px;  
width: 163px;  
}  

.article-film-title {  
padding-bottom: 2px;  
}  
.article-film-title a {  
font-size: 13px;  
}

В начале стилей установлены проценты, которые будет отвечать, сколько колонок вы выведете на портале, и так в стилях можно что то изменить и сделать уникальным.
27.03.2017 Просмотров: 392 Комментарий: (8)

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

Материал разместил

Комментарий: 8
Scheme
Scheme 27.03.2017 15:481
0
Это точно, просто не ставил этот вид материала, в коде увидел сразу большие ошибки, кто то просто нашел работающий вил и скопировал его. И не важно что в место рейтинг были стили.
Сафрон
Сафрон 27.03.2017 16:092
0
Этот вид больше подойдет как на игровой сайт и можно поставить на кино онлайн, не чем не отличаются, разве здесь только рейтинг сделан не как у других, что больше он нравится, и не мешает, и в любом случай наведешь если файл понравится.
Tergran
Tergran 27.03.2017 16:213
0
Так не не нахожу большую разницу от софт и торрент. Там и там можно сказать одинаково и здесь больше всего категория указано и больше не чего не нужно - не исключая дизайн.
Kosten
Kosten 27.03.2017 16:585
0
На игровом сайте, там видать размер изображение идет такой же как на кино сайте, как афиша, потому и корректно смотрится, но если поставить горизонтальное меню, то явно не понять, что за изображение.
Kosten
Kosten 27.03.2017 16:564
0
На счет кино сайта, здесь полностью согласен, не чем не отличается.
Kosten
Kosten 28.03.2017 19:336
0
Кто делал рип на этот вид материала, прошу не писать в личные сообщение, по поводу источника, этот вид материала доработал, чтоб работал корректно пользователь First. Просто возьмите свой материал и установите на сайт, потом возьмите этот материал и увидите разницу, так что тут вам самим нужно писать, что доработал пользователь First, уважаем чужой труд.
Maryges
Maryges 28.03.2017 19:367
0
Есть такой же по дизайн вид материала, здесь добавлены комментарий и есть краткое описание.

Марковичь
Марковичь 28.03.2017 19:428
0
Если CEO не подключено, то здесь краткое описание пригодится, если подключено, то оно выводиться на других операторах, которые вид материала не нужны.
avatar