Новый вид материала для сайта на uCoz - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Новый вид материала для сайта на uCoz

Сопрано

Пятница, 07 Октября 2016, 04:20 | Сообщение 1

Vip

Сообщений:461

Награды: 4

« 14 »

Не сказать что он почти новый вид материала, но его плюс в трансформаций, это можно сделать 2 колонки или одну. Создан он для светлого сайта, сам немного затемненный, чтоб отличатся от фона. Если брать на две колонки, то там красиво прописаны тени и он отлично виден. Здесь вы просто можете выбрать, какой вам больше подойдет на сайт.

Одна колонка:

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

Код

<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><i class="fa fa-comments"></i>$COMMENTS_NUM$</li> <li style=" float: right; margin-right: 2px; "><i class="fa fa-file-text"></i><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></li></div>
<div class="game-text">$MESSAGE$</div>
</div>

CSS:

Код

.game-vid {width: 757px; margin: 9px; float: left;background-color: #DEDEDE; padding: 14px 10px; border-radius: 3px; -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30); box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30);}
.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%;border-radius: 5px;}
.game-img2 img {height: 300px; width: 350px; box-shadow: 0px 3px 10px #969696;}
.game-title {white-space: nowrap; overflow: hidden; -webkit-mask: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0) 86px, rgba(0, 0, 0, 0)); padding: 0 0 10px 0;}
.game-title a {line-height: 1.3;word-wrap: break-word;color: #074558;font-size: 17px;font-weight: normal;}
.game-title a:hover {color: #2184CD;}
.game-detali {padding-left: 3px; margin-top: 5px;height: 20px; line-height: 20px; font-size: 13px;border-bottom: #AFAFAF 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;}

Теперь 2 колонки, вид материала тот же, но просто дописываем как сказано было, только стили другие а это размер и тени.

Код

.game-vid {width: 359px; margin: 9px; float: left;background-color: #EFEFEF; padding: 14px 10px; border-radius: 3px; -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30);box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.63);}
.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%;border-radius: 5px;}
.game-img2 img {height: 300px; width: 350px; box-shadow: 0px 3px 10px #969696;}
.game-title {white-space: nowrap; overflow: hidden; -webkit-mask: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0) 86px, rgba(0, 0, 0, 0)); padding: 0 0 10px 0;}
.game-title a {line-height: 1.3;word-wrap: break-word;color: #074558;font-size: 17px;font-weight: normal;}
.game-title a:hover {color: #2184CD;}
.game-detali {padding-left: 3px; margin-top: 5px;height: 20px; line-height: 20px; font-size: 13px;border-bottom: #AFAFAF 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;}

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

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

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

Прикрепления: 1627240.jpg (72.6 Kb) · 0432374.jpg (85.5 Kb) · font-awesome.rar (535.9 Kb)

Сообщение отредактировал
Trantel - Пятница, 07 Октября 2016, 04:44

Страна: (RU)

First-1

Пятница, 07 Октября 2016, 08:28 | Сообщение 2

Пользователи

Сообщений:716

Награды: 22

« 6 »

Не плохо. Как по мне так две колонки выглядят получше

Страна: (ES)

Kosten

Пятница, 07 Октября 2016, 13:45 | Сообщение 3

Администраторы

Сообщений:44490

Награды: 70

« 557 »

Все теперь на текстовом шрифте, кому нужно, тот может просто скачать не ставя вид материалов, а так он один и тот же, только разница в колонках и размерах.

Страна: (RU)

Kosten

Пятница, 07 Октября 2016, 15:26 | Сообщение 4

Администраторы

Сообщений:44490

Награды: 70

« 557 »

First, надо тему сделать прописные иконки, она у меня есть здесь, но там установка немного другая, идет стилем, а не папками.

Просто у меня давно на папках, хотя думаю нужно обновить.

Страна: (RU)

iMadeas

Понедельник, 17 Октября 2016, 15:49 | Сообщение 5