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

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

Вид материла и смена на колонки для 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></div><!-- </uGarts btn group> -->


5) Теперь сам вид материала, нужно сменить на этот, здесь в зависимости какой модуль будут меняться переменные TITLE, NAME либо ENTRY_NAME чтоб не забыть, так как на разный они по другому могут прописываться, а здесь пояснение почти для всех каталогах.

Код
<div class="item grid-item">  
<span class="view-news-moder">$MODER_PANEL$</span>  
<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$">30)?>$TITLE$</a></h2>  
<div class="message">$MESSAGE$</div>  
<hr>  
<div class="entry-meta">  
<ul class="list-inline">  
<li>  
<span class="the-author">  
<a href="$PROFILE_URL$" tite="Добавил материал $USERNAME$">12)?>$USERNAME$</a>Неизвестно  
</span>  
</li>  
<li>  
<span class="the-time" tite="Материал добавлен $DATE$ в $TIME$">  
$DATE$, $TIME$  
</span>  
</li>  
<li>  
<span class="the-comments">  
<a href="$COMMENTS_URL$" title="Комментариев неткомментари4||$COMMENTS_NUM$%100>10&&$COMMENTS_NUM$%100<15)?>евйя">$COMMENTS_NUM$</a>  
</span>  
</li>  
</ul>  
</div>  
</header>  
</article>  
</div>


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

Источник: http://ugarts.pro/
12 Марта 2016 Просмотров: 2168 Комментариев: (15)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

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

Комментарии: 15
Kosten
Kosten 12 Марта 2016 01:311
0
Не сказать что это очень легко, но если все будете делать как описано, то у вас получиться так как на этом сайте, можете посмотреть и оценить какой эффект и нужен он вам или нет, все показано на демонстраций.

Maryges
Maryges 12 Марта 2016 01:352
0
Вот озадачил, пока не сильно волоку, но мне понравился такой эффект, один минус заметил, чем изображение больше, тем в самом виде оно просто не в ширину будет, так как она указана в длинней немного.

Kosten
Kosten 12 Марта 2016 01:393
0
Вот выхватил от тебя Maryges, епть сколько изображений было, ты выбрал с партаками, они тебе на службе не надоели. biggrin
Maryges
Maryges 12 Марта 2016 01:434
0
Да пошел ты Костен) с начало подсадил меня на сайт, теперь синих мне подсовываешь, хотя на сайт забил, в контакте угораю. Там без башиных очень много и характерно я понимаю их, здесь пора задуматься.
FeStemBer
FeStemBer 12 Марта 2016 01:465
0
Костен, со всем уважением, может в личные переписки перейдете.
Что заметил, что на DEMO одни изображение а здесь другие, значит есть сайт полноценный сделан, вот его можно бы посмотреть, демо как то показывает что работает скрипт.А сайт все покажет как он вообще вписывается.
Kosten
Kosten 12 Марта 2016 01:496
0
Он должен остаться в переписки, кажется с Alex_L_X, у него стоит такой вид материала. Но сайт по человечески пойми не могу прописать, если он сам не решит, можешь по этому поводу просто написать.
FeStemBer
FeStemBer 12 Марта 2016 01:537
0
Ты серьезно, так сильно все и по взрослому. Пойду на вебочку, пусть там школьники хамят, но они бы предоставили ссылку.
FeStemBer
FeStemBer 12 Марта 2016 02:008
0
Вот подлец Траст пришел все испоганил) а у меня уже такие планы были.
Maryges
Maryges 12 Марта 2016 02:119
0
Здесь с Траст согласен, это больше на сайт хостинг или еще какой то крученный официальный сайт, где финт на финте, там могу понять, что этот вид будет стоять.
1 2 »
Войдите:
avatar