Темная панель пользователя для сайта ucoz
Очень аккуратна создана по своему дизайну Темная панель пользователя для сайта ucoz, что заменит очень много функций на сайте. Это во первых будет ваш мини профиль, в котором будет показано сообщение, если вам кто то напишет. Также можно заметить, что там стоит кнопка вверх. И не трудно предположить, что она будет стоять в низу вашего портала. Создана для темной гамме портала, но не исключаю, что на светлом фоне, будет отлично смотреться. Скачиваем файл и заливаем ФМ. В нижнюю часть сайта: Код <?if($USER_LOGGED_IN$)?> <div id="up" style="display: block;"> <div id="bg_up"> <a href="/index/8" target="_blank" class="but_user"></a> <a href="/index/14" target="_blank" class="but_user_pm_us"><div class="nous">$UNREAD_PM$</div></a> <a href="/index/10" class="but_user_quit"></a> <a href="javascript://" onclick="$('body').scrollTo('0px',800, {axis:'y'})" id="scrollup" class="but_user_up"></a> </div> </div> <?else?> <div id="topcontrol" title="" style="position: fixed; bottom: 5px; right: 50px; opacity: 0; cursor: pointer;"><div class="imas"></div></div> <script type="text/javascript" src="/js/dsup.js"></script><?endif?> <script type="text/javascript"> $(document).ready(function(){ $("#up").hide(); $(function(){ $(window).scroll(function(){ if ($(this).scrollTop() > 400){ $('#up').fadeIn(); } else { $('#up').fadeOut(); } }); $('#up').click(function(){ $('body,html').animate({ scrollTop:0 }, 800); }); }); }); </script> в css Код #up{cursor:pointer;position:fixed;bottom:5px;right:40px;z-index:1;} #bg_up {background:#0e0e0e;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;border-bottom:1px solid #1a1a1a;padding:3px 4px 1px 4px;overflow:hidden;} a.but_user {background:url(http://zornet.ru/CSS-ZORNET/gerav/but_user.png) no-repeat;display:block;width:21px;height:20px;float:left;} a.but_user_quit {background:url(http://zornet.ru/CSS-ZORNET/gerav/but_user_quit.png) no-repeat;display:block;width:21px;height:20px;float:left;margin:0px 1px 0px 0px;} a.but_user_up {background:url(http://zornet.ru/CSS-ZORNET/gerav/but_user_up.png) no-repeat;display:block;width:21px;height:20px;float:left;margin:0px 0px 0px 15px;} a.but_user_pm {background:url(http://zornet.ru/CSS-ZORNET/gerav/but_user_left.png) no-repeat left, url(http://zornet.ru/CSS-ZORNET/gerav/but_user_right.png) no-repeat right, url(http://zornet.ru/CSS-ZORNET/gerav/but_user_center.png) repeat-x center;height:20px;display:block;float:left;padding:0px 5px 0px 25px;margin:0px 3px 0px 3px;} a.but_user_pm_us {background:url(http://zornet.ru/CSS-ZORNET/gerav/but_user_left_us.png) no-repeat left, url(http://zornet.ru/CSS-ZORNET/gerav/but_user_right.png) no-repeat right, url(http://zornet.ru/CSS-ZORNET/gerav/but_user_center.png) repeat-x center;height:20px;display:block;float:left;padding:0px 5px 0px 25px;margin:0px 3px 0px 3px;} .us{float:right;background:#0e0e0e;color:#454545;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;height:14px;padding:0px 5px;font-size:10px;margin:2px 0px 0px 0px;} .nous{float:right;background:#c43a3a;color:#fff;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;height:14px;padding:0px 5px;font-size:10px;margin:2px 0px 0px 0px;} .qw {color:#FF3030; text-shadow: 0 0 7px #FF3030;background: url(/bigbar/bgred.gif);} .imas {background:url(http://zornet.ru/CSS-ZORNET/gerav/up.png) no-repeat;width:30px;height:29px} .imas:hover {background:url(http://zornet.ru/CSS-ZORNET/gerav/uphover.png) no-repeat;width:30px;height:29px} First, предоставил картинки обширные, где вы можете посмотреть, как выглядит к примеру на этом сайте. Второй скрин |
Поделиться в социальных сетях
Материал разместил
Комментарии: 37 | |
| |
1 2 3 4 5 6 » | |