Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Новый вид материала для сайта на uCoz
Новый вид материала для сайта на uCoz
Сопрано
Дата: Пятница, 07.10.2016, 04:20 | Сообщение # 1
Пользователи
Сообщений:265
Награды: 2


Не сказать что он почти новый вид материала, но его плюс в трансформаций, это можно сделать 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(73Kb) · 0432374.jpg(85Kb) · font-awesome.rar(536Kb)


Сообщение отредактировал Trantel - Пятница, 07.10.2016, 04:44
First
Дата: Пятница, 07.10.2016, 08:28 | Сообщение # 2
Vip
Сообщений:381
Награды: 11


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

Kosten
Дата: Пятница, 07.10.2016, 13:45 | Сообщение # 3
Администраторы
Сообщений:12657
Награды: 38


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

Kosten
Дата: Пятница, 07.10.2016, 15:26 | Сообщение # 4
Администраторы
Сообщений:12657
Награды: 38


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

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


iMadeas
Дата: Понедельник, 17.10.2016, 15:49 | Сообщение # 5
Vip
Сообщений:7
Награды: 1


Не плохо смотрится. Можно еще сделать картинку без padding

А две колонки для информера хорошо подошли бы(в 3-4 колонки)


Сообщение отредактировал iMadeas - Понедельник, 17.10.2016, 15:49
Kosten
Дата: Понедельник, 17.10.2016, 17:50 | Сообщение # 6
Администраторы
Сообщений:12657
Награды: 38


Цитата iMadeas ()
А две колонки для информер хорошо подошли бы

iMadeas, так в 2 колонки идут, вот это вид материала в 2 колонки.


Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Новый вид материала для сайта на uCoz
Страница 1 из 11
Поиск: