Форум о социальных сетях Поиск по форуму Инвестиции SMM обучение SMM курсы
Форум о социальных сетях Поиск по форуму Инвестиции SMM обучение SMM курсы
  • Страница 1 из 1
  • 1
Универсальный мини-профиль
#1
Вторник, 17.01.2012, 05:32
uch0601
Проверенный
Сообщения: 168
Репутация: 129
Сделал я небольшой скриптик мини-профиля для системы uCoz.

Особенности скрипта:
— Всегда находится в правом нижнем углу браузера.
— Работает как для зарегистрированных, так и для не зарегистрированных пользователей.
— Занимает мало-места.
— Умеет уведомлять о личных сообщениях.




Как устанавливать?
1. Заходим в шаблон «Форма входа пользователей» и всё что там есть заменяем на:
Code
<div class="userprofileContentFr">
<label for="authLogin"><?if($UID_ICON$)?>Электронная почта<?else?>Логин<?endif?>:</label><br />
<input type="text" id="authLogin" name="user" />
</div>
<div class="userprofileContentFr">
<label for="authPassword">Пароль:</label><br />
<input type="password" id="authPassword" name="password" />
</div>
<div class="userprofileContentFrChecks">
<div class="userprofileContentFrCheck">
<a href="$REMINDER_LINK$">Вспомнить пароль</a>
</div>
<div class="userprofileContentFrCheck">
<input type="checkbox" id="rem$PAGE_ID$" name="rem" /> <label for="rem$PAGE_ID$">Запомнить меня</label>
</div>
<?if($HIDDEN_ALLOWED$)?>
<div class="userprofileContentFrCheck">
<input type="checkbox" id="hid$PAGE_ID$" name="hidden" /> <label for="hid$PAGE_ID$">Режим невидимости</label>
</div>
<?endif?>
</div>
<div class="userprofileContenButton">
<input type="submit" value="Войти в аккаунт" name="sbm" /> $ERROR$
</div>


2. Создаём глобальный блок с имененм «USERPR» и вставляем туда:
Code
<?if($USER_LOGGED_IN$)?>
<div class="userprofile" id="userprofile">
      <a href="javascript://" onclick="$('#userprofileContent').show('');$('#userprofile').hide('');">Мини-профиль</a> <?if($UNREAD_PM$>"0")?><span class="userprofileContentNewPM" id="newpmsm">— 15</span>
      <script type="text/javascript">function flashit(id,cl){var c=document.getElementById(id);if (c.style.color=='red'){c.style.color=cl;}else {c.style.color='red';}}setInterval("flashit('newpmsm','')",500)</script><?endif?>
     </div>
        
     <div class="userprofileContent" id="userprofileContent">
         
         
      <div class="userprofileContentOverflow">
       <?if($USER_AVATAR_URL$)?>
       <div class="userprofileContentAvatar"><img src="$USER_AVATAR_URL$" alt="$USERNAME$" /></div>
       <?endif?>
       <div class="userprofileContentInfo">
        <strong><a href="/index/8" onclick="window.open('/index/8','upp','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;">$USERNAME$</a></strong><br />
        Группа: «$USER_GROUP$»
       </div>
      </div>
      <div class="userprofileContentActions">
       <ul>
        <li><a href="/index/8" onclick="window.open('/index/8','upp','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;">Полный профиль</a></li>
        <li><a href="/index/14" onclick="window.open('/index/14','pmw','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;">Личные ссобщения</a><?if($UNREAD_PM$>"0")?> <span class="userprofileContentNewPM" id="newpm">— 15</span></li>
        <script type="text/javascript">function flashit(id,cl){var c=document.getElementById(id);if (c.style.color=='red'){c.style.color=cl;}else {c.style.color='red';}}setInterval("flashit('newpm','')",500)</script>
        <?endif?>
        <li><a href="/index/11" onclick="window.open('/index/11','pedit','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;">Редактировать профиль</a></li>
        <li><a href="$LOGOUT_LINK$">Выйти из аккаунта</a></li>
       </ul>
      </div>
      <div class="userprofileContentClose"><a href="javascript://" onclick="$('#userprofileContent').hide('');$('#userprofile').show('');">Закрыть мини-профиль</a></div>
</div>
<?else?>
    <div class="userprofile" id="userprofile">
     <a href="javascript://" onclick="$('#userprofileContent').show('');$('#userprofile').hide('');">Войти в аккаунт</a> |
     <a href="$REGISTER_LINK$" class="userprofileLink">Регистрация</a>
    </div>
    <div class="userprofileContent" id="userprofileContent">

     <div class="userprofileContentForm">
      <div class="userprofileContentTitle">Авторизация</div>
      $LOGIN_FORM$    
     </div>
     <div class="userprofileContentClose">
      <a href="javascript://" onclick="$('#userprofileContent').hide('');$('#userprofile').show('');">Я передумал</a> |
      <a href="$REGISTER_LINK$" class="userprofileContentCloseLink">Регистрация</a>
     </div>
    </div>
<?endif?>


3. На всех страницах где нужен мини-профиль перед </body> добавляем $GLOBAL_USERPR$.
4. Открываем шаблон «Таблица стилей (CSS)» и в самый конец вставляем:
Code
.userprofile {
    position: fixed;
    font: 12px 'Tahoma',sans;
    bottom: 0;
    right: 0;
    z-index: 100;
    padding: 6px 10px 8px;
    border-top: 1px solid #d4d5af;
    border-left: 1px solid #d4d5af;
    background: #feffe0;
    border-radius: 5px 0 0 0;
     -moz-border-radius: 5px 0 0 0;
     -khtml-border-radius: 5px 0 0 0;
     -webkit-border-radius: 5px 0 0 0;
}
.userprofile a {
    color: #3966ce;
    text-decoration: none;
    border-bottom: 1px dashed #3966ce;
}
.userprofile a:hover {
    color: red;
    border-bottom: 1px dashed red;
    text-decoration: none;
}
a.userprofileLink {
    color: #3966ce;
    text-decoration: none;
    border-bottom: 1px solid #3966ce;
}
a.userprofileLink:hover {
    color: red;
    text-decoration: none;
    border-bottom: 1px solid red;
}
.userprofileContent {
    display: none;
    font: 12px/16px 'Tahoma',sans;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
    width: 250px;
    overflow: hidden;
    border-top: 1px solid #d4d5af;
    border-left: 1px solid #d4d5af;
    background: #feffe0;
    border-radius: 5px 0 0 0;
     -moz-border-radius: 5px 0 0 0;
     -khtml-border-radius: 5px 0 0 0;
     -webkit-border-radius: 5px 0 0 0;
}
.userprofileContent a {
    color: #3966ce;
    text-decoration: underline;
}
.userprofileContent a:hover {
    color: red;
    text-decoration: underline;
}
.userprofileContentOverflow {
    overflow: hidden;
    background: #f8f9d4;
    padding: 10px;
}
.userprofileContentAvatar {
    float: left;
    margin: 0 5px 0 0;
}
.userprofileContentAvatar img {
    max-width: 35px;
    max-height: 35px;
}
.userprofileContentInfo {
    margin: 0 0 5px;
}
.userprofileContentNewPM {
    font-size: 11px;
}
.userprofileContentActions {
    border-top: 1px solid #d4d5af;
    padding: 10px;
}
.userprofileContentActions ul {
    margin: 0;
    padding: 0;
}
.userprofileContentActions ul li {
    margin: 0 0 3px;
    padding: 0;
    list-style: inside square;
}
.userprofileContentClose {
    border-top: 1px solid #d4d5af;
    padding: 10px 10px 12px;
    background: #f8f9d4;
}
.userprofileContentClose a {
    color: #960000;
    text-decoration: none;
    border-bottom: 1px dashed #960000;
}
.userprofileContentClose a:hover {
    color: red;
    text-decoration: none;
    border-bottom: 1px dashed red;
}
.userprofileContentClose a.userprofileContentCloseLink {
    color: #3966ce;
    text-decoration: none;
    border-bottom: 1px solid #3966ce;
}
.userprofileContentClose a.userprofileContentCloseLink:hover {
    color: red;
    text-decoration: none;
    border-bottom: 1px solid red;
}
.userprofileContentForm {
    padding: 10px;
}
.userprofileContentTitle {
    font: 22px 'Georgia',serif;
    color: #6e6f57;
}
.userprofileContentFr {
    padding: 0 0 5px;
    line-height: 11px;
}
.userprofileContentFr label {
    font: 10px 'Tahoma',sans;
    color: #222;
}
.userprofileContentFr input {
    width: 218px;
    padding: 5px;
    font: 12px 'Tahoma',sans;
    border: 1px solid #d4d5af;
    outline: none;
}
.userprofileContentFr input:focus {
    border: 1px solid #aeaf8f;
}
.userprofileContentFrChecks {
    position: relative;
    left: -3px;
    margin: 0 0 5px;
}
.userprofileContentFrCheck label {
    font: 11px/12px 'Tahoma',sans;
    position: relative;
    top: -2px;
    left: -2px;
}
.userprofileContentFrCheck a {
    font: 11px/11px 'Tahoma',sans;
    position: relative;
    top: 4px;
    left: 3px;
    float: right;
}
.userprofileContenButton input {
    padding: 3px 15px;
    position: relative;
    left: -3px;
}


Всё работает!




UPD: Не забывайте, что стили мини-профиля (фон, рамки, текст) можно изменять, любому верстальщику под силу такая задача. Я создал просто в том стиле, который мне нравится. Важен функционал.
Пост отредактировал uch0601 - Вторник, 17.01.2012, 05:35
#2
Пятница, 27.01.2012, 16:08
Triple
Пользователь
Сообщения: 3
Репутация: 20
Спасибо забрал)
#3
Четверг, 08.03.2012, 09:46
Daves
Пользователь
Сообщения: 59
Репутация: -18
Неплохо, аможете подсказать скрипт, чтобы чат так открывался?
http://www.seosprint.net/?ref=968055 - максимальная раскрутка сайтов!
#4
Четверг, 08.03.2012, 15:46
sd68
Проверенный
Сообщения: 288
Репутация: 94
неочень, как то просто
#5
Суббота, 10.03.2012, 12:56
Ursa
Проверенный
Сообщения: 219
Репутация: 266
А что делать если я его поставил, и после весь диз моего сайта искривился.?
1) Сп*рт - мой наркотик!
2) Не советую играть на igrun.com! Лично для меня он ЛОХОТРОН!
#6
Воскресенье, 11.03.2012, 10:28
Michael_J
Пользователь
Сообщения: 7
Репутация: 9
Ursa, Накосячили с div'ами...
А так выглядит очень даже неплохо, спасибо!
#7
Воскресенье, 11.03.2012, 11:04
Donate
Пользователь
Сообщения: 63
Репутация: 10
Непонравилось :С
#8
Воскресенье, 11.03.2012, 17:47
VASJENKATRO
Пользователь
Сообщения: 86
Репутация: 31
Ursa - там просто косяки с div`aми.
нужно, испровлять - только так будет ровно на сайте стоять.
#9
Суббота, 24.03.2012, 23:43
Tess
Проверенный
Сообщения: 250
Репутация: 101
Неплохой скрипт) спс)
  • Страница 1 из 1
  • 1
Поиск:
Форум
Социальные сети
Хостинг от uCoz