» »

Стильный вид материала 2 колонки для uCoz


Стильный вид материала 2 колонки для uCoz

Отлично будет смотреться на светлом сайте и как можно заметить, дизайн у него простой. Что можно сделать вывод, он подойдет на большинство тематических сайтов, которые будут выводит изображение. Здесь настроено и будет 2 колонки, а значит сама картинка будет намного больше стандартной. Подойдет на все модули, как он новостей, так и для файлов, если еже добавить кнопку.

Будет 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><?if(len($TITLE$)>38)?><?substr($TITLE$,0,38)?>....<?else?>$TITLE$<?endif?></b><hr></div>  
<div class="ie-information">Просмотров: <b>$READS$</b> | Комментариев: <b>$COMMENTS_NUM$</b> | Дата: <b title="$TIME$">$DATE$</b><hr></div>  
<div class="ie-material-text"><p><?if(len($MESSAGE$)>280)?><?substr($MESSAGE$,0,280)?>....<?else?>$MESSAGE$<?endif?></p></div>  
</div></div>


CSS:

Код
.ie-material {border: 2px solid #5A9FCE;width: 47%;float: left;margin: 0 2% 2.5% 0;background: rgba(220, 197, 142, 0.15);border-radius: 10px;}  
.ie-material-img {width: 100%;height: 220px;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 15px;line-height: 22px;color: #393939;height: 140px;overflow: hidden;margin: 0 0 15px 0;}  
.ie-material-title {padding: 15px 20px 5px 15px;color: #205F8A;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;}


Второй вид:

Он по стилям немного изменен и теперь будут стоять значки, тот который на первом изображение. Стили одни и те же в CSS прописываем. Но здесь нам нужно вверх сайта поставить стиль, который будет выводить иконки, так как они не идут ссылкой, как привыкли.

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


Но теперь ставим этот вид материала:

Код
<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><?if(len($TITLE$)>30)?><?substr($TITLE$,0,30)?>....<?else?>$TITLE$<?endif?></b><hr></div>  
<div class="ie-information"> <i class="fa fa-eye"></i> Просмотров: <b>$READS$</b> » <i class="fa fa-comments"></i> Комментариев: <b>$COMMENTS_NUM$</b> » <i class="fa fa-calendar"></i> Дата: <b title="$TIME$">$DATE$</b><hr></div>  
<div class="ie-material-text"><p><?if(len($MESSAGE$)>275)?><?substr($MESSAGE$,0,275)?>....<?else?>$MESSAGE$<?endif?></p></div>  
</div></div>


Вот вся установка, теперь давайте разберем.

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

Код
<i class="fa fa-comments"></i>


Просто его можно поставить перед оператором, что мы и сделали. Главное здесь fa fa-comments и если вы хотите сменить, то заходим на этот сайт и там выбираем, какая иконка подходит и уже в классе меняем ее и будет другая, которую поставили.

И вы теперь можете поставить там где хотите, здесь сделано вид материала, также можно поставить в название, перед ним, как основном делают.

Источник: http://internetempire.ru/
21.02.2016 Просмотров: 719 Комментарий: (20)

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

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

Комментарий: 19
Maryges
Maryges 21.02.2016 19:181
0
Нормально сделан вид с классами, но у меня другой вопрос. Где можно скачать эти классы и закинуть в корень сайта, чтоб не ставить вверх сайта.
tsakonter
tsakonter 21.02.2016 19:232
0
Maryges, с официального сайта, раньше заходил на его, сейчас просто найти не могу, просто эти классы разбросаны.
Kosten
Kosten 21.02.2016 19:314
0
Но зачем скачивать, когда можно так установить, просто мне давали их, не сохранил.
Kvint
Kvint 21.02.2016 19:378
0
Так ссылка есть в материале, заходим и ищем,, но лучше спросить.
Scheme
Scheme 21.02.2016 21:0617
0
Да там не чего не понять, и если найти, то в корень сайта наверно нужно загрузить.
Canon
Canon 21.02.2016 19:4611
0
Не понимаю, почему не устраивает этот код, ведь они там обновляют, а закачаете, уже не обновить, только разве новые закидывать.
Kosten
Kosten 21.02.2016 19:303
0
Забыл написать, что стили, которые ставим вверх сайта, для второго вид материала, нужно иконочный шрифт между <head> и </head> так вернее будет.
FeStemBer
FeStemBer 21.02.2016 19:345
0
Кто то раньше говорил, что не представляет 2 колонки, или одна или три. Вот пример, и думаю на светлом сайте отлично будет. И в описание поставлено вывод знаков и в название, так что настроить и не чего влазить или больше не будет.
YaVi
YaVi 21.02.2016 19:356
0
Отлично выглядит 2 вариант)
Kosten
Kosten 21.02.2016 19:377
0
Стараюсь брать материал и доработать или оттенок сменить, чтоб не дублировать источник.
YaVi
YaVi 21.02.2016 19:389
0
Это правильно) Если беру, то тоже так делаю, так сказать настраиваю его под себя)
Kosten
Kosten 21.02.2016 19:4712
0
Но есть другие, которые и описание еще заберут.
YaVi
YaVi 21.02.2016 20:0916
0
Это да biggrin
Kvint
Kvint 21.02.2016 19:4410
0
Новости или блог статьи, но на каталог файлов не вижу его, его нужно доработать и ставить еще одну иконку, а там и так все занято и места нет.
ucozmental
ucozmental 21.02.2016 19:5713
0
Так начал делать игровой сайт, вот думаю поставит, и YaVi, тоже вторые больше нравятся, чет просто вертикальная полоса.
csretven
csretven 21.02.2016 20:0214
0
Но под игры нужно больше материала. А так когда идет 2 колонки, это вообще редко встретишь.
Kosten
Kosten 21.02.2016 20:0515
0
Вот так может выглядит название, если вы выставите мало знаков, так что здесь сами по ширине сайта смотрите, так как лучше полное чтоб было.

FeStemBer
FeStemBer 21.02.2016 21:0718
0
Так сейчас чем проще и тем лучше на сайте. Просто не рисуют как раньше, а просто сами делают.
Kosten
Kosten 22.02.2016 01:4619
0
Это точно, когда первые делал шаблон дизайнерский, так и то ждал, так как заказов много было. Но своими новыми шаблонами от uCoz, весь малый бизнес просто пропал, как стал по сути не актив.
avatar