Вид материла и смена на колонки для uCoz
 | |
| Если вы решили сделать ресурс, который кардинально был бы не похожий на других, то возможно этот скрипт вам пригодиться. Это вид материала стильный, который вы сами будете делить на колонки. А это можно сделать в ручном режиме от одной до трех не испортив дизайн сайта. Просто теперь ресурс будет точно функционален, и все только вам нужно сделать как написано. Здесь мы видим, как будет по умолчанию.  Как видим, все очень даже стандартно и понимаем, что на главную страницу можно вывести как больше файлов. Но как можно заметить, что по вверх стоят 3 кнопки, которые вписаны в дизайн. Их работа, это сделать к примеру, чтоб было 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/ | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 15 | |
|
| |
| 1 2 » | |
