ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Темная информационная панель для uCoz

Темная информационная панель для uCoz

Темная информационная панель для uCoz
Кто то ставит горизонтальное меню, а где то можно заметить, что стоит информационная панель, которая безусловно вписывается в дизайн. Это отличное решение для сайта, как информационная панель где будет почти все функций. А точнее поиск по сайта, также логотип и стильный мини профиль. Там же нам будет хорошо видно сколько людей находиться на сайте, все очень стильно сделано под зеленой кнопкой. Но в нашем случай правая сторона полностью отдана под логотипу и даже остается немного место, где к примеру можно поставить иконку дом, что при клике на главную переходило, но больше для дизайн.

Так она будет смотреться, если вы зайдете как гость.

информационная панель для сайта uCoz

Что мы видим?

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

Теперь если вы зашли под своим логином.

Красивая информационная панель uCoz

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

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

Установка:

Вверх сайта в самый потолок в /head ставим стили.

Код
<link rel="stylesheet" type="text/css" href="https://zornet.ru/CSS-ZORNET/Gresan/cstule.css" />


Ниже его ставим скрипт:

Код
<div id="heder_block">  
  <div id="heder">  
  <ul>  
  <li><a href="/"><img src="https://zornet.ru/CSS-ZORNET/ND/ZRET/B8lA90W.png"></a></li>  
  <li>  
  <div id="serch_form">  
  <form action="/search/">  
  <input class="search_text" name="q" type="text" placeholder="Поиск по сайту">  
  <input class="search_submit" type="image" src="https://zornet.ru/CSS-ZORNET/ND/ZRET/search.png">  
  </form>  
  </div>  
  </li>  
  <li style="margin-right:40px;"><a href=""><i class="online_us"></i><b><?substr($ONLINE_COUNTER$, 48, strrpos($ONLINE_COUNTER$,"onl2")-48-36)?></b></a></li>  
  <li class="min_prof_h" style="float: right;">  
   
<?if($LOGIN_FORM$)?>
  <div id="mp">  
  <div id="inf_h"><b><?if($USER_FULL_NAME$)?>$USER_FULL_NAME$<?else?>$USERNAME$<?endif?></b>  
  </div>  
  <span><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?endif?></span>  
  <div id="clr"></div>  
  </div>  
  <div id="min_prof_m">  
  <div id="id_ccs" style="margin: -2px 10px;">  
  <span class="cc_sit urt"></span>  
  <span class="cc_sit urt2"></span>  
  <span class="cc_sit urt3"></span>  
  <div id="clr"></div>  
  </div>  
  <div id="min_prof_ms">  
  <?ifnot $USER_LOGGED_IN$?><a href="$LOGIN_LINK$">Войти</a><?else?> <a href="$LOGOUT_LINK$">Выйти</a><?endif?>  
  <a href="$REGISTER_LINK$">Регистрация</a><?endif?>  
   
<div class="profile">
<?if($LOGOUT_LINK$)?>
<div class="profile_avatar">
<a href="/index/8" title=""><span class="round"></span><?if($USER_AVATAR_URL$)?><img class="userAvatar" title="$USERNAME$" src="$USER_AVATAR_URL$" border="0"><?else?><img class="userAvatar" title="$USERNAME$" src="https://zornet.ru/SKRIPT/Kransel/noavatar.png" border="0"><?endif?></a></div>  
<a href="/index/14" class="m_link" title="Личные сообщения"><i></i></a>
<a href="/index/15" class="m_link m_users" title="Пользователи"><i></i></a>
<a href="/load/0-0-0-0-1" class="m_link m_add" title="Добавить материал"><i></i></a>
<a href="/index/11" class="m_link m_set" title="Редактирование личной информаций"><i></i></a>
<a href="/index/10" class="m_link m_quit" title="Выход сайта"><i></i></a><?endif?>  
  <div id="clr"></div>  
  </div>  
  </div>  
  </li>  
  </ul>  
  </div>  
  <div id="clr"></div>  
  </div>


Также можно в /head не ставить стили а просто скопировать их из файла и поместить в CSS сайта, если есть место.

Источник: http://boba.ucoz.com/, http://yraaa.ru/
20 Марта 2016 Просмотров: 2429 Комментариев: (28)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы
Комментарии: 21
Сопрано
Сопрано 20 Марта 2016 08:561
0
Очень даже не чего смотрится, как то не понятно с одной стороны, но думаю найдет свое место. А что не залил, кто в курсе или нашел бы ошибку подсказали бы.
Kosten
Kosten 20 Марта 2016 09:032
0
Да, нужно проверить, кто соображает, может в стилях немного уверен, так как криво не стоит и все четко показывает, а на счет кода, но там он полный, возможно что то лишнее есть. Да и залить на сайт, нужно еще по идее личные сообщение так то вывести, просто уже немного прессует этот материал. Они там раньше были и стоят, но что то не выводятся, не стал пока убирать, а так бы Лс для полного набора, было бы в самый раз для блога или где статьй, просто навигаций там вообще нет по сути.
tsakonter
tsakonter 20 Марта 2016 09:163
0
Что решил свой мини профиль туда поставить, так нормально, кто то может просто взять и на горизонтальное меню перенести. А так мне вообще нравиться идея поставить на сайт, вместо меню, хоть что то будет оригинально смотреться.
Kosten
Kosten 20 Марта 2016 09:255
0
tsakonter, но во первых оно не мое, это с урааа старый мини профиль. В контакте нашел, где, где там не ожидал его найти, но оно с ошибками было, не одного оператора, не чего, пришлось собирать и подтягивать нужных людей. Но сейчас там другое стоит и уже к ста те, администратор его в интернет уже выложил, так как кто то криво рипнул что ли, но там свои терки.
Сопрано
Сопрано 20 Марта 2016 09:287
0
Но если посмотреть здесь на сайте и в материале, то вообще одни только кнопки, которые думаю не сыграют главную роль.
Сафрон
Сафрон 20 Марта 2016 09:194
0
Костен, давай сайт скинь, то что то не вижу его на тестовом, сейчас все найдем и личку добавим, у меня как раз немного времени есть, все успеем сделать.
Kosten
Kosten 20 Марта 2016 09:266
0
Вот только тебе и доверил искать ошибки, явно что то выдернешь не то, так что лучше отдыхал на смене если есть время. Но если не будет человека который мог бы проверить, по любому залью.
csretven
csretven 20 Марта 2016 09:448
0
Пробел большой остаеться, вот как раз туда можно и поставить личное сообщение. А так под паблик, или софт не подойдет, так как раз нужно, чтоб было горизонтальное меню. Но кто то просто захочет сделать оригинальный сайт, то здесь как раз пригодиться, а если все еще работает, то что нужно. Но за профиль думаю можно не волноваться, если оно взято от сюда, хоть не все, но видно что есть как гость и пользователь, значит работает.
CEREBRUM
CEREBRUM 20 Марта 2016 22:029
0
ого мне нравится очень очень
Kosten
Kosten 20 Марта 2016 22:1910
0
Сейчас пока Лс настраиваем, возможно что то выйдет, чтоб на ленте показывало, если личное сообщение пришло.
Сафрон
Сафрон 20 Марта 2016 22:3911
0
В конверте выводить будите или как получиться?
Kosten
Kosten 20 Марта 2016 22:4412
0
Сафрон, поставь гопника, лучше идет) Те старалея дали?
Kosten
Kosten 21 Марта 2016 02:3013
0
waak, скиньте код, просто тоже сейчас сделал и скину, посмотрите, возможно одинаковы. Вообщем когда сообщение приходит, то оно появиться., ниже будет код, только без стилей, стили в материале возьмете.
Kosten
Kosten 21 Марта 2016 02:3914
0
Вообщем этот код немного доработан, а точнее в него добавлены личные сообщение. То что нам нужно в /head поставить, это стили, берем в самом материале. А вот уже код с ЛС здесь копируем. Работать он будет так, если вам пришло сообщение, то появляется надпись "Сообщение" и сколько вам писем пришло. Дальше просто нажимаем и переходим, как все прочти, надпись опять исчезнет.

Код
<div id="heder_block">  
  <div id="heder">  
  <ul>  
  <li><a href="/"><img src="https://zornet.ru/CSS-ZORNET/ND/ZRET/B8lA90W.png"></a></li>  
  <li>  
  <div id="serch_form">  
  <form action="/search/">  
  <input class="search_text" name="q" type="text" placeholder="Поиск по сайту">  
  <input class="search_submit" type="image" src="https://zornet.ru/CSS-ZORNET/ND/ZRET/search.png">  
  </form>  
  </div>  
  </li>  
  <li style="margin-right:40px;"><a href=""><i class="online_us"></i><b><?substr($ONLINE_COUNTER$, 48, strrpos($ONLINE_COUNTER$,"onl2")-48-36)?></b></a> <?if($UNREAD_PM$)?><li class="v2"><a href="/index/14">Сообщения: <spanar>$UNREAD_PM$</spanar></a></li><?endif?>  </li>  
  <li class="min_prof_h" style="float: right;">  
  
<?if($LOGIN_FORM$)?>  
  <div id="mp">  
  <div id="inf_h"><b><?if($USER_FULL_NAME$)?>$USER_FULL_NAME$<?else?>$USERNAME$<?endif?></b>  
  </div>  
  <span><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?endif?></span>  
  <div id="clr"></div>  
  </div>  
  <div id="min_prof_m">  
  <div id="id_ccs" style="margin: -2px 10px;">  
  <span class="cc_sit urt"></span>  
  <span class="cc_sit urt2"></span>  
  <span class="cc_sit urt3"></span>  
  <div id="clr"></div>  
  </div>  
  <div id="min_prof_ms">  
  <?ifnot $USER_LOGGED_IN$?><a href="$LOGIN_LINK$">Войти</a><?else?> <a href="$LOGOUT_LINK$">Выйти</a><?endif?>  
  <a href="$REGISTER_LINK$">Регистрация</a><?endif?>  
<div class="profile">
  
<?if($LOGOUT_LINK$)?>
<div class="profile_avatar">
<a href="/index/8" title=""><span class="round"></span><?if($USER_AVATAR_URL$)?><img class="userAvatar" title="$USERNAME$" src="$USER_AVATAR_URL$" border="0"><?else?><img class="userAvatar" title="$USERNAME$" src="https://zornet.ru/SKRIPT/Kransel/noavatar.png" border="0"><?endif?></a></div>  
<a href="/index/14" class="m_link" title="Личные сообщения"><i></i></a>
<a href="/index/15" class="m_link m_users" title="Пользователи"><i></i></a>  
<a href="/load/0-0-0-0-1" class="m_link m_add" title="Добавить материал"><i></i></a>
<a href="/index/11" class="m_link m_set" title="Редактирование личной информаций"><i></i></a>
<a href="/index/10" class="m_link m_quit" title="Выход сайта"><i></i></a><?endif?>  
  <div id="clr"></div>  
  </div>  
  </div>  
  </li>  
  </ul>  
  </div>  
  <div id="clr"></div>  
  </div>


Дальше идем в CSS и пропишем небольшой стиль, его сменил название, чтоб он не конфликтовал с другими.

Код
spanar {
  background-color: #e5e5e5;
  border: 0px solid #ccc;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  margin-left: 5px;
  padding: 3px 8px;
  font: 11px 'Open Sans';
  color: #777;
}


1 2 »

Оставь свой отзыв

Войдите:
avatar