02:26 Воскресенье 2025
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
Время в профиле прош... (0)
КПК - персональная с... (0)
Вид цитаты и code st... (0)
СТАЛКЕРСКИЙ МИНИ-ПРО... (0)
БЛОК ИНТЕРЕСНЫХ ФАКТ... (0)
Гид по Народной Соля... (27)
Бар «От заката до ра... (18)
Гид по прохождению м... (16)
Азы модостроения (14)
Баги и ошибки на сай... (8)
XemorDio(died) (626)
Бармен (146)
ExGooD (48)
habib (37)
Rayviner (19)
maksimstebnovskij5 (02.03.2023)
slitkovets (30.10.2022)
ianoiano62 (29.01.2022)
Timkalv (20.09.2021)
Myloisonau (03.09.2021)

  • Страница 1 из 1
  • 1
Модифицированный вывод аватарки в профиле в стиле FLAT
БарменДата: Вторник, 26.01.2016, 11:48 | Сообщение # 1
Подполковник
Группа: Военные
Сообщений: 146
Награды: 1
Репутация: 2
Статус:

Привет, тебе поднадоел старый вид автарки в профили, нет никакого разнообразия? На создающем в тысячи раз сайте один и тот же вид аватрки?!
Если ты подзабыл про него дружок, то я тебя его напомню, вот он:



правда ужасный вид!? а хочешь что бы выглядело стильно, захватывающе, что бы хотелось еще и еще раз посмотреть на свою аву, вообщем хочешь себе такой вид:



Тогда братан ты попал по адресу...
Отходим от старого вида, и переходим на флат дизайн, давай узнаем плюсы этого нового вида:

1) Красивое закругленное отображение аватарки, с серой обводкой, а при наведении на аватар, обводка становится оранжевой, но это еще ни все, при наведении так же появляются 4 маленьких кружечка (при просмотре своего профиля) и один кружочек при просмотре чужого профиля.
1.1 Первый кружочек - это количество отправленных вами сообщений, но которые еще не прочитали (такого скрипта в интернете еще не было, поэтому по мимо уникального вида отображения аватарки, тут еще и уникальный скрипт).
1.2 Второй кружочек - это количество непрочитанных вами личных сообщений.
1.3 Третий кружочек - это страница с личными сообщениями.
1.4 Четвертый кружочек - это страница редактирования профиля.
2) Вывод ID пользователя.

Хороший вид в сочетании с хорошими функциями, а что еще для жизни надо?! ну хватит томиться, перейдем к установке...

Установка:

Заходим в Панель управления ---> Управление дизайном ---> Пользователи ---> Персональная страница пользователя находим там типо вот такого вот кода:
Код
<?if($_AVATAR$)?>$_AVATAR$

<?endif?>
<?if($_UID$)?><div style="padding-bottom:4px;"><img alt="" style="vertical-align:-4px;" border="0" src="http://s77.ucoz.net/img/ma/uid.gif"> <a href="$_UID_URL$" target="_blank"><b>uID профиль</b></a></div><?endif?>
<?if($_CHANGE_DETAILS_URL$)?>[ <a href="$_CHANGE_DETAILS_URL$">Изменить данные</a> ]<?endif?>
<?if($_PM_READ_URL$)?><div style="padding-top:4px;" id="userPMread">[ <a href="$_PM_READ_URL$">Читать ЛС (<b>$UNREAD_PM$</b>)</a> ]</div><?endif?>
<?if($_PM_SEND_URL$)?><div style="padding-top:4px;" id="userPMread">[ <a href="$_PM_SEND_URL$" title="Отправить личное сообщение">Отправить ЛС</a> ]</div><?endif?>

и меняем его на такой код:
Код
<div id="wPosition">
<?if($_AVATAR$)?><img src="<?substr($_AVATAR$,54,-65)?>" id="wAvatar"><?else?><img src="http://j-p-g.net/if/2016/01/26/0036363001453798420.png" id="wAvatar"><?endif?>
<?if($_PM_READ_URL$)?><a href="/index/14-0-1"><div id="wLCo" title="отправленных сообщений">0</div></a><?endif?>
<?if($_PM_READ_URL$)?><a href="$_PM_READ_URL$" title="входящих сообщений"><div id="wLCp">$UNREAD_PM$</div></a><?endif?>
<?if($_PM_READ_URL$)?><a href="$_PM_READ_URL$" title="чистать лс"><div id="wLC"><img src="http://j-p-g.net/if/2016/01/26/0116566001453798405.png"></div></a><?endif?>
<?if($_PM_SEND_URL$)?><a href="$_PM_SEND_URL$" title="отправить лс"><div id="wLC"><img src="http://j-p-g.net/if/2016/01/26/0054080001453798391.png"></div></a><?endif?>
<?if($_CHANGE_DETAILS_URL$)?><a href="$_CHANGE_DETAILS_URL$" title="редактировать профиль"><div id="wDetali"><img src="http://j-p-g.net/if/2016/01/26/0082250001453798379.png"></div></a><?endif?>
<a href="$_UID_URL$" target="_blank"><span id="wID">ID $_USER_ID$</span></a>
</div>

<style>
/*автор Вовчик с webo4ka.ru удаление данной строчки при копировании запрещено!!!*/
#wPosition {position:relative; width:120px;}
#wAvatar {border:8px solid #ecf0f1; border-radius:100%; width:120px; height:120px; cursor:pointer;}
#wAvatar:hover, #wPosition:hover .del:hover #wAvatar {border-color:#f59d00;}
#wID {background:#f59d00; border-radius:3px; display:block; min-width:50px; padding:0px 10px; color:#fff; text-align:center; font-size:12px; line-height:18px; position:absolute; top:120px; left:33px; z-index:1;}
#wLCo {background:#f59d00; background: rgba(245, 157, 0, 0.7); border-radius:100%; cursor:pointer; width:18px; height:18px; line-height:18px; color:#fff; text-align:center; position:absolute; top:-10px; right:22px; z-index:1; display:none;}
#wLCp {background:#f59d00; background: rgba(245, 157, 0, 0.7); border-radius:100%; cursor:pointer; width:18px; height:18px; line-height:18px; color:#fff; text-align:center; position:absolute; top:3px; right:-3px; z-index:1; display:none;}
#wLC {background:#f59d00; background: rgba(245, 157, 0, 0.7); border-radius:100%; cursor:pointer; width:18px; height:18px; line-height:18px; text-align:center; position:absolute; top:25px; right:-21px; z-index:1; display:none;}
#wDetali {background:#f59d00; background: rgba(245, 157, 0, 0.7); border-radius:100%; cursor:pointer; width:18px; height:18px; line-height:18px; text-align:center; position:absolute; top:52px; right:-30px; z-index:1; display:none;}
#wPosition:hover #wLC, #wPosition:hover #wDetali, #wPosition:hover #wLCo, #wPosition:hover #wLCp {display:block;}
#wPosition:hover #wAvatar {border-color: #f59d00;}
#wLCo:hover, #wLCp:hover, #wLC:hover, #wDetali:hover {background:#f59d00;}
</style>

<script>$.get('/index/14-0-1',function(data){var wLCo = $('b[class="unread"]',data).length; $('#wLCo').html(wLCo);return false;});</script>


на этом установка окончена...
 
  • Страница 1 из 1
  • 1
Поиск: