BestWeb by While

18.12.15 16:42

Sliw

Administrador

Mensagens : 441
Pontos : 33201
Reputação : 120

Informações:
Autor: Cepheus
Funcionalidade: PunBB

Acesse:

Painel de Controle ☛ Visualização ☛ Templates ☛ Geral

Agora abra o overall_header e no final adicione esse codigo:

Código::  <div id="document_modal" class="modal" style="position: fixed; z-index: 10000; opacity: 0.4; display: none; background-color: transparent;"></div> <div id="sign_in_popup_popup" style="position: fixed; top: 280px; z-index: 10001; margin-top: -125px; left: 50%; margin-left: -290px;display:none" class="popupWrapper"> <form action="/login.forum" class="form-login" method="post"><div class="user-icon"> <img src="http://i.imgur.com/W6DCdwL.png" width="35" height="40" /> </div><div class="title-login">Membro Login</div><div class="inputs"><input name="username" type="text" required placeholder="Username" /><input name="password" type="password" required placeholder="Password" /><div class="button-login"><input name="login" type="submit" value="Entrar"></div></div><div class="link-e"><a href="profile?mode=sendpassword">Esqueceu a senha?</a></div><div class="clear"></div><br></form> <div id="sign_in_popup_close" class="popupClose clickable"><img alt="x" src="http://i78.servimg.com/u/f78/18/17/62/92/close_10.png" onclick="show_popup('sign_in_popup_popup');"></div></div> <script type="text/javascript">//<![CDATA[ $(document).ready(function() {$('#user_navigation #sign_in').attr('href', '#').attr('onclick', "show_popup('sign_in_popup_popup');");/*$('#user_navigation #sign_in').click(function() {sign_in_popup();});*/});function show_popup(id) {var $oObj = $('#'+id);if ($oObj.css('display') == 'none') {$oObj.add('#document_modal').fadeIn('slow');$("input:text:eq(0):visible").focus();} else {$oObj.add('#document_modal').fadeOut('slow');} }//]]></script> <style type="text/css"> @font-face { font-family:Lato-Regular; font-style:normal; font-weight:400; src:local('Lato Regular'), local(Lato-Regular), url(http://fonts.gstatic.com/s/lato/v8/1YwB1sO8YE1Lyjf12WNiUA.woff2) format(woff2), url(http://fonts.gstatic.com/s/lato/v8/9k-RPmcnxYEPm8CNFsH2gg.woff) format(woff); } @font-face { font-family: 'Lato-Light'; font-style: normal; font-weight: 300; src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v8/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2'), url(http://fonts.gstatic.com/s/lato/v8/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff'); } .clear { clear:both; } input:focus, a:focus { outline: none; } /** The wrapper that will contain our two forms **/ .form-login {background: #ffffff;right: 0px;margin: 0px auto;width:330px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background-color:#ececec;} .title-login { margin-top:-25px; font-family:Lato-Light, Arial, Helvetica, sans-serif; font-size:34px; color:#333; text-align:center; }.user-icon { position:relative; width:100px; height:100px; background-color:#34d5db; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; text-align:center; top:-50px; margin:0 auto; } .user-icon img { margin-top:25px; } /* inputs */ .inputs {margin-top:10px; } .inputs input[type="text"], .inputs [type="password"], .inputs [type="email"] {width:270px;height:40px;background:#d3d3d3;font-size:16px;margin-top:15px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;border:0;margin-left:20px;padding:0px 10px; color:#333;font-family:"Lato-Regular", Arial, Helvetica, sans-serif;text-align:center; font-weight:700;} /* info box */ .link-1 {margin-top:15px;margin-left:20px;float:left;color:#b8b8b8;} input[type="checkbox"] {display:none;} input[type="checkbox"] + label {font-size:13px;} input[type="checkbox"] + label span {display:inline-block;width:22px;height:22px;vertical-align:middle;background:url(http://i39.servimg.com/u/f39/11/55/08/10/check_10.png) -1px top no-repeat;background-position:-0px 0px; cursor:pointer;} input[type="checkbox"]:checked + label span {background:url(http://i39.servimg.com/u/f39/11/55/08/10/check_10.png) -23px top no-repeat;} .link-2 {float:right;margin-top:15px;margin-right:20px;} .link-2 a, .link-2 a:hover {color:#b8b8b8;} .link-2 a:hover {text-decoration:none;} .link-e,.link-e a { margin-top:20px; color:#118ede; font-family:Lato-Regular, Arial, Helvetica, sans-serif; font-size:18px; text-decoration:none; text-align:center; } .link-e a:hover { color:#0a9fff; } /* send button */ .button-login input[type="submit"] {width:290px;height:50px;margin-left:20px;margin-top:25px;font-size:18px;font-weight:bold;text-transform:uppercase;outline: none;position: relative;cursor: pointer;border-radius: 5px;color: #fff;border:0;box-shadow:inset 0 1px #ba3c30,inset 1px 0 #ba3c30,inset -1px 0 #ba3c30,inset 0 -1px #ba3c30,0 2px #ba3c30,0 3px #ba3c30,0 4px 2px rgba(0,0,0,0.0);background: #e84c3d;} .button-login input[type="submit"]:hover { opacity:0.9; } .button-login input[type="submit"]:active {top: 3px;background: #e84c3d;box-shadow: inset 0 1px 2px #ba3c30; } </style>

Você salva e publica.

Para que a caixa seja aberta, você precisará adicionar o seguinte link no seu menu de navegação:

Código:: <a onclick="show_popup('sign_in_popup_popup');" draggable="false" class="mainmenu" href="#">Login</a>

Resultado:

Caixa de Login Flat login Shadow Flat-login-register-ui

Também deixo o PSD para caso queira modificar algo... http://www.graphicsfuel.com/wp-content/uploads/2013/10/flat-login-register-ui-psd.zip

OBS: Link é direto ou seja se clicar vai baixar automaticamente o PSD

18.12.15 16:48

Sliw

Administrador

Mensagens : 441
Pontos : 33201
Reputação : 120

Tutorial Aceito

BestWeb by While

Caixa de Login Flat login Shadow

1 Caixa de Login Flat login Shadow 18.12.15 16:42

Sliw

2 Re: Caixa de Login Flat login Shadow 18.12.15 16:48

Sliw