Мини профиль uCoz - by unallocated
 | |
| Это очень простой по своим характеристикам мини профиль для сайта uCoz. Он совершенно оригинален по своему дизайну а также по своей работе. Что сами можете посмотреть, он лучше всего подойдет на светлый дизайн, также его можно установить и на темный, но только нужно вывести светлые стили. Вы видите само изображение пользователя, а если вы гость, то там будет совершенно другая форма, чтоб войти или зарегистрироваться на сайте. Установка: Это в CSS Код .uPanel a.url:hover{text-shadow:0px 0px 5px #fff;color:#fff;opacity:1.0;} .uPanel a.url.highlighted{opacity:1.0;} a.button{display:block;float:left;padding:6px 9px 6px 9px;margin:2px;color:#fff;font-weight:bold;background:url('http://zornet.ru/Rang_2/avtorizachii_dli_ucoz.png') #4E4E4E;background-position:100% 0px;border:1px solid #2D2D2D;border-radius:3px;-moz-border-radius:3px;box-shadow:0px 0px 1px #fff inset;-moz-box-shadow:0px 0px 1px #fff inset;text-shadow:0px -1px 0px #000;} a.button:hover{border:1px solid #815500;color:#fff;background-position:100% -28px;text-shadow:0px -1px 0px #815500;} a.button:active{border:1px solid #815500;color:#fff;background-position:100% -28px;box-shadow:0px 0px 5px #000 inset;-moz-box-shadow:0px 0px 5px #000 inset;text-shadow:0px -1px 0px #815500;} .uPanel a.url span{display:block;position:absolute;bottom:0px;left:20px;color:#fff;background:red;padding:0px 3px 0px 3px;height:14px;line-height:14px;font-size:7pt;font-weight:bold;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;} А это куда хотите хоть в нижнею часть сайта Код <?if($USER_LOGGED_IN$)?> <div class="uPanel" id="uPanel"> <a href="" title="$USERNAME$" class="URL"><img src="$USER_AVATAR_URL$" style="width:27px; height:27px;" alt=""> </a> <a href="/index/14" title="Личные сообщения" class="url"><img src="http://zornet.ru/Rang_2/pm.png" alt=""></a> <a href="/index/8" target="_blank" title="Персональная страница" class="url"><img src="http://unallocated.ru/wind-color.png" alt=""></a> <a href="/index/10" title="Выход" class="url"><img src="http://zornet.ru/Rang_2/exit.png" alt=""></a> <?else?> <div class="uPanel"> <a class="button" href="javascript://" rel="nofollow" onclick="new _uWnd('LF',' ',-250,-110,{autosize:0,closeonesc:1,resize:1},{url:'/index/40'});return false;"><span style="color:white">Войти</span></a> <a class="button" href="/register"><span style="color:white">Зарегистрироваться</span></a> </div> <?endif?> | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 21 | |
|
Также можно точно такой мини чат поставить, только там изображение пользователя будет уже с левой стороны.
 Установка: В низ сайта и припишем код уже стили которые в нем прикреплены в низ сайта и вверх в самый потолок. Код <style type="text/css"> .uPanel { background:rgba(0,0,0,0.8); color:#fff; float:left; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.7); padding: 4px 5px 4px 5px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; position:fixed; bottom:7px; left:7px; } .uPanel a.url, .uPanel a.url:visited { display:block; float:left; color:#fff; font-weight:bold; height:26px; line-height:26px; -moz-transition:all 0.4s ease; -webkit-transition:all 0.4s ease; -o-transition:all 0.4s ease; transition:all 0.4s ease; opacity:0.4; padding:0px 7px 0px 7px; position:relative; } .uPanel a.url img { vertical-align:-8px; } .uPanel a.url:hover { text-shadow:0px 0px 5px #fff; color:#fff; opacity:1.0; } .uPanel a.url.highlighted { opacity:1.0; } .uPanel a.url span { display:block; position:absolute; bottom:0px; left:20px; color:#fff; background:red; padding:0px 3px 0px 3px; height:14px; line-height:14px; font-size:7pt; font-weight:bold; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; } </style> <input name="dfdsfds" type="hidden" id="d-opacity" value="0.7" /> <input name="dffsd" type="hidden" id="d-color" value="255,255,255" / > <div id="dstyle"></div> <div class="uPanel" id="uPanel" style="display:none"> <a href="#" title="Вошли как DIMON_-_BEST" class="url"><?if ($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$" style="width:24px; height:24px;" alt="" /><?else?><img src="http://zornet.ru/Rang_2/noavatar.png" style="width:24px; height:24px;" alt="" /><?endif?></a> <a href="$PM_URL$" title="Личные сообщения" class="url"><img src="http://zornet.ru/Rang_2/pm.png" alt="" /></span></a> <a href="$PERSONAL_PAGE_LINK$" onclick="dialogColor(); return false;" title="Персональная страница" class="url"><img src="http://zornet.ru/Rang_2/wind-color.png" alt="" /></a> <a href="$LOGOUT_LINK$" title="Выход" onclick="showLogForm(); return false;" class="url"><img src="http://zornet.ru/Rang_2/exit.png" alt="" /></a> </div> <script type="text/javascript"> $(function(){ $("#uPanel").fadeIn('normal'); $("#uPanel a.url").tipsy({gravity: 'sw', html: true}); }); </script>  Так вы будите видеть, как гость, а просто там вместо изображение будет noavatar, но здесь он темный, можете поставить по ярче, что визуально наблюдалось хорошо. | |
| 1 2 » | |
