Прозрачное Pop-up окно для регистрации или входа (PunBB)

Пример первый:


Решение больше направлено в сторону гостей. Панель стоит сверху, прозрачная (можно меня как стиль, так и содержимое) - при регистрации, панель исчезает. Кликабельна - по клику на панели, осуществляется переход на страницу регистрации.

Маленький совет: Перед тем как вносить изменения в ваш шаблон overall_header скопируйте все его содержимое и сохраните у себя на компьютере, как текстовой файл. /Не знаю как у Вас, у меня он постоянно сбивается: то пропадают целые блоки, то куски модов проскакивают... Береженого Бог бережет!/

Приступим: Вносим изменения в overall_header - находим:

Код:

<!-- BEGIN switch_login_popup -->
   <div id="login_popup" class="module main">
      <div id="login_popup_title" class="main-head">
         <div class="h3">{SITENAME}</div>
      </div>
      <div class="main-content">
         {LOGIN_POPUP_MSG}
         <div id="login_popup_buttons">
            <form action="{S_LOGIN_ACTION}" method="get">
               <input type="submit" class="button2" value="{L_LOGIN}" />
               <input type="button" class="button2" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
               <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
            </form>
         </div>
      </div>
   </div>
   <!-- END switch_login_popup -->

Заменяем код между <!-- BEGIN switch_login_popup --> и <!-- END switch_login_popup --> на следующий:

Код:

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT and not S_IN_UCP --> 
<div id="info">
<div id="infobar">
<a href="адрес_вашего_форума/register">
<img style="width: 50px; height: 50px; padding-right: 20px; vertical-align:middle;" alt="" src="адрес_вашего_ изображения"/>
 Для полного доступа к форуму, пройди не сложную <span style="color: #FF0000">Регистрацию</span>. Кликни по этой панели.
<img style="width: 50px; height: 50px; padding-left:20px; vertical-align:middle;" alt="" src="адрес_вашего_ изображения"/>
</a>         
</div>      
</div>
<!-- ENDIF -->

Сохраняете и публикуете шаблон.
Обращаю Ваше внимание, что изображение должно быть 50х50 пикселей. В моем случае, это знак радиации. Можете использовать вот такое изображение:
Так же, можете изменять текст содержимого (если будет интересно расскажу как его оформить). Параметр:

Код:

padding-left:20px

отвечает за расстояние от картинки до текста с обеих сторон, поэтому таких параметров два.

Переходим к CSS, вставляем следующий код:

Код:

#info {
  overflow: visible;
  min-width: 750px;
  width: 100%;
  position: fixed;
  left: 0;
  z-index:200;
  margin-top: -15px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  font-weight: bold;
}

#infobar a, #infobar a:link, #infobar a:visited, #infobar a:active {
  display: block;
  float: left;
  width:100%;
  clear: both;
  color: #fff;
  padding: .85em 0 .85em 0;
  border-bottom: .25em solid #fff;
  text-align: center;
  text-decoration: none;
  background-image: url("http://img-fotki.yandex.ru/get/4120/42180291.2a/0_83495_b99c929e_XL.png.jpg");
  background-position: bottom;
  background-repeat:repeat-x;
}

#infobar a:hover {
    color: #fff;
  background-image: url("http://img-fotki.yandex.ru/get/4120/42180291.2a/0_83495_b99c929e_XL.png.jpg");
  background-position: top;
  background-repeat:repeat-x;
  border-bottom: .25em solid #fff;
  cursor: pointer;
}

Здесь, можете поменять прозрачную подложку на свою. В моем случае изображение в формате png 1х800 пикселей (просто прозрачная полоска). Почему такая большая по высоте? Для добавления информации. Подложка подстраивается по вертикали исходя из объема заполнения...
Вот в принципе и все. Всем удачи! И берегите себя!
*Новые примеры в продолжении*

Ждёмс . Давненько не было хороших вариантов .
Заострю внимание на варианте для ВВ3

Вариант очень интересный.
Проверила на одном из своих форумов версии Punbb, выглядит шикарно. Буду ждать может вариант и для ВВ2 появиться.