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

Адаптивный вид новостей и файлов для uCoz

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

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

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

Здесь видим обзор, который появится при открытии страницы или заходе на портал.

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

Это уже примерно может быть смартфон или планшет, что видим как происходит изменение.

Адаптивный вид материалов для сайта

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

HTML

Код
<div class="vid_materualov">  
<div class="kigavun">  
<div class="pod_kategokua">  
<a href="$ENTRY_URL$"><img src="$IMG_URL1$"; width="100%"; alt="$TITLE$" title="$TITLE$"></a>  
</div>  
</div>  
<div class="vid_materualov_td">  
<div class="vezun_tageus_pacukon"><a href="$ENTRY_URL$">$TITLE$</a></div>  
<div class="article_counters"><span><i class="fa fa-clock-o" aria-hidden="true"></i> $DATE$ в $TIME$</span> <a href="/load/1/1/1"><span><i class="fa fa-folder-open" aria-hidden="true"></i> $CATEGORY_NAME$</span></a><span><i class="fa fa-eye" aria-hidden="true"></i> $READS$</span><a href="/load/1/1/shablon_kino_kinogoprofi_dlja_ucoz/1-1-0-1240#comments"><span><i class="fa fa-comments-o" aria-hidden="true"></i> $COMMENTS_NUM$</span></a></div>  
<p class="vid_materualov_d">  
<div class="klopanul_sagopevkad">$MESSAGE$</div>
</p>  
</div>  
</div>

CSS

Код
.vid_materualov {padding:20px;display:table}  
.vid_materualov .article_counters {margin-bottom:10px;}  
.vid_materualov .kigavun {background:#FFFFFF;padding-right:15px;display:table-cell;vertical-align:top}  
.vid_materualov_td {display:table-cell;vertical-align:top}  
.vid_materualov .pod_kategokua {width:300px;height:132px;overflow:hidden;border-radius:3px;}  
.vid_materualov .pod_kategokua img {border-radius:3px;max-width:100%;-webkit-transition: all 0.4s ease;  
-moz-transition: all 0.4s ease;  
-ms-transition: all 0.4s ease;  
-o-transition: all 0.4s ease;  
transition: all 0.4s ease;}
.vid_materualov .pod_kategokua:hover img {-moz-transform: scale(1.2) rotate(-4deg);
-ms-transform: scale(1.2) rotate(-4deg);
-webkit-transform: scale(1.2) rotate(-4deg);
-o-transform: scale(1.2) rotate(-4deg);
transform: scale(1.2) rotate(-4deg);}
.vid_materualov_descr {margin:0;position:absolute;top:-9000px}  
.vid_materualov_d b, .vid_materualov_d strong, .vid_materualov_d u {font-weight:normal !important;text-decoration:none !important;}
.vid_materualov_td p u, .vid_materualov_td p u strong, .vid_materualov_td p strong {font-weight:normal !important;text-decoration:none !important;}
.vezun_tageus_pacukon {margin-bottom:7px;font-size:16px;font-weight:bold}  
.vezun_tageus_pacukon a {color:#131212;transition:all .2s ease;}
.vezun_tageus_pacukon a:hover {color:#245686;}
.article_counters {margin-bottom:14px;font-size:13px;color:#777777}  
.article_counters span {display:inline-block;margin-right:10px}  
.article_counters a {color:#7b7b7b;transition:all .3s ease;}
.article_counters a:hover {color:#245584;}
.klopanul_sagopevkad {opacity: 0.8;margin-bottom: 15px; padding: 0 12px; height: 67px; overflow: hidden; text-align: justify;}

@media screen and (max-width: 950px) {
.vid_materualov {padding:0;display:block;margin:5px 0 20px 0;}  
.vid_materualov .kigavun {padding-right:0;margin:5px 0 10px 0;display:block;vertical-align:top}  
.vid_materualov .pod_kategokua {width:100%;display:block;}
.wall-img {border-radius:3px;margin:15px 0 5px 0;max-width:100%;}
}

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

Если у кого установлен темный дизайн, то вам в стилистике останется немного настроить оттенки цвета под свою основу, где на многие гаммы цвета выставить в CSS можно самостоятельно, или даже сделать оформление, которое посчитал на этом виде лишнем, где оставил в более строгих оттенках.
2019-03-19 Просмотров: 1381 Комментарий: (19)

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

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

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

Комментарий: 19
avatar
Qwazor 2019-03-19 20:251
0
Я так понял это сокращенный вид, а полный вид к этому есть?
Kosten
Kosten 2019-03-19 21:142
0
Вы не правильно поняли, просто не могу представить сокращенный вид, это простой адаптивный вид материалов с красивым эффектом. А что в описание написал, то, что сам веб разработчик может от себя что то добавить, как сам он видит, в плане оформление.
avatar
Дмитрий1062 2021-02-19 13:233
0
Kosten День добрый почему у меня картинка сверху а все остальное снизу.Помогите разобратся.
Сопрано
Сопрано 2021-02-19 14:284
0
Дмитрий, вид материала создан под мобильные аппараты, на гаджетах так будет показывать, на широком экране по другому, в описание все показано.
avatar
Дмитрий1062 2021-02-19 14:425
0
Это я все понял. Посмотрите как у меня показывает.Мой сайт
Kosten
Kosten 2021-02-19 16:277
0
Мне сам вопрос не очень понятен, это картинка сверху, а остальные внизу, нужно скрин прилагать.

У меня так показывает:



Если у вас не так, то почистите кэш у браузера, и все корректно показывать будет.
avatar
Дмитрий1062 2021-02-19 16:408
0
Да нужно было почистить историю.
Kosten
Kosten 2021-02-19 16:106
0
Попробуйте заменить стили в CSS на вид материала, здесь отступы добавлены.





А так все правильно!
avatar
Дмитрий1062 2021-02-19 16:449
0
Спасибо огромное. А не подскажите мне как вставить линии подобно как у вас сделано.Скрин прикрепил
avatar
Дмитрий1062 2021-02-19 18:1211
0
Kosten Только заметил посмотрите справа и снизу картинки какая то белая рамка как ее убрать. Желательно покажите в коде что исправить.
Скрин прикрепил.
avatar
Дмитрий1062 2021-02-19 17:5310
0
Все разобрался спасибо всем.
avatar
Дмитрий1062 2021-02-20 09:3612
0
Kosten Только заметил посмотрите справа и снизу картинки какая то белая рамка как ее убрать. Желательно покажите в коде что исправить.
Kosten
Kosten 2021-02-20 19:1013
0
Нет не вижу, вы вероятно что то в стилях меняли, здесь такое, даже если значение в стилях поменял, то после этого обязательно чистите кэш. Посмотрел у вас на сайте, все корректно и мобильно.
-SAM-
-SAM- 2021-02-20 23:0214
0
Вот с вашего сайта:
Код
.vid_materualov .kigavun {
  background: #FFFFFF
}
Убрать строку цвета заднего фона, или сделать background: transparent (прозрачность то есть, а не код белого цвета).
avatar
Дмитрий1062 2021-02-22 15:3315
0
Спасибо. Все получилось.
Kosten
Kosten 2021-02-22 15:3516
+1
Отлично!
-SAM-
-SAM- 2021-02-22 21:5817
+1
Это желательно поправить в самом коде материала, чтобы другие не столкнулись с той же проблемой. А еще вот это:
Код
<a href="/load/1/1/1">
Поставить там вместо ссылки - $CATEGORY_URL$. Ну и здесь:
Код
<a href="/load/1/1/shablon_kino_kinogoprofi_dlja_ucoz/1-1-0-1240#comments">
Соответственно должно быть $COMMENTS_URL$.
avatar
Дмитрий1062 2021-02-23 10:0418
0
Да кстати спасибо я это видел но забыл написать.
-SAM-
-SAM- 2021-02-25 01:2419
0
И вот это:
Код
<a href="$ENTRY_URL$"><img src="$IMG_URL1$"; width="100%"; alt="$TITLE$" title="$TITLE$"></a>
Надо бы вот так:
Если качество картинки в ПУ занижено, то можно выводить полноразмерную (условия делаются для ускорения загрузки, как и для удовлетворения Google PageSpeed Insights).
avatar