Вид материалов сайта в колонку для uCoz
 | |
| Стало популярным ставить на сайт вид материалов, который идет в несколько колонок, где представлен адаптивный вид для новостей или файлов сайта. Что теперь веб мастер сам в процентах выставит, сколько ему нужно колонок, где по умолчанию идет на 2 колонки, а также есть на 4 колонки, что идет в архиве в текстовом документе. Но и по тематике он не какой по форме не принадлежит, можно увидеть на софте или в блоге. Довольно удобный и красивый вид материалов для конструктора, переделанный под синий дизайн. Данный или аналогичный по конструкций вид материалов можно посмотреть здесь, так как этот по стилистике был немного переделан, где убраны кнопки он аналога. Но здесь он в стандартном облике, где данный скрипт предлагаю выставлять под информер или же ставить в каталог файлов где дизайн синего цвета. Что остается скачать, если нужно поставить в ряд как можно больше материала. Но нужно учитывать, что они станут по своей форме уже. Плюс прописаны стили, для того, чтоб на сотовых или мобильных аппаратах можно было корректно просматривать изображение или описание. Так выглядит на 4 колонки, что код и стили находятся в архиве, для этого нужно скачать и перенести по месту в админ панели портала.  Приступаем к установке: HTML Код <div class="masakegen-nedacam-paignus"> <div class="kusbecomekus-title"><span class="xml-text"><a href="$ENTRY_URL$" >$TITLE$</a></span></div> <div class="kusbecomekus-img tesanuladudsan"><a href="$ENTRY_URL$" title="$TITLE$"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$"></a></div> <div class="kusbecomekus-detali"> <li style=" float: right; margin-right: 2px; "><i class="fa fa-wifi"></i><a href="$CATEGORY_URL$">$CATEGORY_NAME$ $SECTION_NAME$</a></li></div> <div class="short_com_box"><a href="$ENTRY_URL$" class="short_com_box_bottom"> $READS$ просмотров | $LOADS$ Загрузок | </a><a href="$ENTRY_URL$" class="short_com_box_bottom"> $COMMENTS_NUM$ комментариев</a></div> <div class="kusbecomekus-text">$MESSAGE$</div> </div> CSS Код .masakegen-nedacam-paignus{ width: 45%; float: left; display: inline-block; background-color: #30332f; border-bottom: 2px solid #3e3a3a; border-right: 2px solid #423d3d; padding: 3px 8px; border-left: 2px solid #2b2929; margin: 2px 25px 15px 14px; border: 1px solid #5f5f61; border-radius: 11px; box-shadow: 0px 0px 10px 1px rgba(93, 90, 90, 0.92); } user agent stylesheet div{ display: block; } .kusbecomekus-text { margin-top: 5px; padding-left: 5px; padding-right: 5px; padding-bottom: 5px; font-size: 12px; font-family: Tahoma,Arial; line-height: 16px; opacity: 0.8; margin-bottom: 15px; padding: 0 0px; height: 65px; overflow: hidden; text-align: justify; } .kusbecomekus-img img{ object-fit: cover; height: 200px; width: 100%; border-radius: 5px; box-shadow: 0px 4px 15px rgba(183, 180, 180, 0.42), 0px 10px 30px -15px rgba(0, 0, 0, 0.45); border: 2px solid rgb(92, 92, 93); } .kusbecomekus-img2 img{ height: 300px; width: 380px; box-shadow: 0px 3px 10px #6d6767; } .kusbecomekus-title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; padding: 15px 0px 10px 0px; } .kusbecomekus-title a{ line-height: 1.3; word-wrap: break-word; color: #e4e9f7; font-size: 15px; font-weight: normal; font-weight: bold; } .kusbecomekus-title a:hover{ color: #b2c8fb; } .kusbecomekus-detali{ padding-left: 3px; margin-top: 5px; height: 23px; line-height: 17px; font-size: 13px; border-bottom: #736a6a 1px solid; padding-bottom: 12px; } .kusbecomekus-detali li{ list-style: none; margin-right: 15px; display: inline-block; } .kusbecomekus-detali i{ color: #eaeaea; padding-right: 5px; } .kusbecomekus-detali a{ color: #e0e0e0; } .kusbecomekus-detali a:hover{ color: #9fd8e6; } .tesanuladudsan{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .tesanuladudsan:hover{ -webkit-filter: grayscale(100%); } @media screen and (max-width: 1220px){ .masakegen-nedacam-paignus{ width: 100%; height: auto; padding: 10px; } } Здесь прикреплены шрифтовые иконки, что на темном фоне отлично просматривается. Если говорить про палитру цвета, то все не сложно изменить в стилистике CSS, которая закреплена за основным материалом. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
