» »

Стильный вид материалов 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.01.2016 Просмотров: 485 Комментарий: (31)

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

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

Комментарий: 28
workman
workman 13.01.2016 23:531
0
КиношаHDА почему не сделали так, что если нет картинок, то коды не будут видны на основном виде??
Kosten
Kosten 13.01.2016 23:552
0
А может просто убрать.. чтоб один вид был.
workman
workman 13.01.2016 23:583
0
Нет. Так бы симпатично смотрелось бы, если там в теме есть еще добавочные картинки, но немного не доработан именно сам код
КиношаHD
КиношаHD 13.01.2016 23:584
0
Хотите сделать под себя обращайтесь на форуме.
workman
workman 14.01.2016 00:025
0
Да мне он не нужен. Просто я поправляю то что в нем немного не доработано... )) И как-то модераторам делать направление и замечания в письменном виде как-то не резонно и не по правилам ... Или Вы хотите потягаться сомной в знании html и JS?? smile
Kosten
Kosten 14.01.2016 00:047
0
А может просто его разобрать и самим разобраться на форуме, если нужно сделаю тему.
workman
workman 14.01.2016 00:036
0
А где ссылка на источник скрипта?? smile
Kosten
Kosten 14.01.2016 00:088
0
Если есть источник, киньте а поставлю.
workman
workman 14.01.2016 00:159
0
Смотри по этому коду кто автор
Код
<span class="avaVidMatWebo4kaRu2">
Webo4kaRu
КиношаHD
КиношаHD 14.01.2016 00:1910
0
Это не источник biggrin это со скрипта автор материала (аватарка)
workman
workman 14.01.2016 00:2312
0
Начинал его писать (вебо4ка)
КиношаHD
КиношаHD 14.01.2016 00:2613
0
Слушай вебочка если я сказал что не он значит не он.
Kosten
Kosten 14.01.2016 00:2914
0
А что за источник? Или его нет.
КиношаHD
КиношаHD 14.01.2016 00:3415
0
Неету
Kosten
Kosten 14.01.2016 00:3717
0
Но на нет, и не чего проставляться не будет, а так Администратор Вебочки заходит и если его материал на сайте, то он пишет мне и я ставлю источник, за что ему уважение, нормальный парень, без всяких пантов.
workman
workman 14.01.2016 00:2211
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
Kosten 14.01.2016 00:3616
0
workman, если что то не пойдет, он может просто поставить этот скрипт.
workman
workman 14.01.2016 00:4118
0
Зачем ждать когда можно сразу вид сделать правильным и лишние коммены стереть
Kosten
Kosten 14.01.2016 00:4519
0
Заменю, просто когда есть выбор, по мне это лучше.
workman
workman 14.01.2016 00:5821
0
Да не павильно ... Нужно было там просто коды поменять на эти ... Ты стер весь код ... ))
Сафрон
Сафрон 14.01.2016 00:5120
0
Но стильный, спору нет, а куда на какую тематику может пойти этот вид материалов?
workman
workman 14.01.2016 00:5922
0
На что хватит выдумки ... Например на картинки материала
Kosten
Kosten 14.01.2016 01:0823
0
Все стер, говорил давай оставим.
workman
workman 14.01.2016 01:1324
0
Попроси автора пусть пропишет
Kosten
Kosten 14.01.2016 01:1625
0
Но зачем ты мня сбил.. 2 раза просил давай оставим.
workman
workman 14.01.2016 01:2526
0
Да скинь мне полностью что осталось и я завтра по новой пропишу
YaVi
YaVi 14.01.2016 16:5327
0
Отличный вид)
YaVi
YaVi 14.01.2016 17:2928
0
Я его не устанавливал)
avatar