» »

Мини профиль и JavaScript для сайта uCoz

Мини профиль и JavaScript для сайта uCoz

Компактный мини профиль в горизонтальном виде с Avatar, где JavaScript с выводом в окно персональную страницу пользователя сайта. Если вам придет сообщение, то на нем покажет сколько пришло в цифрах и по клику вы перейдете на него. На тестовом сайте устанавливая его, а точнее прописывая там JavaScript, то заметил, что он идет еще в обводе. При нажатии "профиль" вам не будет перекидывать на страницу персонала, а все покажет в окне, где также все функций доступны и работают.

Также есть приветствие пользователя, кто зашел под своим логином. С левой стороны будет изображение пользователя, где можно на нем сделать красивый обвод или оставить как есть. Но и место нашлось для вывода времени, которое будет в правом верхнем углу. Можно на его добавить шрифтовые иконки, которые безусловно украсят сам дизайн и преобразит его, но плюс в нем, что мало место занимает. Что можно поставить в блок любого контейнера или в шапку, если она большая.

Рассмотрим как будет смотреться в реальности, после установки.

Это видит не зарегистрированный гость.

Скрипт профиль пользователя на сайт

Так уже вы прошли регистрацию на интернет ресурсе.

Профиль на светлый сайт uCoz

Это после нажатие на профиль и появление окна страницы персонала.

Компактный мини профиль для uCoz

Приступаем к установки:

Ставим там где считаете нужным, но лучше в колонку под блок.

Код
<!-- <profile> -->  
<div class="profile">  
<?if($USER_LOGGED_IN$)?>  
<div class="pHello">Привет, $USERNAME$!<div style="float:right;padding-right:2px;" title="Текущее время (МСК)">$TIME$</div></div>  
<table>  
<td>  
<div class="pAvatar"><?if($USER_AVATAR_URL$)?><a href="$USER_AVATAR_URL$"><img src="$USER_AVATAR_URL$" style="max-width:48px;" title="Нажмите для просмотра полной версии аватара"></a><?else?><img src="http://zornet.ru/Ajaxoskrip/Forma_skriptov/zZdU4oy.jpg" style="max-width:48px;"><?endif?></div>  
</td>  
<td valign="top">  
<div class="pMenu">  
<script>  
  function profile() {  
  new _uWnd('profile','Профиль',500,200,{min:0,shadow:1,header:1,max:0,resize:0,modal:1,nomove:1},'<iframe frameborder="0" src="/index/8" width="900" height="308" ></iframe>');  
  }  
  </script>  
<a onclick="profile();" href="javascript://">Профиль</a>  
<a href="$PM_URL$">ЛС(<?if($IS_NEW_PM$)?>$IS_NEW_PM$<?else?>0<?endif?>)</a>  
<a href="/index/11">Изменить</a>  
<a href="$LOGOUT_LINK$">Выход</a>  
</div>  
</td>  
</table>  
<?else?>  
<div class="pLogin">  
$LOGIN_FORM$  
</div>  
<?endif?>  
</div>  
<!-- </profile> -->


CSS:

Код
/* Profile Style */  
.profile {border:3px solid #cfcfcf;background:#e6e6e6;opacity: 0.8;}  
.profile:hover {border:3px solid #cfcfcf;background:#e6e6e6;opacity: 1.0;}  
.pHello {font-weight:bold;padding-left:1px;border-bottom:2px dashed #cfcfcf;}  
.pAvatar {margin:3px;}  
.pMenu {border-left:1px dashed #cfcfcf;}  
.pMenu a {padding-left:3px;padding-bottom:3px;}  
.pLogin {padding:3px;}  
/* ------------- */

Здесь нужно добавить, что материал полностью рабочий, но вот стилистика, то здесь сами можете над ней поработать, как добавить кнопки под функциональность, или как было сказано с шрифтовыми иконками поработать, которые должны в масть подойти.
02.04.2017 Просмотров: 522 Комментарий: (5)

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

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

Комментарий: 5
Kolinkor
Kolinkor 02.04.2017 23:501
0
Не вижу системных изменений, можно было самому поставить те же шрифтовые иконки, возможно, кто то про них в первые слышат.
Kosten
Kosten 02.04.2017 23:523
0
Здесь нужно понять как работают они, это не просто кнопку на ссылку установить.
Kolinkor
Kolinkor 02.04.2017 23:522
0
Хотя ссылку заметил на них, что все написано как сделать, все правильно, нужно с начало поставить а потом их выставлять куда попало или куда нужно.
Kosten
Kosten 03.04.2017 00:134
0
Просто шрифтовые иконки не нужно больше или меньше делать, они регулируются под текст шрифта. А значить должны ровно и корректно смотреться, что думаю можно попробовать.
FeStemBer
FeStemBer 03.04.2017 00:165
0
Как то смотрится не очень, возможно на темном дизайн лучше будет.
avatar