Выдвижной мини-профиль на сайт uCoz - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 7
Гостей: 7
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


На сайте неотъемлемая часть является мини профиль пользователя. И он должен быть безусловно удобный по всем своим функциям, что этот таким и является. Все очень просто, вы можете по стилям выбрать, какой вам нужен, идет светлый и темный и также кнопка к нему, которая будет стоять в низ сайта в правом углу. Что по функциональности, то он будет иметь все основные функций, как редактировать или просто выйти сайта и мой профиль, это переход на персональную страницу. Но здесь еще добавлено личное сообщение и сделано стильно. Вам просто нужно клик по кнопки сделать и он появится.

Что сама кнопка не будет не кому мешать, но каждый пользователь здесь будет понимать, как что сделать. Некоторые регистрируются на сайт через социальные кнопки и там не установлено изображение, здесь будет автоматически показывать No Avarat и при наведение будет появляться небольшой эффект. А так очень удобный для фиксированного ресурса, чтоб все было на фоне, но и главное это вы освободите место под него. Если вам нужно будет закрыть его, то с ним идет кнопка яркая, что при открытие вы сделаете свое дело и закроете и после этого появится кнопка, которую вы можете по стилям еще в стилистике изменить.

Приступаем к установке:
 
Это основной код, который нужно разместить в низ сайта.
Code
<?if($USER_LOGGED_IN$)?>  
  <ul class="uwaid_panel">  
  <li class="close_p">X</li>  
  <li><a href="$PERSONAL_PAGE_LINK$"><img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://zornet.ru/Ajaxoskrip/Forma_skriptov/zZdU4oy.jpg<?endif?>">Мой профиль</a></li>  
  <li><a href="$PM_URL$"><i class="uwaid_icon message"></i>Сообщения <span>$UNREAD_PM$</span></a></li>  
  <li><a href="/index/11"><i class="uwaid_icon settings"></i>Изменить данные</a></li>  
  <li><a href="$LOGOUT_LINK$"><i class="uwaid_icon exit"></i>Выйти с сайта</a></li>  
  </ul><script src="/js/table.js" type="text/javascript"></script>  
  <div class="my_profile">Мой профиль</div>  
  <script type="text/javascript" src="/js/js_profil.js"></script>  
<?endif?>

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

Светлый!
Прописать в CSS
Code
/* Êðàñèâûé âûäâèæíîé ìèíè-ïðîôèëü äëÿ uCoz - Ñâåòëûé âèä */ 
.uwaid_panel { position: fixed; right:10px; bottom:10px; display:none; list-style: none; margin: 0; padding: 0; z-index:9999999999999;}  
  .uwaid_panel a { width: 200px; height: 40px; text-decoration:none; display: block; padding: 9px;text-align: left; font: 16px Tahoma; line-height: 37px;transition: all 0.3s 0.09s ease;-moz-transition: all 0.3s 0.09s ease;-webkit-transition: all 0.3s 0.09s ease;-o-transition: background 0.3s 0.09s ease; }  
  .uwaid_panel a:hover {text-decoration:none;}  
  .uwaid_panel a img, .uwaid_icon { height: 40px; width: 40px; float: left; margin-right: 9px; }  
  .uwaid_panel a span {border-radius: 46px;float: right;padding: 0 15px;font-size: 13px;}  
  .uwaid_icon {background:url('/img/icons.png');}  
  .settings {background-position-y: -40px;}  
  .exit {background-position-y: -80px;}  
  .my_profile {padding: 0 23px;z-index:9999999999999; text-align:center; font:16px Tahoma; line-height:37px;transition: all 0.3s 0.09s ease;-moz-transition: all 0.3s 0.09s ease;-webkit-transition: all 0.3s 0.09s ease;-o-transition: background 0.3s 0.09s ease; position:fixed; right:10px; bottom:10px;}  
  .my_profile:hover {cursor:pointer;}  
  .close_p {position: absolute;margin-left: 216px;border-radius: 17px;padding: 4px 8px;margin-top: -14px;}  
  .close_p:hover {cursor:pointer;}  
  /* Öâåòîâûå ñòèëè */  
  .uwaid_panel {border: 7px solid #C4C6C7;border-bottom: 6px solid #C4C6C7;border-left:none;}  
  .uwaid_panel a {background: #E4E4E4;border-left: 7px solid #C4C6C7;color:#555353;text-shadow: 0 1px 0 #fff;}  
  .uwaid_panel a:hover {background: #A2A2A2;border-left: 7px solid #FFA500;text-shadow:0 1px 0 #BDBDBD;}  
  .uwaid_panel a span {background: #FFA500;}  
  .my_profile {background:#E4E4E4;border: 7px solid #C4C6C7;color:#555353;}  
  .my_profile:hover {background:#DAD7D7; border: 7px solid #807C7C;}  
  .close_p {background: #FFA500;color: #fff;}  
  .close_p:hover {background: #A2A2A2;} 
/* ------------------------- */

Тёмный
Прописать в CSS
Code
/* Êðàñèâûé âûäâèæíîé ìèíè-ïðîôèëü äëÿ uCoz - Òåìíûé âèä */ 
.uwaid_panel {position: fixed; right:10px; bottom:10px; display:none; list-style: none; margin: 0; padding: 0; z-index:9999999999999;}  
  .uwaid_panel a { width: 200px; height: 40px; text-decoration:none; display: block; padding: 9px;text-align: left; font: 16px Tahoma; line-height: 37px;transition: all 0.3s 0.09s ease;-moz-transition: all 0.3s 0.09s ease;-webkit-transition: all 0.3s 0.09s ease;-o-transition: background 0.3s 0.09s ease; }  
  .uwaid_panel a:hover { text-decoration:none;}  
  .uwaid_panel a img, .uwaid_icon { height: 40px; width: 40px; float: left; margin-right: 9px; }  
  .uwaid_panel a span {border-radius: 46px;float: right;padding: 0 15px;font-size: 13px;}  
  .uwaid_icon {background:url('/img/icons.png');}  
  .settings {background-position-y: -40px;}  
  .exit {background-position-y: -80px;}  
  .my_profile {padding: 0 23px;z-index:9999999999999; text-align:center; font:16px Tahoma; line-height:37px;transition: all 0.3s 0.09s ease;-moz-transition: all 0.3s 0.09s ease;-webkit-transition: all 0.3s 0.09s ease;-o-transition: background 0.3s 0.09s ease; position:fixed; right:10px; bottom:10px;}  
  .my_profile:hover {cursor:pointer;}  
  .close_p {position: absolute;margin-left: 216px;border-radius: 17px;padding: 4px 8px;margin-top: -14px;}  
  .close_p:hover {cursor:pointer;}  
  /* Öâåòîâûå ñòèëè */  
  .uwaid_panel {border:7px solid #33373b;border-bottom:6px solid #33373b;border-left:none; }  
  .uwaid_panel a {background: #272a2d; border-left:7px solid #33373b;color: #fff;}  
  .uwaid_panel a:hover {background:#232629;border-left:7px solid #FFA500;}  
  .uwaid_panel a span {background: #FFA500;}  
  .my_profile {border:7px solid #33373b;background: #272a2d;color:#fff;}  
  .my_profile:hover {background:#454B50;}  
  .close_p {background: #FFA500;color: #fff;}  
  .close_p:hover {background:#F87676;} 
/* ------------------------- */

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

Важно!

При копировании материала указывать ссылку на источник.

- 437
- 05-Ноября-2016
- 0
- 0
Материал разместил:

Похожий материал
Похожего материала не найдено...
Статьи сайта