» »

Вид материалов uСonet на файлы uCoz

Вид материалов uСonet на файлы uCoz

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

Ниже идет название и потом краткое описание и оно сделано так, что всегда будет ровно, как видите на картинке. Как положено на нем выведены комментарий, что по клику на надпись вы перейдете на них. Насчет тематике, то здесь точно не скажешь на какую тему этот материал подойдет. Просто он отлично будет смотреться как на софт портале, так и игровая тема может здесь подойти. Из плюсов, это безусловно изображение по своей ширине если говорить о его просмотре на интернетресурсе. Хорошо подойдет на тематический блог, где вы будете писать статьи, что изначально он был сделан для этого.

Так будет смотреться визуально на мобильном устройстве:



Переходим к установке:

Для начало идем вверх сайта (шапка) и ставим стили на шрифтовые иконки, чтоб они отображались. Как вообще они работают, вы можете ЗДЕСЬ ознакомиться.

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


Потом заходим в админ панель и выбираем модуль, это может как каталог файлов и блог а также статьи. И копируем скрипт, потом прописываем и сохранить.

Код
<div class="eBlock-vid">
<div class="img-poster"><a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$"></a></div>
<h2 class="eTitle"><a href="$ENTRY_URL$">$TITLE$</a></h2>
<span class="post-details">Раздел: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></span>
<span class="post-dt"><i class="fa fa-clock-o" aria-hidden="true"></i> <span class="post-date">$DATE$, $TIME$</span></span>  
<?if($MESSAGE$)?><div class="eMessage" style="height: 50px; overflow: hidden;">$MESSAGE$</div><?endif?>
<div class="eDetails">
<div class="com-vid"><a href="$COMMENTS_URL$">$COMMENTS_NUM$ комментар<?if($COMMENTS_NUM$%10=1&&$COMMENTS_NUM$%100!=11)?>ий<?else?><?if($COMMENTS_NUM$%10>=2&&$COMMENTS_NUM$%10<=4&&($COMMENTS_NUM$%100<10||$COMMENTS_NUM$%100>=20))?>ия<?else?>иев<?endif?><?endif?> </a></div><a href="$ENTRY_URL$" class="read-more">Читать далее</a>
</div></div>


Это в CSS:

Код
.post-details, .post-dt {color: #94999e; font-size: 11px;padding-right: 25px; font-family: 'PT Sans';}
.post-details a { color: #383e47; font-weight: 600; font-family: 'PT Sans';font-size: 12px;}
.post-details a:hover { color: #A9953E;}
.eBlock-vid {font-family: 'PT Sans'; margin: 0 0 20px;border-bottom: solid #297BB3;}
.img-poster img {height: 220px; width: 100%;border-radius: 5px;}
.img-poster img:hover { opacity: 0.9;}
.img-poster2 img {margin-bottom: 10px; width: 100%; height: 220px;}
.eDetails {clear: both; overflow: hidden; margin-top: 15px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;}
.read-more {float: right;}
a.read-more {height: 30px; line-height: 33px; padding: 0 10px; color: #fff;background-color: #297BB3; background-size: 200.22% auto; -webkit-background-size: 200.22% auto; -moz-background-size: 200.22% auto; background-position: -0 0; background-image: linear-gradient(to right,rgba(255,255,255,0) 50%,#3f3f3f 50%); transition: background-position .5s ease-out; -webkit-transition: background-position .5s ease-out;}
a.read-more:hover {background-position: -99.99% 0;}
.com-vid {display: inline-block;padding-top: 7px;}
.com-vid a {font-weight: 600; color: #383e47; font-size: 12px;}
.com-vid a:hover {color: #A9953E;}
.com-vid i {font-size: 21px;}


PS - он отлично и корректно смотрится как на широком конструкторе, так и на фиксированной ширине. Можно просто поставить шаблон от системы и установить этот вид, и уже вид стилистики у него появится.

Автор: ДимДимыч
Источник: uConet.ru
17.12.2016 Просмотров: 841 Комментарий: (10)

Поделиться в социальных сетях

Материал разместил

Комментарий: 10
FeStemBer
FeStemBer 17.12.2016 08:131
0
Круто смотрится, да еще и под мобильные устройства настроен. Здесь согласен, что под статьй или у кого блог, то мне кажется такой вид как раз сделан под один модуль.
Kosten
Kosten 17.12.2016 09:042
0
Так на блоге и стоял этот вид материала, просто его проверял на сайте, что по ширине больше был, и все равно подошел и красиво смотрелось. А шаблон тестовый по номеру, точно такой как сейчас по ширине на этом сайте.
Сафрон
Сафрон 17.12.2016 09:073
0
Так сейчас там другой вид на сайте стоит, уже в 2 колонки.
Angerfist
Angerfist 17.12.2016 10:284
0
The comment has been removed by the user.
Kosten
Kosten 17.12.2016 10:445
0
Angerfist, проверил, но все корректно смотрится, знаю что ты по адаптаций под мобилу спец.

Может пропишешь это медио как нужно, но чтоб реально был адаптирован под мобильные устройства.
Kolinkor
Kolinkor 17.12.2016 20:167
0
А как это, если посмотреть, то сайт uConet.ru смотрится хорошо на мобильных. Это вид материала от него, поставил и также все нормально, но согласен, что нужно его не переделать, а просто доработать правильно, говоря о медио.
Kolinkor
Kolinkor 17.12.2016 20:146
0
Нормально смотрится.
Kosten
Kosten 17.12.2016 21:008
0
Сам эффект на кнопке не стандартный, что при наведение сразу меняется, а здесь по другому, но если кто установит то увидит. Но идет под стили сайта, что возможно кому то нужно цвет шрифта изменить.

Dagada
Dagada 18.12.2016 04:279
0
Бомба 04b Я его уже гдето видил только в две колонки .Вспомнанил у Димы на сайте 11a Всем по сто сегодня днюха 47a Я уже начал 27a
Dagada
Dagada 18.12.2016 05:1010
0
однозначно ставлю но по поводу оригинальности здесь
оррррригинальненько 11a оригинальней я не видел .....я бы хотел задать вопрос по поводу политры сайта а именно цвета ..................сам такой цвет выбрал но почему нас тянет на него 07a
avatar