Информер для материалов файлов на uCoz
 | |
| Оригинально расположен материал на каталог файлов, что выводит информер. Где первый идет шапкой, а остальные уже в небольшом окне с названием. Если говорить о верхнем, то там все сделано как на вид материалов в колонку. Где название если у файла или мануала будет большим, то оно стильно будет затемниться и сразу идет светлая полоса.Что вы можете настраивать на своем интернет ресурсе под ваш стиль. Здесь можно выставить как на один материал, но логично ставить на четыре, что ниже представлена картинка с тестового сайта. Он напоминает один скрипт, где также все по позициям выставлено, только вот стиль немного другой сделан, что рекомендую посмотреть. Если говорить о модуле на какой ставить, то проверка была на каталоге файлов, но вы также можете как на новости или блог выставить. Некоторые ставят на форум, где делают контейнер, чтоб можно было делать мониторинг и быть в курсе, что было залито на главной странице или совершенно других модулей. В общем готовый дизайн информера блока новостей и других для сайта uCoz. Вот с проверки на 4 файла поставлено.  Создайте информер с параметрами: [ Каталог файлов · Материалы · В случайном порядке · Материалы: 5 · Колонки: 1 ] Ставим этот код: Код <?if($NUMBER$=1)?> <div class="post-02"> <a href="$ENTRY_URL$"> <span>$TITLE$</span> <img src="$IMG_URL1$" alt="$TITLE$"> </a> </div> <?else?> <?if($NUMBER$ = '2')?><hr class="hr-02"><?endif?> <div class="post-03"> <img src="$IMG_URL1$" alt="$TITLE$"> <span><a href="$ENTRY_URL$">$TITLE$</a> </span> </div> <?endif?> CSS: Код .post-02 a {display: block;} .post-02 span {font-size: 16px; display: block; position: absolute; background: rgba(79, 81, 82, 0.75); color: #dedede; width: 230px; border-bottom: 5px solid #02b9c7; white-space: nowrap; overflow: hidden; -webkit-mask: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0) 210px, rgba(0, 0, 0, 0)); padding: 3px 3px 3px 5px;} .post-02 img {width: 100%; height: 200px; object-fit: cover;} hr.hr-02 {color: #555; border-bottom: solid 2px #ccc;} .post-03 {min-height: 90px; border-bottom: solid 2px #ccc; margin-bottom: 8px;} .post-03 img {width: 87px; height: 80px; margin-right: 15px; float: left;object-fit: cover;} .post-03 span {display: block;} .post-03 span a {color: #555; font-weight: bold;} Похожий в формирование материала, только другой дизайн на информер, с выводом аналогичного материала. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |