Простой вид материалов для главной uCoz
 | |
| В своем формате вид материала можно назвать простым и рабочим вид материалов на такие модули, как блог, новости или статьи на светлый фон. Сделан на мобильные аппараты, чтоб корректно все отображалось. Увеличение здесь нет, по клику переходите на основной материал. В самом низу прописана школа, где на ней будут выставлены все функций, все зависит на каком каталоге от может установлен. Но считаю, что место под главную страницу, что делают на современных шаблонах. где можно поставить на новостной блог, чтоб за этот модуль отвечал и постоянно обновлялся. Не исключаю увидеть его на втором клике, это тот который идет вторым по второстепенности от главного модуля. Но здесь вам сами решать, что можно на нем показывать, так как нет не каких теней, все идет в плоской стилистике. Проверка на тестовом под адаптивность. 1.  2.  HTML Код <div class="ventularsam_zornet_ru-vid"> <div class="ventularsam_zornet_ru-title"><a href="$ENTRY_URL$">$TITLE$</a></div> <div class="ventularsam_zornet_ru-img"><img src="$IMG_URL1$" title="$TITLE$" alt="$TITLE$"></div> <div class="ventularsam_zornet_ru-mix"> <div class="ventularsam_zornet_ru-text">$MESSAGE$</div> <div class="ventularsam_zornet_ru-detali"> <div class="ventularsam_zornet_ru-dalee"><a href="$ENTRY_URL$">Читать далее</a></div> <span><i class="fa fa-user-circle" aria-hidden="true"></i> <a href="$PROFILE_URL$">$USERNAME$</a></span>|<span><i class="fa fa-comments" aria-hidden="true"></i> $COMMENTS_NUM$ </span>|<span><i class="fa fa-folder-open" aria-hidden="true"></i> $CATEGORY_NAME$</span> </div> </div> </div> CSS Код .ventularsam_zornet_ru-title {padding: 21px 0px 10px 3px;} .ventularsam_zornet_ru-title a {color: #315371;font-family: inherit;font-size: 19px;font-weight: 600;display: block;} .ventularsam_zornet_ru-title a:hover {color: #209fab;} .ventularsam_zornet_ru-img {float: left; width: 250px; height: 150px;} .ventularsam_zornet_ru-img img {width: 100%;height: 146px;border: 2px solid #7e7e84;border-radius: 3px 3px 0px 3px;} .ventularsam_zornet_ru-mix {overflow: overlay;} .ventularsam_zornet_ru-text {line-height: 24px;font-size: 14px;height: 100px;overflow: hidden;text-align: justify;padding: 1px 0px 0px 10px;} .ventularsam_zornet_ru-detali {background-color: #7e7e84;height: 40px;line-height: 40px;margin: 9px 0px 10px 0px;font-size: 14px;color: #ffffff;padding: 0 0 0 10px;} .ventularsam_zornet_ru-detali span {padding: 0 10px;} .ventularsam_zornet_ru-detali span a {color: #ffffff; text-decoration: none;} .ventularsam_zornet_ru-dalee a {float: right;background: #2c5786;color: #ffffff;padding: 0 10px;text-decoration: none;} .ventularsam_zornet_ru-dalee a:hover {background: #17801b;} @media screen and (max-width: 640px) { .ventularsam_zornet_ru-img { background: #fff; width: 100%; height: auto; } } @media screen and (max-width: 640px) { .ventularsam_zornet_ru-mix { background: #ffffff; width: 100%; height: auto; padding: 0 0 0 0px; } } @media screen and (max-width: 640px) { .ventularsam_zornet_ru-detali { background: #22354a; width: 100%; margin: 7px -10px 7px 0px; } } @media screen and (max-width: 640px) { .ventularsam_zornet_ru-dalee a { float: right; background: #2b4a69; color: #fff2f2; margin: 0px 10px 0px 0px; text-decoration: none; } } Здесь идут шрифтовые иконки, что нужно подключить, для отображение кнопок. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 6 | |
|
Пару вечеров его пытался адаптировать, но ангина не давала, но думал, все сделал, но как оказалось, что иногда на мобильном корректно показывает, иногда так. Может кто найдет в чем причина, просто здесь уже на автомате залил, так как все показало нормально. но вот иногда такой обзор.
 
Заменить спан для категории на этот
Код <span class="cat_name"><i class="fa fa-folder-open" aria-hidden="true"></i> $CATEGORY_NAME$ </span> все стили на эти Код .ventularsam_zornet_ru-vid {padding: 0 10px;} .ventularsam_zornet_ru-title {padding: 21px 0px 10px 3px;} .ventularsam_zornet_ru-title a {color: #315371;font-family: inherit;font-size: 19px;font-weight: 600;display: block;} .ventularsam_zornet_ru-title a:hover {color: #209fab;} .ventularsam_zornet_ru-img {float: left; width: 250px; height: 150px;border: 2px solid #7e7e84;border-radius: 3px 3px 0px 3px;} .ventularsam_zornet_ru-img img {width: 100%;height: 146px;object-fit: cover;} .ventularsam_zornet_ru-mix {overflow: hidden;} .ventularsam_zornet_ru-text {line-height: 24px;font-size: 14px;height: 100px;overflow: hidden;text-align: justify;padding: 1px 0px 0px 10px;} .ventularsam_zornet_ru-detali {background-color: #7e7e84;height: 40px;line-height: 40px;margin: 9px 0px 10px 0px;font-size: 14px;color: #ffffff;padding: 0 0 0 10px;} .ventularsam_zornet_ru-detali span {padding: 0 10px;} .ventularsam_zornet_ru-detali span a {color: #ffffff; text-decoration: none;} .ventularsam_zornet_ru-dalee a {float: right;background: #2c5786;color: #ffffff;padding: 0 10px;text-decoration: none;} .ventularsam_zornet_ru-dalee a:hover {background: #17801b;} @media screen and (max-width: 640px) { .ventularsam_zornet_ru-img { background: #fff; width: 100%; height: auto; } .ventularsam_zornet_ru-img img { width: 100%; height: auto; } .ventularsam_zornet_ru-mix { background: #ffffff; width: 100%; height: auto; padding: 0 0 0 0px; } .ventularsam_zornet_ru-text { height: auto; padding: 10px; } .ventularsam_zornet_ru-detali { background: #22354a; width: 100%; margin: 7px -10px 7px 0px; } .ventularsam_zornet_ru-dalee a { float: right; background: #2b4a69; color: #fff2f2; margin: 0px 10px 0px 0px; text-decoration: none; } } @media screen and (max-width: 440px) { .cat_name {display: none;} } Не за что!  | |
