Мини профиль на jQuery для uCoz от uGarts
827материалов
228тем на форуме
3004комментария
6159пользователей

Мини профиль на jQuery для uCoz от uGarts

Красивенький мини профиль в четырех цветовых стилях на jQuery с использованием Font awesome очень просто устанавливается, имеет ссылки на все важные страницы для пользователя. В закрытом состоянии в виде кнопки в нижнем левом уголку с плавным hover эффектом

а так же изменены кнопки формы для входа пользователей

1) Установка JS и Font Awesome между тегами <head>...</head> на каждой странице вставить код:
Код
<script type="text/javascript">$( document ).ready(function() {$(".profile-button").click(function(){ $( "body" ).toggleClass( "profile-show" );});});</script>     
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
если же у вас уже есть Font Awesome или же другой шрифт с иконками, которые имеют наши шаблоны для uCoz или другие, можете удалить вторую строчку кода, и заменить иконки в HTML коде на свои.

2) Установка CSS
Для серого используем стили:
Код
.profile-button {     
     position: fixed;     
     bottom: 0;     
     left: 0;     
     z-index: 1000;     
     margin: 1em;     
     padding:0.8em;     
     color: #7d8194;     
     text-align: center;     
     vertical-align: middle;     
     line-height: 2em;     
     font-size: 1.5em;     
     border: solid 2px #7d8194;     
     border-radius: 4px;     
     background: transparent;     
     -webkit-transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;     
     transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;     
}     
.profile-button span {     
     display: none;     
}     

.profile-button:hover {     
     background-color: #7d8194;     
     color: #fff;     
}     
.profile-wrap {     
     position: fixed;     
     z-index: 999;     
     background: #ebedf4;     
     -webkit-transition: width 0.3s, height 0.3s;     
     transition: width 0.3s, height 0.3s;     
     width: 0;     
     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.298), 0px 0px 40px rgba(0, 0, 0, 0.102) inset;     
     height: 0;     
     font-size: 1.5em;     
     bottom: 1em;     
     left: 1em;     
     -webkit-transform-origin: 0% 100%;     
     transform-origin: 0% 100%;     
}     

@media screen and (max-width: 50em) {     
     .profile-button {     
     margin: 0.25em;     
     }     
     .profile-wrap {     
     bottom: 0.25em;     
     left: 0.25em;     
     }     
}     

.profile-content {     
     height: 100%;     
     opacity: 0;     
     color: #64697d;     
     text-align: right;     
}     

.profile {     
     display: inline-block;     
     line-height: 42px;     
     font-weight: 700;     
     padding: 1em;     
}     

.profile img {     
     float: right;     
     border-radius: 50%;     
     margin-left: 10px;     
     width: 42px;     
}     

.link-list {     
     padding: 1em 0;     
     margin: 0 0.5em;     
     border-bottom: 2px solid rgba(125,129,148,0.2);     
     border-top: 2px solid rgba(125,129,148,0.2);     
     text-align: left;     
}     

.link-list a {     
     display: block;     
     color: #7d8194;     
     text-decoration: none;     
     padding: 0.5em 1em;     
}     

.link-list a:hover,     
.link-list a:focus {     
     color: #64697d;     
}     

.link-list a span {     
     margin-left: -1px;     
     vertical-align: middle;     
}     
.icon-list {     
     position: absolute;     
     right: 1em;     
     bottom: 0.2em;     
}     

.icon-list a {     
     font-size: 1.5em;     
     margin-left: 0.25em;     
     color: rgba(125,129,148,0.5);     
}     
.icon-list a:hover {     
     color: rgba(125,129,148,0.7);     
}     
.profile-show .profile-wrap {     
     max-width: 17em;     
     width: auto;     
     height: auto;     
     padding-bottom: 40px;     
     -webkit-animation: anim-jelly 0.8s linear forwards;     
     animation: anim-jelly 0.8s linear forwards;     
     border-radius: 4px;     
}     

.profile-show .profile-content {     
     opacity: 1;     
     -webkit-transition: opacity 0.3s 0.3s;     
     transition: opacity 0.3s 0.3s;     
}     
.profile-show .profile-button {     
     background-color: rgba(204, 204, 204, 0);     
     color: #B4B7C4;     
     border: 2px solid rgba(204, 204, 204, 0);     
}     
.profile-content #uidLogForm {padding: 10px;}     
.profile-content #uidLogForm a.login-with i {     
     width: 25em !important;     
     height: 4em !important;     
     background-size: 100% 90% !important;     
     border-radius: 4px !important;     
}

Для синего мини профиля:
Код
.profile-button {     
     position: fixed;     
     bottom: 0;     
     left: 0;     
     z-index: 1000;     
     margin: 1em;     
     padding: 0.8em;     
     color: #7A9BAE;     
     text-align: center;     
     vertical-align: middle !important;     
     line-height: 1em;     
     font-size: 1.5em;     
     border: solid 2px #7A9BAE;     
     border-radius: 4px;     
     background: transparent;     
     -webkit-transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;     
     transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;     
}     
.profile-button span {     
     display: none;     
}     

.profile-button:hover {     
     background-color: #7A9BAE;     
     color: #fff;     
}     
.profile-wrap {     
     position: fixed;     
     z-index: 999;     
     background: #7A9BAE;     
     -webkit-transition: width 0.3s, height 0.3s;     
     transition: width 0.3s, height 0.3s;     
     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.298), 0px 0px 40px rgba(0, 0, 0, 0.102) inset;     
     width: 0;     
     height: 0;     
     font-size: 1.5em;     
     bottom: 1em;     
     left: 1em;     
     -webkit-transform-origin: 0% 100%;     
     transform-origin: 0% 100%;     
}     

@media screen and (max-width: 50em) {     
     .profile-button {     
     margin: 0.25em;     
     }     
     .profile-wrap {     
     bottom: 0.25em;     
     left: 0.25em;     
     }     
}     

.profile-content {     
     height: 100%;     
     opacity: 0;     
     color: #ADCEE2;     
     text-align: right;     
}     

.profile {     
     display: inline-block;     
     line-height: 42px;     
     font-weight: 700;     
     padding: 1em;     
}     

.profile img {     
     float: right;     
     border-radius: 50%;     
     margin-left: 10px;     
     width: 42px;     
}     

.link-list {     
     padding: 1em 0;     
     margin: 0 0.5em;     
     border-bottom: 2px solid rgba(125,129,148,0.2);     
     border-top: 2px solid rgba(125,129,148,0.2);     
     text-align: left;     
}     

.link-list a {     
     display: block;     
     color: #ADCEE2;     
     text-decoration: none;     
     padding: 0.5em 1em;     
}     

.link-list a:hover,     
.link-list a:focus {     
     color: #D5EEFF;     
}     

.link-list a span {     
     margin-left: -1px;     
     font-weight: 400;     
     vertical-align: middle;     
}     
.icon-list {     
     position: absolute;     
     right: 1em;     
     bottom: 0.2em;     
}     

.icon-list a:hover {     
     opacity: 1;     
}     
.icon-list a {     
     font-size: 1.5em;     
     margin-left: 0.25em;     
     color: #ACC9DB;     
     opacity: 0.8;     
}     
.profile-show .profile-wrap {     
     max-width: 17em;     
     width: auto;     
     height: auto;     
     padding-bottom: 40px;     
     -webkit-animation: anim-jelly 0.8s linear forwards;     
     animation: anim-jelly 0.8s linear forwards;     
     border-radius: 4px;     
}     

.profile-show .profile-content {     
     opacity: 1;     
     -webkit-transition: opacity 0.3s 0.3s;     
     transition: opacity 0.3s 0.3s;     
}     
.profile-show .profile-button {     
     background-color: rgba(204, 204, 204, 0);     
     color: #ACC9DB;     
     border: 2px solid rgba(204, 204, 204, 0);     
}     
.profile-content #uidLogForm {padding: 10px;}     
.profile-content #uidLogForm a.login-with i {     
     width: 25em !important;     
     height: 4em !important;     
     background-size: 100% 90% !important;     
     border-radius: 4px !important;     
}

Для красного код CSS:
Код
.profile-button {     
     position: fixed;     
     bottom: 0;     
     left: 0;     
     z-index: 1000;     
     margin: 1em;     
     padding: 0.8em;     
     color: #FF7272;     
     text-align: center;     
     vertical-align: middle;     
     line-height: 2em;     
     font-size: 1.5em;     
     border: solid 2px #FF7272;     
     border-radius: 4px;     
     background: transparent;     
     -webkit-transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;     
     transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;     
}     
.profile-button span {     
     display: none;     
}     

.profile-button:hover {     
     background-color: #FF7272;     
     color: #fff;     
}     
.profile-wrap {     
     position: fixed;     
     z-index: 999;     
     background: #FF6E6E;     
     -webkit-transition: width 0.3s, height 0.3s;     
     transition: width 0.3s, height 0.3s;     
     width: 0;     
     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.298), 0px 0px 40px rgba(0, 0, 0, 0.102) inset;     
     height: 0;     
     font-size: 1.5em;     
     bottom: 1em;     
     left: 1em;     
     -webkit-transform-origin: 0% 100%;     
     transform-origin: 0% 100%;     
}     

@media screen and (max-width: 50em) {     
     .profile-button {     
     margin: 0.25em;     
     }     
     .profile-wrap {     
     bottom: 0.25em;     
     left: 0.25em;     
     }     
}     

.profile-content {     
     height: 100%;     
     opacity: 0;     
     color: #ffe0e0;     
     text-align: left;     
}     

.profile {     
     display: inline-block;     
     line-height: 42px;     
     padding: 1em;     
}     

.profile img {     
     float: left;     
     border-radius: 50%;     
     margin-right: 10px;     
     width: 42px;     
}     

.link-list {     
     padding: 1em 0;     
     margin: 0 0.5em;     
     border-bottom: 2px solid rgba(125,129,148,0.2);     
     border-top: 2px solid rgba(125,129,148,0.2);     
     text-align: left;     
}     

.link-list a {     
     display: block;     
     color: #ffe0e0;     
     text-decoration: none;     
     padding: 0.5em 1em;     
}     

.link-list a:hover,     
.link-list a:focus {     
     color: #FFB3B3;     
}     

.link-list a span {     
     margin-left: -1px;     
     font-weight: 400;     
     vertical-align: middle;     
}     
.icon-list {     
     position: absolute;     
     right: 1em;     
     bottom: 0.2em;     
}     

.icon-list a {     
     font-size: 1.5em;     
     margin-left: 0.25em;     
     color: #ffe0e0;     
}     
.icon-list a:hover {color: #FFB3B3;}     

.profile-show .profile-wrap {     
     max-width: 17em;     
     width: auto;     
     height: auto;     
     padding-bottom: 40px;     
     -webkit-animation: anim-jelly 0.8s linear forwards;     
     animation: anim-jelly 0.8s linear forwards;     
     border-radius: 4px;     
}     

.profile-show .profile-content {     
     opacity: 1;     
     -webkit-transition: opacity 0.3s 0.3s;     
     transition: opacity 0.3s 0.3s;     
}     
.profile-show .profile-button {     
     background-color: rgba(204, 204, 204, 0);     
     color: #FFB3B3;     
     border: 2px solid rgba(204, 204, 204, 0);     
}     
.profile-content #uidLogForm {padding: 10px;}     
.profile-content #uidLogForm a.login-with i {     
     width: 25em !important;     
     height: 4em !important;     
     background-size: 100% 90% !important;     
     border-radius: 4px !important;     
}

А для зеленого:
Код
.profile-button {     
     position: fixed;     
     bottom: 0;     
     left: 0;     
     z-index: 1000;     
     margin: 1em;     
     padding: 0.8em;     
     color: #1ECD97;     
     text-align: center;     
     vertical-align: middle;     
     line-height: 2em;     
     font-size: 1.5em;     
     border: solid 2px #1ECD97;     
     border-radius: 4px;     
     background: transparent;     
     -webkit-transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;     
     transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;     
}     
.profile-button span {     
     display: none;     
}     

.profile-button:hover {     
     background-color: #1ECD97;     
     color: #fff;     
}     
.profile-wrap {     
     position: fixed;     
     z-index: 999;     
     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.298), 0px 0px 40px rgba(0, 0, 0, 0.102) inset;     
     background: #43E1B0;     
     -webkit-transition: width 0.3s, height 0.3s;     
     transition: width 0.3s, height 0.3s;     
     width: 0;     
     height: 0;     
     font-size: 1.5em;     
     bottom: 1em;     
     left: 1em;     
     -webkit-transform-origin: 0% 100%;     
     transform-origin: 0% 100%;     
}     

@media screen and (max-width: 50em) {     
     .profile-button {     
     margin: 0.25em;     
     }     
     .profile-wrap {     
     bottom: 0.25em;     
     left: 0.25em;     
     }     
}     

.profile-content {     
     height: 100%;     
     opacity: 0;     
     color: #E5FFF7;     
     text-align: left;     
}     

.profile {     
     display: inline-block;     
     line-height: 42px;     
     padding: 1em;     
}     

.profile img {     
     float: left;     
     border-radius: 50%;     
     margin-right: 10px;     
     width: 42px;     
}     

.link-list {     
     padding: 1em 0;     
     margin: 0 0.5em;     
     border-bottom: 2px solid rgba(125,129,148,0.2);     
     border-top: 2px solid rgba(125,129,148,0.2);     
     text-align: left;     
}     

.link-list a {     
     display: block;     
     color: #E5FFF7;     
     text-decoration: none;     
     padding: 0.5em 1em;     
}     

.link-list a:hover,     
.link-list a:focus {     
     color: #fff;     
}     

.link-list a span {     
     margin-left: -1px;     
     font-weight: 400;     
     vertical-align: middle;     
}     
.icon-list {     
     position: absolute;     
     right: 1em;     
     bottom: 0.2em;     
}     

.icon-list a {     
     font-size: 1.5em;     
     margin-left: 0.25em;     
     color: #A7FFE4;     
}     

.profile-show .profile-wrap {     
     max-width: 17em;     
     width: auto;     
     height: auto;     
     padding-bottom: 40px;     
     -webkit-animation: anim-jelly 0.8s linear forwards;     
     animation: anim-jelly 0.8s linear forwards;     
     border-radius: 4px;     
}     

.profile-show .profile-content {     
     opacity: 1;     
     -webkit-transition: opacity 0.3s 0.3s;     
     transition: opacity 0.3s 0.3s;     
}     
.profile-show .profile-button {     
     background-color: rgba(204, 204, 204, 0);     
     color: #A7FFE4;     
     border: 2px solid rgba(204, 204, 204, 0);     
}     
.profile-content #uidLogForm {padding: 10px;}     
.profile-content #uidLogForm a.login-with i {     
     width: 25em !important;     
     height: 4em !important;     
     background-size: 100% 90% !important;     
     border-radius: 4px !important;     
}

3) Установка HTML кода
Код
<div class="profile-wrap">     
<div class="profile-content">     
<?if($USER_LOGGED_IN$)?><div class="profile"><img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://s5.ucoz.net/a/02/1258.jpg<?endif?>" alt="$USER_FULL_NAME$"><span>$USER_FULL_NAME$</span></div>     
<div class="link-list">     
<a href="$PERSONAL_PAGE_LINK$" rel="nofollow"><span><i class="fa fa-user"></i> Мой профиль</span></a>     
<a href="$PM_URL$" rel="nofollow"><span><i class="fa fa-envelope"></i> У вас $UNREAD_PM$ сообщен<?if($UNREAD_PM$%10=0||$UNREAD_PM$%10>4||$UNREAD_PM$%100>10&&$UNREAD_PM$%100<15)?>ий<?else?><?if($UNREAD_PM$%10=1)?>е<?else?>я<?endif?><?endif?></span></a>     
<a href="javascript://" rel="nofollow" onclick="window.open('/index/11','upp','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;"><span><i class="fa fa-cogs"></i> Редактировать профиль</span></a>     
<a href="/index/34-$USER_ID$" rel="nofollow"><span><i class="fa fa-comment"></i> Мои комментарии</span></a>     
</div>     
<div class="icon-list">     
<a href="javascript://" rel="nofollow" onclick="window.open('/index/86','upp','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;"><i class="fa fa-comments-o"></i></a>     
<a href="javascript://" rel="nofollow" onclick="window.open('/index/15-1','upp','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;"><i class="fa fa-users"></i></a>     
<a href="$LOGOUT_LINK$"><i class="fa fa-fw fa-power-off"></i></a>     
</div>     
<?else?>$LOG_FORM$<?endif?>     
     </div>     
     </div>     
<a class="profile-button"><i class="fa fa-user"></i><span>Открыть профиль</span></a>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 31.05.2015 в 23:20
Материал просмотрен: 1030 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 3 комментария

Пожаловаться
Сказать спасибо
Источник

3 комментария


trem200
Александр @trem200 23.06.2015 13:141
0
А для тёмного дизайна можно?
Romchik
Роман @Romchik 24.06.2015 00:042
0
Да, но это за определенную плату!
PuchOK
PuchOK @PuchOK 05.07.2015 22:593
0
наверно color можно изменить? тогда всё получиться? sad
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта