» »

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

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

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

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

Без картинки:

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

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

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

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

Это ставим вид материала, может быть блог или статьи, но настроен по операторам под файлы.

Код
<div class="articles gray">  
<div class="clear"></div>  
<section class="article"> <a href="$CATEGORY_URL$" class="thumb"><img src="$IMG_URL1$" ><div class="news-date">$CATEGORY_NAME$</div></a> <h2><a class="blockinfo" href="$ENTRY_URL$">$TITLE$</a></h2> <div class="shorttext">$MESSAGE$</div> <span class="shortinfo"> <span class="data">$DATE$</span> <span class="author">$USERNAME$</a></span> <a href="$ENTRY_URL$" class="readmore">Читать Далее</a> </span> </section>  
</div>


CSS:

Код
.news-date{  
position: absolute;  
top: 0px;  
left: 0px;  
padding: 2px 7px;  
color: #fff;  
background: #01B94C;  
opacity: 0.7; /* Полупрозрачный фон */  
filter: alpha(Opacity=70); /* Прозрачность в IE */  
font-size: 14px;  
text-shadow: #06375C 0 1px 1px;  
}  
.blockinfo {height:42px; overflow: hidden;text-overflow:ellipsis;}  
.blockinfo:after {content: ' »';}  
.article {max-width:375px;width:100%;background: #fff;display:inline-block;margin: 0 0 20px 0;border: 1px solid #F1F1F1;box-shadow: 0px 0px 5px rgba(0,0,0,0.1);-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.1);-o-box-shadow: 0px 0px 5px rgba(0,0,0,0.1); }  
.article .thumb {width:100%;max-width:375px;height:177px;position: relative;overflow:hidden;display:block;background: #55a6cd;}  
.article:nth-child(2n) {margin-left:13px !important;}  
.article .thumb {width:100%;max-width:442px;height:177px;position: relative;overflow:hidden;display:block;background: #55a6cd;}  
.article img {min-width:375px;min-height:179px;max-width: 500px;max-height: 250px;}  
.article h2 {margin: 15px 0 -10px 0;}  
.article h2 a {font-family:Tahoma,Geneva,sans-serif;font-size:18px;color:#28363b;padding: 0 20px 0 20px;display:block;text-decoration:none;  
-moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/  
  -o-transition: all 0.3s 0.01s ease;  
  -webkit-transition: all 0.3s 0.01s ease; }  
.article h2 a:hover {color:#E74C3C;}  
.shorttext {padding: 7px 20px 20px 20px;min-height: 105px;overflow:hidden;text-shadow: 1px 1px 1px rgba(255,255,255,0.2);-moz-text-shadow: 1px 1px 1px rgba(255,255,255,0.2);-o-text-shadow: 1px 1px 1px rgba(255,255,255,0.2);}  
.shortinfo {position: relative;background: #67b5da; min-height: 38px;font: 13px/38px PT Sans;color:#fff;display:block;padding: 0 95px 0 19px;}  
.shortinfo a {color:#fff;}  
.shortinfo a:hover {color:#196386;}  
.shortinfo span {background:url(http://zornet.ru/zorner_ru_1/ABVUSA/sprite.png) -600px -1000px no-repeat;padding: 0 20px 0 20px;}  
.shortinfo .data {text-shadow: #06375C 0 1px 1px;background-position: -585px 1px !important;}  
.shortinfo .author {text-shadow: #06375C 0 1px 1px;background-position: -585px -19px !important;}  
.shortinfo .comments {text-shadow: #06375C 0 1px 1px;background-position: -585px -40px !important;}  
.readmore {text-align:right;position:absolute;right:0;background:#0000;width:110px;display:inline-block;text-align:center;text-shadow: 1px 1px 1px rgba(255,255,255,0.2);-moz-text-shadow: 1px 1px 1px rgba(255,255,255,0.2);-o-text-shadow: 1px 1px 1px rgba(255,255,255,0.2);padding: 0 !important;}  
.readmore:hover {background: #499bc1;color:#fff !important;}  
.gray .cattitle {background: #6ac99e !important;}  
.gray .cattitle:after {border-left: 16px solid #6ac99e;}  
.gray .shortinfo {background: #4d5c69 !important;}  
.gray .shortinfo .readmore, .gray .showallsp {text-shadow: #192a38 0 1px 1px;background: #338dca !important;}  
.gray .shortinfo .readmore:hover, .gray .showallsp:hover {text-shadow: #192a38 0 1px 1px;background: #4d75bf!important;color:#fff;}  
.gray .crumbs a:last-child span, .gray .thumb {background: url('http://zornet.ru/zorner_ru_1/ABVUSA/no-photo.png');}  
.gray .crumbs a:last-child:after {border-left: 14px solid #54b086;}  
  @media screen and (max-width: 4030px) {  
section.article {position: relative !important;float:left !important;width: 48.6% !important;}  
.articles.news section.article {width:100% !important;}  
}  
@media screen and (max-width:1024px) {  
section.article {width: 47% !important;max-width:50% !important;display: block !important;float: left !important;}  
section.article:nth-child(2n) {float:right !important;}  
section.article .thumb {max-width: 100% !important;}  
section.article .thumb img {min-width:100% !important;min-height: 100% !important;max-width: 950px !important;}  
}  
@media screen and (max-width: 600px) {  
section.article {width: 100% !important;max-width:100% !important;margin: 0 0 20px 0 !important;display: block !important;float: none !important;}  
section.article:nth-child(2n) {float: none !important;margin: 0 0 20px 0 !important;}  
.author {display: none;}  
}  
@media screen and (max-width: 400px) {  
section.block {width:100% !important;}  
}

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

PS - все сделано просто и доступно для гостей и пользователей, возможно кто то хочет сделать под одну колонку, то в стилях ставим свой процент, под конструктор, так как может быть фиксирован шаблон, и здесь в ручную подгонять нужно.
26.07.2017 Просмотров: 361 Комментарий: (5)

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

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

Комментарий: 5
Kosten
Kosten 26.07.2017 15:461
0
Адаптивный полностью вид материала, поставил его на тестовый сайт и проверил, все корректно выводит. Но как в описание подчеркнул, вы можете описание сделать под знаки, и тогда только ровно колонки будут стоять. А точнее где много написано, они не будет проседать.

По этому поводу, как сделать, все подробно написано в теме сократить краткое описание на сайте где вы можете поменять оператор и сами выставить как вы видите или как вам нужно.
trem200
trem200 26.07.2017 16:372
0
Почему материал удалён? Недавно увидел его, хотел протестировать и удалили.
Kosten
Kosten 26.07.2017 16:523
0
Жалоба вторая пришла от реального "человека", здесь удалил, так как материал неизвестен.
trem200
trem200 26.07.2017 17:124
0
То есть жалоба, на то что материал взят с другого сайта, или из-за того, что неизвестен автор материала?
Kosten
Kosten 26.07.2017 17:355
+1
Как у автора все узнаю, все нормально если, материал будет. Но пока нужно со страйком разобраться.

Не до этого, просто с этими жалобами реально мешает работать.
avatar