Вид материалов файлов GroKmys для uCoz
 | |
| Сейчас оригинально стало, чтоб вид материала был с большим изображением, что представляю. Вообщем по своему простой имеет стили, что делает его красивым с одной стороны. Есть как плюсы так минусы, но плюсы вы сами видите как вообще создан и можно сделать под любой оттенок цвета, так как в CSSвсе прописано по дизайну. А минус в том, что при установке его нужно настраивать, так как у всех каркас сайта разный,но все разберем и будет понятно. Так вот будет смотреться если вы наведете клин на название и поменяется гамма, которая было единой и здесь немного светлей видно.  Были немного изменены функций к этому виду, а точнее поставлен рейтинг, который реально нужен, а там что то совершенно другое стояло, и не оператором а просто так прописано, что не нужно видеть на каждом файле одно и тоже. Установка: Вид материала, это как файлы или можно под другой как пример блог настроить. Код <div class="article clearfix"> <div class="article-title"><a href="$ENTRY_URL$">$TITLE$</a><span title="Рейтинг"><?$RSTARS$('21','http://zornet.ru/Fresa/Stunget/stars_2.png','1','float')?></span></div> <div class="article-image1"> <div class="article-st-block"><a class="article-st" href="$SECTION_URL$">$CATEGORY_NAME$</a></div> <div class="stats"><span class="vies" title="Количество просмотров">$READS$</span><span class="downl" title="Количество загрузок">$LOADS$</span><span class="comments" title="Количество комментариев">$COMMENTS_NUM$</span><span class="time" title="Время добавления/обновления">$DATE$ в $TIME$</span><span class="userdd" title="Опубликовал $USERNAME$"><a href="$PROFILE_URL$" target="_blank">$USERNAME$</a></span></div> <a href="$ENTRY_URL$"><img class="article-image" title="$TITLE$" src="$IMG_URL1$" alt="Описание"></a> </div> <div class="article-categor"></div> <div class="article-message"> <p>$MESSAGE$</p> </div> </div> CSS: Код .vies:before{content:url('http://zornet.ru/Fresa/Stunget/viev.png');margin-left:-30px;padding-right:5px;vertical-align:middle;} .downl:before{content:url('http://zornet.ru/Fresa/Stunget/downl.png');margin-left:-30px;padding-right:5px;vertical-align:middle;} .comments:before{content:url('http://zornet.ru/Fresa/Stunget/comments.png');margin-left:-30px;padding-right:5px;vertical-align:middle;} .time:before{content:url('http://zornet.ru/Fresa/Stunget/time.png');margin-left:-30px;padding-right:5px;vertical-align:middle;} .userdd:before{content:url('http://zornet.ru/Fresa/Stunget/user.png');margin-left:-30px;padding-right:5px;vertical-align:middle;} .article{margin-left:10px;margin-right:6px;margin-bottom:20px;margin-top:10px;} .article-title{background-color: #3C5792;color:white; padding: 10px 10px 10px 10px;font-weight: bold;font-size: 15px;border-top-right-radius:3px;border-top-left-radius:3px;} .article-title:hover{background-color:#3389B9;} .article-title a{color:#fff;} .article-title span{float:right;cursor:help;} .article-image1{border-top:1px solid #281b1b;overflow:hidden;width:100%;height: 200px;} .article-st-block{position: absolute;width:770px;} .article-st{float:right;background-color:rgba(230, 103, 69, 1);padding:5px 10px 5px 10px; margin-top:10px;border-radius:3px; color:#fff;font-size:13px;} .article-image1 a{color:#fff;} .article-st:hover{background-color:rgba(230, 103, 69, 0.85);color:#fff;} .stats{position: absolute;color:white;margin: 170px auto;} .stats span{background-color:rgba(0, 0, 0, 0.59);margin-left:10px;padding:5px 10px 7px 40px;border-radius:3px;cursor:help;} .article-image{width:577px;} .article-message{padding: 10px;font-size:13px;border-bottom-left-radius:5px;border-bottom-right-radius:5px; border-bottom: 1px solid rgba(71, 71, 71, 0.7);border-right: 1px solid rgba(71, 71, 71, 0.7);border-left: 1px solid rgba(71, 71, 71, 0.7);border-top: 1px solid #281b1b;max-height: 60px; overflow: hidden; text-align: justify;} .article-categor {background-color: #3C5792;color:white;padding: 18px;text-align:center;font-size:15px;border-top: 1px solid #0A162F;} .article-categor a{color:white;font-size:15px;} .article-categor a:hover, .article-categor:hover{background-color:#3C5792;} #allEntries img { width: 780px; } Теперь давайте раздеремся с шириной, так как вам придется в ручную выставлять. В стилях самая последняя строчка отвечает на картинку. Код #allEntries img { width: 780px; } Теперь мы видим на самом изображение прописана категория и ее также нужно подгонять. Находим такой стиль и там выставляем по вашей ширине. Код .article-st-block{position: absolute;width:770px;} Вот и вся настройка, также можете немного поиграть стилями, возможно сделаете красивый, но желательно, чтоб подходило под основной стиль на сайте, как родной изначально было послу установки. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 23 | |
| |
| 1 2 » | |
