Стена пользователя v1 для uCoz
Интересное разрабатывания стены из каталога сайтов.

Друзья. Спрашивал в чате ли делать стену для uCoz - ответил всего один пользователь. В общем благодарите его за то, что он сказал да. Иначе я бы не делал.


Стена пользователя сделана из модуля Каталог сайтов. Выводится она с помощью script и IFrame.


Хочу рассказать плюсы и минусы такой стены.


Плюсы:


1. Теперь очень модно иметь стену пользователя на сайте и делать записи или комментировать другие записи. В общем то ставлю плюс + , потому что в такой стене можно это делать.


2. Можно оформить запись в виде картинки. +


3. Мне кажется она не грузит очень сильно сайт. Вроде плюс.


4. Также плюс ставлю за то, что можно редактировать и удалять свои записи и комментарии.


5. Можно писать на стене у другого пользователя.


6. Свои эмоции можно выражать с помощью смайлов.


7. Есть функция создать стену. Если у кого-то стена не создана то нельзя добавлять записи.


Минусы:


1. Как ни крути но модуля все равно избавляемся. Стена его забирает.


2. Нельзя удалять записи других пользователей на своей стене.


3. Есть еще такой минус как лайки или оценки. Я не хотел добавлять их так как не нашел решение чтобы они исчезали при оценке записи. Может в v2 этого минуса не будет.


4. Нельзя добавлять аудиозаписи, видеозаписи как в других социальных сетях.

Вроде все плюсы и минусы сказал. Может где что пропустил.


Установка


Управление дизайном - Каталог сайтов - Страница материалов и комментариев к нему:


Код
<html>
<head>
<link type="text/css" rel="StyleSheet" href="/css/style.css" />
  <style>#puzadpn {display:none}.puzadpn {display:none}
::-webkit-scrollbar {display: none;}
textarea, input {cursor:text}
textarea {resize:none}
textarea:focus, input:focus, select:focus {outline:none}
input[type=text], input[type=password], textarea{-webkit-appearance: none;resize: none;padding: 10px 10px 10px 10px;border-bottom: 2px solid #dce4ec; color: #34495e; font-family: "Lato", sans-serif; text-indent: 1px; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out;border-top: none;border-left: none;border-right: none;border-top-left-radius: 5px;border-top-right-radius: 5px;}
input[type=text]:focus, input[type=text]:active, textarea:focus, textarea:active, input[type=password]:focus, input[type=password]:active{border-bottom: 2px solid #2196f3; border-top: none;border-left: none;border-right: none;}
button, input[type="button"], input[type="submit"], input[type="reset"]{border:none; color: #4285f4;padding: 10px 19px;font-size:14px;display: inline-block;overflow:hidden; background:#f2f6fa;text-align:center;font-weight: bold;border-radius:10px; -webkit-transition: 0.25s;-moz-transition: 0.25s;-o-transition: 0.25s;transition: 0.25s;cursor: pointer;}
button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {overflow:hidden;background:#e6eef5;text-align:center;border-radius:10px;}
.pad20{padding: 20px;}
.button_comment {margin-top: -3px;padding: 8px;background:#F2F6FA;}
  #cl_text {border: 2px solid #dce4ec;border-radius: 5px;}
.comment_over {margin-top:20px;padding-bottom:15px;border-bottom:1px solid #dedede}  
.comment {display:table;width:100%;}  
.comment_avatar {display:table-cell;vertical-align:top;width:64px;padding-right:15px}
.comment_avatar img {border-radius: 100px;width: 60px;height: 60px;object-fit: cover;}
.comment_message {display:table-cell;vertical-align:top;text-align:left}
.comment_message_in img {max-width: 100%;}
.del-com {display: inline-block;padding-left: 10px;}
textarea#message {width: 836px;height: 55px;}
.commform_code {display: inline-block;width: 20px;height: 18px;vertical-align: top;opacity: 0.8;background-image: url(https://web.telegram.org/img/icons/General.png);background-repeat: no-repeat;background-position: -10px -399px;}
.commform_code:hover {background-position:-10px -427px;opacity: 1;}
.drop {position: relative;}
.dropdownContain {position: absolute;z-index: 2;left: 50%;margin-left: -7em;top: -300px;}
.dropOut {background:#fff;width:190px!important;padding: 10px;box-shadow:0px 8px 35px rgba(0,0,0,0.1);position: relative;opacity: 0; @include border-radius(.4em, .4em);overflow:hidden;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;-ms-transition: all 0.4s ease-out;-o-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
.dropOut a { padding: 10px;display: block;}
.dropOut a:hover {background:#f9f9f9;color:#000;text-decoration:none}
.nav, .ul:hover .triangle { opacity: 1 ;display: inline-block;}
.nav .ul:hover .dropdownContain {top:-100px; }
.nav .ul:hover .dropOut { opacity: 1; margin-bottom:20px;}
.user span{margin-left: 10px; display: inline-block; width: 22px; height: 22px; vertical-align: top; opacity: .8; background-image: url(https://web.telegram.org/img/icons/General.png); background-repeat: no-repeat; background-position: -9px -335px;}
.dropOut img{padding-left:3px;padding-top:3px;float:left;cursor:pointer}  
.user span:hover{ background-position: -9px -367px;opacity: 1;}  
.commform {display: inline-block;margin-left: 25px;}
.commform_smile {display: inline-block;}
i.read {height: 17px; width: 16px; background: url('http://kanavas.at.ua/img/site_page.png') -80px -46px no-repeat; vertical-align: middle; opacity: 0.5; transition: all .3s; display: inline-block;}
i.delete {height: 16px; width: 16px; background: url('http://kanavas.at.ua/img/site_page.png') -240px -199px no-repeat; vertical-align: middle; opacity: 0.5; transition: all .3s; display: inline-block; cursor: pointer;}  
.comment_rate {display:table-cell;vertical-align:top;text-align:center;width:80px}  
.comment_top {padding-top:2px;padding-bottom:7px;font-size:17px;line-height:20px}  
.comment_top a {text-decoration:none;color:#6c6c6c}  
.comment_top .comm_time {font-size:12px;color:#9c9c9c;display:inline-block;padding-left:10px}  
.comment_message_in {font-size:15px}  
.comment_over:hover .comment_answer_button a {display:inline-block}  
.comment_over:hover .c_rate_plus a, .comment_over:hover .c_rate_minus a {display:block}  
.comment_answer_button {margin-top:10px;height:24px}  
.comment_answer_button a {display:none;color:#666;font-size:13px;text-decoration:none;background:#efefef;padding:3px 10px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px}  
.comment_answer_button a:hover {color:#1d1d1d;text-decoration:none;background:#eaeaea;}  

  </style>  
<style>.com-order-block {display:none;}</style>
</head>
<body>
<div class="wrapper pad20">
<?if($COM_IS_ACTIVE$)?>$COM_ADD_FORM$
<?if($COM_CAN_READ$)?>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td width="60%" height="25">
  <h2 style="font-size: 15px;margin-left: 10px;padding: 10px 0px;color: #b2c8db;">
<b>$COM_NUM_ENTRIES$</b> запис<?if($COM_NUM_ENTRIES$%10=0||$COM_NUM_ENTRIES$%10>4||$COM_NUM_ENTRIES$%100>10&&$COM_NUM_ENTRIES$%100<15)?>ей<?else?><?if($COM_NUM_ENTRIES$%10=1)?>ь<?else?>и<?endif?><?endif?>
</h2></td><td align="right" height="25">$COM_PAGE_SELECTOR$</td></tr>
<tr><td colspan="2">$COM_BODY$</td></tr>
<tr><td colspan="2" align="center">$COM_PAGE_SELECTOR1$</td></tr>
<tr><td colspan="2" height="10"></td></tr>
</table>
<?endif?><?endif?>
  </div>
</div>$POWERED_BY$
</body>
</html>


Управление дизайном - Каталог сайтов - Вид материалов


Код
<div class="eTitle">$ENTRY_URL$</div>


Настройки модуля - Форма добавления материала - убираем все галочки кроме "Название сайта". И создаем категорию, чтобы у неё был id 1.


В форму добавления комментариев:


Код
<?if($MODULE_ID$="dir")?> <?if($USER_LOGGED_IN$)?><div style="display:none;">$BBCODES$</div>
<div class="cl_editor" id="cl_text">  
<textarea name="message" id="message" class="send_comment">$MESSAGE$</textarea>  
<?if($SECURITY_CODE$)?><tr><td class="commTd1" nowrap>Код: </td><td class="commTd2">$SECURITY_CODE$</td></tr><?endif?>  
<div class="button_comment"><input class="button" type="submit" name="submit"> <div class="commform"><div class="commform_code" onclick="smiles('[img][/img]')"></div>
<div class="nav">
  <div class="ul">
  <div class="drop">
   
  <div class="user">
<span> </span>
  </div>
  <div class="dropdownContain">
  <div class="dropOut">
<img src="http://kanavas.at.ua/smiles/smile.gif" onclick="smiles(':)')" alt="" />  
<img src="http://kanavas.at.ua/smiles/wink.gif" onclick="smiles(';)')" alt="" />  
<img src="http://kanavas.at.ua/smiles/laugh.gif" onclick="smiles(':D')" alt="" />  
<img src="http://kanavas.at.ua/smiles/cool.gif" onclick="smiles('B)')" alt="" />  
<img src="http://kanavas.at.ua/smiles/sad.gif" onclick="smiles(':(')" alt="" />  
<img src="http://kanavas.at.ua/smiles/cry.gif" onclick="smiles(':cry:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/care.gif" onclick="smiles('^_^')" alt="" />  
<img src="http://kanavas.at.ua/smiles/tease.gif" onclick="smiles(':p')" alt="" />  
<img src="http://kanavas.at.ua/smiles/shock.gif" onclick="smiles('%)')" alt="" />  
<img src="http://kanavas.at.ua/smiles/angel.gif" onclick="smiles('0:)')" alt="" />  
<img src="http://kanavas.at.ua/smiles/eye.gif" onclick="smiles(':eye:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/fools.gif" onclick="smiles(':fools:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/please.gif" onclick="smiles(':please:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/desman.gif" onclick="smiles(':des:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/xd.gif" onclick="smiles(':xD:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/like.gif" onclick="smiles(':like:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/unlike.gif" onclick="smiles(':unlike:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/ok.gif" onclick="smiles(':ok:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/peace.gif" onclick="smiles(':peace:')" alt="" />  
<img src="http://kanavas.at.ua/smiles/clups.gif" onclick="smiles(':clups:')" alt="" />  
  </div>
  </div>
  </div>
  </div> </div></div>  
</div><div class="cerr">$ERROR$</div><?endif?>
<script type="text/javascript">  
function smiles(tx) {  
$('#message').val($('#message').val()+' '+tx+' ')  
$('#message').focus()  
}  
</script>
<?endif?>

В вид комментариев:


Код
<?if($MODULE_ID$="dir")?>  
<script type="text/javascript">
  function getrate(strid) {
$('#mok'+strid).toggle(0)
$('#mjk'+strid).toggle(0)
}
</script>
<div class="post all" onmouseover="wall.postOver('')" onmouseout="wall.postOut('')">  
<div class="comment_over">  
<div class="comment">  
<div class="comment_avatar"><a href="$PROFILE_URL$" target="_blank"><img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://yraaa.ru/images/noavatar.gif<?endif?>" width="64" alt="" /></a></div>  
<div class="comment_message">  
<div class="comment_top"><?if($USERNAME$)?><a href="$PROFILE_URL$" target="_blank">$NAME$</a><?endif?> <span class="comm_time">$DATE$ в $TIME$<?if($ENTRY_URL$)?> / <a href="$ENTRY_URL$">Материал</a><?endif?></span><?if($MODER_PANEL$)?><div style="display:none">$MODER_PANEL$</div>
<div class="del-com ">
<a href="javascript://" rel="nofollow" onclick="new _uWnd('Ie',' ',-600,-200,{autosize:1,closeonesc:1,resize:0},{type:'POST', url:'/index/37-$ID$', data: { sdata: ssdata[scurrent], soc_type: scurrent}});return false;"><i class="read"></i></a>  
<a onclick="$('#dt$ID$').fadeOut(150);del_item('$ID$');setTimeout(function(){$('#public_$ID$').fadeTo(200, 0.1);$('#public_$ID$').slideToggle(200)},2000)" onmouseover="setClass('bom0$ID$',)" onmouseout="setClass('bom0$ID$',)" id="bom0$ID$"><i class="delete"></i></a>
</div>
<?endif?></div>  
<div class="comment_message_in">$MESSAGE$</div>  
<?if($ANSWER_URL$)?><div class="comment_answer_button"><a href="$ANSWER_URL$">Комментировать</a></div><?endif?>
  </div>  
</div>  
</div>
</div><?endif?>
  

8. Управление дизайном - Пользователи - Персональная страница пользователя. Ставим туда, куда хотим видеть стенку:


Код
<?if($_DIR_ENTRIES$="0" && $_IS_OWN_PROFILE$)?>
<div class="pad10"><center><input id="create" type="button" value="Создать стену" /></center></div>
  <script type="text/javascript">  
  $(function(){  
  $('#create').click(function() {  
  $(this).attr('disabled','disabled');  
  $.get("/dir/0-0-0-0-1", function(data) {  
  $.post("/dir/", {  
  a: 12,
  jkd428: 1,  
  jkd498: 1,
  ocat: 1,
  title: '$USERNAME$',  
  tags: '$USERNAME$',  
  coms_allowed: 1,  
  ssid: $('[name="ssid"]', data).val()  
  }, function(res) {  
  $('#create').remove();  
  location.reload()  
  })  
  })  
  })  
  })  
  </script><?endif?>
<?if($_DIR_ENTRIES$)?><script language="javascript" type="text/javascript">
  function resizeIframe(obj) {
  obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
  setInterval(function() {resizeIframe(document.getElementById('frame'))},200 )
</script>
  <script type="text/javascript">  
  document.write('<div class="prog"></div>');  
  $.get("/dir/0-0-$_USER_ID$-0-17",  
  function(data) {  
  var ifnohist = $(".eTitle:first", data).html();  
  $('.prog').html('<iframe id="frame" src=" '+ifnohist+' " width="100%" frameborder="0"></iframe>');  
  });  
  </script>
<?endif?>

Ждем второй версии.

Всего комментариев: (12)

vanu2006290812
в 13:31, 24 Янв 19
у профілі де повинна бути стіна видає помилку 404
otgamera
в 11:25, 27 Окт 17
а вторая версия есть?
Gamelord
в 19:50, 28 Июл 17
У меня на персональной странице в место стены ошибка такой страницы не существует
Alehios
в 14:55, 06 Мар 17
Еще к данному скрипту добавлю следующее! Если у кого не работает скрипт, обратите внимание, не создавались ли данным пользователем ранее в модуле "Каталог сайтов" материалы. Если да - зайдите на страницу вашего профиля, нажмите на шестеренку (управление счетчиками) и нажмите на автоматический пересчет. Цифра напротив "Каталога сайтов" должна отображать значение "0". После чего скрипт у вас заработает и появиться кнопка "создать стену"
Alehios
в 12:50, 06 Мар 17
Разобрался! Заработало. К материалу добавлю! Что после того как выполните все инструкции здесь, в настройки - каталог сайтов - не забудьте включить функцию "Включить возможность поиска материалов пользователя:" в самом низу
Alehios
в 12:36, 06 Мар 17
Вижу что скрипт у вас на сайте работает отлично. Но на каком бы сайте я не пробовал повторить и все перезалить, не работает. Вместо того чтобы скрипт выводил форму добавления комментария на странице пользователя, он почему-то выводит в его профиле главную страницу самого сайта. Помогите с решением, возможно в скрипте есть ошибка!
Alehios
в 16:15, 05 Мар 17
Нужно тоже самое только для любого другого модуля . . . . К каталогу новостей к примеру либо к блогу!
Sheriff
в 13:20, 22 Мар 16
А кто автор этого? Если админ, напиши мне в скайп ghost_0007, есть предложение о сотрудничестве в рамках uscript.pro
Kanavas
в 13:24, 22 Мар 16
Я автор. 0:)
root-1
в 12:55, 09 Мар 16
не робит чего-то ((
Kanavas
в 18:51, 09 Мар 16
Что именно не робит? 0:)
Alehios
в 16:19, 05 Мар 17
Нужно тоже самое только для любого другого модуля . . . . К каталогу новостей к примеру либо к блогу!
_LOGGED_IN$)?>
Чтобы оставить комментарий под этой публикацией, войдите или зарегистрируйтесь.

Случайные материалы

Плавная кнопка вверх для uCoz
Плавная кнопка вверх для uCoz
Крутой шаблон для дизайнеров в плоском стиле
Крутой шаблон для дизайнеров в плос
Добавление ссылки на источник при копировании текста
Добавление ссылки на источник при к
Типичные ошибки пользователей uCoz
Типичные ошибки пользователей uCoz
Выход с сайт с уведомлением в uwnd окне
Выход с сайт с уведомлением в uwnd
6 жизненных принципов победителя
6 жизненных принципов победителя