Недавно я увидел смену вида материалов, так как она платная в магазине uScript, который недавно презентовала ucoz; Я решил создать свой, малый и понятный, адаптивный, надеюсь красивый ( каждому не угодишь ) вид материалов, и скрипт к нему; Смысл скрипта и вида материала заключается в том что при нажатии кнопки меняется вид материалов, а точнее материалы становятся лентой, сеткой в два, или три колонки.  
Чем же хорош сменный вид материалов?  Цитата
Любой пользователь сделает вид материалов удобным для себя; 
 Простая установка; 
 Простота в изменениях кода (необходимы лишь базовые знания в CSS для изменения вида дизайна товаров). Для иконок используются специальные шрифты, в скрипте не задействованы графические элементы. Таким образом цвета иконок также очень просто изменить, заменив зеленый цвет на нужный вам; 
 работает на JQuery и cookie; 
   Что нового?  Цитата
Подключен обновленный Font Awesome; 
 Убран лишний CSS; 
 Редактирован HTML код; 
 Картинки перестали сжиматься; 
 Отрегулирована высота материалов; 
 Подключён Cookie 
   Установка:  1) Подключаем Font Awesome   Между тегом 
<head></head> вставляем ссылку на 
Font Awesome  Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
   2) Вставляем CSS   Вставляем код в отдельный файл или в общий шаблон таблицы стилей  
Код
/*----View materials uGarts-----*/ 
 .item .blog-post-wrapper { 
 padding: 4px; 
 border: 1px solid #eee; 
 border-bottom: 3px double #eee; 
 background-color: #fff; 
 width: 100%; 
 } 
 .item .figure { 
 position: relative; 
 } 
 .post-thumbnail { 
 margin-bottom: 20px; 
 overflow: hidden; 
 text-align: center; 
 } 
 .post-thumbnail img { 
 opacity: 0.8; 
 } 
 .post-thumbnail img:hover { 
 opacity: 1 !important; 
 } 
 .entry-header { 
 padding: 0 10px; 
 position: relative; 
 } 
 .item .message p { 
 padding: 0px; 
 margin: 0px; 
 } 
 .item.grid-item .message { 
 position: relative; 
 height: 80px; 
 z-index: 1; 
 max-width: 100%; 
 } 
 .entry-title { 
 font-size: 16px; 
 height: 40px; 
 } 
 .entry-title a { 
 color: #282828; 
 text-decoration: none; 
 vertical-align: middle; 
 } 
 .entry-title a:hover { 
 color: #68c3a3; 
 } 
 .item hr { 
 padding: 15px 0; 
 border-bottom: 1px solid #EEEEEE !important; 
 background: #fff !important; 
 position: relative; 
 box-sizing: initial !important; 
 -moz-box-sizing: initial !important; 
 } 
 .entry-meta { 
 color: #afafaf; 
 z-index: 2; 
 position: relative; 
 background: #fff; 
 padding: 1px; 
 } 
 .entry-meta ul { 
 padding-left: 0px; 
 background: #fff; 
 } 
 list-inline { 
 padding-left: 0; 
 margin-left: -5px; 
 list-style: none; 
 } 
 .entry-meta ul li { 
 padding: 0 5px; 
 } 
 .list-inline>li { 
 display: inline-block; 
 padding-right: 5px; 
 padding-left: 5px; 
 } 
 .the-author, .the-time, .the-comments { 
 position: relative; 
 padding-left: 15px; 
 } 
 .entry-meta ul li a { 
 display: inline-block; 
 color: #BBBBBB; 
 font-weight: 400; 
 } 
 .the-author::before, .the-time::before, .the-share::before, .the-comments::before { 
 font-family: FontAwesome; 
 position: absolute; 
 left: 0; 
 } 
 .col-sm-4 { 
 width: 31.133333%; 
 float:left; 
 position: relative; 
 min-height: 1px; 
 padding-right: 15px; 
 } 
 .item.grid-item { 
 width: 47.6623439788818323292%; 
 float: left; 
 position: relative; 
 min-height: 1px; 
 padding-right: 10px; 
 padding-left: 5px; 
 margin-bottom: 5px; 
 } 
 .list-item img {width:100%} 
 .item.list-item { 
 margin-bottom: 1em; 
 width: 97%; 
 position: relative; min-height: 1px; padding-right: 10px; padding-left: 5px; 
 } 
 .item.grid3-item hr { 
 padding: 0px; 
 } 
 .item.grid-item .post-thumbnail img { 
 height: 250px; 
 max-width: none !important; 
 } 
 .item .entryReadAll {display:none;} 
 .item.grid3-item { 
 width: 30.99405002593994323811%; 
 float: left; 
 position: relative; 
 min-height: 1px; 
 padding-right: 10px; 
 padding-left: 5px; 
 margin-bottom: 5px; 
 } 
 .grid3-item .post-thumbnail img { 
 opacity: 0.8; 
 height: 200px; 
 max-width: none !important; 
 } 
 .grid3-item .entry-title{ 
 font-size: 16px !important; 
 line-height: 1; 
 height: 30px; 
 } 
 .grid3-item .message { 
 display: none; 
 } 
 .item { 
 margin-bottom: 1em; 
 transition: .3s; 
 } 
 .the-author::before{ 
 content: "\f044"; 
 } 
 .the-time::before{ 
 content: "\f133"; 
 } 
 .the-comments::before{ 
 content: "\f0e6"; 
 } 
 .view-news-moder{ 
 float:left; 
 position: absolute; 
 top: 0px; 
 right: 0px; 
 padding: 10px; 
 } 
 .btn-group { margin-bottom: 2em;} 
 .btn-group>.btn:first-child:not(:last-child) { 
 border-top-right-radius: 0; 
 border-bottom-right-radius: 0; 
 } 
 .btn-group>.btn:last-child:not(:first-child) { 
 border-top-left-radius: 0; 
 border-bottom-left-radius: 0; 
 } 
 .btn-group>.btn:not(:first-child):not(:last-child) { 
 border-radius: 0; 
 } 
 .btn-group .btn { 
 border-radius: 4px; 
 background-color: #68C3A3; 
 padding: 10px 15px; 
 color: #fff; 
 margin-bottom: 2em; 
 } 
 .btn-group .btn.active,.btn-group .btn:hover { 
 background-color: #79A898; 
 } 
 /*----View materials uGarts-----*/
   3) Устанавливаем JS   Перед закрывающимся тегом 
</body> в самом низу шаблона страницы вставляем код:  
Код
<!-- <uGarts js> --><script type='text/javascript' src='http://escode.ru/materials/1/14/viewmaterials.js'></script><!-- </uGarts js> -->
   4) Вставляем кнопки   Ищем в коде место где вы хотите видеть кнопки и вставляем следующий код:  
Код
<!-- <uGarts btn group> --><div class="content-padding"><div class="btn-group"><a href="javascript:" class="btn active" id="grid-view" title="сетка в две колонки"><i class="fa fa-th-large"></i></a><a href="javascript:" class="btn" title="материалы в виде листа" id="list-view"><i class="fa fa-list"></i></a><a href="javascript:" class="btn" id="grid3-view" title="сетка в три колонки" ugarts="сетка с материалами в три колонки"><i class="fa fa-th"></i></a></div><!-- </uGarts btn group> -->
   5) Вставляем вид материалов   В зависимости от модуля будут меняться переменные 
$TITLE$, 
$NAME$ либо 
$ENTRY_NAME$  Код
<div class="item grid-item"> 
 <?if($MODER_PANEL$)?><span class="view-news-moder">$MODER_PANEL$</span><?endif?> 
 <article class="blog-post-wrapper"> 
 <div class="figure"> 
 <div class="post-thumbnail"> 
 <a href="$ENTRY_URL$"><img title="$TITLE$" src="$IMG_URL1$" alt="$TITLE$"></a> 
 </div> 
 </div> 
 <header class="entry-header"> 
 <h2 class="entry-title"><a href="$ENTRY_URL$" title="$TITLE$"><?if(len($TITLE$)>30)?><?substr($TITLE$,0,30)?><?else?>$TITLE$<?endif?></a></h2> 
 <div class="message">$MESSAGE$</div> 
 <hr> 
 <div class="entry-meta"> 
 <ul class="list-inline"> 
 <li> 
 <span class="the-author"> 
 <?if($USERNAME$)?><a href="$PROFILE_URL$" tite="Добавил материал $USERNAME$"><?if(len($USERNAME$)>12)?><?substr($USERNAME$,0,12)?><?else?>$USERNAME$<?endif?></a><?else?>Неизвестно<?endif?> 
 </span> 
 </li> 
 <li> 
 <span class="the-time" tite="Материал добавлен $DATE$ в $TIME$"> 
 $DATE$, $TIME$ 
 </span> 
 </li> 
 <li> 
 <span class="the-comments"> 
 <a href="$COMMENTS_URL$" title="<?if($COMMENTS_NUM$="0")?>Комментариев нет<?else?>комментари<?if($COMMENTS_NUM$%10=0||$COMMENTS_NUM$%10>4||$COMMENTS_NUM$%100>10&&$COMMENTS_NUM$%100<15)?>ев<?else?><?if($COMMENTS_NUM$%10=1)?>й<?else?>я<?endif?><?endif?><?endif?>">$COMMENTS_NUM$</a> 
 </span> 
 </li> 
 </ul> 
 </div> 
 </header> 
 </article> 
 </div>
   На этом установка закончена. Спасибо за внимание