Вид материала широкий для файлов uCoz
 | |
| Кто-то предпочитает стандартный вид, здесь рассмотрим широкий вид материала под такие модули как каталог файлов, блог и другие модули. Больше всего его можно увидеть на игровом сайте, просто по изображению картинки он там просто актуален. Здесь прежде его ставить нужно понимать, что изображение должно быть аналог. Если как пример поставить слишком высокую картинку, то она безусловно разместиться, но там будет не разобрать визуально. Можно его увидеть и на других тематических площадках, просто он создан на стилях и вывести на другую гамму цвета не составит труда. А так все идет в нем как нужно, это само название материала, может и статьи или мануала. Также можно увидеть краткое описание. Когда материал был размещен и сколько просмотров, не говоря скачали в цифрах. Он также будет на шрифтовых иконках, если кто-то не подключил на сайте, то подключаем. При наведении эффект контраст. Есть 3 изображение вид каталога файлов на темном фоне и каталог статей на темном фоне и каталог файлов на светлом Так увидите после установки:  Вверх сайта и в самый потолок пропишем стили на кнопки или как правильно сказать, шрифтовые иконки, что будут выводить значение. Код: выделить всё А и самое главное чтобы показывались все категории в виде материалов нужно Панель Управление - Страница материала и комментариев к нему. Находим оператор ENTRY_CATS меняем на этот код. Код: выделить всё $ENTRY_CATS$ Панель Управление - Вид материалов и там ставим код, где хотим видеть его. Код <span id="cats$ID$">Загрузка...</span> В конце вида материалов ставим следующий скрипт: Код <script type="text/javascript">$('span#cats$ID$').load('$ENTRY_URL$ .cats');</script> Саму основу вид материала и к нему стили, что нужно прописать в CSS найдете в архиве, что копируем и ставим как указано на текстовом файле и после всего сохраняем. Переходим к основе: Вид материала: Код <a href="$ENTRY_URL$"> <div class="service-details"> <img src="$IMG_URL1$" alt="$TITLE$"> <div class="service-hover-text"> <h3>$TITLE$</h3> <span id="cats$ID$"><i class="fa fa-spinner fa-spin fa-1x fa-fw"></i> <span class="sr-only">Загрузка...</span></span> <p><?if(len($MESSAGE$)>135)?><?substr($MESSAGE$,0,135)?>.....<?else?>$MESSAGE$<?endif?></p> <h2><i class="fa fa-star-o"></i> $RATING$ <i class="fa fa-clock-o"></i> $DATE$</h2> </div> <div class="service-white service-text"> <p> <i class="fa fa-eye fa-fw"></i> $READS$ <i class="fa fa-download fa-fw"></i> $LOADS$ <i class="fa fa-comments fa-fw"></i> $COMMENTS_NUM$ </p> </div> </div> </a> <script type="text/javascript">$('span#cats$ID$').load('$ENTRY_URL$ .cats');</script> CSS: Код .service-details { width: 98%; min-width: 300px; height: 200px; overflow: hidden; position: relative; margin: 5px; float: left; } .service-details img { position: absolute; top: 0; left: 0; width: 100%; float: left; transition: all 0.8s; -moz-transition: all 0.8s; margin-left: 5px; border: 10px solid #17212b; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .service-details:hover img { -webkit-filter: contrast(185%); } .service-details .service-hover-text h3 { padding: 0px; margin: 0px; color:#56B8FF; text-align:left; text-shadow:1px 1px 1px #777; font-size:20px; font-family:Arial Narrow, Arial, sans-serif; transition: color 1s, font-size 1s, text-shadow 1s; -moz-transition: color 1s, font-size 1s, text-shadow 1s; -webkit-transition: color 1s, font-size 1s, text-shadow 1s; -o-transition: color 1s, font-size 1s, text-shadow 1s; } .service-details:hover h3 { padding: 0px; margin: 0px; color:#C9EEFF; z-index:10; font-size:22px; text-shadow:0 0 20px #EAF8FF; } .service-details .service-hover-text h4 { margin-right: 0; padding: 0 5px 2px; color: #9A9A9A; border: 1px solid #5D5D5D; border-radius: 2px; font-family: tahoma,arial,sans-serif; margin-bottom: 10px; display: inline-block; } .service-details .service-hover-text h2 { position: absolute; bottom:5px; padding: 0px; margin: 0px; color:#56B8FF; text-align:left; text-shadow:1px 1px 1px #777; font-size:15px; font-family:Arial Narrow, Arial, sans-serif; transition: color 1s, font-size 1s, text-shadow 1s; -moz-transition: color 1s, font-size 1s, text-shadow 1s; -webkit-transition: color 1s, font-size 1s, text-shadow 1s; -o-transition: color 1s, font-size 1s, text-shadow 1s; } .service-details:hover h2 { padding: 0px; margin: 0px; color:#00FA9A; z-index:10; font-size:18px; text-shadow:0 0 20px #fff; } .service-details .service-hover-text p { padding: 0px; font-size: 14px; line-height: 20px; color: #fff; margin:0px; font-family: "Open Sans"; } .service-details .service-hover-text a { font-size: 12px; background: rgba(255, 255, 255, 0.4); margin-right: 0; padding: 0 5px 2px; color: #000; border: px solid #ccc; border-radius: 2px; font-family: tahoma,arial,sans-serif; margin-bottom: 10px; display: inline-block; } .service-details:hover a { font-size: 12px; background: rgba(21, 126, 232, 0.8); color: #fff; } .service-details .service-hover-text{ width: 50%; height: 100%; position: absolute; top: 0%; left: 0%; padding: 10px; box-shadow: 300px -3px 67px -17px rgba(0, 0, 0, 0.7) inset; color: #ccc; /* display: none;*/ transition: all 0.5s ease-in-out; -moz-transition: all 0.4s; margin-left:5px; } .service-details:hover .service-hover-text { display: block !important; color: ; left: 0px; top: 0px; } .service-details .service-text { position: absolute; bottom: 0px; left:5px; } .service-details .service-text p { padding:5px; margin-right:5px; text-align:right; font-size: 12px; font-family: "Open Sans"; font-weight:300; color:#fafafa; font-style:italic; text-shadow:0 0 20px #fafafa; box-shadow: -100px 1px 67px -31px #DC143C inset; } .service-white { background: rgba(15, 77, 94, 0.1); width: 100%; height: 25px; } Источник: uCozz.pRo Поддержите автора для новых идей: WMID: 197995398961 | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 11 | |
|
| |
