вСкрипты для Юкоз

Вид материла и смена на колонки для uCoz

 
Если вы решили сделать ресурс, который кардинально был бы не похожий на других, то возможно этот скрипт вам пригодиться. Это вид материала стильный, который вы сами будете делить на колонки. А это можно сделать в ручном режиме от одной до трех не испортив дизайн сайта. Просто теперь ресурс будет точно функционален, и все только вам нужно сделать как написано.

Здесь мы видим, как будет по умолчанию.

Вид материала трансформируется на сайте

Как видим, все очень даже стандартно и понимаем, что на главную страницу можно вывести как больше файлов. Но как можно заметить, что по вверх стоят 3 кнопки, которые вписаны в дизайн. Их работа, это сделать к примеру, чтоб было 2 колонки, смотрим.

Вид материла для сайта 2 колонки

И уже видим совершенно другую картину, но это не все, так как три функций есть, можно сделать в одну колонку, это получиться одна широкая, и название все нормально будет прописано и не чего не где не поведет. Просто очень удобно для сайта, и каждый пользователь может сделать как ему удобно. И все это сделано на на jQuery и Cookie и что главное сам портал остается адаптирован. Все будет происходить при плавной анимация а не быстро, что сами заметили как меняется на глазах, и вам только останется выбрать, ту на которой вам будет очень удобно.

Установка:

1) Первое что нужно нам сделать, это подключить Font Awesome.
Между тегами head Ссылка /head вставляем ссылку.

Код
<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://profolio.ucoz.com/js/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>

Все, теперь нужно сохранить и обновить страницу и попробовать как работать будет.

Источник: http://ugarts.pro/

источник: zornet.ru

Похожие посты