Форум

[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 1
1

Форум » Вебмастеру » Скрипты » Подборка мини-профилей #1

Подборка мини-профилей #1

MelisaOffline

Группа: Главный Админ
Сообщений - 99
Нарушений -
Репутация - 806

Написал - 17.06.2016 в 17:33 - 1

Установка: Код ниже вставляем в блок в 1 или 2 контейнере

Код

CSS:

Код

.loginField {background:#f1f1f1;border:1px solid #cbcbcb;color:#8B8881;height:20px;}
.loginButton {background:#f1f1f1;border:1px solid #cbcbcb;color:#8B8881;width:97%;height:25%;float:left;}
#about_pr {background:#f1f1f1;border:1px solid #cbcbcb;height:80px;}
.buttonprofile {background:#f1f1f1;border:1px solid #cbcbcb;line-height:25px;width:100%;color:8B8881;text-align:center;margin-bottom:3px;

в Управление дизайном > Форма входа пользователей и там удалить все и вставить это:

Код

<?if($PAGE_ID$="login")?><div style="width:180px;"><?endif?>
<table border="0" cellspacing="1" cellpadding="0" width="100%">
<?if($ERROR$)?><td colspan="2" style="color:red;text-align:center;">$ERROR$</td><?endif?>
<tr><td><input class="loginField" type="text" name="user" onfocus="if(this.value=='E-Mail (uNet)')this.value=''" onblur="if(this.value=='')this.value='E-Mail (uNet)'" value="E-Mail (uNet)" size="20" style="width:96%;" maxlength="50"/></td></tr>
<tr><td><input class="loginField" type="password" name="password" size="20" style="width:96%" onfocus="if(this.value=='Пароль')this.value=''" onblur="if(this.value=='')this.value='Пароль'" value="Пароль" maxlength="15"/></td></tr>
</table>
<table border="0" cellspacing="1" cellpadding="0" width="100%">
<tr><td nowrap> <?if($PAGE_ID$="login" && $HIDDEN_ALLOWED$)?>
<input id="hid$PAGE_ID$" type="checkbox" name="hidden" value="1" /><label for="hid$PAGE_ID$">скрытый</label><?endif?></td><td align="right" valign="top"><input class="loginButton" name="sbm" type="submit" value="Вход"/></td></tr>
<tr><td width="40%"><input id="rem$PAGE_ID$" type="checkbox" name="rem" value="1" checked="checked"/><label for="rem$PAGE_ID$">запомнить</label></td><td colspan="2" width="60%"><div style="font-size:7pt;text-align:center;"><a href="$REMINDER_LINK$">Забыл пароль</a> | <a href="$REGISTER_LINK$">Регистрация</a></div></td></tr>
</table>
<?if($PAGE_ID$="login")?></div><?endif?>

Ну и самое последнее это установка мини профиля в блок, для этого нужно создать новый блок и поставить в него этот код:

Код

<?if($USER_LOGGED_IN$)?>
<table width="100%">
<tbody>
<tr>
<td width="35%"><div class="avaa"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$" width="80" height="80"><?else?><img src="http://ujava.3dn.ru/img/noava.png" width="80" height="80"><?endif?></td>
<td width="65%"><div id="about_pr">
  Ник: <b>$USERNAME$</b>

  ID: <b>$USER_ID$</b>

  IP: <b>$IP_ADDRESS$</b>

  Пол: <b>$USER_GENDER$</b>

  Вы с нами: <b>$USER_REG_DAYS$ д<?if($USER_REG_DAYS$%10=0||$USER_REG_DAYS$%10>4||$USER_REG_DAYS$%100>10&&$USER_REG_DAYS$%100<15)?>ней<?else?><?if($USER_REG_DAYS$%10=1)?>ень<?else?>ня<?endif?><?endif?></b>
</div></td>
</tr>
</tbody>
</table>
<table width="100%">
<tbody>
<tr>
<td width="100%">
<input class="buttonprofile" type="button" onclick="document.location.href='/index/8'; return false;" value="Профиль"/>

<input class="buttonprofile" type="button" onclick="document.location.href='$PM_URL$'; return false;" value="Читать ЛС (<?if($IS_NEW_PM$)?>$IS_NEW_PM$<?else?>0<?endif?>)"/>

<input class="buttonprofile" type="button" onclick="document.location.href='$LOGOUT_LINK$'; return false;" value="Выход"/>
</td>
</tr>
</tbody>
</table>
<?else?>
$LOGIN_FORM$
<?endif?>

В CSS (Цветовая гамма) :

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

Код

  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;
}

Красный

Код

.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;
}

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>

В верхнюю часть сайта:

Код

CSS

Код

.prof { background: white; width: 216px; height: 76px; margin: 0 auto; }
.prof-avatar { background: #bebebe; float: left; width: 74px; height: 74px; padding: 0; margin: 0; border-radius: 3px;}
.prof-avatar img { padding: 6px;}
.prof-menu { float: left; margin-left: 3px; background: #89adbd; width: 140; height: 74px; color: white; border-radius: 3px;}
.prof-spisok { width: 106px; height: 14px; background: url(http://unetpvpers.ru/my_files/prof-bg-spisok.png) no-repeat 0 0; font-family: Tahoma, Arial; font-size: 12px; line-height: 12px; padding: 0 0 1px 15px; margin: 6px; display: block; border-radius: 3px;}
.prof-spisok a { color: white; text-decoration: none; display: block;}
.prof-spisok:hover { background: url(http://theucoz.ru/filesunic/hover.png) no-repeat 0 0; color: white;}
.prof-spisok:hover a {color: white;}

В блок

Код

<div class="prof">
<div class="prof-avatar"><img src="$USER_AVATAR_URL$" width="62" height="62" border="0" alt="$USERNAME$">

<img src="http://theucoz.ru/filesunic/noavatar.png" width="62" height="62" border="0" alt="$USERNAME$">

</div>
<div class="prof-menu">
<div class="prof-spisok"><a href="$PERSONAL_PAGE_LINK$">Мой профиль</a></div>
<div class="prof-spisok"><a href="$PM_URL$">Сообщения (<b>$UNREAD_PM$</b>)</a></div>
<div class="prof-spisok"><a href="$LOGOUT_LINK$">Выход</a></div>
</div>
</div>

$LOG_FORM$

Скачивать на форуме могут только зарегистрированные пользователи! Войдите или зарегистрируйтесь

Форум » Вебмастеру » Скрипты » Подборка мини-профилей #1

Страница 1 из 1
1

Поиск: