Делаем красивое popup окно [punBB] [phpBB2]

Не путать с Pop-Up окном - раздражалкой для гостей

Для punBB

Заходим в ПА - Общие настройки - Конфигурации.
Активируем Pop-up окно для входа, но поле для текста оставляем пустым.

Открываем шаблон 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 -->
 
<div align="center"><div id="login_popup" class="module main">
        <div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">

<input id="login_popup_close" type="image" src="http://r28.imgfast.net/users/2814/33/31/58/album/close_10.png" title="Закрыть" alt="Закрыть" style=" position: absolute; right:10px; bottom:30px;"/>             
            </form>
                    </div>
          </div>
</div>     
  <!-- END switch_login_popup -->

Сохраняем и опубликовываем шаблон.

Далее открываем шаблон overall_footer (Нижняя часть страницы)
и в самый низ шаблона перед тегом </body> вставляем скрипт:

Код:

<script>
var popupCont=' Здесь ставите ваш текст в формате HTML ';
var arr=document.getElementsByTagName("div");
i=0;
while(arr[i] )
{if(arr[i].id=="login_popup"){
name=arr[i].innerHTML;name=name.substring(0);arr[i].innerHTML="<div>"+popupCont+"</div>"+name}
i++}
</script>

Сохраняем и опубликовываем шаблон.

Пример заполненного скрипта:

Код:

<!--Popup окно-->
<script>
var popupCont=' <br/><br/><br/><br/><br/>
<span style="color: #ff0000 !important;  font-size: 24px; font-style: italic; font-family: Times New Roman;  line-height:120%;"> Приветствуем Вас<br/> на форуме<br/> "В гостях у Домового"</span>
<br/><br/>

<span style="color:#8B2323;font-size:26px;font-weight:bold;">* * * * *</span>

<br/>
<span style="color: #000 !important;  font-size: 18px; font-family: georgia;  line-height:140%;">Вы можете оставаться гостем,<br/> но будет гораздо приятнее,<br/> если Вы <a href="http://www.moyforum.biz/login"><span style=" text-decoration:underline; color:#804804">войдёте</span></a> под своим<br/> логином или пройдёте<br/> процесс <a href="http://www.moyforum.biz/register"><span style="
text-decoration:underline blink; color:#804804">регистрации</span></a>.
</span> ';
var arr=document.getElementsByTagName("div");
i=0;
while(arr[i] )
{if(arr[i].id=="login_popup"){
name=arr[i].innerHTML;name=name.substring(0);arr[i].innerHTML="<div>"+popupCont+"</div>"+name}
i++}
</script>

Далее идем в Каскадную таблицу стилей CSS и вставляем код

Код:


/* Popup окно*/
#login_popup{
background:url(http://r28.imgfast.net/users/2814/33/31/58/album/dydddd11.png) center center no-repeat !important; /*фоновая картинка и её расположение*/
height: 520px !important; /*высота картинки*/
width: 401px !important;/*ширина картинки*/
border-style: none !important;
}

#login_popup_buttons input {
border-style:none !important;
}


В результате гость войдя на форум увидит вот такое приветствие которое можно закрыть нажатием кнопки.



Живой пример можно увидеть ЗДЕСЬ

---

Для phpBB2

Заходим в ПА - Общие настройки - Конфигурация.
Активируем Pop-up окно для входа, но поле для текста оставляем пустым.

Открываем шаблон overall_header (Верхняя часть страницы)
находим фрагмент

Код:

<!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

и заменяем на

Код:

<!-- BEGIN switch_login_popup -->
 
<div align="center"><div id="login_popup" class="module main">
        <div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">

<input id="login_popup_close" type="image" src="http://r28.imgfast.net/users/2814/33/31/58/album/close_10.png" title="Закрыть" alt="Закрыть" style=" position: absolute; right:10px; bottom:30px;"/>             
            </form>
                    </div>
          </div>
</div>     
  <!-- END switch_login_popup -->

Сохраняем и опубликовываем шаблон.

Далее открываем шаблон overall_footer (Нижняя часть страницы)
и в самый низ шаблона перед тегом </body> вставляем скрипт:

Код:

<script>
var popupCont=' Здесь ставите ваш текст в формате HTML ';
var arr=document.getElementsByTagName("div");
i=0;
while(arr[i] )
{if(arr[i].id=="login_popup"){
name=arr[i].innerHTML;name=name.substring(0);arr[i].innerHTML="<div>"+popupCont+"</div>"+name}
i++}
</script>

Сохраняем и опубликовываем шаблон.

Пример заполненного скрипта:

Код:

<!--Popup окно-->
<script>
var popupCont=' <br/><br/><br/><br/><br/>
<span style="color: #ff0000 !important;  font-size: 24px; font-style: italic; font-family: Times New Roman;  line-height:120%;"> Приветствуем Вас<br/> на форуме<br/> "В гостях у Домового"</span>
<br/><br/>

<span style="color:#8B2323;font-size:26px;font-weight:bold;">* * * * *</span>

<br/>
<span style="color: #000 !important;  font-size: 18px; font-family: georgia;  line-height:140%;">Вы можете оставаться гостем,<br/> но будет гораздо приятнее,<br/> если Вы <a href="http://www.moyforum.biz/login"><span style=" text-decoration:underline;">войдёте</span></a> под своим<br/> логином или пройдёте<br/> процесс <a href="http://www.moyforum.biz/register"><span style="
text-decoration:underline blink;">регистрации</span></a>.
</span> ';
var arr=document.getElementsByTagName("div");
i=0;
while(arr[i] )
{if(arr[i].id=="login_popup"){
name=arr[i].innerHTML;name=name.substring(0);arr[i].innerHTML="<div>"+popupCont+"</div>"+name}
i++}
</script>

Далее идем в Каскадную таблицу стилей CSS и вставляем код

Код:


/* Popup окно*/
#login_popup{
background:url(http://r28.imgfast.net/users/2814/33/31/58/album/dydddd11.png) center center no-repeat !important; /*фоновая картинка и её расположение*/
height: 520px !important; /*высота картинки*/
width: 401px !important;/*ширина картинки*/
border-style: none !important;
}

#login_popup_buttons input {
border-style:none !important;
}


В результате гость войдя на форум увидит вот такое приветствие которое можно закрыть нажатием кнопки.