Como ter uma caixa desta

Detalhes da dúvida

Versão do fórum : phpBB3
Nível de acesso : Administrador
Navegador usado : Google Chrome
Imagem :

Imagem da minha dúvida:

Membros afetados : Todos os membros do fórum
Problema começou : HOJE
Endereço do fórum : http://clubedascalopsitas.forumeiros.com/

Descrição do problema

Uma caixa como usada na imagem de exemplo e vi neste Site :

http://www.universodoscanarios.com/


Obrigado .....

Olá,

Senhor peço que esteja lendo está faq, também peço que olhe este tutorial caso o senhor queira personaliza-lo.


Atenciosamente.

Olá,

crie um widgets com o seguinte código:

Código:

<div id="show">

    <div id="fade">

    </div>

    <div class="popup_block">

        <div class="popup">
            <a href="#" id="popupclose"><img src="http://oi60.tinypic.com/vewsb9.jpg" class="cntrl" title="Fechar"></a>
            <div align="center">
                <a id="popupclose" href="#"><img title="" class="cntrl" src=""></a>
                <h3>
                       <strong>Bem Vindo amigo!</strong>       
            </h3>

                <p>
                    Para poder utilizar todos os atributos deste fórum, será necessário que você registre-se em nosso fórum.
                    <br>
                    <br>O cadastro é gratuito e leva pouco tempo para ser preenchido.
                    <br>Durante o cadastro, será solicitado uma conta de e-mail válido, um login(nome) e uma senha. Todos os campos deveram ser preenchidos, para ter a tua conta!
                    <br>
                </p>
                <br>
                <br>
                <center>
                    <a style="text-decoration: none;color: black;font-weight: bold;font-family: cursive;font-size: 25px;" title="Cadastre-se" href="/register">Registre-se Agora!</a>
                </center>

                <p>

                </p>
                <br>
                <form id="login" name="form_login" method="post" action="/login">

                    <p style="text-align: left;text-decoration: none;position: relative;top: -10%;margin-left: 4%;">
                        <a href="/login" style="text-decoration: none">Já sou cadrastrado!</a>
                    </p>

                    <table style="width: 100%;" cellpadding="0" cellspacing="0" border="0">


                        <tbody>
                            <tr>

                                <td style="width: 100%;" align="right">

                                    <div align="center">
                                        <strong>Usuário:</strong>
                                        <input tabindex="1" size="15" name="username" class="input_text" type="text" id="ips_username"> <strong>Senha:</strong>
                                        <input tabindex="2" size="15" name="password" class="input_text" type="password" id="ips_password">
                                        <input value="Logar" class="input_submit" name="login" type="submit">
                                    </div>

                                </td>

                            </tr>

                            <tr>

                                <td>

                                </td>

                            </tr>

                            <tr>

                            </tr>


                        </tbody>
                    </table>

                </form>

            </div>

        </div>

    </div>
    <script type="text/javascript">
        jQuery('#popupclose').click(function() {
            jQuery('#show').fadeOut('fast');
            return false;
        });
        if (location.pathname == '/login') {
            jQuery('#show').css('display', 'none');
        }
        if (location.pathname == '/register') {
            jQuery('#show').css('display', 'none');
        }
    </script>
    <style type="text/css">
        #fade {
            background: #000;
            position: fixed;
            width: 100%;
            height: 100%;
            filter: alpha(opacity=80);
            opacity: .30;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
            /*--IE 8 Transparency--*/
           
            left: 0;
            top: 0;
            z-index: 10;
        }
       
        #show {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
       
        .popup_block {
            background: #8db5cc;
            padding: 10px 20px;
            border: 10px solid #fff;
            float: left;
            width: 480px;
            position: fixed;
            top: 20%;
            left: 50%;
            margin: 0 0 0 -250px;
            z-index: 100;
        }
       
        .popup_block .popup {
            float: left;
            width: 100%;
            background: #fff;
            margin: 10px 0;
            padding: 10px 0;
            border: 1px solid #bbb;
        }
       
        .popup h3 {
            margin: 0 0 20px;
            padding: 6px 11px;
            border-bottom: 1px solid #bbb;
            font-size: 1.5em;
            font-weight: normal;
        }
       
        .popup p {
            padding: 5px 10px;
            margin: 5px 0;
        }
       
        .popup img.cntrl {
            position: absolute;
            right: -20px;
            top: -20px;
        }
       
        .input_text {
            padding: 4px;
            border-width: 1px;
            border-style: solid;
            border-color: #848484 #C1C1C1 #E1E1E1 #C1C1C1;
            background: white;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            border-radius: 2px;
        }
       
        .input_submit {
            -moz-border-radius: 3px;
            -moz-box-shadow: inset 0 1px 0 0 #5c5c5c, 0 2px 3px rgba(0, 0, 0, 0.2);
            -webkit-border-radius: 3px;
            -webkit-box-shadow: inset 0 1px 0 0 #5C5C5C, 0 2px 3px rgba(0, 0, 0, 0.2);
            background: #212121 url(http://i78.servimg.com/u/f78/17/31/71/58/topic_10.png) repeat-x top;
            border-color: #212121;
            border-radius: 3px;
            border-style: solid;
            border-width: 1px;
            box-shadow: inset 0 1px 0 0 #5C5C5C, 0 2px 3px rgba(0, 0, 0, 0.2);
            color: white;
            cursor: pointer;
            padding: 4px 10px;
            text-decoration: none;
        }
    </style>
</div>

depois altere a permissão do widgets apenas para convidados até

Resultou .... valeu