Модифицированный вывод аватарки в профиле в стиле FLAT by webo4ka...

651
10 из 10
Проголосовало: 13






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

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

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

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

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

Установка:

Заходим в Панель управления ---> Управление дизайном ---> Пользователи ---> Персональная страница пользователя находим там типо вот такого вот кода:

Код

<?if($_AVATAR$)?>$_AVATAR$<br /><br /><?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://webo4ka.ru/webo4ka/img/W.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://webo4ka.ru/Ucoz8/pismo.png"></div></a><?endif?>
<?if($_PM_SEND_URL$)?><a href="$_PM_SEND_URL$" title="отправить лс"><div id="wLC"><img src="http://webo4ka.ru/Ucoz8/pismo.png"></div></a><?endif?>
<?if($_CHANGE_DETAILS_URL$)?><a href="$_CHANGE_DETAILS_URL$" title="редактировать профиль"><div id="wDetali"><img src="http://webo4ka.ru/Ucoz8/wKerandachFlat.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>


на этом установка окончена...
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://webo4ka.ru/
  • Всего комментариев: 5

mas9n1ka
0
mas9n1ka написал: Написано 05 Апреля 2016 в 13:49
Комментарий №4
Помоги пожалуйста, как переместить в это место?

Вовчик
0
Вовчик написал: Написано 05 Апреля 2016 в 17:41
Комментарий №5
используй position

Десерт
0
Десерт написал: Написано 27 Января 2016 в 17:21
Комментарий №2
А как можно поменять расположения иконок в css?

Вовчик
0
Вовчик написал: Написано 27 Января 2016 в 17:25
Комментарий №3
#wLCo {}
#wLCp {}
#wLC {}
#wDetali {}
находишь в данных id вот такое position:absolute; top:ЧИСЛОpx; right:ЧИСЛОpx;
и меняешь как надо...

Вовчик
+7
Вовчик написал: Написано 25 Января 2016 в 16:41
Комментарий №1
smile

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
  • waak написал:
  • Почему у меня он перелистывает в верх а не вниз и если это первая песня на стр то он её по кругу гоняет а не переходит к последней
    и как сделать стоп по клику на трек который играет?
  • Acht написал:
  • Тест
    Мда, у меня тоже не работает. Или нужно ждать обновление?
    Добрый вечер.Подскажите,пожалуйста: как сделать, чтобы второй или третий набор смайлов заменить своими.
    Последние темы
    Опрос
    251
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: