ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Стильный вид материалов Anrygsan для uCoz

Стильный вид материалов 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$ на свой вывод картинок!
На этом все.

13 Января 2016 Просмотров: 2219 Комментариев: (31)

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

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

КиношаHD

Похожие материалы

Оставь свой отзыв

Комментарии: 28
Порядок вывода комментариев: workman 13 Января 2016 23:53¹ 0 КиношаHDА почему не сделали так, что если нет картинок, то коды не будут видны на основном виде?? Kosten 13 Января 2016 23:55² 0 А может просто убрать.. чтоб один вид был. workman 13 Января 2016 23:58³ 0 Нет. Так бы симпатично смотрелось бы, если там в теме есть еще добавочные картинки, но немного не доработан именно сам код КиношаHD 13 Января 2016 23:58⁴ 0 Хотите сделать под себя обращайтесь на форуме. workman 14 Января 2016 00:02⁵ 0 Да мне он не нужен. Просто я поправляю то что в нем немного не доработано... )) И как-то модераторам делать направление и замечания в письменном виде как-то не резонно и не по правилам ... Или Вы хотите потягаться сомной в знании html и JS?? Kosten 14 Января 2016 00:04⁷ 0 А может просто его разобрать и самим разобраться на форуме, если нужно сделаю тему. workman 14 Января 2016 00:03⁶ 0 А где ссылка на источник скрипта?? Kosten 14 Января 2016 00:08⁸ 0 Если есть источник, киньте а поставлю. workman 14 Января 2016 00:15⁹ 0 Смотри по этому коду кто автор Код <span class="avaVidMatWebo4kaRu2"> Webo4kaRu КиношаHD 14 Января 2016 00:19¹⁰ 0 Это не источник это со скрипта автор материала (аватарка) workman 14 Января 2016 00:23¹² 0 Начинал его писать (вебо4ка) КиношаHD 14 Января 2016 00:26¹³ 0 Слушай вебочка если я сказал что не он значит не он. Kosten 14 Января 2016 00:29¹⁴ 0 А что за источник? Или его нет. КиношаHD 14 Января 2016 00:34¹⁵ 0 Неету Kosten 14 Января 2016 00:37¹⁷ 0 Но на нет, и не чего проставляться не будет, а так Администратор Вебочки заходит и если его материал на сайте, то он пишет мне и я ставлю источник, за что ему уважение, нормальный парень, без всяких пантов. workman 14 Января 2016 00:22¹¹ 0 Вот этот код нужно поставить вот так Код <?if($IMG_URL2$)?> <div class="flsm-img"> <a href="$IMG_URL2$" class="ulightbox"><span style="background-image:url($IMG_URL2$)" alt="$SITE_NAME$"></span></a> <a href="$IMG_URL3$" class="ulightbox"><span style="background-image:url($IMG_URL3$)" alt="$SITE_NAME$"></span></a> <a href="$IMG_URL4$" class="ulightbox"><span style="background-image:url($IMG_URL4$)" alt="$SITE_NAME$"></span></a> <a href="$IMG_URL5$" class="ulightbox"><span style="background-image:url($IMG_URL5$)" alt="$SITE_NAME$"></span></a> <a href="$IMG_URL6$" class="ulightbox"><span style="background-image:url($IMG_URL6$)" alt="$SITE_NAME$"></span></a> <a href="$IMG_URL7$" class="ulightbox"><span style="background-image:url($IMG_URL7$)" alt="$SITE_NAME$"></span></a> <a href="$IMG_URL8$" class="ulightbox"><span style="background-image:url($IMG_URL8$)" alt="$SITE_NAME$"></span></a> <a href="$IMG_URL9$" class="ulightbox"><span style="background-image:url($IMG_URL9$)" alt="$SITE_NAME$"></span></a> <a href="$IMG_URL10$" class="ulightbox"><span style="background-image:url($IMG_URL10$)" alt="$SITE_NAME$"></span></a> </div><?endif?> Kosten 14 Января 2016 00:36¹⁶ 0 workman, если что то не пойдет, он может просто поставить этот скрипт. workman 14 Января 2016 00:41¹⁸ 0 Зачем ждать когда можно сразу вид сделать правильным и лишние коммены стереть Kosten 14 Января 2016 00:45¹⁹ 0 Заменю, просто когда есть выбор, по мне это лучше. workman 14 Января 2016 00:58²¹ 0 Да не павильно ... Нужно было там просто коды поменять на эти ... Ты стер весь код ... )) Сафрон 14 Января 2016 00:51²⁰ 0 Но стильный, спору нет, а куда на какую тематику может пойти этот вид материалов? workman 14 Января 2016 00:59²² 0 На что хватит выдумки ... Например на картинки материала Kosten 14 Января 2016 01:08²³ 0 Все стер, говорил давай оставим. workman 14 Января 2016 01:13²⁴ 0 Попроси автора пусть пропишет Kosten 14 Января 2016 01:16²⁵ 0 Но зачем ты мня сбил.. 2 раза просил давай оставим. workman 14 Января 2016 01:25²⁶ 0 Да скинь мне полностью что осталось и я завтра по новой пропишу YaVi 14 Января 2016 16:53²⁷ 0 Отличный вид) YaVi 14 Января 2016 17:29²⁸ 0 Я его не устанавливал)