Вверх панели инструментов для uCoz
 | |
| Отличное решение на панель информации, где расположен логотип и статистика сайта, также с правой стороны будет мини профиль. Ставится на место горизонтального меню, плюс она фиксированная, что если вы будете прокручивать, то панель останется на своем месте. Здесь также расположен и поиск по сайту, что можно с уверенностью сказать, что по функциям не уступает другим по формату. Сделана на стилях, где вы сами можете выставить оттенок цвета, чтоб подходил на ваш основной дизайн. По умолчанию там будут кнопки, как на вход для пользователя, так и на регистрацию. После чего появится мини профиль со всеми функциями для него. Но и Avatar с ним, который можно потом в стилях сделать круглым, но здесь как сам веб мастер решит. Логотип будет на изображение с левой стороны и здесь если панель темная, то светлый оттенок отлично впишется. Больше подойдет на такие площадки, как блог или статьи, не исключаю, что можно поставить на форум, вообще на портал с одним модулем, но и на сайт полноценный можно установить. Минус один, который заключается, что адаптация на мобильные аппараты на нем нет, и здесь придется самому ее выставлять. А так очень простая и понятная по своим функциям панель, где нет не чего лишнего, все только для пользователя. Что по статистике, то в красном круге, будет выводить цифры, сколько онлайн находится на сайте. Кто-то если знаком с конструктором, то может поиск убрать и поставить навигацию, виде горизонтального меню. Кнопки на профили все под функцию сделаны и имеют эффект, что при наведении они становятся под другим оттенком. Давайте рассмотрим как видит гость.  Это уже вы как пользователь, после регистраций.  Можно посмотреть в темном оттенке, как будет.  Приступаем к установке: хтмл Код <div class="header"> <div class="max_width"> <div style="-webkit-pointer-events: none; pointer-events: none;"> </div> <div class="h_menu"> <?if($USER_LOGGED_IN$)?> <div class="i_avatar"><div class="i_avatar_in"><?if($USER_AVATAR_URL$)?><a href="$PERSONAL_PAGE_LINK$"></a><img src="$USER_AVATAR_URL$" alt="$USERNAME$"><?else?><img src="ссылка на заглушку нет аватара" alt="Noavatar"><?endif?></div></div> <div class="i_pm"><a href="/index/14"></a></div> <div class="i_users"><a href="/index/15-1"></a></div> <div class="i_addition"><a href="/load/0-0-0-0-1"></a></div> <div class="i_cog"><a href="/index/11"></a></div> <div class="i_quit"><a href="/index/10"></a></div> <?else?> <div class="h_sign_over"> <div class="h_sign"> <a href="$LOGIN_LINK$">Вход</a> </div> </div> <div class="h_sign_over"> <div class="h_sign"> <a href="/register">Регистрация</a> </div> </div> <?endif?> </div> <a href="/" class="logo" title="">zornet</a> <div class="search-bg"> <form action="/search/" name="searchform" method="get"> <input type="hidden" name="do" value="search"> <input type="hidden" name="subaction" value="search"> <input title="Найти" alt="Найти" value="" type="submit"> <input id="story" name="q" value="Поиск по сайту..." onblur="if(this.value=='') this.value='Поиск по сайту...';" onfocus="if(this.value=='Поиск по сайту...') this.value='';" type="text"> </form> </div> <div class="stat"> <li> Всего на сайте: <span class="tnc"><?substr($ONLINE_COUNTER$, 48, strrpos($ONLINE_COUNTER$,"onl2")-48-36)?></span> </li> </div> </div> </div> CSS: Код .header {height:74px;width:100%;background:#236999;position:fixed;z-index:9999;padding:10px 0px} .max_width {width:1150px;margin:0px auto} .h_menu {float:right} .i_avatar {float:left;padding-top:23px;padding-left:12px} .i_avatar a {width:28px;height:28px; border: 2px solid #E8E8E8;display:inline-block;position:absolute;z-index:4;} .i_avatar_in, .i_avatar_in img {width:30px;height:30px;} .i_pm {float:left;padding-top:21px;padding-left:12px} .i_pm a {width:32px;height:32px;background:url('http://zornet.ru/Ajaxoskrip/AbavAg/i_pm.png');display:inline-block;opacity:0.5} .i_pm a:hover {opacity:1} .i_users {float:left;padding-top:20px;padding-left:12px} .i_users a {width:32px;height:32px;background:url('http://zornet.ru/Ajaxoskrip/AbavAg/i_users.png');display:inline-block;opacity:0.5} .i_users a:hover {opacity:1} .i_addition {float:left;padding-top:20px;padding-left:12px} .i_addition a {width:32px;height:32px;background:url('http://zornet.ru/Ajaxoskrip/AbavAg/i_addition.png');display:inline-block;opacity:0.5} .i_addition a:hover {opacity:1} .i_cog {float:left;padding-top:20px;padding-left:12px} .i_cog a {width:32px;height:32px;background:url('http://zornet.ru/Ajaxoskrip/AbavAg/i_cog.png');display:inline-block;opacity:0.5} .i_cog a:hover {opacity:1} .i_quit {float:left;padding-top:20px;padding-left:12px} .i_quit a {width:32px;height:32px;background:url('http://zornet.ru/Ajaxoskrip/AbavAg/i_quit.png');display:inline-block;opacity:0.5} .i_quit a:hover {opacity:1} .logo {width:188px;height:37px;position:relative;top:18px;right:0px;display:inline-block;font-size:0px;color:rgba(0,0,0,0);background:url('http://zornet.ru/Aben/Gsa/zartyn/5a1.png') top;float:left} .logo:hover {opacity:0.9} .h_sign_over {padding-top:22px;display:inline-block;margin-left:10px} .h_sign {display:inline-block;background:#3297db;color:rgba(255,255,255,0.5);font-size:13px;padding:7px 16px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} .h_sign a {color:rgba(255,255,255,0.8);text-decoration:none} .h_sign a:hover {color:#FFF;text-decoration:none} div.search-bg{background: #A99595;border: 1px solid #90B3CC;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;float: left;height: 28px;padding: 0 3px 0 12px;margin-top: 24px;margin-left: 75px;width:233px;} div.search-bg input[type="text"]{background:none;border:none;color:#ffffff;display:inline-block;font-style:italic;height:16px;margin-top:5px;padding:0;width:200px;} div.search-bg input[type="submit"]{background:url('http://zornet.ru/Ajaxoskrip/AbavAg/icons1.png') no-repeat 5px -495px;border:none;float:right;height:28px;vertical-align:top;margin:0;padding:0;width:28px;} .stat{float: left; padding: 0 3px 0 12px;margin-top: 24px;margin-left: 155px;} .stat li{color: #ffffff;display:block;} .tnc{position: relative;top: -6px;color: #fff;background: #e84c3d;padding: 0px 5px;border-radius: 10px;font-size: 12px;min-width: 12px;text-align: center;} Спасибо пользователю First, который полностью доработал материал. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 50 | |
|
| |
| 1 2 3 » | |
