Стильный вид материалов Anrygsan для uCoz
 | |
| Сегодня очередной раз хочу Вас обрадовать, на этот раз выкладываю стильный вид материалов который подойдет для любой тематике сайта. Как понимаете, после установки, ваш сайт кардинально поменяется в дизайне и будет намного яркий и безусловно функционал станет намного больше. Ведь сам вид сделан оригинально и изображение его будет не в небольшом окне а по всей ширине. Приступим к установке: Добавьте этот код к себе в таблицу стилей: Код /*fls*/ .fls-block {position:relative;background:#fff;margin:16px 0 16px 0;padding:16px;border-radius:2px;box-shadow:0 1px 2px rgba(7, 32, 62, 0.11);} .fls-head {margin:-16px -16px 0 -16px;padding:16px;background:#f6f7f9;border-bottom:1px solid #eee;border-radius:2px 2px 0 0;} .fls-hd-avatar img {float:left;margin-top:-1px;width:50px;height:50px;} .fls-hd-name {margin:1px 0 6px 60px;color:#3c3c3c;padding-right:160px;} .fls-hd-name h1 {margin:0;display:inline;font-size:20px;font-weight:normal;} .fls-hd-info {margin:0 0 0 62px;font-size:11px;color:#888;} .fls-gd-info div {width:auto;padding:6px 7px;margin-top:-6px;} .fls-hd-info .left .cat {color:#888;} .fls-hd-info .left .cat:hover {color:#666;text-decoration:underline;} .fls-hd-info .right span {padding-left:8px;} .fls-hd-info .right span i {padding-right:3px;} .user-name {color:#03A9F4!important;} .fls-button {padding:16px 0;} .fls-button .art-like-block {margin: 0 -64px 0 -16px;} .fls-button .art-like-block .clearfix {display:table;width:100%;border-spacing:16px 0;} .fls-button .btn {width:33.333%;display:table-cell;padding:10px 20px;text-align:center;cursor:pointer;background:#E9EDF1;font-size:11px;color:#446D99;transition:background-color 250ms linear;} .fls-button .btn div {display:inline;} .fls-button .btn:hover {background:#7487A5;color:#fff;} .fls-button .torrent {background:#90C564;color:#fff;} .fls-button .torrent:hover {background:#76b343;} .fls-screen {padding:0px 0 16px 0;text-align:center;} .fls-screen a img {width:11.985%;height:80px;} .fls-content {font-size:12px;line-height:150%;border-top:1px solid #eee;padding-top:10px;} .fls-content img {max-width:330px;} .fls-content .viev-img {float:right;clear:right;margin-left:10px;} .fls-content .torttl {margin:16px -16px -16px -16px;padding:7px 16px 6px 16px;background:#EAEDF1;font-size:11px;color:#7282A2;border-radius:0 0 0 2px;} /*flsm*/ .flsm-center {position:relative;} .flsm-center a div {height:200px;background-size:cover;background-position:center;border-radius:2px 2px 0px 0px;} .flsm-bttm {padding:8px 10px 0px 10px;height:30px;overflow:hidden;} .flsm-bttm a {color:#333;font-size:12px;font-weight:bold;} .flsm-info {position:absolute;top:10px;right:10px;} .flsm-info a {padding:4px 6px;color:#fff;font-size:9px;background:#D2527F;border-radius:2px;transition:all 250ms linear;} .flsm-info a:hover {background:#22A7F0;transition:all 250ms linear;} .flsm-img {position:absolute;bottom:6px;left:10px;} .flsm-img a span {display:inline-block;width:36px;height:36px;background-size:cover;border:1px solid #fff;border-radius:2px;} .flsm-tor {position:absolute;bottom:19px;right:10px;} .flsm-tor a {padding: 11px 15px;color:#fff;background:#22A7F0;border-radius:2px;font-size:12px;transition:all 250ms linear;} .flsm-tor a:hover {background:#90C564;transition:all 250ms linear;} /**/ И последнее в вид материалов: Код <div class="flsm-center tahoma"> <a href="$ENTRY_URL$"> <div style="background-image:url($IMG_URL1$)"></div></a> <div class="flsm-user"> <a href="" rel="nofollow" class="GNews"> <span class="avaVidMatWebo4kaRu2"> <img src="http://zornet.ru/Ajaxoskrip/Forma_skriptov/zZdU4oy.jpg" style="position:absolute;width:50px;height:50px;border-radius:50%;top:16px;left:16px;border:3px solid #fff;"></span></a> </div> <div class="flsm-info"> <a href="" title="Название категории">Название категории</a> </div> <div class="flsm-img"> <a href="$IMG_URL1$" class="ulightbox"><span style="background-image:url($IMG_URL1$)" alt=""></span></a> <a href="$IMG_URL1$" class="ulightbox"><span style="background-image:url($IMG_URL1$)" alt=""></span></a> <a href="$IMG_URL1$" class="ulightbox"><span style="background-image:url($IMG_URL1$)" alt=""></span></a> <a href="$IMG_URL1$" class="ulightbox"><span style="background-image:url($IMG_URL1$)" alt=""></span></a> <a href="$IMG_URL1$" class="ulightbox"><span style="background-image:url($IMG_URL1$)" alt=""></span></a> </div> <div class="flsm-tor"><a href="" title="" rel="nofollow">Подробнее о материале</a></div> </div> <div class="flsm-bttm tahoma"><a href="" title="">Заходи на www.Zornet.ru каждый день новые материалы!</a></div> </div> Замените $IMG_URL1$ на свой вывод картинок! На этом все. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 28 | |
|
| |
это со скрипта автор материала (аватарка)
