» »

Вид материла и смена на колонки для 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.03.2016 Просмотров: 599 Комментарий: (15)

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

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

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

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

Kosten
Kosten 12.03.2016 01:393
0
Вот выхватил от тебя Maryges, епть сколько изображений было, ты выбрал с партаками, они тебе на службе не надоели. biggrin
Maryges
Maryges 12.03.2016 01:434
0
Да пошел ты Костен) с начало подсадил меня на сайт, теперь синих мне подсовываешь, хотя на сайт забил, в контакте угораю. Там без башиных очень много и характерно я понимаю их, здесь пора задуматься.
FeStemBer
FeStemBer 12.03.2016 01:465
0
Костен, со всем уважением, может в личные переписки перейдете.
Что заметил, что на DEMO одни изображение а здесь другие, значит есть сайт полноценный сделан, вот его можно бы посмотреть, демо как то показывает что работает скрипт.А сайт все покажет как он вообще вписывается.
Kosten
Kosten 12.03.2016 01:496
0
Он должен остаться в переписки, кажется с Alex_L_X, у него стоит такой вид материала. Но сайт по человечески пойми не могу прописать, если он сам не решит, можешь по этому поводу просто написать.
FeStemBer
FeStemBer 12.03.2016 01:537
0
Ты серьезно, так сильно все и по взрослому. Пойду на вебочку, пусть там школьники хамят, но они бы предоставили ссылку.
FeStemBer
FeStemBer 12.03.2016 02:008
0
Вот подлец Траст пришел все испоганил) а у меня уже такие планы были.
Maryges
Maryges 12.03.2016 02:119
0
Здесь с Траст согласен, это больше на сайт хостинг или еще какой то крученный официальный сайт, где финт на финте, там могу понять, что этот вид будет стоять.
csretven
csretven 12.03.2016 02:2110
0
И почему вы так решили, вы что на демо не видите, что даже на нем нормально будет. А если сайт рабочий, то эти кнопки не как не поменяют, можно вообще вывести в другом оттенке в стилях или поставить прозрачность, если так сильно мешать будут. Так что вид рабочий и думаю уже стоит на многих сайтах.
workman
workman 12.03.2016 09:1411
0
Как по мне так вообще бесполезный скрипт. Но что в нем конечно самое ценное так это сам скрипт с куками, запоминающими в каком состоянии пользователь оставил кнопку вида материала на сайте. Ну а с другой стороны весит конечно данный скрипт не слабо ... Последнее время Яша стал на такие скрипты ругаться так как для пользователей может и быстро откроет сайт а вот для ботов он тормознутый. ...
Сопрано
Сопрано 12.03.2016 22:3412
0
Интересно как индексировать будет материал или все равно когда сайт закрываешь они устанавливают как нужно. С такими скриптами поисковые роботы так и до файла не пролезут.
schoolonly
schoolonly 18.03.2016 15:4013
0
А теперь угадайте, чей это материал? В смысле про морских свинок?
1 2 »
avatar