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

Дизайнерский вид материалов новостей для uCoz

Дизайнерский вид материалов новостей для uCoz
В уникальной стилистике предоставлен вид материалов в темном виде на одну колонку, что идет под новостной блог, сайта системы uCoz. Отличное решение на нем было разместить социальные кнопки, что можно как добавить или полностью убрать. Он полностью выставлен на чистых стилях. что палитра цвета легко меняется. Спасибо модератору First за предоставленный материал, что только немного довел его, чтоб смотрелся корректно и увеличил на 100% размер изображение, что остальное все идет по умолчанию.

Здесь вы можете увидеть кто разместил статью или новостной пост, так как изображение пользователя будет в стилистике идти и отлично смотреться в круглом виде Avatar, по левой стороне. Он так сделан, что основной обзор не на него идет, а га основание. Не говоря о тенях и изменение гаммы цвета, что создает визуально трехмерное видение. Адаптивность у него присутствует, но здесь каждому нужно понять, что нужно убирать при виде на мобильном аппарате, но вид ниже предоставлен.

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

Вид материала в одну колонку на сайт

HTML

Код
<div class="ms-item6">
<article class="zornet_runim-item video-post">
<div class="pd-20">
<div class="zornet_runim-thumb style1">
<a href="$ENTRY_URL$"><img src="<?if($IMG_URL1$)?>$IMG_URL1$<?else?>/imeges/no_image.jpg<?endif?>" alt="$TITLE$"></a>
<?if($CATEGORY_NAME$)?><h5><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></h5><?endif?>
</div>
<div class="zornet_runim-content">
<h4 class="zornet_runim-title"><a href="$ENTRY_URL$">$TITLE$</a></h4>
<div class="zornet_runim-meta">
<a href="$PROFILE_URL$"><div class="zornet_runim-author"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$" alt="" style="width: 25px; height: 25px;"><?else?><img src="/dleimages/noavatar.png" alt="" style="width: 25px; height: 25px;"><?endif?> <span>$USERNAME$</span></div></a>
<span style="position:relative; bottom:1px; font-style: normal;"><span style="padding-left:5px;"></span>
<span class="zornet_runim-date" style="position:relative; bottom:1px;"><i class="fa fa-clock-o"></i>$DATE$</span>
</div>
<div class="zornet-ruloper">  
<p>$MESSAGE$</p>
</div>
</div>
</div>
<footer class="zornet_runim-footer">
<div class="sabumi_lasgebam-social-links pull-left style4" style="margin-top: 0px !important;">
<ul class="clearfix">
<li style="margin-left: -40px;color:#fff;"><a style="color:#3d62b3;" href="http://www.facebook.com/sharer.php?u=<?if(substr($HOME_PAGE_LINK$,-1)='/')?><?substr($HOME_PAGE_LINK$,0,-1)?><?else?>$HOME_PAGE_LINK$<?endif?>$ENTRY_URL$" rel="nofollow" target="_blank" class="fa fa-facebook"></a></li>
<li><a style="color:#55acee;" href="http://twitter.com/share?url=<?if(substr($HOME_PAGE_LINK$,-1)='/')?><?substr($HOME_PAGE_LINK$,0,-1)?><?else?>$HOME_PAGE_LINK$<?endif?>$ENTRY_URL$" rel="nofollow" target="_blank" class="fa fa-twitter"></a></li>
<li><a style="color:#d34836;" href="http://plus.google.com/share?url=<?if(substr($HOME_PAGE_LINK$,-1)='/')?><?substr($HOME_PAGE_LINK$,0,-1)?><?else?>$HOME_PAGE_LINK$<?endif?>$ENTRY_URL$" rel="nofollow" target="_blank" class="fa fa-google-plus"></a></li>
</ul>
</div>
<span class="argcoms short-stor"><a href="$COMMENTS_URL$"><i class="fa fa-comments-o"></i> <span title="Комментариев: $COMMENTS_NUM$"><b>$COMMENTS_NUM$</b></span></a></span>
<span><i class="fa fa-pencil"></i> <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></span>  
<span class="short-stor"><a href="javascript://" onclick="$.get('/load/0-1-1-$ID$-3',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка!',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успешно!',{w:270,h:60,t:8000})};});">Like</a> $RATED$</span>
<span class="pull-right sabumi_lasgebam-zornet_runim-view"><i class="fa fa-eye"></i> $READS$</span>
</footer>
</article>
</div>

CSS

Код
.ms-item6 {padding: 10px;width: 99.8%; margin: 0 !important;float: left;}
.zornet_runim-item { position: relative;background: #282f3a; box-shadow: 0 2px 6px 0 rgba(12, 12, 12, 0.47), inset 0 0 0 1px #414244;}
.pd-20 {padding: 20px;position: relative;}
.zornet_runim-thumb.style1 {margin-bottom: 15px;}
.zornet_runim-thumb {width: 100%; position: relative;}
.zornet_runim-thumb img {width: 100%;transition: all 0.3s;-ms-transition: all 0.3s;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;display: block;margin: auto;height: 230px;box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.46), inset 0 0 0 1px #1f2229;opacity: 0.7;}
.zornet_runim-thumb img:hover {opacity: 1;}
.zornet_runim-thumb > h5 {position: absolute;left: 0;bottom: 0;font-family: "Roboto", sans-serif;font-size: 13px;line-height: 22px;color: white;text-transform: uppercase;font-weight: 600;padding: 4px 10px;background: #467fa5;margin: 0;}
.zornet_runim-thumb > h5:before {content: '';position: absolute;border-left: 0px solid transparent;border-right: 7px solid transparent;border-top: 10px solid #467fa5;bottom: -10px;left: 50%;margin-left: 0px;left: 0;z-index: 999;}
.zornet_runim-thumb > h5 a:first-child { margin-left: 0;}
.zornet_runim-thumb > h5 a { display: inline-block; margin-left: 5px; color: #fff;}
.thumb-icon.style1 { text-align: center; width: 60px;height: 40px; line-height: 40px;font-size: 20px;position: absolute;top: 50%; margin-top: -20px; margin-left: -30px; color: #34495e;}
.zornet_runim-title a {margin-bottom: 10px;text-transform: none;font-size: 19px;font-weight: bold;font-family: PT Sans;color: #bee4ff;text-shadow: 0 1px 0 #1b1a1a;}
.zornet_runim-meta {color: #b8b8c6; margin-top: 5px;}
.zornet_runim-author { float: left;margin-top: -7px; margin-right: 10px;}
.zornet_runim-author img {border-radius: 50%;margin-right: 5px;display: inline-block;}
.zornet_runim-author span {font-weight: 500;color: #dddde4;display: inline-block;}
.zornet_runim-meta > span, .zornet_runim-meta > p {display: inline-block;margin: 0;font-family: "Roboto", sans-serif;font-size: 13px;line-height: 20px;color: #e3e3f5;text-transform: capitalize;font-weight: 500;margin-top: 5px;}
.zornet_runim-meta > span i, .zornet_runim-meta > p i {font-size: 16px;color: #83cbff;font-style: normal;margin-right: 7px;float: left;margin-top: 3px;}
.zornet_runim-footer { border-top: 1px solid #1f2229;display: block; background: #1f2229;height: 40px;}
.sabumi_lasgebam-zornet_runim-post .sabumi_lasgebam-social-links {margin-top: 20px;}
.sabumi_lasgebam-social-links.style4 ul { margin: 0;}
.sabumi_lasgebam-social-links ul { margin: -10px -5px;}
.sabumi_lasgebam-social-links.style4 ul li { border-right: 1px solid #28283f;margin: 0;}
.sabumi_lasgebam-social-links ul li {float: left;margin: 10px 5px 0;font-size: 18px;}
.sabumi_lasgebam-social-links.style4 ul li a { display: inline-block;text-align: center;width: 55px;height: 38px; line-height: 42px;font-size: 18px;background: none; color: #696872;}
.clearfix:after { clear: both;}
.short-stor {font-size: 14px;display: inline-block;margin: 11px 6px;}
.sabumi_lasgebam-zornet_runim-view {font-family: "Roboto Condensed", sans-serif;font-size: 14px;line-height: 22px;color: #cecdb2;font-weight: 600;padding: 8px 20px;border-left: 1px solid #28283f;}
.pull-right {float: right;}
.sabumi_lasgebam-social-links.style4 ul li a:hover {background:#272e3a;}
.zornet-ruloper {opacity: 0.99;margin-bottom: 1px;padding: 0 1px;height: 80px;overflow: hidden;text-align: justify;color: #e6e6e6;}
li {list-style-type: none;}
@media (max-width: 450px){.short-stor {display:none;}}

Все проверено на тестовой площадке и возможно будет в несколько колонок и где то по стилю произойдет изменение.
09 Января 2018 Просмотров: 1961 Комментариев: (13)

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

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

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

Комментарии: 13
maniacvn
maniacvn 09 Января 2018 23:281
0
В шаблоне в белом оригинале получше будет)А так тоже ни4его.
Kosten
Kosten 10 Января 2018 00:562
0
Но этот вид с оригинала и в нем не чего почти не менял, только довел до полного рабочего состояние.

А вот уже на 2 колонки, и стили почти все изменил, и дополнил, чтоб можно было редактировать легче, и безусловно адаптивность произведена.

Просмотрю еще раз на разные экраны и потом размещу, а пока так смотрится.

Kosten
Kosten 01 Февраля 2018 01:343
0
А, что именно не корректно, так как все на тестовом проверял. А если что то делать, это в стилях CSS. Просто не понимаю, что именно нудно делать, по конкретнее нужно излагать.
CEREBRUM
CEREBRUM 01 Февраля 2018 03:124
0
Фейсбук выпирает на левую сторону
Grician
Grician 09 Сентября 2021 10:485
0
Да, есть такое дело. Как исправить не подскажите?

Kosten
Kosten 09 Сентября 2021 19:146
0
Вы ссылку оставляйте на сайт, чтоб посмотреть. Ведь как можно заметить, все скрины были сняты с сайта, где вид проверялся.
Grician
Grician 10 Сентября 2021 04:237
0
Предоставленный интернет ресурс - extremereading.ru/blog
-SAM-
-SAM- 10 Сентября 2021 06:0410
0
Вот:
Код
<li style="margin-left: -40px;color:#fff;">
Стоит внешний отступ, что выпирает иконку FB наружу борта вида материала. Поменять на -20px.

Grician
Grician 10 Сентября 2021 04:338
0
Еще, плюс к этому, при клике на пост, перебрасывает на страницу 404
-SAM-
-SAM- 10 Сентября 2021 05:339
0
В материале ошибка: поменять $zornet_runim_URL$ на $ENTRY_URL$ :)

Grician
Grician 10 Сентября 2021 06:2711
0
Благодарю за помощь.
Kosten
Kosten 10 Сентября 2021 18:3212
0
-SAM-, спасибо, что подсказали на ошибки, это мое первое начало, где изменял стили, и не когда какое то время не задумывался, что они могут по знакам схоже с операторами.

А по теме, все исправил, установил как предложено в комментариях, теперь вспомнить пароль от тестового и проверить.)))
Kosten
Kosten 10 Сентября 2021 18:4313
0
Проверил, все корректно показывает, а что у кого то не так, то просто немного отредактируйте под данный сайт.

avatar