Адаптивный вид материалов в 2 колонки для uCoz
 | |
| Отличный вид материала в 2 колонка для сайта uCoz, который полностью адаптивный под мобильные аппараты и идет под светлый дизайн. По вверх идет изображение, к котором будет указана категория на светло зеленом фоне, что можно потом самому вывести оттенок под свою стилистику. Ниже будет название, так как его можно поставить на различные тематические площадки, то сами TITLE будут разные по знаком, может больше или меньше быть. Но и краткое описание, здесь лучше сразу задать на сколько знаков его выводить, так оно будет просто корректно смотреться. То где то больше будет и вид просядет, но здесь сам веб мастер уже сделать как ему нужно. И заканчивается планшеткой, на которой будут установлены функций и кнопка с эффектом на переход к основному файлу или статье. Первое, это кнопка когда был размещен, вторая кнопка, кто разместил, все очень гармонично смотрится. Изначально он шел в светло зеленой гамме цвета, так как полностью создан на стилях и у вас есть возможность изменить цветовую палитру, или что то добавить свое. Здесь главное не трогаем стили, что идут ниже, ведь они будут полностью отвечать за адаптивность и уже настроены как нужно. Если у вас не будет изображение, то автоматически установиться, то которое прописано в коде и так будет смотреться. Без картинки:  Здесь уже видим как все визуально отображается на мобильном аппарате, а это фиксация и вывод, все как можно заметить грамотно рассчитано.  Приступаем к установке: Это ставим вид материала, может быть блог или статьи, но настроен по операторам под файлы. Код <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 - все сделано просто и доступно для гостей и пользователей, возможно кто то хочет сделать под одну колонку, то в стилях ставим свой процент, под конструктор, так как может быть фиксирован шаблон, и здесь в ручную подгонять нужно. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
