» »

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


Широкий вид материалов 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/
22.02.2016 Загрузок: 4 Просмотров: 496 Комментарий: (18)

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

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

Комментарий: 18
Сопрано
Сопрано 22.02.2016 16:521
0
Костен, давно нужно было статью написать и на ее ссылаться, а то каждый раз описывать по этим кнопкам. Мне кажется такие виды все одинаковы, так считаю, широкие или или на одну колонку, но думаю дольше всего большой по изображению.
tsakonter
tsakonter 22.02.2016 17:112
0
Что то с материалом напряг, один и тот же вид переделываем, хотя кому то видней, нормально сделан, можно и повторить, только немного измененным, было 2 колонки, стала одна, только не нужно делать 3 колонки, все понятно. шутка)
Scheme
Scheme 22.02.2016 17:213
0
tsakonter, мне так показалось, что ваш порыв сумничать как то не уместно. Здесь приведены ссылки и все остальное и даже поставлен источник, с которым иногда просто не согласен. Просто бываю на этом сайте и там на всем материале просят источник, что не правильно, так как большая половина из паблика, но ладно, это не мое дело.

А теперь давайте разберемся, на этот сайт большинство как новички заходят и они пока не в курсе, что как сделать, вывести на одну колонку или на 2, это не информер, где все автоматически делается.
А вы говорите, что одно и тоже, с вами бы многие не согласились, но те кто не знают как сделать.
Kosten
Kosten 22.02.2016 17:255
0
На счет источника, где беру материал, там парень сам делает или просто переделывает, и если ставит источник, так нужно, а чужой труд нужно уважать, и если ты берешь материал, думаю не переломит, прописать ссылку на сайт, это будет нормально и правильно.
tsakonter
tsakonter 23.02.2016 01:1714
0
Так если подойти с умом, можно еще на нем по поводу дизайн поработать, отвести описание под серый тон, также углы сильно закруглены, просто ставил, проверял увеличение кнопок, так намного зрелищней становиться.
Kosten
Kosten 22.02.2016 17:234
0
Но так думаю, это как то не очень удобно в чужой горем лести со своим уставом, да безусловно прислушаюсь.
Maryges
Maryges 22.02.2016 17:336
0
Из всего, здесь только название оригинальное. biggrin Проверил на мобильное приложение и тут нужно его подгонять, хотя многие не делают этого.
Tergran
Tergran 22.02.2016 17:437
0
Но здесь сами иконки идут ровно под шрифт, и это как то не очень смотрится, нужно чтоб они немного больше были.
csretven
csretven 22.02.2016 18:168
0
Нормальный вид и замечу сделан качественно, но не оптемизирован под мобильные устройства, так делайте, если не умеете, найдите и вам сделают. Если не хотите тратить денег, ставте стандартный. Но не встретишь вид материала, который бы уже подходил под устройства. Ла и как его вылаживать, ведь в CSS основном все делают.
frecsarg
frecsarg 22.02.2016 18:209
0
Почему то мне кажется в 2 колонки идет лучше и как то будет больше материала. А если одна, но можно поставить под новости, но не забывайте, нужно изображение как то подгонять по размерам, чтоб хорошо смотрелось в самом виде. Да, такой новостной сайт, любая тематика, это игры или что то другое, но на файлы как то не то.
Kosten
Kosten 22.02.2016 18:2710
0
Здесь каждому свое, также на кино сайте было в 3 колонки, не знаю, так можно что ли. Все убрал и сделал в одну, для меня просто понятнее.
uvlecheniehobby-ru
uvlecheniehobby-ru 22.02.2016 20:5011
0
хороший пример сайта СПАМ
Kosten
Kosten 22.02.2016 20:5712
0
Плохой пример спама.
tsakonter
tsakonter 22.02.2016 21:2713
0
Что ты их оставляешь, их не исправить, они также спамить будут, не понимая, что могут сайта лишится.
Scheme
Scheme 23.02.2016 01:2215
0
По идее вид материала должен быть удобный, это на первом месте и понятный, а сто дизайн у него, но раньше ставили дизайнерские, сейчас посмотришь, уде простой стоит.
Alex_L_X
Alex_L_X 23.02.2016 01:3916
0
тут напряг со скринами будет, ставил такой, постоянно страшные изображения, если только подгонять каждый раз
Kosten
Kosten 24.02.2016 01:3718
0
Так про это и говорил, что под такой вид нужно подгонять изображение. Сам стараюсь подгонять, чтоб вид материалов и комментариев как то нормально смотрелось.
Kosten
Kosten 23.02.2016 21:5117
0
Если говорить о стилях и классах, которые выводят иконки, то вот официальный сайт, где можно скачать и закинуть в корень сайта.
avatar