» »

Темные Последние комментарии Veb 1 для uCoz


Темные Последние комментарии Veb 1 для uCoz

Представляю темный оттенок информер на последний комментарий с Avarat для uCoz. Его ставят на главную страницу в блог или можно без него, смотря какой ресурс. Изначально он был светлый и теперь немного по самому скрипту доработан, а точнее будет выводит заданные знаки и ссылки или смайлы и он слетать не будет. Выставил его сразу по оттенку на 000 - это самый темный и от него потом по стилям можно настраивать.

Можно сделать такую рамку, под изображение пользователя или No Avarat, но в коде уже стоять будет нак на главной.

Скрипт последнее комментарий для uCoz

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

Установка:

Создаем информер и у него должны такие параметры.

Комментарии · Материалы · Дата добавления материала D · Материалы: 3 · Колонки: 1

И дуда ставим этот скрипт.

Код
<div class="uzer_coment_v">  
<div class="uzer_name">  
<a href="$PROFILE_URL$" target="_blank">$NAME$</a>  
</div>  
<div class="uzer_data">$DATE$</div>  
</div>  
<div class="uzer_massage"><a href="$ENTRY_URL$" target="_blank"><?if($USER_AVATAR_URL$)?><img class="coment_avatar" src="$USER_AVATAR_URL$" /><?else?><img class="coment_avatar" src="http://zornet.ru/Ajaxoskrip/Forma_skriptov/zZdU4oy.jpg" alt="no" /><?endif?><?if(len($MESSAGE$)>120)?><?substr($MESSAGE$,0,120)?>...<?else?>$MESSAGE$<?endif?></a></div>


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

CSS:

Код
.uzer_coment {
  overflow: hidden;
  width:260px;
  background: #272625;
  border: 1px solid #585A5A;
  border-bottom:none;
  border-radius: 5px;
}  

.uzer_coment_v {
  float:left;
  width:260px;
  height:27px;
  background: url(http://zornet.ru/Fresa/Argsa/rytys/fon_inf_comment_v-2.png) repeat-x top;
  border-top: 1px solid #484747;
}  
   
.uzer_coment_v a:link,  
.uzer_coment_v a:visited {color:#393939;}  
.uzer_coment_v a:hover {color: #636363;}  
   
.uzer_coment_v a:link,  
.uzer_coment_v a:visited,  
.uzer_coment_v a:hover {
  text-decoration:none;
  font:11px Verdana,Arial,Helvetica, sans-serif;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgb(0, 0, 0);
}  

.uzer_name {  
  float:left;  
  padding: 6px 0px 0px 10px;  
}  
   
.uzer_data {
  float:right;
  font:11px Verdana,Arial,Helvetica, sans-serif;
  font-weight: bold;
  color: #B5B5B5;
  text-shadow: 1px 1px 1px #383838;
  padding: 6px 10px 0px 0px;
}  
   
.uzer_massage {
  background: url(http://zornet.ru/Fresa/Argsa/rytys/fon_inf_comment-1.png) repeat-x top;
  width:250px;
  float:left;
  overflow: hidden;
  padding: 10px 5px 10px 5px;
  border-bottom: 1px solid #292828;
}  
   
.uzer_massage :link,  
.uzer_massage :visited {
  display: block;
  text-decoration: none;
  color: #FDFDFD;
}  

.uzer_massage:hover {
  color: #545050;
  background: url(http://zornet.ru/Fresa/Argsa/rytys/fon_inf_comment-1.png) repeat-x top #333232;
}  

.coment_avatar {
  width:45px;
  height:45px;
  float:right;
  background: #848586;
  padding: 3px;
  margin-left: 5px;
  border: 1px solid #828282;
  border-radius: 3px;
}


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

Код
<div class="uzer_coment">  
$MYINF_Ваш номер, что создали$  
</div>


Остается поставить номер, под каким вы создали и поставить, и теперь он полностью установлен.
12.02.2016 Просмотров: 482 Комментарий: (13)

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

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

Комментарий: 13
AnTron
AnTron 12.02.2016 17:031
0
Вот и темный появился, забыл сказать, зачем имя и фамилию выводит, так не понять, делать так логин, чтоб все было ясно. Но темный так не чего получился, но мне кажется слишком темный это 000, можно было и что то светлого добавить.
tsakonter
tsakonter 12.02.2016 17:062
0
Но вот видно, что смайл есть и не полетел, вообще, по умному с операторами получилось, они и не дают слететь информеру, так как он тянет за собой весь дизайн сайта.
csretven
csretven 12.02.2016 18:059
0
Но это не означает, что смайл есть в комментариях, нужно проверять, хотя в любую минуто можно изменить, если что то не так. Поставил на сайт, так сам прокомментировал и смайлами и ссылкой, вроде не чего не изменилось.
Сопрано
Сопрано 12.02.2016 17:423
0
Тот же дизайн и другой только цвет, и совершенно по другому все принимается с первого взгляда.
Maryges
Maryges 12.02.2016 17:464
0
Но темный оттенок, он всегда все сглаживает, и не нужно что то там сильно настраивать, основном всегда подходят.
Сафрон
Сафрон 12.02.2016 17:485
0
Это точно, клева смориться.
Kosten
Kosten 12.02.2016 17:516
0
Не то слово, не какого фотошоп, так как не сильно понимаю, как можно мелкие детали красить, пришлось подключить PhotoInstrument, но там не показывает какой номер цвета, все на глаз, и решил просто не что то придумывать и самый темный выбрал.
Tergran
Tergran 12.02.2016 17:557
0
Здесь сделан эффект, что при наведение, где комментарий, меняется оттенок цвета.
csretven
csretven 12.02.2016 18:038
0
Еслть эффект, как поставил его, он вообще легок в управление.
Kosten
Kosten 21.02.2016 16:2810
0
Чтоб выставить логин или как там ник пользователя, то в информер находим $NАME$ и заменяем на $USЕRNAME$ и тогда будет как на изображение, а точнее выводит ваш ник.

Maryges
Maryges 21.02.2016 16:3411
0
Костен ты вывел круглый обвод, что не написал как сделать. А делается очень просто в стилях находим этот кусок.

Код
.coment_avatar {  
  width:45px;  
  height:45px;  
  float:right;  
  background: #848586;  
  padding: 3px;  
  margin-left: 5px;  
  border: 1px solid #828282;  
  border-radius: 3px;  
}


И меняем разметку border-radius, там стоит 3, выставим 30 и все, у вас круглое будет.
Kosten
Kosten 21.02.2016 17:5013
0
Но что то и подвинуло изменить и чтоб стало просто легче настраивать оттенок цвета, там остались 2 ссылки, но они должны быть.
Kosten
Kosten 21.02.2016 17:4912
0
Вот стили, которые немного изменил, теперь вам не нужно фотошоп, чтоб вывести оттенок цвета, где написан логин и время, когда был размещен комментарий. В материале идет ссылкой, здесь вы просто можете выбрать любой оттенок. Также как можно заметить, что окна стали намного меньше и теперь, как по мне они отлично вписались, что тоже прописано.



Код
/* === Информер === */  
.uzer_coment {
  overflow: hidden;
  width: 207px;
  background: #232323;
  border: 1px solid #4A4A4A;
  border-bottom:none;
  border-radius: 5px;
}  

.uzer_coment_v {
  float:left;
  width:260px;
  height:27px;
  background: #191818;
  border-top: 1px solid #525252;
}  
  
.uzer_coment_v a:link,  
.uzer_coment_v a:visited {color: #C0CFD2;}  
.uzer_coment_v a:hover {color: #636363;}  
  
.uzer_coment_v a:link,  
.uzer_coment_v a:visited,  
.uzer_coment_v a:hover {
  text-decoration:none;
  font:11px Verdana,Arial,Helvetica, sans-serif;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(72, 71, 71, 0.87);
}  

.uzer_name {  
  float:left;  
  padding: 6px 0px 0px 10px;  
}  
  
.uzer_data {  
  float:right;  
  font:11px Verdana,Arial,Helvetica, sans-serif;  
  font-weight: bold;  
  color: #B5B5B5;  
  text-shadow: 1px 1px 1px #383838;  
  padding: 6px 57px 0px 0px;  
}  
  
.uzer_massage {
  background: url(http://zornet.ru/Fresa/Argsa/rytys/fon_inf_comment-1.png) repeat-x top;
  width: 197px;
  float:left;
  overflow: hidden;
  padding: 10px 5px 10px 5px;
  border-bottom: 1px solid #272727;
}  
  
.uzer_massage :link,  
.uzer_massage :visited {
  display: block;
  text-decoration: none;
  color: #FDFDFD;
}  

.uzer_massage:hover {
  color: #2D2D2D;
  background: url(http://zornet.ru/Fresa/Argsa/rytys/fon_inf_comment-1.png) repeat-x top #333232;
}  

.coment_avatar {
  width: 31px;
  height: 31px;
  float:right;
  background: #848586;
  padding: 3px;
  margin-left: 5px;
  border: 1px solid #828282;
  border-radius: 30px;
}
avatar