Решил выкинуть ещё одно своё безобразие на общее обозрение. На этот раз набросал экспериментальный информер для модуля видео, суть которого выводить на главной странице или ещё где нибудь топ материалов по просмотру или комментариям.
Вообщем создаём информер для модуля онлайн видео(материалы, рейтинг материала или воспроизведения (по убыв.) на ваше усмотрение) количество колонок 1!(так как количество колонок устанавливаем классом video-block в процентах). В архиве 3 иконки и фоновая картинка, скачать и залить в корень сайта, прописать пути в коде.
Сразу оговорюсь, делал под информер а не под вид материалов, адаптацию медиа запросов настравивал под 2 колонки и шаблона шириной контента без боковых блоков 600px. Под вид материалов придётся переделывать, так как системная обёртка иная чем в каталоге файлов и статей.
Код на который надо сменить в шаблоне информера: Код <div class="video-block"> <div class="img-block" style="background-image: url('/путь к изображению/film.png'), url($SCREEN_URL$);filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='$SCREEN_URL$',sizingMethod='scale');"> <span class="video-name">$TITLE$</span> <span class="rating-video"> <span class="vie-icon"></span><b style="margin: 0;">$READS$</b> <span class="com-icon"></span><b style="margin: 0 5px 0 0;">$COMMENTS_NUM$</b></span> <div class="video-shadow"> <span class="zoom-img"><a href="$IMG_URL1$" class="ulightbox"> <img src="/путь к изображению/zoom.png" width="24" height="24" border="0" title="Увеличить" /></a></span> <div class="video-message"><a href="$ENTRY_URL$"><?substr($MESSAGE$,0,150)?>...</a> <span class="all-info">$CATEGORY_NAME$ | Рейтинг $RATED$</span> </div></div></div></div>
Стили информера: Код .video-block { display: block; width: 48%; float: left; margin: 0.5% 0 0.5% 1%; border-radius: 3px; } .video-name { position: absolute; top: 35px; margin: 0 15px; font-size: 16px; color: #FFFFFF; text-transform: uppercase; font-weight: bold; } .img-block { z-index: 1; border-radius: 3px; display: block; position: relative; margin: 0; padding-bottom: 65%; height: 0; overflow: hidden; background-size: 100% 100%; -moz-background-size: 100% 100%; } .zoom-img { position: absolute; bottom: 30px; right: 15px; } .video-shadow { opacity: 0; position: absolute; background-color: rgba(0,0,0,0.6); width: 100%; height: 100%; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; -ms-transition: all 0.7s ease; transition: all 0.7s ease; } .video-shadow a { color: #FFFFFF; } .video-shadow:hover { opacity: 1; } .video-message { display: block; margin: 35px 15px 0 15px; font-size: 16px; } .all-info { position: absolute; left: 15px; bottom: 35px; color: #FFFFFF; font-size: 14px; } .rating-video { position: absolute; bottom: 7px; right: 13px; background-color: #F5F5F5; color: #000000; font-size: 14px; -webkit-box-shadow: inset 1px 2px 0px rgba(0,0,0,0.85); -moz-box-shadow: inset 1px 2px 0px rgba(0,0,0,0.85); box-shadow: inset 1px 2px 0px rgba(0,0,0,0.85); } .vie-icon { width: 14px; height: 12px; margin: 0 5px 0 5px; background: url('путь к изображению/view.png')no-repeat; display: inline-block; } .com-icon { width: 14px; height: 12px; margin: 0 5px 0 5px; background: url('путь к изображению/com.png')no-repeat; display: inline-block; } @media only screen and (max-width: 620px) { .video-message { margin: 10px 10px 0 10px; font-size: 14px; } .rating-video { bottom: 2px; right: 7px; } .video-name { top: 15px; margin: 0 10px; font-size: 14px; } .all-info { left: 10px; bottom: 15px; } } @media only screen and (max-width: 480px) { .video-block {width:99%;} .video-name {top: 25px;} .all-info { left: 10px; bottom: 20px; } }
В архиве 3 иконки для информера и фоновая картинка (16.5кб) При наведении: |