Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: j-p-g.net Видео фоторедактор Транслит

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

Предыдущая тема Следующая тема Перейти вниз

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

Сообщение автор sapro в Вс 17 Мар - 1:24

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


Решение больше направлено в сторону гостей. Панель стоит сверху, прозрачная (можно меня как стиль, так и содержимое) - при регистрации, панель исчезает. Кликабельна - по клику на панели, осуществляется переход на страницу регистрации.
Маленький совет: Перед тем как вносить изменения в ваш шаблон 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 пикселей (просто прозрачная полоска). Почему такая большая по высоте? Для добавления информации. Подложка подстраивается по вертикали исходя из объема заполнения...
Вот в принципе и все. Всем удачи! И берегите себя!
*Новые примеры в продолжении*

sapro
Новичок

Мужчина

Сообщения : 17
Возраст : 51
Регистрация : 2011-02-05
Благодарности : 13

Без предупреждений

http://gorodsvetavsem.forumy2x2.com/

Вернуться к началу Перейти вниз

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

Сообщение автор Леший в Вс 17 Мар - 12:18

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

Леший
 

Мужчина

Сообщения : 2122
Регистрация : 2012-10-05
Благодарности : 345

Без предупреждений

http://black-kat.forum2x2.ru

Вернуться к началу Перейти вниз

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

Сообщение автор Сказочник Зазеркалья в Вс 17 Мар - 13:20

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

Сказочник Зазеркалья
Дизайнер
Дизайнер

Мужчина

Сообщения : 3549
Возраст : 25
Регистрация : 2012-11-16
Благодарности : 690

Без предупреждений

http://help.forum2x2.ru

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу

- Похожие темы

 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения