• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Новый вид материала для сайта на uCoz
Новый вид материала для сайта на uCoz
Сопрано
Пятница, 07 Октября 2016 | Сообщение 1
Оффлайн
Vip
Сообщений:462
Награды: 4
Не сказать что он почти новый вид материала, но его плюс в трансформаций, это можно сделать 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 | Сообщение 2
Оффлайн
Пользователи
Сообщений:716
Награды: 22
Не плохо. Как по мне так две колонки выглядят получше
Страна: (ES)
Kosten
Пятница, 07 Октября 2016 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Все теперь на текстовом шрифте, кому нужно, тот может просто скачать не ставя вид материалов, а так он один и тот же, только разница в колонках и размерах.
Страна: (RU)
Kosten
Пятница, 07 Октября 2016 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
First, надо тему сделать прописные иконки, она у меня есть здесь, но там установка немного другая, идет стилем, а не папками.

Просто у меня давно на папках, хотя думаю нужно обновить.
Страна: (RU)
iMadeas
Понедельник, 17 Октября 2016 | Сообщение 5
Оффлайн
Vip
Сообщений:7
Награды: 1
Не плохо смотрится. Можно еще сделать картинку без padding

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


Ушел с uCoz

Сообщение отредактировал
iMadeas - Понедельник, 17 Октября 2016, 15:49
Страна: (RU)
Kosten
Понедельник, 17 Октября 2016 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Цитата iMadeas ()
А две колонки для информер хорошо подошли бы

iMadeas, так в 2 колонки идут, вот это вид материала в 2 колонки.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Новый вид материала для сайта на uCoz
  • Страница 1 из 1
  • 1
Поиск: