» »

Вид материалов файлов GroKmys для uCoz


Сейчас оригинально стало, чтоб вид материала был с большим изображением, что представляю. Вообщем по своему простой имеет стили, что делает его красивым с одной стороны. Есть как плюсы так минусы, но плюсы вы сами видите как вообще создан и можно сделать под любой оттенок цвета, так как в CSSвсе прописано по дизайну. А минус в том, что при установке его нужно настраивать, так как у всех каркас сайта разный,но все разберем и будет понятно.

Так вот будет смотреться если вы наведете клин на название и поменяется гамма, которая было единой и здесь немного светлей видно.

Вид материалов файлов GroKmys для uCoz

Были немного изменены функций к этому виду, а точнее поставлен рейтинг, который реально нужен, а там что то совершенно другое стояло, и не оператором а просто так прописано, что не нужно видеть на каждом файле одно и тоже.

Установка:

Вид материала, это как файлы или можно под другой как пример блог настроить.

Код
<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;}


Вот и вся настройка, также можете немного поиграть стилями, возможно сделаете красивый, но желательно, чтоб подходило под основной стиль на сайте, как родной изначально было послу установки.
12.12.2015 Просмотров: 562 Комментарий: (24)

Поделиться в социальных сетях

Материал разместил

Комментарий: 23
ZruBkul
ZruBkul 12.12.2015 04:431
0
Нормально переделан, и рейтинг там как раз к ста те. Только нужно что то добавить в низ, по пусто, можно какой то оператор добавить и вид будет уже другим.
Kosten
Kosten 12.12.2015 04:513
0
ZruBkul, хотел добавить там раздел и написать что материал из раздела и оператор, но что то раздел не как не хотел показываться и решил не чего не ставить, хотя были некоторые мысли, но они только для понта стояли, не думаю что там нужно обязательно прописывать.
Kostik-malek
Kostik-malek 12.12.2015 05:377
+1
Может вообще еще добавить к виду, как некоторые делают, когда залит был, в какое время в какую минуты и сколько прошло времяни в секундаж. Не понимая, такие коды грузят главную. Если правильно все сделано, то поисковые боты не будут в темнои лесу искать ссылки чтоб из проиндексировать, а сразу видят, съедают и идут дпльше.
FeStemBer
FeStemBer 12.12.2015 04:492
+1
Сейчас просто можно заметь, что больше ставят как раньше такой вид. На это есть 2 причины, онда из который, это просто надоел стандартный и нужно что то оригинальное. А вторая идет из за оптимизаций под мобильные устройства, так как такого вида, очень хорошо проходят у гугл, подходит или нет.

А что низ не заполнен, это ZruBkul, не вижу смысла грузить вид всяким не нужным барахлом, здесь главное файл и широкий формат изображение, и даже есть категория и думаю на ее сделать клик можно перейти на нее, что еще нужно, только один скрипт, под краткое описание, чтоб сразу выставить на 120 - 140 знаков, здесь бы он не помешал.
Kosten
Kosten 12.12.2015 05:5211
0
Но у каждого поиска, свои знаки, и точно знаю, что они разные, и нужно драть что то по середине, это говорю про название.
Kosten
Kosten 12.12.2015 05:074
0
Tventum, можно сразу его сделать так к примеру, что заголовок не превышал 30 знаков, писать можно и больше, но а поисковой системе он будет только под эти знаки настроен.

Это только касается $TITLЕ$

Код
<?if(len($TITLE$)>30)?><?substr($TITLE$,0,30)?>...<?else?>$TITLE$<?endif?>


И под это прописать стили, которые связаны с пробелом, они как все знаем, также учитываются.

Код
text-overflow: ellipsis;  
white-space: nowrap;


А вот с кратким описанием, там нужно совершенно другое, один раз устанавливал, если не правильно, то поправите.

Код
<p style="color: rgb(255, 255, 255); padding: 7px;"><?substr($MESSAGE$,0,200)?>...</p>

Как видим здесь сразу определенно 200 знаков, это значит убираем $MESSAGЕ$ но смотря у ка го какая настройка, но к новостям не нужно, там на сайте выставляют.
Kostik-malek
Kostik-malek 12.12.2015 05:418
0
Под название титле, вообще самый нормальный код под название. Но и самому нужно хоть немного понимать, чтоб похожее не написать и не статью строчить а понятное название, чтоб в нем был основной ключ, что ищет пользователи и гости в поисковых системах. И главное его сильно не нужно в описание упоменать много, то получиться спам, одного раза хватит.
Kosten
Kosten 12.12.2015 05:5412
0
Но понятно, что для кого то самый нормальный код, но все понять не могу, чем стили так на пробелы могут повлиять, для меня это явно что то далекое и не известное.
ZruBkul
ZruBkul 12.12.2015 06:4514
0
Возможно роботы их учитывать не будут.
Kvint
Kvint 12.12.2015 05:315
+1
Такой дизайн уже есть на этом сайте, только дизайн, а вот что касается всех этих фишек, что стоят на вид материале в темно прозрачном окне, они здесь в оригинале и категория красиво сделано.
А что не чего в низу не написано, не нужно и правильно сделал, другое заметил, вод операторы должно идти что то, а они просто прописаны, это что такой вид простой.
Kostik-malek
Kostik-malek 12.12.2015 05:346
0
Нравятся такие коды, тем что мало и все понятно, рейтинг вообще стоит от системы, и там точно не скажу, около 10 предлогают, и вы можете выбрать, на официальном форуме думаю прописаны они. А что операторы не прекрыты, так их прекрывают, чтоб гости или какая то группа не могла видеть, или скачать.
ZruBkul
ZruBkul 12.12.2015 05:439
0
Kostik-malek, у системы нет такого рейтинга, у них простые звезды, есть даже лайк, только не помню под каким номером. Так как ссылка одна, но они все под номером.
Kvint
Kvint 12.12.2015 05:4610
0
Но главного нет, чтоб выводил, сколько проголосовало и кликов было, а то наведешь и другой понять не сможет, далеко ходит не нужно, сам не могу определить, что так сильно повысили или наоборот. Только по оттенку цвета и смотришь, но для дизайна все это стоит больше, вот как бы без рейтинг он был, совершенно другой вид представлялся и не такой как есть.
ZruBkul
ZruBkul 12.12.2015 06:4413
0
Поставил этот вид, так не обычно после такого на здесь был и смотрится совершено по другому. Только нужно, где темное с прозрачным сделать по меньше, но немного они широки.
Kosten
Kosten 12.12.2015 06:4715
0
ZruBkul, да делал на счет меньше, но там криво становилось. Ты уменьшаешь а данные уже не по центру стоят, вот как мог уменьшил, а так точно не скажу на пару сек, было больше.
trem200
trem200 12.12.2015 13:3016
0
А как поменять цвет звёзд в рейтинге?
JoniDen
JoniDen 12.12.2015 20:2317
0
Ну это картинка, просто меняешь на свой цвет в Фотошопе, и все готова.
Kosten
Kosten 12.12.2015 20:3218
0
JoniDen, правильно написал, просто покрасить в фотошоп в любой оттенок цвета.
JoniDen
JoniDen 13.12.2015 00:1120
0
А я не правильного и не знаю biggrin
Kosten
Kosten 13.12.2015 00:2021
0
Есть программа, под название PhotoInstrument, не фотошоп, но мелкие функций фотошоп делает нормально. Иногда ее подключаю, так как быстро загружается.
JoniDen
JoniDen 13.12.2015 23:5322
0
Хм не знал эту программу, работаю только на Фотошопе smile
Хотя ты прав загрузка у него чуть дольше.
Kosten
Kosten 12.12.2015 20:3419
0
Так же можете выбрать на официальном форуме, возможно кому другой рейтинг нужен, переходим здесь и смотрим.
1 2 »
avatar