Nk-CS.Ru: Все для вашего портала uCoz
Авторизация

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

Мини профиль на jQuery для uCoz Мини-профиль для uCoz, имеющий четыре цветовых стиля, выполненный на jQuery. Профиль прост в установке и имеет все необходимые страницы для пользователя сайта.

Установка
Первым делом, нужно установить код между тегами ... На каждой странице сайта или в верхнюю часть сайта установите следующий код.
Код
<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">

На втором этапе установки, следует добавить стили в ваш 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;
  }

Синий

Следующий CSS отвечает за синий цвет профиля который очень бы вписался например на сайте Урааа. Но по сколько нам такой профиль не нужен мы предоставляем его вам.
Код
.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;
  }

Красный

Думаю этот стиль будут использовать девушки у себя на сайтах женской тематики. Девушки у нас любят красный цвет потому он хорошо подойдет к их дизайнам.
Код
.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;
  }

И наконец, установим 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://s70.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>

На этом, установка мини-профиля завершена. Пишите свои отзывы об этом скрипте в комментариях.

Оригинальный источник: http://ugarts.ru/
Скачать архив

По данной ссылке, Вы можете скачать или купить архив данного материала.


0.0
0 оценок
0.0
Дизайн:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
0.0
Функционал:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
0.0
Мобильность:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
0.0
Общая оценка:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
Читайте также
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Авторизация
лучший сайт где можно скачать шаблоны для dle 11.3 бесплатно