• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Вид комментариев для uCoz по две стороны (Уникальный по функций)
Вид комментариев для uCoz по две стороны
Kosten
Пятница, 21 Апреля 2017 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44330
Награды: 70
По своему цвету вид комментариев серые и на светлом фоне отлично видны и смотрятся. Но главное у них, это рамка под avatar, которая по своему дизайну выполнена в форме круга. Если один пользователь оставил свой пост и он находиться к примеру с левой стороны, то следующий будет с противоположной. Редактирование находиться не как у всех, а в низу каждого отписавшегося, что очень удобно для такой функций. И сам вывод знаков будет немного отличаться от основного, а это его плотность, что читать безусловно будет легко.

Уже доработан по всем обновлением, что были на системе.



Установка:

CSS:

Код
/* Вид комментария */  
.com_wp {border-radius:50%;background:#fff;width:65px;height:65px}  
  .ob_wp { width:73px;height:73px;background: #20242b;border-radius:50%; }  
   
  .ob_wp1 { width:81px;height:81px;background:rgba(255,255,255,0.3);;border-radius:50%; }  
   
  .mess_wp{box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);border-radius:4;background: #efefef;  
  background: -moz-linear-gradient(top, #efefef 0%, #dbdbdb 100%);  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#dbdbdb));  
  background: -webkit-linear-gradient(top, #efefef 0%,#dbdbdb 100%);  
  background: -o-linear-gradient(top, #efefef 0%,#dbdbdb 100%);  
  background: -ms-linear-gradient(top, #efefef 0%,#dbdbdb 100%);  
  background: linear-gradient(to bottom, #efefef 0%,#dbdbdb 100%);  
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#dbdbdb',GradientType=0 );  
  }  
  .tim_wp{background:d7d7d7;border-radius:4px;}  
  #triangle-left {  
  width: 0;  
  height: 0;  
  border-top: 7px solid transparent;  
  border-right: 9px solid #e1e1e1;  
  border-bottom: 7px solid transparent;  
  }#triangle-left1 {  
  width: 0;  
  height: 0;  
  border-top: 7px solid transparent;  
  border-left: 9px solid #e1e1e1;  
  border-bottom: 7px solid transparent;  
  }  
/*------------*/


Заменяем код самого вида в админ панели:

Код
<?if($CLASS$)=='cBlock1'?>  
  <div style="padding-bottom:9px;">  
  <table cellspacing="0" width=100%><tr><td width=96 valign=top>  
  <div class="ob_wp1"><div style="padding-top:4px;padding-left:4px">  
  <div class="ob_wp">  
  <div style="padding-top:4px;padding-left:4px"> <?if($USER_AVATAR_URL$)?><a href="$PROFILE_URL$" title="$USERNAME$"><img src="$USER_AVATAR_URL$" width=65 height=65 class="com_wp"></a><?else?><a href="$PROFILE_URL$" title="$USERNAME$"><div class="com_wp"></div></a><?endif?>  
  </div> </div> </div></div>  
   
   
  <div style="margin-left:-15px"> <center>  
  <?if($MODER_PANEL$)?>  
  $MODER_PANEL$  
  <?endif?>  
  </center></div>  
  </td><td valign=top>  
   
  <div style="position: absolute;margin-left:-9px;margin-top:14px;"><div id="triangle-left"></div></div>  
  <div class="mess_wp">  
  <div style="padding:6px">  
  <table><tr>  
  <td valign=top><div class="tim_wp"><div style="font-family:Tahoma;color:#797979;padding-left:7px;padding-right:7px;padding-top:4px;padding-bottom:7px">$TIME$</div></div></td>  
  <td><div style="font-family:Tahoma;color:#595959;padding-left:7px;"><b>$MESSAGE$</b></div></td>  
  </tr></table>  
  </div>  
   
  </div>  
  </div>  
  </td></tr></table>  

  <?else?>  
  <div style="padding-bottom:9px;">  
  <table cellspacing="0" width=100%><tr><td valign=top>  
  <div class="mess_wp">  
  <div style="padding:6px">  
  <table><tr>  
  <td valign=top>  
  <div class="tim_wp"><div style="font-family:Tahoma;color:#797979;padding-left:7px;padding-right:7px;padding-top:4px;padding-bottom:7px">$TIME$</div></div></td>  
  <td><div style="font-family:Tahoma;color:#595959;padding-left:7px;"><b>$MESSAGE$</b></div></td>  
  </tr></table>  
  </div>  
   
  </div>  
  </div>  
  </td><td width=96>  
  <div style="position: absolute;margin-left:-2px;margin-top:14px;"><div id="triangle-left1"></div></div>  
  <div style="float:right">  
  <div class="ob_wp1"><div style="padding-top:4px;padding-left:4px">  
  <div class="ob_wp">  
  <div style="padding-top:4px;padding-left:4px"> <?if($USER_AVATAR_URL$)?><a href="$PROFILE_URL$" title="$USERNAME$"><img src="$USER_AVATAR_URL$" width=65 height=65 class="com_wp"></a><?else?><a href="$PROFILE_URL$" title="$USERNAME$"><div class="com_wp"></div></a><?endif?>  
  </div> </div> </div></div></div>  
  <div style="margin-right:-24px"> <center>  
  <?if($MODER_PANEL$)?>  
  $MODER_PANEL$  
  <?endif?>  
  </center></div>  
  </td></tr></table>  
  <?endif?>

Перезагружаем и не забываем все сохранить.

Мысли в слух:

1. Что то он мне напоминает один вид, только тот был в темном цвете а этот вот в сером.

2. Правильно напоминает, так как первые комментарий по такому дизайну шли в темном цвете. А что просто перестроен код и настроен под серый оттенок. Хотя просмотрев его и не нашел не одной ссылки, вот такие коды мне больше нравятся.

3. И это хорошо когда настроен код под все обновление, что стоит только кнопка редактирование.

4. Очень красиво смотрится и подойдет к любому светлому шаблону и тематика будет в этом случай, реально обширная.

5. Нынче мода на круглые рамки аватара пошли, а вот треугольные или ромбом слепить бы для разнообразия, может видел кто есть треугольные рамки?
Прикрепления: 8396013.png (47.5 Kb)
Страна: (RU)
Kolinkor
Пятница, 21 Апреля 2017 | Сообщение 2
Оффлайн
Vip
Сообщений:306
Награды: 1
Идея хорошая, дизайн лучше перекроить.
Страна: (RU)
Марковичь
Пятница, 21 Апреля 2017 | Сообщение 3
Оффлайн
Vip
Сообщений:65
Награды: 0
Цитата Brung ()
Идея хорошая, дизайн лучше перекроить.

В чем дело, можно сделать.
Страна: (RU)
Kosten
Пятница, 21 Апреля 2017 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44330
Награды: 70
По сути в дизайн не одной ссылки нет.
Страна: (RU)
-SAM-
Пятница, 21 Апреля 2017 | Сообщение 5
Оффлайн
Друзья сайта
Сообщений:882
Награды: 40
Уже выкладывали здесь и здесь, теперь просто нужно переделать, чтобы тупо дубля не было. Посмотрел еще код - фиговый, куча артефактных кодов с таблицами и инлайн-стилями, в наше время такое уже не годиться.


Цитата Kosten ()
Уже доработан по всем обновлением, что были на системе.
В чём именно? Данный материал 2013 года.




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".


Сообщение отредактировал
-SAM- - Пятница, 21 Апреля 2017, 08:33
Страна: (UA)
Kosten
Пятница, 21 Апреля 2017 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44330
Награды: 70
-SAM-, с большим уважение к вам, но сколько нужно столько заливать буду.
Страна: (RU)
-SAM-
Пятница, 21 Апреля 2017 | Сообщение 7
Оффлайн
Друзья сайта
Сообщений:882
Награды: 40
Короче, ладно, мысли в слух (понимающие поймут, а кто не хочет - всё равно останется при своём мнении).




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".


Сообщение отредактировал
-SAM- - Понедельник, 24 Апреля 2017, 07:07
Страна: (UA)
Форум » Веб-разработка » HTML + CSS — коды » Вид комментариев для uCoz по две стороны (Уникальный по функций)
  • Страница 1 из 1
  • 1
Поиск: