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

Широкий вид материалов Gru 2.0 для uCoz

 
Здесь широкий или можно сказать большой в одну колонку вид материала под многие каталоги. Но изначально сделан под файлы, так как показывает сколько скачало, но это совсем не означает, что на блог или статьи не подойдет. Здесь главное каркас и как он сделан по дизайн и какие у него преимущества на против других. Ведь он простой по своему коду, и при этом стильно смотрится.

Разберем 2 установки и вы сами потом можете выбрать, какая вам будет интересней.

Начнем, где присутствуют классы, а точнее кнопки с кнопками, которые можете установить и убрать простые стрелки. Для этого вам нужно с начало прочесть небольшую статью на форуме. Где написано, как что ставить и где брать сами кнопки а точнее их значение прописать, чтоб они появились, и получиться так как на изображение.

И вил материалов будет немного доработан, вот его код.

Код
<div class=»material-ie»><div class=»ie-material»>  
<a href=»$ENTRY_URL$» title=»$TITLE$»><div class=»ie-material-img»><div class=»mask»>Перейти к материалу</div><img src=»$IMG_URL1$» alt=»$TITLE$»></div></a>  
<div class=»ie-material-title»><b>$TITLE$</b><hr></div>  
<div class=»ie-information»> <i class=»fa fa-check-square»></i> Категория: <a href=»$CATEGORY_URL$»><b>$CATEGORY_NAME$</b></a> » <i class=»fa fa-eye»></i> Просмотров: <b>$READS$</b> » <i class=»fa fa-commenting»></i> Комментариев: <b>$COMMENTS_NUM$</b> » <i class=»fa fa-cloud-download»></i> Загрузок: <b>$LOADS$</b> » <i class=»fa fa-calendar»></i> Дата: <b title=»$TIME$»>$DATE$</b><hr></div>  
<div class=»ie-material-text»><p><?if(len($MESSAGE$)>330)?><?substr($MESSAGE$,0,330)?>….<?else?>$MESSAGE$<?endif?></p></div>  
</div></div>

И для завершение нужно еще в CSS поставить стили.

Код
.ie-material border: 2px solid #2F85BF;width: 765px;float: left;margin: 0 2% 2.5% 0;background: rgba(220, 197, 142, 0.15);border-radius: 10px;  
.ie-material-img width: 100%;height: 190px;overflow: hidden;position: relative;border-radius: 7px 7px 0px 0px;  
.ie-material-img img width: 100%;min-height: 100%;border-radius: 7px 7px 0px 0px;  
.mask position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.6);text-align: center;line-height: 220px;color: #fff;font-size: 15px;opacity: 0;transition: all .3s ease;font-family: ‘Cuprum’;text-transform: uppercase;border-radius: 7px 7px 0px 0px;  
.ie-material-img:hover .mask opacity: 1;  
.ie-material-text padding: 0 20px 0 17px;line-height: 22px;color: #393939;height: 75px;overflow: hidden;margin: 0 0 15px 0;  
.ie-material-title padding: 15px 20px 5px 15px;color: #2472A7;font-size: 14px;height: 25px;overflow: hidden;  
.ie-material-title a color:#DC903A;text-decoration:none;  
.ie-material-title a:hover color:#393939;text-decoration:none;  
.ie-information margin: 6px 16px -17px;color:#393939;font-size: 11px;  
.material-ie margin: 0px -12px 1px 13px;

Вот по измененному а точнее мы сами немного добавили и другой вид.

PS — до этого был похожий материал,только в 2 колонки, который можете посмотреть здесь, все также по стилям идет.

Сейчас переходим к стандартному №2

Стили остаются те же и также в CCS их ставим, и потом код вил материала, код вы можете скачать, он в текстовом файле будет, чтоб не путались, под это уже материал.

Также будет эффект, что при наведение картинка потемнеет и появиться надпись, переход к основному материалу. Теперь вы сможете выбрать что вам интересней, и подойдет под ваш ресурс.
Источник: http://internetempire.ru/