Вид материалов FeGa в колонку для uCoz
 | |
| Стильный и красивый по своему стилю и функциям вид материалов FeGa, который идет в колонку и имеет функцию при наведении рейтинг. Он изначально был создан под тематику Torrent, где можно поставить его на простой софт портал, что изображение материала будет выводить корректно. Безусловно у него есть свой эффект, который заключается в том, что по умолчанию только видно название и картинку, что перекреплено к нему. Что по колонкам, то здесь будет четыре, но все также не нужно забывать про фиксацию самого ресурса. Но только стоит навести клик, то сразу сверху появится светло темная полоса, где будет написана категорий, где находится тот или иной файл. А внизу можно будет выставить оценку ему, так как там будет рейтинг в виде звездочек на зеленом фоне. А так по своей стилистике он не чем, не отличается от других и много форматный в плане установке на тематический интернет ресурс. Также он отлично будет смотреться как на светлом фоне и не исключаю, что на темном красивее визуализация. Это проверка его на тестовом сайте, так как в сети интернет ходит точно такой материал, но он полон ошибок, этот полностью рабочий и пользователь First, довел его до ума, чтоб работал и корректно смотрелся.  Приступаем к установке: Идем в админ панель и нужно в модуле, это новости или файлы, в них полностью заметить вид материала. Код <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; } В начале стилей установлены проценты, которые будет отвечать, сколько колонок вы выведете на портале, и так в стилях можно что то изменить и сделать уникальным. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 8 | |
|
| |
