вСкрипты для Юкоз

Изображение вид материала и ком для 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=»//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»><h1>$ENTRY_TITLE$ </h1><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 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;

Последний стиль отвечает за размер кнопок социальных.
На этом установка закончена.

источник: zornet.ru

Похожие посты