Rpg Maker BRasil
RPG Maker Brasil - RMBR

Seja Bem vindo ao Forúm! Faça seu cadastro e desfrute sobre o mundo do RPG Maker!
P.S.: PARA MELHOR VIZUALIZAÇÃO DO FORUM SEM BUGS, RECOMENDO QUE USEM O MOZILLA FIREFOX OU O GOOGLE CHROME!
Rpg Maker BRasil

Evoluindo cada vez mais!


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

HenRyqUéè

avatar
Administrador
Avaliador
Helper


Menu de conexão igual do Facebook

Nesse tutorial estarei ensinando como criar efeito igual Menu de conexão do Facebook.

[Você precisa estar registrado e conectado para ver esta imagem.][Você precisa estar registrado e conectado para ver esta imagem.][Você precisa estar registrado e conectado para ver esta imagem.]

1º - Adicionar

[Você precisa estar registrado e conectado para ver esta imagem.]
Código:
/*menu topbar*/
    .devsitePage{margin:0;min-width:1000px}
    .devsitePage .clearhb{clear:both}
    .devsitePage .menuhb{background:#254b82;font-weight:bold;padding-top:2px;font-family:"Lucida Grande", Tahoma, Verdana, Arial, sans-serif;font-size: 11px;}
    .devsitePage .menuhb .contenthb{background:#325c99;border:1px solid #1a3c6c;border-bottom:0;margin:0 auto;padding:0;width:1000px;}
    .devsitePage .menuhb,
    .devsitePage .menuhb a{color:#fff;cursor:pointer;-moz-outline-style:none;text-decoration:none;}
    .devsitePage .menuhb a.logo{border-right:0px solid #1a3c6c;margin-right:10px;padding:10px 20px 14px;line-height:0.5;}
    .devsitePage .menuhb a.logo img{width:67px;height:26px}
    .devsitePage .menuhb a.logo,
    .devsitePage .menuhb a.l{display:block;float:left}
    .devsitePage .menuhb a.l{line-height:29px;padding:2px 11px 2px}
    .devsitePage .menuhb a.l:hover, .devsitePage .menuhb a.logo:hover{background:#1a3c6c;text-decoration:none}
    .devsitePage .menuhb .searchhb{float:left;padding:5px 20px 5px 20px;width:280px;}
    .devsitePage .menu .inputtext{border:0;padding:5px 4px;}
    .devsitePage .menuhb{position:fixed;width:100%;z-index:100}
    .devsitePage #contenthb{width:auto;padding:0;margin:0}
    /*body{overflow-y:scroll;margin:0}*/
    .devsitePage .bodyhb .contenthb{margin:auto;max-width:1000px}
    .devsitePage .bodyhb > .contenthb{background:#fff;border:1px solid #d9d9d9;border-top:0;-moz-box-shadow:#ddd 0 1px 1px;padding:41.5px 0px 0px}
    /*menu topbar*/
 
    .logo-image{-webkit-border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.07);background-color:#fff;border:1px solid #97A4C2;clear:right;float:left;height:160px;margin-left:23px;margin-top:-121px;padding:3px;width:160px}
    /* SinhVienVT.Net Custom Login */
    #container12 {
        float:right;
        margin-right: 1px;
          margin-top: -6px;
        position: relative;
    }
    a img {
        border-width:0;
    }
    #topnav {
        padding:10px 0px 12px;
        font-size:12px;
        line-height:24px;
        text-align:right;
    }
    #topnav a.signin {
    background: #325c99;
    padding: 8px 10px 10px;
    text-decoration: none;
    font-weight: bold;
    color: white;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    }
    #topnav a.signin:hover {
    background: :#000966;
    }
    #topnav a.signin, #topnav a.signin:hover {
    }
    a.signin {
        position:relative;
        margin-left:3px;
    }
    a.signin span {
    background-image: url("http://i41.servimg.com/u/f41/17/41/76/40/toggle10.png");
    background-repeat: no-repeat;
    background-position: 100% 50%;
    padding: 4px 16px 6px 0;
    }
    #topnav a.register {
    background: #325c99;
    padding: 8px 10px 10px;
    text-decoration: none;
    font-weight: bold;
    color: white;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    }
    #topnav a.register:hover {
    background: :#000966;
    }
    #topnav a.register, #topnav a.register:hover {
    }
    a.register {
        position:relative;
        margin-left:0px;
    }
    a.register span {
        background-image:url("http://i41.servimg.com/u/f41/17/41/76/40/regist10.png");
        background-repeat:no-repeat;
        background-position:100% 50%;
        padding:4px 16px 6px 0;
    }
 

    #topnav a.menu-open {
        background:#0d3156!important;
        color:#fff!important;
        outline:none;
    }
    #small_signup {
        display:inline;
        float:none;
        line-height:23px;
        margin:25px 0 0;
        width:170px;
    }
    a.signin.menu-open span {
        background-image:url("http://i41.servimg.com/u/f41/17/41/76/40/toggle11.png");
        color:#fff;
    }
    #signin_menu {
        -moz-border-radius-topleft:5px;
        -moz-border-radius-bottomleft:5px;
        -moz-border-radius-bottomright:5px;
        -webkit-border-top-left-radius:5px;
        -webkit-border-bottom-left-radius:5px;
        -webkit-border-bottom-right-radius:5px;
        display:none;
      /* background-color:#0d3156; */
        background:url(http://i41.servimg.com/u/f41/17/41/76/40/login_10.png) #0d3156 repeat-x;
        position:absolute;
        width:210px;
        z-index:100;
        border:1px transparent;
        text-align:left;
        padding:12px;
        top: 24.5px;
        right: 0px;
        margin-top:5px;
        margin-right: 0px;
        *margin-right: -1px;
        color:#fff;
        font-size:12px;
    }
    #signin_menu input[type=text], #signin_menu input[type=password] {
        display:block;
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        border:1px solid #0d3156;
        background:url(http://i41.servimg.com/u/f41/17/41/76/40/field_10.png) repeat-x;
        font-size:13px;
        margin:0 0 5px;
        padding:5px;
        width:203px;
    }
    #signin_menu p {
        margin:0;
    }
    #signin_menu a {
        color:#fff;
    }
    #signin_menu label {
        font-weight:normal;
    }
    #signin_menu p.remember {
        padding:10px 0;
    }
    #signin_menu p.forgot, #signin_menu p.complete {
        clear:both;
        margin:5px 0;
    }
    #signin_menu p a {
        color:#fff!important;
    }
    #signin_menu p a:hover {
        text-decoration:underline;
    }
    #signin_submit {
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        background-color:#0d3156;
        border:1px solid #fff;
        color:#fff;
        text-shadow:0 -1px 0 #39d;
        padding:4px 10px 5px;
        font-size:11px;
        margin:0 5px 0 0;
        font-weight:bold;
    }
    #signin_submit::-moz-focus-inner {
    padding:0;
    border:0;
    }
    #signin_submit:hover, #signin_submit:focus {
        background-position:0 -5px;
        cursor:pointer;
    }

2º - Adicionar

[Você precisa estar registrado e conectado para ver esta imagem.]

Overall Footer Begin
Código:
<script type="text/javascript">            $(document).ready(function() {
 
                $(".signin").click(function(e) {
                    e.preventDefault();
                    $("fieldset#signin_menu").toggle();
                    $(".signin").toggleClass("menu-open");
                });
 

                $("fieldset#signin_menu").mouseup(function() {
                    return false
                });
                $(document).mouseup(function(e) {
                    if($(e.target).parent("a.signin").length==0) {
                        $(".signin").removeClass("menu-open");
                        $("fieldset#signin_menu").hide();
                    }
                });         
 

            });
    </script>

Substituía todo o conteúdo da pagina pelo código acima.


Overall Header
Código:
<div class="devsitePage">      <div class="menuhb">    <div class="contenthb">    <a class="logo" href="/forum"><legend style="color: white; font-size: 18px; font-weight: bold; font-variant: small-caps; font-family: Trebuchet MS; text-shadow: 5px 5px 5px rgb(0, 0, 0);margin-top: 6px;center;">Nome do seu Fórum </legend>            </a>     
      <!-- BEGIN switch_user_logged_out -->
 
        <div id="container12">      <div id="topnav" class="topnav">Bem Vindo Convidado !<a href="login" class="signin" style=""><span>Login:</span></a>      <a href="/register" class="register" style=""><span>|Registrar-se</span></a> </div>      <fieldset id="signin_menu" style="display: none; ">

                                <form action="/login?redirect=/" method="post" name="form_login" id="signin">

          <label for="username">Login:</label>      <input class="field" id="log" type="text" size="10" name="username">            <label for="password">Senha:</label>    <input class="field" id="pwd" type="password" size="10" name="password">      <strong style="color: write;"><input id="signin_submit" class="bt_login" type="submit" name="login" value="LOGAR"></strong>      <label>      <input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever">  Conexão automática</label>          <p class="forgot"> <a href="profile?mode=sendpassword">Esqueceu a senha?</a> </p>
                    <div class="clear"></div>      </form>      <script type="text/javascript">//<![CDATA[
    $(function(){$('#signin').attr('action','/login?redirect='+this.location.pathname);});//]]></script>

      </fieldset>    </div>
     
        <!-- END switch_user_logged_out -->
     
      <!-- BEGIN switch_user_logged_in -->
      <div style="font-size: 12px; line-height: normal;padding:5px;float:right;width:350px">{LOGGED_AS}<br>{LAST_VISIT_DATE}</br><span style="float: right;padding-right:5px"></span></div>    <!-- END switch_user_logged_in -->
 

      <div class="searchhb">    <!-- Google CSE code begins -->
        <form method="get" action="/search?search_where=11" id="search">      <input type="text" name="search_keywords" size="35" id="keywords" maxlength="158" onblur="if (this.value == '') this.value = 'Buscar...';" onfocus="if (this.value == 'Buscar...') this.value = '';" value="Buscar..."> <a class="icon" id="dosearch" href="/search" btip="Pesquisa avançada" data-original-title=""><img src="http://i41.servimg.com/u/f41/17/41/76/40/search10.png" alt=""></a>
          </form>     
     
    <!-- Google CSE Code ends -->
    </div>    <div class="clearhb"></div>    </div>    </div>       
        <div class="bodyhb" id="devsiteHomeBody">          <div class="contenthb">      <div class="above_body"> <!-- closing tag is in template navbar -->

Adicione o código depois dessa linha:

Código:
</head>
Procure a linha que contenha "Nome do seu Fórum" e coloque o titulo de seu fórum


Resultado

[Você precisa estar registrado e conectado para ver esta imagem.]



Desenvolvido por clubteen9x| © clubteen9x
Editado e Postado por © [Você precisa estar registrado e conectado para ver este link.] | HenRyqUéè

http://rmbr.forumeiros.com/

Igor_Mathias

avatar
Iniciante
Bom

-Naruto

avatar
Administrador
Publicitário
Helper
Olá Caro membro Não Faça Flod, Comente Por Exemplo "Comentando para ver o link" Algo assim, nada a menos de 10 Palavras.

-Naruto

avatar
Administrador
Publicitário
Helper
Tutorial Aceito

Movido.

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum