« Вид материалов в две колонки для uCoz от Dimstrika »

Описание материала:

Вид материалов тоже играет не малую роль в вашем сайте и каждый администратор сайта хочет сделать простой но удобный и аккуратный дизайн на своём сайте, даже если речь идёт о виде материалов.

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

Дизайн вид материалов выстроен в двух колонках, но можно сделать и в три колонки и в четыре, так же можно и в один но мне он не понравился а вот в несколько смотрится думаю отлично.

Сам код вид материалов вставьте его в нужный модуль сайта.

Код
<div class="game-vid">
<div class="game-title"><span class="xml-text"><a href="$ENTRY_URL$" >$TITLE$</a></span></div>
<div class="game-img"><a href="$ENTRY_URL$" title="$TITLE$"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$"></a></div>
<div class="game-detali"><li><i class="fa fa-eye"></i>$READS$</li><li><i class="fa fa-download"></i>$LOADS$</li> <li style=" float: right; margin-right: 2px; "><i class="fa fa-wifi"></i><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></li></div>
<div class="game-text">$MESSAGE$</div>
<div class="text_knop"><div class="kp"><a class="knop" href="ссылка на скачивание" target="_blank" title="">СКАЧАТЬ</a></div> <div class="kp"><a href="$ENTRY_URL$" class="knop"> ПОДРОБНЕЕ</a></div></div>
</div>


Стили установите в стили вашего сайта, в самый низ ваших стилей.

Код
.game-vid {width: 339px; float: left; display: inline-block; background-color: #fff; border-bottom: 1px solid #ebebeb; border-right: 1px solid #ebebeb; padding: 14px 10px;}
.game-text {margin-top: 5px; height: 65px; overflow: hidden; text-align: justify; padding-left: 5px; padding-right: 5px; padding-bottom: 5px; font-size: 12px; font-family: Tahoma,Arial; line-height: 17px;}
.game-img img {object-fit: cover; height: 200px; width: 100%; }
.game-img2 img {height: 300px; width: 350px; box-shadow: 0px 3px 10px #969696;}
.game-title {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; padding: 15px 0px 10px 0px;}
.game-title a {line-height: 1.3; word-wrap: break-word; color: #4B4D52; font-size: 17px; font-weight: normal;}
.game-title a:hover {color: #CD8121;}
.game-detali {padding-left: 3px; margin-top: 5px; height: 20px; line-height: 20px; font-size: 13px; border-bottom: #e7e7e7 1px solid; padding-bottom: 5px;}
.game-detali li {list-style: none; margin-right: 15px; display: inline-block;}
.game-detali i {color: #6B6B6B; padding-right: 5px;}
.game-detali a {color: #545457;}
.game-detali a:hover {color: #F27935;}

.text_knop { width: 350px; float: left; color: #d55e1a; font-size: 18px; text-decoration: none; padding-top: 5px;}
.kp { padding-left: 22px; float: left; width: 135px; height: 30px; }
.knop { width: 80px; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; -webkit-transition: all .1s ease-out; background: #515151; border: none; color: #fff !important; cursor: pointer; display: block; float: left; font-size: 12px; font-weight: bold; height: 30px; line-height: 30px; margin: 0 5px 2px 2px; padding: 0 25px; text-align: center; transition: all .1s ease-out; }
.knop:hover {background: #CD8121; }


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

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

Код
@import url('/css/font-awesome.css') all;


В общем думаю вам будет интересен этот материал, и я не зря старался smile


Скачать ( Размер архива 702.0 Kb )

По данной ссылке, Вы можете скачать или купить архив данного материала

Установка материала

Мы поможем установить данный материал к Вам на сайт

Источник

Материал взят со стороннего ресурса и был проверен нами


Добавил: Dimstrik | Категория: Скрипты для uCoz | Просмотров: 743 | Загрузок: 33

Теги к материалу: материалов, вид, ucoz, Dimstrika, от, Две, для, колонки

Поделиться в соц. сетях:
Комментариев к материалу: 1
Александр 09.08.2016 в 23:26Спам
Вид материала шикарно получился biggrin
0
avatar