Стильный вид материала 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/ | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 19 | |
| |
| 1 2 » | |
