ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Изображение вид материала и ком для uCoz

Изображение вид материала и ком для uCoz

Изображение вид материала и ком для uCoz
Это оформление на изображение, которое будет стоять вид материала и комментариев к нему. Так как по умолчанию не идет и здесь вы можете установить красивую картинку. С ним идут стили, которые отвечают за тени в низу, так как можно заметить, что там намного темней, это на тот случай, если картинка будет светлой и вы также можете видеть название и все функций к нему.

Можно поставить как на модуль блог или статьи, но это у кого что открыто. Название также в низу а по верх стоят социальные закладки, где будут учитываться все клики. Немного все углы закруглил, но это все можно исправить и поставить как на вашем ресурсе, все в CSS настраивается.

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



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

По установке очень просто.

Если по ширине и длине вам нужно подредактировать, то первый стиль 100%;height:280px; отвечает за него.

Этот код нужно поместить уже внутрь готовой страницы:

Код
<div class="m-article-bg" style="background-image:url($IMG_URL1$)">  
<div class="m-article-socbtn">  
<script type="text/javascript" src="http://zornet.ru/Ajaxoskrip/Aster/es5-shims.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://zornet.ru/Ajaxoskrip/Aster/share.js" charset="utf-8"></script>  
<div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus" data-counter=""></div>  
  </div>  
<div class="m-article-info tahoma"><h1>$ENTRY_TITLE$ </h1><div>  
Новость добавил:<a href="$PROFILE_URL$">$USER$,</a>  
<span class="date" title="Дата"><i class="fa fa-calendar"></i> $ADD_DATE$</span>  
<span title="Просмотров"><i class="fa fa-eye"></i> $READS$</span>  
<span title="Комментариев"><i class="fa fa-comments"></i> $COMMENTS_NUM$</span>  
</div>  
</div>  
</div>

CSS:

Код
.m-article-bg {position:relative;width: 100%;height:280px;background-position:center top;background-size:cover; border-radius: 5px;}  
.m-article-bg .m-article-socbtn, .fls-head .fls-soc {position:absolute;top:16px;right:16px;}  
.m-article-info {position:absolute;padding:0 30px;right:0;bottom:0px;left:0px;background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0)); border-radius: 5px;}  
.m-article-info h1 {font-size:21px;color:#fff;text-shadow:1px 1px 0 #000;margin:0;padding:20px 0 5px 0;font-weight:normal;line-height:26px;}  
.m-article-info > div {padding:0 0 21px 2px;font-size:11px;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.8);}  
.m-article-info > div a {position:relative;padding-left:5px;color:#03A9F4;font-weight:bold;}  
.m-article-info > div a img {position:absolute;width:40px;height:40px;top:-13px;left:-1px;border-radius:50%;}  
.m-article-info > div span {margin-left:10px;}  
.m-article-info > div .date {margin-left:0;text-transform:lowercase;}  
.m-article-info > div span i {color:#03A9F4;}  
.m-article-like {position:absolute;right:10px;bottom:10px;font-size:12px;color:#fff;}  
.m-article-like a {color:#fff}  
.m-article-like > div {display:inline-block;background:rgba(0, 0, 0, 0.7);border-radius:3px;cursor:pointer;padding:10px;transition:all 250ms linear;}  
.m-article-like > div:hover {background:#2196F3;}  
.m-article-like .thx {margin-left:3px;}  
.m-article-like .like-user .likeplus > i, .m-article-like .like-user .likeplus_hover > i {padding-left:3px;}  
.m-article-like .like-user > div {display:inline-block;}  
.m-article-panel {position:absolute;top:16px;left:16px;}  
.ya-share2__container_size_m .ya-share2__icon {height: 25px!important;width: 25px!important;background-size: 25px 25px!important;}

Последний стиль отвечает за размер кнопок социальных.
На этом установка закончена.
28 Января 2016 Просмотров: 2719 Комментариев: (17)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 16
Сопрано
Сопрано 28 Января 2016 21:071
0
Вообще красиво, только не привычно, что название в самой картинке. Можно его как то вывести из нее и поставить выше самого изображение.
Kosten
Kosten 28 Января 2016 21:184
0
Все можно, сейчас сделаю, если сами не можете.
Сопрано
Сопрано 28 Января 2016 21:235
0
Да, можно самому, просто вы уже начали и знаете код.
Kosten
Kosten 28 Января 2016 21:296
0
Вообщем не чего сложного, стили поменять по названию и выставить там категорию. А точнее в какой категорий будет находиться тот или иной материал.

Это код:

Код
<div class="m-article-bg" style="background-image:url($IMG_URL1$)">
<div class="m-article-socbtn">
<script type="text/javascript" src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js" charset="utf-8"></script>
<script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8"></script>
<div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus" data-counter=""></div>   
</div>
   <div class="m-article-info tahoma"><zornet>Категория: $CAT_NAME$</zornet><div>
Новость добавил:<a href="$PROFILE_URL$">$USERNAME$,</a>   
<span class="date" title="Дата"><i class="fa fa-calendar"></i> $ADD_DATE$</span>
<span title="Просмотров"><i class="fa fa-eye"></i> $READS$</span>
<span title="Комментариев"><i class="fa fa-comments"></i> $COMMENTS_NUM$</span>
</div>
</div>
</div>


CSS

Код
.m-article-bg {position:relative;width: 100%;height:280px;background-position:center top;background-size:cover; border-radius: 5px;}
.m-article-bg .m-article-socbtn, .fls-head .fls-soc {position:absolute;top:16px;right:16px;}
.m-article-info {position:absolute;padding:0 30px;right:0;bottom:0px;left:0px;background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0)); border-radius: 5px;}
.m-article-info zornet {font-size:18px;color:#fff;text-shadow:1px 1px 0 #000;margin:0;padding:20px 0 5px 0;font-weight:normal;line-height:26px;}
.m-article-info > div {padding:0 0 21px 2px;font-size:11px;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.8);}
.m-article-info > div a {position:relative;padding-left:5px;color:#03A9F4;font-weight:bold;}
.m-article-info > div a img {position:absolute;width:40px;height:40px;top:-13px;left:-1px;border-radius:50%;}
.m-article-info > div span {margin-left:10px;}
.m-article-info > div .date {margin-left:0;text-transform:lowercase;}
.m-article-info > div span i {color:#03A9F4;}
.m-article-like {position:absolute;right:10px;bottom:10px;font-size:12px;color:#fff;}
.m-article-like a {color:#fff}
.m-article-like > div {display:inline-block;background:rgba(0, 0, 0, 0.7);border-radius:3px;cursor:pointer;padding:10px;transition:all 250ms linear;}
.m-article-like > div:hover {background:#2196F3;}
.m-article-like .thx {margin-left:3px;}
.m-article-like .like-user .likeplus > i, .m-article-like .like-user .likeplus_hover > i {padding-left:3px;}
.m-article-like .like-user > div {display:inline-block;}
.m-article-panel {position:absolute;top:16px;left:16px;}
.ya-share2__container_size_m .ya-share2__icon {height: 25px!important;width: 25px!important;background-size: 25px 25px!important;}


Так будет:



Название сами выведете, здесь выше оно прописано.
csretven
csretven 28 Января 2016 23:0414
0
Что то не стал этот устанавливать, тот более оригинален, это который первый.
tsakonter
tsakonter 28 Января 2016 21:112
0
Социальные кнопки от Яндекс стоят как понимаю. Или можно другие поставить.
Kosten
Kosten 28 Января 2016 21:163
0
Да, все верно, об этом забыл сказать, это Яндекс поделись где вы можете перейти и убрать тот код, хотя он полностью рабочий будет, так как к сайту не прикреплен. А просто если хотите другой дизайн или чтоб клики не выводило или просто кнопок больше добавить. То просто поменяйте, с начало посмотрите какой у вас код получился и найдите такой в скрипте.
Сафрон
Сафрон 28 Января 2016 21:327
0
Смотрится очень даже не чего, один вопрос, Костен, что сам не выставишь, по явно лучше чем сейчас стоит.
Kosten
Kosten 28 Января 2016 21:378
0
Сафрон, писал уже, что делал мобильную адаптацию и если мне ставить этот скрипт, то нужно обратно заказывать, а это не дешево. А на счет, что лучше иди хуже, у каждого свои вкусы.
ucozmental
ucozmental 28 Января 2016 21:419
0
А стили где на новый вид?
Kosten
Kosten 28 Января 2016 21:4311
0
Забыл прописать, все исправил.
ucozmental
ucozmental 28 Января 2016 21:4210
0
Все вижу, спасибо.
Tergran
Tergran 28 Января 2016 21:4612
0
Так не скажу что блистательно, но средне, здесь код сам небольшой, больше скрипт на социальные закладки.
Устанавливать нужно вид материалов и комментариев к нему, где то после этого кода.

Код
<table border="0" width="100%" cellspacing="0" cellpadding="2" class="eBlock">
csretven
csretven 28 Января 2016 23:0313
0
То что мне как раз нужно было, поставил и совершенно другой вид стал.
1 2 »
Войдите:
avatar