Caixa de login e outros

Qual é minha questão:
Queria saber como posso estar colocando essa "caixa" de login no meu forum, como podem ver na imagem ->> https://i.imgur.com/7LBSW.png

Fórum aonde vi ->> http://www.mobitehk.com/


Medidas que eu tomei para corrigir o problema:
N/D

Links e imagens do meu problema:
https://i.imgur.com/7LBSW.png

Endereço do meu fórum:
http://mundotec.foruns.com.pt

Versão do meu fórum:
PUNBB

Com um pequeno código em HTML, vamos criar um efeito em um widget ao qual não será mais necessário usar-mos-ei o widget pré-definido de Login, podendo personalizar quando desejado.

--> Tutoriais <--
Widget "Login" personalizado

1º - Gestão dos widgets do fórum:
Vamos criar um widget personalizado em nosso fórum e adicionar o código, como criar de forma correcta um widget, tendo em conta todas as suas opções:

Nome do widget - Terá de colocar um título para o widget, de forma a poder identifica-lo na lista dos widgets pessoais do Painel de Controle.

Utilizar um table type - Caso opte pale opção "Sim" o widget terá a moldura padrão dos restantes widgets, caso opte por "Não" o conteúdo não estará rodeado por qualquer moldura.

Título do widget - Neste campo, terá de atribuir um título, o que será visualizado no seu fórum. Caso tenha marcado a opção "Não" na opção anterior, colocar ou não um título será indiferente.

Fonte do widget - Aqui deverá colocar o conteúdo do widget, poderá colocar variáveis mas não poderá colocar BBcode e sim HTML. Veremos nos pontos seguintes como poderá utilizar o editor HTML.

Salvar - Por fim, após colocar o conteúdo, terá de "Salvar" o seu widget personalizado.

2º - Código HTML necessário para reproduzir o efeito:
Agora, você poderá copiar e colar no nosso novo widget o código abaixo, personalizando os pontos desejados:

Código:

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

<label for="username">Nome da conta:</label></dt><dd><input type="text" tabindex="1" name="username" id="username" size="25" maxlength="40" value="" class="inputbox autowidth" /></dd></dl><dl><dt><label for="password">Senha:</label></dt><dd><input type="password" tabindex="2" id="password" name="password" size="25" maxlength="25" class="inputbox autowidth" />

<br></br><a href="/profile.forum?mode=sendpassword"><img src ="http://2img.net/i/fa/admin/icones/small_ico/configuration.png"/> Esqueceu a senha?</a></br><a href="/register"><img src ="http://2img.net/i/fa/admin/icones/small_ico/utilisateur.png"/>  Registrar-se</a><br></br>

<dd><input type="hidden" name="redirect" value="" /><input type="hidden" name="query" value="" /><input type="submit" name="login" tabindex="6" value="Entrar" class="button1" /></dd>

</form>

3º - Autorizações do widget:
Para deixar-mos o trabalho muito bem feito, vamos aplicar um outro efeito que o próprio widget já tem, que é as autorizações. Depois de criar e adicionar o widget a coluna de widgets do fórum, você vai editar as permissões de visualização dele, clicando no botão :


Deixe esse widget visível apenas aos Convidados, já que ele não terá utilidade nenhuma para os que já estiverem logados no fórum.

• Posso aplicar um efeito CSS?
  Pode. Basta você adicionar uma DIV ou uma SPAN contendo o atributo CLASS com o valor CSS. Por exemplo:

  <div class="plogin">CÓDIGO DO SEU WIDGET</div>

  
  
• Resultado:
  
  

Sim senhor, ele só modificou o tamanho da fonte.

Olá!

Aqui está o código usado:

Código:

<form action="/login" method="post"><p><label for="username"><strong>Username:</strong></label></p><p style="height:2em;valign:top;"><input type="text" name="username" id="username" size="15" maxlength="40" value="" class="inputbox autowidth" /></p><p><label for="password"><strong>Password:</strong></label></p><p style="height:2em;valign:top;"><input type="password" id="password" name="password" size="15" maxlength="25" class="inputbox autowidth" /></p><p align="center"><a href="/profile?mode=sendpassword" rel="nofollow">I forgot my password</a></p><p align="center"><input type="checkbox" name="autologin" id="autologin" tabindex="4" class="checkbox" checked="checked" /><label for="autologin"> Log on automatically</label></p><p align="center"><input type="submit" name="login" tabindex="6" value="Log in" class="button1" /></p></form>

Atenciosamente,
Shek

Olá assim o seu não ficou igual, porém consegui um ate melhor que fica do lado certo e posição certa escrito tudo certo só falta a "CAIXA", sabe acho que deve ser algum CSS que cria aquele modelo, não sei bem.

Aqui esta codigo que peguei.

Código:

<td><div align="right" id="panel"><div class="panel_bar"><b>Logged as <strong>Matfwar</strong>  <img src="http://i49.servimg.com/u/f49/16/89/33/06/online10.png">  </b></div><b> <div class="panel_bar"><a href="/profile?mode=editprofile">Profile  <img src="http://hitskin.com/themes/17/89/80/i_icon_mini_profile.png">  </a> - <a href="/login?logout">Log out  <img src="http://hitskin.com/themes/17/89/80/i_icon_mini_logout.png">  </a></div><form method="get" action="/search.forum" id="search" class="search_box"><table cellspacing="0" cellpadding="0"><tbody><tr><td><input type="text" name="search_keywords" id="srch_input" value="Search Mobitehk..." onfocus="if(this.value=='Search Mobitehk...') this.value='';" onblur="if(this.value=='') this.value='Search Mobitehk...';"></td><td><input id="srch_button" value=" " type="submit"></td> </tr></tbody></table></form>  </b></div><b><br></b></td>

Até mais.

Olá Mine!

Desculpe eu! Pensei que estava dizendo a caixa de Login. O código creio eu é esse:

Código:

<style>.cpr {
margin-left: 0px;
float:  left;}

.srch {
margin-right: 0px;
float: right;}

#panel {
background: transparent url(http://i49.servimg.com/u/f49/15/59/36/28/contai10.png) top left repeat;
width: 240px;
color: #fff;
margin: auto auto;
padding: 6px;
text-align: left;
border: 1px solid #333;
float: right;
margin: 10px 10px 0 0;
margin-top: 10px;
margin-bottom: 10px;
font-size: 11px;
-moz-border-radius: 0.5em 0.5em 0.5em 0.5em;
border-radius: 0.5em 0.5em 0.5em 0.5em;}

#panel .panel_bar {
background: transparent url(http://i49.servimg.com/u/f49/15/59/36/28/panel_10.png) top left repeat;
color: #fff;
padding: 4px;
border: 1px solid #404040;
margin: 2px;
-moz-border-radius: 0.3em 0.3em 0.3em 0.3em;
border-radius: 0.3em 0.3em 0.3em 0.3em;}

#panel .links {
margin: 0;
float: right;}

#panel a {
color: #fff;
text-decoration: none;}

#panel img.tools {
margin: 2px;}

/*SEARCH BOX----------------------------------*/

.search_box #srch_input{
border: 1px solid #404040;
height: 28px;
width: 169px;
color: #fff;
font-weight: bold;
text-shadow: 1px 1px 0 black;
background: transparent url(http://i49.servimg.com/u/f49/15/59/36/28/panel_10.png) top left repeat;
color: #fff;
padding: 8px;
margin: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 black;

-moz-border-radius: 0.3em 0.3em 0.3em 0.3em;
border-radius: 0.3em 0.3em 0.3em 0.3em;}







.search_box #srch_button{
display: block;
width: 50px;
height: 50px;
border: 0;
background: url('http://i48.servimg.com/u/f48/16/98/34/40/button10.png') bottom;
text-indent: -99999px;
}


.search_box #srch_button:hover {
background-position: 0 0;
}</style><td><div align="right" id="panel"><div class="panel_bar"><b>Logged as <strong>Matfwar</strong>  <img src="http://i49.servimg.com/u/f49/16/89/33/06/online10.png">  </b></div><b> <div class="panel_bar"><a href="/profile?mode=editprofile">Profile  <img src="http://hitskin.com/themes/17/89/80/i_icon_mini_profile.png">  </a> - <a href="/login?logout">Log out  <img src="http://hitskin.com/themes/17/89/80/i_icon_mini_logout.png">  </a></div><form method="get" action="/search.forum" id="search" class="search_box"><table cellspacing="0" cellpadding="0"><tr><td><input type="text" name="search_keywords" id="srch_input" value="Search Mobitehk..." onfocus="if(this.value=='Search Mobitehk...') this.value='';" onblur="if(this.value=='') this.value='Search Mobitehk...';"></td><td><input id="srch_button" value=" " type="submit"></td> </tr></table></form>  </b></div><b><br></b></td>

Novamente, peço-lhes desculpas pelo erro.

Atenciosamente,
Shek

Que parte seria aquela? Você mudou algo no código? Leia o conteúdo do seguinte tópico: https://ajuda.forumeiros.com/t56964-tutorial-caixa-de-login-fixa-no-forum?highlight=Caixa+de+login

Atenciosamente,
Shek

Olá!

Isso é o famoso jogo de variáveis.
Welcome, Guest!: Ele usa a variável USERNAME : https://ajuda.forumeiros.com/t9204-
Log in - Create account: Neste caso, creio que seja algo relaciona a autorização, porque não existe vairável para tal efeito ao não ser em Invision.

Então amigo, ele deve usar um widget personalizado para um, e outro personalizado com o efeito de Logado.

Exato!

Então muito obrigado Shek ;D

Resolvido!