ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Выдвижной мини-профиль на сайт uCoz

Выдвижной мини-профиль на сайт uCoz

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

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

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

Это основной код, который нужно разместить в низ сайта.

Код
<?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>  
  <div class="my_profile">Мой профиль</div>  
  <script type="text/javascript" src="/js/js_profil.js"></script>  
<?endif?>

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

Светлый оттенок:

Мини профиль выдвижной - светлый

Стили на светлый мини профиль

Темный оттенок:

Мини профиль темный на сайт

Стили на темный мини профиль

Так будет смотреться кнопка с монитора:



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

Источник: StarWebs.Ru
17 Октября 2016 Загрузок: 24 Просмотров: 2930 Комментариев: (27)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 27
Сопрано
Сопрано 17 Октября 2016 21:471
0
Сообщение, так вообще нормально, можно сейчас точно не пихать этот профиль в горизонтальное меню, а просто кнопкой выставить и все, по функциям там не чего лишнего нет, а то что нужно все установлено.
Kosten
Kosten 17 Октября 2016 22:022
0
Проверил на тестовой площадке, все работает и также все функций показывают корректно. Как говорил. кнопку вызова профиля можно поменять, и сделать что то свое, если она вам по дизайн не подходит или по каким то другим причинам.
FeStemBer
FeStemBer 17 Октября 2016 22:043
0
Так вообще можно же сделать и под другой цвет, все же в стилях выставляется, если идут 2 стиля, а там из ссылок, только на кнопки.
Kosten
Kosten 18 Октября 2016 04:0723
0
Скинул всю палитру по цвету, возможно поможет, чтоб не искать как там сменить.
Сафрон
Сафрон 17 Октября 2016 22:144
0
Не очень нравится, желтый цвет на светлом, вот на темном он будет смотреться, просто эти оттенки вмести всегда ярко выглядят.
Советник
Советник 17 Октября 2016 22:215
0
Что то новое, но если немного только сами кнопки по меньше сделать и шрифт, то нормально. Но так смотрится не чего, что то подобное уже встречал, но не на uCoz, хотя можно вообще кнопку убрать и при нажатие надпись сделать, но скнопкой как то понятнее.
Kosten
Kosten 17 Октября 2016 22:246
0
Дело в том, что сам код ставится в низ сайта, и при нажатие он появляется не по центру, а там же в углу, и не представляю если вызов поставить где то в другом месте.
Сопрано
Сопрано 17 Октября 2016 22:287
0
Да все можно, просто в низ сайта сделать надпись, или кнопку выставить, и все также будет выскакивать.
Webmaster32
Webmaster32 17 Октября 2016 22:408
+1
Код
<div id=left>
<?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?>
</div>
<style type="text/css">
#left {
border:0px solid blue;
width: 0px;
height:0px;
right:120px;
border-radius:0px;
position:fixed;
top:50%;
z-index:2000;
background: #fff;
}
</style>
</div>
Sтранник
Sтранник 17 Октября 2016 23:029
0
)
Kosten
Kosten 17 Октября 2016 23:4313
0
Webmaster32, что то не понял, это код стилями, чтоб в CSS не прописывать.
Sтранник
Sтранник 17 Октября 2016 23:1910
0
Как сделать чтобы показывал самый верх
Kosten
Kosten 17 Октября 2016 23:4111
0
Пробовал, на вверх, не чего не получилось, это больше всего файле нужно настраивать.
Sтранник
Sтранник 17 Октября 2016 23:4312
0
Да я тоже не смог даже сделать слева
Сделать слева могу после клика отрывается с слева а так с права
Webmaster32
Webmaster32 17 Октября 2016 23:4615
0
position:fixed; right:10px; bottom:10px; пробуй это менять в CSS там данный параметр встречается 2 раза, один на кнопку другой на профиль
Sтранник
Sтранник 17 Октября 2016 23:5117
0
Пробовал результат ноль )))
Kosten
Kosten 18 Октября 2016 00:0618
0
Но влево можно сделать, там просто переставить в стилях.
Kosten
Kosten 17 Октября 2016 23:4414
0
habib, даже в шапку ставил, все равно кнопка в низу, просто когда появляется мини профиль, кнопка исчезает.
Sтранник
Sтранник 17 Октября 2016 23:5116
0
Думаю мне искать другую )))
Kosten
Kosten 18 Октября 2016 00:0719
0
Но это вам виднее, какой профиль ставить.
Sтранник
Sтранник 18 Октября 2016 00:1320
0
Я хотел найти для сталкерского сайта
Kolinkor
Kolinkor 18 Октября 2016 01:3921
0
Но а что темный не подойдет, или нужен специальный дизайн для этого.
Sтранник
Sтранник 18 Октября 2016 09:4024
0
У меня там мини чат от урааа и когда я ставлю мини профиль то будет заде мини чата
XemorDio
XemorDio 18 Октября 2016 10:3727
+1
Сталкерский вид, ну почти:)

Код
<style>/* Красивый выдвижной мини-профиль для uCoz - Темный вид (stalker)*/   
.uwaid_panel {position: fixed; left: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: right; margin-left: 9px; }   
   .uwaid_panel a span {border-radius: 46px;float: left;padding: 0 15px;font-size: 13px;margin: 3px;}   
   .uwaid_icon {background:url('http://i.imgur.com/zfnDlBQ.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; left: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-radius:5px;border:1px dashed #444444;border-bottom:1px dashed #444444;border-left:none; }   
   .uwaid_panel a {background:url('http://modstalker.ru/nothost/1/FkGoKIf.jpg'); border-left:1px dashed #444444;color: #fff;}   
   .uwaid_panel a:hover {background:url('http://modstalker.ru/img/table_forum.jpg');border-left:1px dashed #444444;}   
   .uwaid_panel a span {background: #212121;}   
   .my_profile {border:1px dashed #444444;background: url('http://modstalker.ru/nothost/1/FkGoKIf.jpg');color:#fff;}   
   .my_profile:hover {background:#454B50;}   
   .close_p {background:url('http://modstalker.ru/nothost/1/FkGoKIf.jpg');color: #fff;}   
   .close_p:hover {background:url('http://modstalker.ru/img/table_forum.jpg');}   
/* ------------------------- */</style>
1 2 »
Войдите:
avatar