» »

Изменяем вывод Аватар в профиле ПС для uCoz


Изменяем вывод Аватар в профиле ПС для uCoz

Здесь мы изменяем вывод Avatar в персональной странице. А точнее полностью изменяем саму форму, она становиться круглой и на ней будут все функций. Как знаем, идет по умолчанию в квадратной рамке и в низу у него, что пришло сообщение и редактировать. Здесь же у нас будет, те же функций и добавленные, это как отправленные сообщение и принятые. Оттенок цвета будет синий, эффект кнопок будет присутствовать, также 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://zornet.ru/Ajaxoskrip/Fyrkes/Zret/31/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://zornet.ru/Ajaxoskrip/Fyrkes/Zret/31/pismo.png"></div></a><?endif?>  
<?if($_PM_SEND_URL$)?><a href="$_PM_SEND_URL$" title="отправить лс"><div id="wLC"><img src="http://zornet.ru/Ajaxoskrip/Fyrkes/Zret/31/pismo.png"></div></a><?endif?>  
<?if($_CHANGE_DETAILS_URL$)?><a href="$_CHANGE_DETAILS_URL$" title="редактировать профиль"><div id="wDetali"><img src="http://zornet.ru/Ajaxoskrip/Fyrkes/Zret/31/wKerandachFlat.png"></div></a><?endif?>  
<a href="$_UID_URL$" target="_blank"><span id="wID">ID $_USER_ID$</span></a>  
</div>  

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


Как все заменили, нам только осталось прописать в CSS стили.

Код
#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: #2A77AB; 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: #C8DB34;background: rgb(42, 119, 171); 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: rgb(42, 119, 171); 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: rgb(42, 119, 171); 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: rgb(42, 119, 171); 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: #2C82BD;}  
#wLCo:hover, #wLCp:hover, #wLC:hover, #wDetali:hover {background: #3498DB;}


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

Автор: Вовчик
Источник: http://webo4ka.ru/
26.01.2016 Просмотров: 539 Комментарий: (32)

Поделиться в социальных сетях

Материал разместил

Комментарий: 32
Сопрано
Сопрано 26.01.2016 01:441
0
Что только не придумают, но так оригинально смотрится, если еще персональная страница, стоит в страницах сайта, в каркасе. Так вообще по идее не нужно не какую дизайнерскую ставить.
Kosten
Kosten 26.01.2016 02:127
0
Полностью согласен, что простая страница, если так прокачана, она сразу приобретает совершенно другой вид.

Все правильно, ставил на каркас, через страницы сайта, просто если брать как оно есть, большая получается и как то все пропадает, и не так смотрится.
Canon
Canon 26.01.2016 02:2310
0
Это на стандартные все основном идет настройка, а на дизайнерские если ставить. то придется подгонять,там явно немного по другому будет.
webo4ka
webo4ka 26.01.2016 12:4215
0
если персоналка стоит в страницах сайта, то там скорей всего уже под свой диз все сделали, а этот вариант больше на стандартную персоналку...
Kosten
Kosten 26.01.2016 22:5231
0
Вовчик, если даже так сделать, уже по другому смотрится, еще сам обвод сделать тоже под синий оттенок и также визуально по другому смотришь.

tsakonter
tsakonter 26.01.2016 01:502
0
Думал что много нужно устанавливать, чтоб получить такой обзор и обновление, а здесь просто заменить и стиль прописать.

Но так то было лучше, чтоб сразу стояло, но хотя и при клике наведенном тоже нормально.
Maryges
Maryges 26.01.2016 01:575
0
Что изначально не показывает кнопки, так там вообще только одна нужна, это редактировать страницу. Остальные для информации.
webo4ka
webo4ka 26.01.2016 12:4416
0
все гениальное просто XD))

убери display:none: и будет тебе сразу стоять а не при наведении...
tsakonter
tsakonter 26.01.2016 22:3929
0
Весьма благодарен вам, так четко все.
Kosten
Kosten 31.01.2016 19:2432
0
Вот здесь стили уже прописаны, что по умолчанию, будет у вас показывать оттенок цвета.



Код
#wPosition {position:relative; width:120px;}  
#wAvatar {border:8px solid #2A77AB; border-radius:100%; width:120px; height:120px; cursor:pointer;}  
#wAvatar:hover, #wPosition:hover .del:hover #wAvatar {border-color:#f59d00;}  
#wID {background: #2A77AB; 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: #C8DB34;background: rgb(42, 119, 171); 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;}  
#wLCp {background:#f59d00;background: rgb(42, 119, 171); 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;}  
#wLC {background:#f59d00;background: rgb(42, 119, 171); border-radius:100%; cursor:pointer; width:18px; height:18px; line-height:18px; text-align:center; position:absolute; top:25px; right:-21px; z-index:1;}  
#wDetali {background:#f59d00;background: rgb(42, 119, 171); border-radius:100%; cursor:pointer; width:18px; height:18px; line-height:18px; text-align:center; position:absolute; top:52px; right:-30px; z-index:1;}  
#wPosition:hover #wLC, #wPosition:hover #wDetali, #wPosition:hover #wLCo, #wPosition:hover #wLCp {display:block;}  
#wPosition:hover #wAvatar {border-color: #2C82BD;}  
#wLCo:hover, #wLCp:hover, #wLC:hover, #wDetali:hover {background: #3498DB;}
Dixes
Dixes 26.01.2016 01:513
+3
респект Вовчику dry
Maryges
Maryges 26.01.2016 01:564
+3
Присоединяюсь.
webo4ka
webo4ka 26.01.2016 12:4014
0
спс smile
webo4ka
webo4ka 26.01.2016 12:4013
0
спс smile
Сафрон
Сафрон 26.01.2016 02:066
+2
Не плохо вообще сделал Вовчик, но здесь больше дизайна, но красиво.
webo4ka
webo4ka 26.01.2016 12:4417
0
спс
Tergran
Tergran 26.01.2016 02:158
0
Теперь есть и светло желтый оттенок и синий, Костен не стал просто тупо копировать а хоть что то нужно было изменить. biggrin
Kosten
Kosten 26.01.2016 02:2511
0
Tergran, но если копируешь, то всегда стараюсь, что то свое добавить, если это возможно. Если не чего не выходит, то просто можно оттенок изменить, но не просто ставить одно и тоже, чем то должен отличаться, хотя один и тот же код.
webo4ka
webo4ka 26.01.2016 12:4719
0
оттенок это самое простое... я вот думал сюда добавить еще повышение репутации и наград, просмотр репутации и наград, и замечания, но потом подумал, что это лишнее))
webo4ka
webo4ka 26.01.2016 12:4518
0
цвета уже каждый подстраивает под свой сайт... но я когда делал, думал, что оранжевый более подойдет под все сайты...
Kosten
Kosten 26.01.2016 20:3523
0
webo4ka, больше наверно сейчас светло синий, его и на светлый и темный можно установить, хотя светло желтый аналогично.
csretven
csretven 26.01.2016 02:219
0
У меня от YRAAA стоит, не настраивал, так как хотел всегда оставить та которая с шаблоном шла. Но теперь думаю заменить, сейчас она смотрится очень прилично, еше что то от себя добавить и не скажешь что стандартная. Можно с любого шаблона брать страницу, если у вас есть темтовый сайт и ставить, и все отлично подойдет.
Kosten
Kosten 26.01.2016 02:3012
0
csretven, тоже от этого сайта стоит, но вот именно этот скрипт на ней не вижу, не тот дизайн. Так уже настроил главные функций и все, она по сути сильно не работает на сайте, но обязательно должна быть. На одном сайте, который предлагал PNP то ставил мини чат в него, теперь вот думаю, для чего он там вообще.
kredit-oformi
kredit-oformi 26.01.2016 14:0720
0
надо будет попробовать вроде ничего так выглядит же cool
kredit-oformi
kredit-oformi 26.01.2016 20:2621
0
а то-есть эти эконки выезжают только при наведении на автарку
Kosten
Kosten 26.01.2016 20:3422
0
kredit-oformi, так читай что автор написал, так и сделай.
Цитата webo4ka
все гениальное просто XD))

убери display:none: и будет тебе сразу стоять а не при наведении...
kredit-oformi
kredit-oformi 26.01.2016 20:5224
0
Цитата Kosten
так читай что автор написал, так и сделай


surprised точняк пропустил smile
Kosten
Kosten 26.01.2016 22:1325
0
kredit-oformi, бывает, иногда самое главное можно пропустить.
1 2 »
avatar