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


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

481
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 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 5
    Гостей: 5
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: