Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Iaí pessoal do Imasters,
eu estou fazendo um site de ragnarok no qual quero colocar o login no próprio site.
Só que o formulário que tenho é muito simples e eu gostaria de mudar o estilo dele.
Alguém poderia me ajudar?
Ele é assim:
/applications/core/interface/imageproxy/imageproxy.php?img=http://conqueronlinebrasil.com/upload/images/813561form2.jpg&key=59e2b314713be809be059a1949bcfb96d5b11badc284843d86d50c89d14fd42c" alt="Imagem Postada" />
Quero que fique assim:
/applications/core/interface/imageproxy/imageproxy.php?img=http://conqueronlinebrasil.com/upload/images/714905form.jpg&key=f4b98118782ad8c5d492d87d8bbfab524e34ad8a0328522a7ebeca9130918808" alt="Imagem Postada" />
login_panel.php
<?PHP
@session_start();
@ob_start();
if(!empty($_COOKIE['user_login'])){
echo"<script>Load('index.php?go=logado', 'logando', 'get');</script>";
}
?>
<style type="text/css"> font-size: 11px;
font-weight: bold;
color: #F1A87C;
text-align: center;
}</style>
<div id="logando">
<table width="192" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/menu_login_top.png" width="196" height="41" alt="Login" /></td>
</tr>
<tr>
<td background="images/menu_login_center.png"><form name="Login" id="Login" style="margin: 0pt; font-family: Verdana, Geneva, sans-serif; font-size: 10px; color: #666;" method="post" onsubmit="Load('index.php?go=login&logar=1', 'logando', 'POST', BuscaElementosForm('Login'));">
<table width="142" border="0" align="center" cellpadding="1" cellspacing="3">
<tr>
<td width="37">Login:</td>
<td width="92"><input onBlur="if(this.value=='') this.value='Login';" onFocus="if(this.value=='Login') this.value='';" name="user_login" maxlength="20" size="12" id="user_login" value="Login" type="text"></td>
</tr>
<tr>
<td>Senha:</td>
<td><input onBlur="if(this.value=='') this.value='senha';" onFocus="if(this.value=='senha') this.value='';" maxlength="20" size="12" name="user_pass" id="user_pass" value="senha" type="password"></td>
</tr>
<tr>
<td> </td>
<td><input value="Logar" onclick="Load('index.php?go=login&logar=1', 'logando', 'POST', BuscaElementosForm('Login'));" type="submit"></td>
</tr>
</table>
</form></td>
</tr>
<tr>
<td><img src="images/menu_login_baixo.png" width="196" height="13" alt="Login" /></td>
</tr>
</table>
</div>Valeu pessoal, estou aguardando.
>
Vê se ajuda.
http://imasters.com.br/artigo/2591/css/posicionando_e_estilizando_um_formulario_sem_uso_de_tabelas/
Não. :S
Tipo, eu gostaria de modificar esses campos padrões por campos personalizados, ou seja, uma imagem feita por mim.
Obrigado assim mesmo.
Você pode colocar as imagens como background das inputs (campos).
No botão tem alternativa do background ou substitui-lo por imagem (input type="image").
Não dou suporte na área de webstandards para quem usa tabelas. seguindo a linha de pensamento do Evandro aeushsua
cria uma classe no css, e coloca no botão submit, e inserir como background:url('../imagem.jpg') top no-repeat; ou usa imagefield.
<form action="login.php" method="post" id="login">
<dl>
<dt><label for="login_usuario">Usuário</label></dt>
<dd><input type="text" name="usuario" id="login_usuario" tabindex="1"></dd>
<dt><label for="login_senha">Senha</label></dt>
<dd><input type="password" name="senha" id="senha_usuario" tabindex="2"></dd>
</dl>
<p>
<a href="newuser.php" title="Ainda não é cadastrado? Clique!" tabindex="4">Registrar</a>
<a href="remember.php" title="Clique para recuperar a senha." tabindex="5">Esqueci minha senha</a>
</p>
<button type="submit" tabindex="3">Logar</button>
</form>#login dt, #login dd {
background: #000;
color: #fff;
float: left;
margin: 3px;
}#login dt {
display: block;
width: 100px;
}#login dd {
clear: both;
}#login p, #login button {
float: left;
width: 50%;
}#login p a {
display: block;
}#login p button {
background: #ff0;
border: 1px solid #000;
color: #000;
text-transform: uppercase;
}você usa algum tipo de banco de dados, para localizar o membro? Quero fazer esse sistema de login na minha pág, web tanbém
Sobre sua dúvida: desculpa aew, não posso ajudar, tentei por os elementos border e color aew, dentro da tag do td, mas não dá:
<tr>
<td>Senha:</td>
<td><input onblur="if(this.value=='') this.value='senha';" onfocus="if(this.value=='senha') this.value='';" maxlength="20" size="12" name="user_pass" id="user_pass" value="senha" type="password"></td>
</tr>valeu pessoal, to conseguindo fazer! :D
Só que não ta logando. Aí vai o código
formulario.php
>
<?PHP
@session_start();
@ob_start();
if(!empty($_COOKIE['user_login'])){
echo"<script>Load('index.php?go=logado', 'logando', 'get');</script>";
}
?>
<style type="text/css">/----------Text Styles----------/
.ws6 {font-size: 8px;}
.ws7 {font-size: 9.3px;}
.ws8 {font-size: 11px;}
.ws9 {font-size: 12px;}
.ws10 {font-size: 13px;}
.ws11 {font-size: 15px;}
.ws12 {font-size: 16px;}
.ws14 {font-size: 19px;}
.ws16 {font-size: 21px;}
.ws18 {font-size: 24px;}
.ws20 {font-size: 27px;}
.ws22 {font-size: 29px;}
.ws24 {font-size: 32px;}
.ws26 {font-size: 35px;}
.ws28 {font-size: 37px;}
.ws36 {font-size: 48px;}
.ws48 {font-size: 64px;}
.ws72 {font-size: 96px;}
.wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;}
/----------Para Styles----------/
DIV,UL,OL / Left /
{
margin-top: 0px;
margin-bottom: 0px;
}
</style>
<style type="text/css">a.registrar:link{color:#333333;text-decoration: none;}
a.registrar:visited{color:#333333;text-decoration: none;}
a.registrar:hover{color:#333333;text-decoration: none underline;}
a.registrar:active{color:#333333;text-decoration: none;}
a.recuperar:link{color:#FF9900;text-decoration: none;}
a.recuperar:visited{color:#FF9900;text-decoration: none;}
a.recuperar:hover{color:#FF9900;text-decoration: none underline;}
a.recuperar:active{color:#FF9900;text-decoration: none;}
</style>
</head>
<body>
<div id="image1" style="position:absolute; overflow:hidden; left:0px; top:0px; width:265px; height:40px; z-index:0"><img src="images/paste111.jpg" alt="" title="" border=0 width=265 height=40></div>
<div id="image2" style="position:absolute; overflow:hidden; left:0px; top:43px; width:265px; height:40px; z-index:1"><img src="images/paste111.jpg" alt="" title="" border=0 width=265 height=40></div>
<div id="text1" style="position:absolute; overflow:hidden; left:9px; top:5px; width:84px; height:31px; z-index:2">
<div class="wpmd">
<div><font color="#FFFFFF" face="Verdana" class="ws16">Login:</font></div>
</div></div>
<div id="text2" style="position:absolute; overflow:hidden; left:9px; top:48px; width:84px; height:31px; z-index:3">
<div class="wpmd">
<div><font color="#FFFFFF" face="Verdana" class="ws16">Senha:</font></div>
</div></div>
<form name="login" method="POST" enctype="text/plain" style="margin:0px">
<input onBlur="if(this.value=='') this.value='Login';" onFocus="if(this.value=='Login') this.value='';" name="user_login" maxlength="20" size="12" id="user_login" value="Login" type="text" style="position:absolute; font-size:20px; background-image:url(images/bg.jpg); color:#888; width:160px; left:100px; top:4px; z-index:5; height: 32px; border:0;">
<input onBlur="if(this.value=='') this.value='senha';" onFocus="if(this.value=='senha') this.value='';" maxlength="20" class="campos" size="12" name="user_pass" id="user_pass" value="senha"type="password" style="position:absolute; font-size:20px; color:#888; width:160px; left:101px; top:47px; z-index:6; height: 32; border:0; background-image:url(images/bg.jpg);">
<input type=image src="images/logar.jpg" width="130" height="54" value=" " onClick="Load('index.php?go=login&logar=1', 'logando', 'POST', BuscaElementosForm('Login'));" type="submit" style="position:absolute; left:135px; top:87px; z-index:7; width: 130; height: 54;">
</form>
<div id="text3" style="position:absolute; overflow:hidden; left:1px; top:94px; width:132px; height:36px; z-index:8">
<div class="wpmd">
<div><strong><font color="#333333" face="Verdana">Registrar</font></strong></div>
<div><strong><font color="#FF9900" face="Verdana">Recuperar senha</font></strong></div>
</div>
</div>
</body>
</html>se você quer seu formulário identico ao da imagem então você tem que ter as duas colunas de cada linha (login e senha) do mesmo tamanho. pode começar fazendo isso na linha do seu campo login e depois repetir o processo na linha da senha:
<tr style="height:39px; padding:0; margin:0">
estilizando a td com fundo preto e o tamanho da fonte com a identificação do login
<td style="font-size:XXpx; color:#fff; background-color:#000"><label for="user_login"> Login:</label></td>
e o estilo pra coluna do input e para o próprio input
<td style="background-color:#000"><input style="height:31px; width:161px; background-color:#515151; border:none; margin:4px 0 4px 4px; padding:0; color:#fff" onblur="if(this.value=='') this.value='Login';" onfocus="if(this.value=='Login') this.value='';" name="user_login" maxlength="20" id="user_login" value="Login" type="text"></td>
fica faltando uns ajustes de margem ou padding para as tds. Além disso, criar uma classe com esses estilos seria mais profissional do que colocar o estilo direto na tag.
Na teoria isto deve funcionar.
Legal. Esse código que citei acima, fiz de um jeito que facilitou eu mecher com a estilização xD
Criei um formulário num programinha e depois fui mechendo só que quando vai fazer login, não loga. Volta para a página denovo.
Aí o link dele: http://street-ro.net/newpanel/NewPanel/formulario.php
Quem quiser testar, só é ir nesse link e se cadastrar: http://street-ro.net/cp
Maurício, isso já é um problema com programação. Abra um novo tópico na área de PHP.
Vê se ajuda.
http://imasters.com.br/artigo/2591/css/posicionando_e_estilizando_um_formulario_sem_uso_de_tabelas/