Icone dentro da caixa de login e senha

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Icone dentro da caixa de login e senha

Mensagem por AlfaBeta. 16.07.13 2:59

Qual é minha questão:
Olá, pessoal.

Gostaria de saber se é possivel colocar os mesmo icones dentro da caixa de login e senha, como nesse tema:
http://pt.hitskin.com/buscar-um-tema/cmyk-br-design-198198.htm

Agradeço.

Endereço do meu fórum:
http://carrosegames.forumeiros.com

Versão do fórum:
PHPBB3


Última edição por AlfaBeta. em 16.07.13 5:03, editado 1 vez(es)
AlfaBeta.

AlfaBeta.
****

Membro desde : 12/07/2013
Mensagens : 208
Pontos : 342

http://carrosegames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Icone dentro da caixa de login e senha

Mensagem por Hizu 16.07.13 3:01

Saudações!

Aceda à sua "Folha de estilo CSS":
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de estilo CSS


Adicione este código no inicio ou no final da tua CSS:
Código:
#username {
background: #fff url(http://i.imgur.com/rzOu1.png)no-repeat;
border: 1px solid #DDD;
border-radius: 0!important;
cursor: text;
padding: 5px 5px 5px 20px;
top: 0;
}
#password {
background: #fff url(http://i.imgur.com/dlS8w.png)no-repeat;
border: 1px solid #DDD;
border-radius: 0!important;
cursor: text;
padding: 5px 5px 5px 20px;
top: 0;
}
.user_login_form input[type="text"] {
background: url(http://i.imgur.com/rzOu1.png)no-repeat;
padding-left: 20px;
}
.user_login_form input[type="password"] {
background: #fff url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}

Flecha ajudeiros Feito isto, salve!

Atenciosamente,
Hizu. Piscada
avatar

Hizu
****

Membro desde : 08/07/2013
Mensagens : 249
Pontos : 360

Ir para o topo Ir para baixo

Tópico resolvido Re: Icone dentro da caixa de login e senha

Mensagem por AlfaBeta. 16.07.13 3:21

Otimo. Embora os icones estão um pouco mais pra baixo, não centralizados.
Há como mexermos nisso?
AlfaBeta.

AlfaBeta.
****

Membro desde : 12/07/2013
Mensagens : 208
Pontos : 342

http://carrosegames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Icone dentro da caixa de login e senha

Mensagem por Hizu 16.07.13 3:26

Saudações!

Substitua o código anterior por este:
Código:
#username {
background: #fff url(http://i.imgur.com/rzOu1.png)no-repeat;
border: 1px solid #DDD;
border-radius: 0!important;
cursor: text;
padding: 5px 5px 5px 20px;
top: 0;
}
#password {
background: #fff url(http://i.imgur.com/dlS8w.png)no-repeat;
border: 1px solid #DDD;
border-radius: 0!important;
cursor: text;
padding: 5px 5px 5px 20px;
top: 0;
}
.user_login_form input[type="text"] {
background: url(http://i.imgur.com/rzOu1.png)no-repeat;
padding-left: 20px;
}
.user_login_form input[type="password"] {
background: #fff url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}
.user_login_form input[type="password"], .user_login_form input[type="text"] {
position: relative;
top: 7px;
}

Flecha ajudeiros Feito isto, salve!

Atenciosamente,
Hizu. Piscada
avatar

Hizu
****

Membro desde : 08/07/2013
Mensagens : 249
Pontos : 360

Ir para o topo Ir para baixo

Tópico resolvido Re: Icone dentro da caixa de login e senha

Mensagem por goodbye 16.07.13 3:28

Boa noite,

Caso não resolva, experimente este:

Código:
#username {
background: #fff url(http://i.imgur.com/rzOu1.png)no-repeat;
border: 1px solid #DDD;
border-radius: 0!important;
cursor: text;
padding: 4px;
top: 10px;
}
#password {
background: #fff url(http://i.imgur.com/dlS8w.png)no-repeat;
border: 1px solid #DDD;
border-radius: 0!important;
cursor: text;
padding: 4px;
top: 0;
}

Até mais!
avatar

goodbye
Hiper Membro

Membro desde : 07/06/2011
Mensagens : 3852
Pontos : 5081

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Icone dentro da caixa de login e senha

Mensagem por AlfaBeta. 16.07.13 3:50

Bem, deu na mesma os codigos. Apenas movem a caixa, não a imagem dentro.
AlfaBeta.

AlfaBeta.
****

Membro desde : 12/07/2013
Mensagens : 208
Pontos : 342

http://carrosegames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Icone dentro da caixa de login e senha

Mensagem por Hizu 16.07.13 3:55

Saudações!

Este funcionará!

Substitua o código atual por este:
Código:
.user_login_form input[type="password"], .user_login_form input[type="text"] {
border: 1px solid #DDD;
padding: 5px;
border-radius: 0px!important;
cursor: text;
top: 0px;
}
.user_login_form input[type="text"] {
background: url(http://i.imgur.com/rzOu1.png)no-repeat;
padding-left: 20px;
}
.user_login_form input[type="password"] {
background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}
#username {
border: 1px solid #DDD;
padding: 5px;
border-radius: 0px!important;
cursor: text;
top: 0px;
padding-left: 20px;
background: white url(http://i.imgur.com/rzOu1.png)no-repeat;
}
#password {
border: 1px solid #DDD;
padding: 5px;
border-radius: 0px!important;
cursor: text;
top: 0px;
background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}

Atenciosamente,
Hizu. Piscada
avatar

Hizu
****

Membro desde : 08/07/2013
Mensagens : 249
Pontos : 360

Ir para o topo Ir para baixo

Tópico resolvido Re: Icone dentro da caixa de login e senha

Mensagem por AlfaBeta. 16.07.13 4:01

Bacana. Realmente moveu o icone, mas foi mudada a caixa. Agora é quadrada. Gostaria que continuasse como estava..arredondada.
AlfaBeta.

AlfaBeta.
****

Membro desde : 12/07/2013
Mensagens : 208
Pontos : 342

http://carrosegames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Icone dentro da caixa de login e senha

Mensagem por Hizu 16.07.13 4:04

Saudações!

Neste caso, substitua o código atual por este:
Código:
.user_login_form input[type="password"], .user_login_form input[type="text"] {
border: 1px solid #DDD;
padding: 5px;
border-radius: 0px!important;
cursor: text;
top: 0px;
}
.user_login_form input[type="text"] {
background: url(http://i.imgur.com/rzOu1.png)no-repeat;
padding-left: 20px;
}
.user_login_form input[type="password"] {
background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}
#username {
border: 1px solid #DDD;
padding: 5px;
border-radius: 0px!important;
cursor: text;
top: 0px;
padding-left: 20px;
background: white url(http://i.imgur.com/rzOu1.png)no-repeat;
}
#password {
border: 1px solid #DDD;
padding: 5px;
border-radius: 0px!important;
cursor: text;
top: 0px;
background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}

Flecha ajudeiros Procure por "border-radius: 0px!important;" e aumente o valor "0" até ficar ao teu gosto!

Atenciosamente,
Hizu. Piscada
avatar

Hizu
****

Membro desde : 08/07/2013
Mensagens : 249
Pontos : 360

Ir para o topo Ir para baixo

Tópico resolvido Re: Icone dentro da caixa de login e senha

Mensagem por AlfaBeta. 16.07.13 4:11

Muito bom.
Mas a caixa agora está mais 'gorda'. Gostaria de manter a finura do original.

Segue o codigo:
Código:
.user_login_form input[type="password"], .user_login_form input[type="text"] {
border: 1px solid #DDD;
padding: 5px;
border-radius: 20px!important;
cursor: text;
top: 0px;
}
.user_login_form input[type="text"] {
background: url(http://i.imgur.com/rzOu1.png)no-repeat;
padding-left: 20px;
}
.user_login_form input[type="password"] {
background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}
#username {
border: 1px solid #DDD;
padding: 5px;
border-radius: 20px!important;
cursor: text;
top: 0px;
padding-left: 20px;
background: white url(http://i.imgur.com/rzOu1.png)no-repeat;
}
#password {
border: 1px solid #DDD;
padding: 5px;
border-radius: 20px!important;
cursor: text;
top: 0px;
background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}
AlfaBeta.

AlfaBeta.
****

Membro desde : 12/07/2013
Mensagens : 208
Pontos : 342

http://carrosegames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Icone dentro da caixa de login e senha

Mensagem por Hizu 16.07.13 4:14

Olá!

Basta substituir por um destes códigos abaixo:
Código:
.user_login_form input[type="password"], .user_login_form input[type="text"] {
border: 1px solid #DDD;
padding: 5px;
border-radius: 20px!important;
cursor: text;
top: 0px;
}
.user_login_form input[type="text"] {
background: url(http://i.imgur.com/rzOu1.png)no-repeat;
padding-left: 20px;
}
.user_login_form input[type="password"] {
background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}
#username {
border: 1px solid #DDD;
padding: 5px 5px 5px 20px;
border-radius: 20px!important;
cursor: text;
top: 0px;
padding-left: 20px;
background: white url(http://i.imgur.com/rzOu1.png)no-repeat;
}
#password {
border: 1px solid #DDD;
padding: 5px 5px 5px 20px;
border-radius: 20px!important;
cursor: text;
top: 0px;
background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}

No caso do código acima não funcionar, substitua por este:
Código:
.user_login_form input[type="password"], .user_login_form input[type="text"] {
border: 1px solid #DDD;
padding: 5px 5px 5px 20px;
border-radius: 20px!important;
cursor: text;
top: 0px;
}
.user_login_form input[type="text"] {
background: url(http://i.imgur.com/rzOu1.png)no-repeat;
padding-left: 20px;
}
.user_login_form input[type="password"] {
background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}
#username {
border: 1px solid #DDD;
padding: 5px 5px 5px 20px;
border-radius: 20px!important;
cursor: text;
top: 0px;
padding-left: 20px;
background: white url(http://i.imgur.com/rzOu1.png)no-repeat;
}
#password {
border: 1px solid #DDD;
padding: 5px 5px 5px 20px;
border-radius: 20px!important;
cursor: text;
top: 0px;
background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}

Atenciosamente,
Hizu. Piscada
avatar

Hizu
****

Membro desde : 08/07/2013
Mensagens : 249
Pontos : 360

Ir para o topo Ir para baixo

Tópico resolvido Re: Icone dentro da caixa de login e senha

Mensagem por AlfaBeta. 16.07.13 4:18

Continuou como antes. Tendo o arredodando que 'arrumei', mas nao tendo a finura do original.
AlfaBeta.

AlfaBeta.
****

Membro desde : 12/07/2013
Mensagens : 208
Pontos : 342

http://carrosegames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Icone dentro da caixa de login e senha

Mensagem por Hizu 16.07.13 4:28

Estranho... Louco 
Este código funcionou perfeitamente em meu fórum de testes:
Código:
.user_login_form input[type="password"], .user_login_form input[type="text"] {
border: 1px solid #DDD;
padding: 5px;
border-radius: 20px!important;
cursor: text;
top: 0px;
}
.user_login_form input[type="text"] {
background: white url(http://i.imgur.com/rzOu1.png)no-repeat;
padding-left: 20px;
}
.user_login_form input[type="password"] {
background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}
#username {
border: 1px solid #DDD;
padding: 5px 5px 5px 20px;
border-radius: 20px!important;
cursor: text;
top: 0px;
padding-left: 20px;
background: white url(http://i.imgur.com/rzOu1.png)no-repeat;
}
#password {
border: 1px solid #DDD;
padding: 5px 5px 5px 20px;
border-radius: 20px!important;
cursor: text;
top: 0px;
background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}

Creio que o senhor deixou algum outro código antigo relacionado à isto na tua CSS e por isto não está surtindo efeito!

Atenciosamente.
avatar

Hizu
****

Membro desde : 08/07/2013
Mensagens : 249
Pontos : 360

Ir para o topo Ir para baixo

Tópico resolvido Re: Icone dentro da caixa de login e senha

Mensagem por AlfaBeta. 16.07.13 4:35

Pois é.
Mando imagem de como ficou aqui.

Na primeira... era como eu queria...mas com os icones um pouco pra cima. E a segunda é como está agora...espaço mais 'gordo'.

https://i.servimg.com/u/f34/18/40/06/56/imagem20.jpg


Segue meu codigo:
Código:
/* ---------- Titulos da Categoria: Alinhamento - ULTIMA MENSAGEM -------------------- */
li.header dd.lastpost {display: block !important;padding-left: 25px !important;}
/* ---------- Caixa de Login e Senha: insercao de icones ----------------------------- */
.user_login_form input[type="password"], .user_login_form input[type="text"] {
border: 1px solid #DDD;
padding: 5px 5px 5px 20px;
border-radius: 20px!important;
cursor: text;
top: 0px;
}
.user_login_form input[type="text"] {
background: url(http://i.imgur.com/rzOu1.png)no-repeat;
padding-left: 20px;
}
.user_login_form input[type="password"] {
background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}
#username {
border: 1px solid #DDD;
padding: 5px 5px 5px 20px;
border-radius: 20px!important;
cursor: text;
top: 0px;
padding-left: 20px;
background: white url(http://i.imgur.com/rzOu1.png)no-repeat;
}
#password {
border: 1px solid #DDD;
padding: 5px 5px 5px 20px;
border-radius: 20px!important;
cursor: text;
top: 0px;
background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}
/* ---------- Perfil nos Topicos: Contorno e Preenchimento --------------------------- */
.postprofile {
border: 1px solid rgba(82, 82, 82, 0.51) !important;
border-radius: 10px;
background: rgba(189, 196, 199, 0.14);
}
/* ---------- Alinhamento de Texto/Caixa nos Botoes ---------------------------------- */
fieldset.submit-buttons input {
margin-top: -1px !important;
padding-bottom: 2px;
padding-top: 2px;
padding: 2px 8px;
font-family: trebuchet MS,trebuchet MS;
overflow: visible;
vertical-align: middle;
}
/* ---------- Alinhamento de Titulo nos Topicos -------------------------------------- */
.author, p.author, .postbody .topic-title {
position: relative !important;
margin-left: -7px !important;
}
.topic-title, .author, p.author {
position: relative !important;
margin-left: -3px !important;
}
/* ---------- Ultimo mensagem: mostrar foto - precisa ativar JAVA -------------------- */
 .mini_ava {
 float: left;
 }

 .mini_ava img {
width: 24px;
height: 27px;
margin: 0 5px;
padding: 1px;
border: 1px solid #D5D5D5;
background: white;
 -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
 }

 .mini_ava img:hover {
border-color: #a1a1a1;
 -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
 -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
 }
/* ------------ Barra de rolagem Google Chrome --------------------------------------- */
::-webkit-scrollbar {
width: 15px;
height: 5px;
}
::-webkit-scrollbar-track-piece {
background: #e0dcd5;
}
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background: #000;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color: #948f87;
}
/* ------------ Caixas de Busca ------------------------------------------------------ */
#search_keywords {
margin-top: -2px !important
}
#search_keywords, #keywords {
-moz-box-sizing: content-box;
background: none repeat scroll 0 0 #FFF;
border: 1px solid #D9D9D9;
border-radius: 4px 4px 4px 4px;
color: #000;
height: 19px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset;
color: #515151;
cursor: text;
display: inline-block;
font-size: 13px;
line-height: 18px;
outline: 0 none;
padding: 4px;
}
#search_keywords:hover, #keywords:hover {
transition: all 1s ease-in-out 0;
width: 150px;
border: 1px solid #000;
}
.button2, .nomargin .button2 {
background-color: #F5F5F5;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 3px 3px 3px 3px;
color: #666;
cursor: pointer;
font-size: 11px;
font-weight: 700;
height: 27px;
line-height: 25px;
min-width: 50px;
padding: 0 8px;
text-align: center;
}
#search-box input.button2, .nomargin .button2 {
    background-color: #F5F5F5;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px 2px 2px 2px;
    color: #666666;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    height: 29px;
    line-height: 29px;
    margin: 11px 6px 11px;
    min-width: 54px;
    padding: 0 8px;
    text-align: center;
}
#search-box {
    float: right;
    margin-right: 5px;
    margin-top: -7px;
    white-space: nowrap;
}
#search #keywords:focus {
    width: 290px;
}
#search #keywords {
    transition: all 1s ease-in-out 0s;
    width: 150px;
}
#search-box #keywords {
    background-color: #FFFFFF;
    width: 110px;
}
#search-box input {
    -moz-box-sizing: content-box;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 4px 4px 4px 4px;
    color: #000000;
    height: 23px;
}

.conteneur_container_IE{position: relative;bottom: -3px;margin-top: -2px;padding: 1px;}
/* ------------ Widgets: Distancia em relacao ao topo --------------------------------- */
#right,#left{margin-top:48px}
/* ------------ Widgets: Tamanho Fonte ------------------------------------------------ */
.module{
font-size: 12.5px !important;
}
/* ------------ Botoes Reputacao: Posicao --------------------------------------------- */
.vote {
margin-top: 360px !important;
}
/* ------------ Botoes Reputacao: Modificacao ----------------------------------------- */
.vote-button {
position: relative !important;
left: 3px !important;
top: 2px !important;
}
.vote {
padding: 4px 1px 4px 1px;
text-align: center;
width:20px;
background-color: #eaeaea;
border: 1px solid #d4d6d5;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
}

.vote .vote-no-bar {
display: none;
}

.vote .vote-bar {
border-left: 0px;
border-right: 0px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #d4d6d5;
font-size: 0px;
height: 50px;
margin: 0px;
width: 20px;
padding: 3px 0px 3px 0px;
}

.vote .vote-bar-plus {
margin-left: 7px;
width: 6px;
}

.vote .vote-bar-minus {
margin-left: 7px;
width: 6px;
top: -60 !important;
}

.vote .vote-button a[href*="plus"] {
background: url('http://i27.servimg.com/u/f27/15/17/71/53/add1010.png');
background-repeat: no-repeat;
color:transparent;
display:block;
height:21px;
width:22px;
}

.vote .vote-button a[href*="minus"] {
background-image: url('http://i27.servimg.com/u/f27/15/17/71/53/delete10.png');
background-repeat: no-repeat;
color:transparent;
display:block;
height:21px;
width:22px;
top: -60 !important;
}
/* ------------ Caixa dos Perfis nos Topicos: Largura -------------------------------- */
.postprofile {width: 245px;}
/* ------------ Texto dos Perfis nos Topicos: Alinhamento a esquerda ----------------- */
div.postprofile dl dd{text-align:left;}
dl dd img {margin-left:2px;}
div.postprofile dl dt{margin-right:42px;}
span.Líder b {margin-left:15px;}
/* ------------ Caixa em Relevo unica em volta do Avatar nos Topicos ------------------ */
.postprofile dt img {
background: none repeat scroll 0 0 #FFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 1px 30px rgba(0,0,0,0.27), 0 0 30px rgba(0,0,0,0.1) inset;
margin-bottom: -2;
max-height: 300px!important;
max-width: 150px!important;
padding: 9px 9px;
}
.postprofile dt img:hover {
background-color: #e8eaff;
box-shadow: 0 0 3px #AAA inset;
cursor: pointer;
text-decoration: none;
}
/* ------------ Titulos em Neon: Retirada do Sublinhado ------------------------------ */
a:hover{text-decoration:none!important}
/* ------------ Fonte dos Grupos no rodape: Estilo ----------------------------------- */
em {
font-style: normal;
}
/* ------------ Codigo Padrao -------------------------------------------------------- */
.topics {
border: none !important;
}
.lastpost {
border: none !important;
}
.posts {
border: none !important;
}
#picture_legend {
background-color: #a3a3a3;
border: 2px solid #B5B5B5;
border-radius: 3px 3px 3px 3px;
width: 500px;
margin-left: 30%;
}
#picture_legend img{
opacity: 0.5;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}
#picture_legend img:hover{
opacity: 1;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}
#i_whosonline.img-whois {
margin-left: -5px;
}
#tabs .activetab a {
background-color: #B5B5B5;
background-position: 0 0;
border-bottom: 1px solid #B5B5B5;
margin-bottom: -1px;
color: #000000;
}
#tabs a {
-moz-border-radius: 4px 4px 0 0;
-o-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
background-color: #B5B5B5;
border-radius: 4px 4px 0 0;
margin: 0 2px;
}
.linklist.navlinks {
border: none;
}
ul.linklist li a img {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
opacity: 0.5;
}
ul.linklist li a img:hover {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
opacity: 1;
}
forabg {
border-radius: 50px 50px 50px 50px;
}
a:hover {
text-shadow: 0px 0px 5px;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}
a {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}
li.row:hover {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}
li.row {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}
.navbar {
font-size: 16px;
background-color: transparent;
}
#wrap {
border: 2px solid #A3A3A3;
border-radius: 10px 10px 10px 10px;
}
.headerbar {
background-color: transparent;
}
.forabg {
border-radius: 10px 10px 10px 10px;
}
.forumbg {
border-radius: 10px 10px 10px 10px;
}
.post {
border: 2px solid #A3A3A3;
border-radius: 10px 10px 10px 10px;
}
.postprofile {
border-right: none;
text-align: center;
}
#tabs {
border-radius: 10px 10px 10px 10px;
}
AlfaBeta.

AlfaBeta.
****

Membro desde : 12/07/2013
Mensagens : 208
Pontos : 342

http://carrosegames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Icone dentro da caixa de login e senha

Mensagem por Hizu 16.07.13 4:45

Saudações!

Substitua a tua CSS por está:
Código:
/* ---------- Titulos da Categoria: Alinhamento - ULTIMA MENSAGEM -------------------- */
li.header dd.lastpost {display: block !important;padding-left: 25px !important;}
/* ---------- Caixa de Login e Senha: insercao de icones ----------------------------- */
.user_login_form input[type="password"], .user_login_form input[type="text"] {
border: 1px solid #DDD;
padding: 5px;
border-radius: 20px!important;
cursor: text;
top: 0px;
}
.user_login_form input[type="text"] {
background: white url(http://i.imgur.com/rzOu1.png)no-repeat;
padding-left: 20px;
}
.user_login_form input[type="password"] {
background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}
#username {
border: 1px solid #DDD;
padding: 5px 5px 5px 20px;
border-radius: 20px!important;
cursor: text;
top: 0px;
padding-left: 20px;
background: white url(http://i.imgur.com/rzOu1.png)no-repeat;
}
#password {
border: 1px solid #DDD;
padding: 5px 5px 5px 20px;
border-radius: 20px!important;
cursor: text;
top: 0px;
background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
padding-left: 20px;
}
/* ---------- Perfil nos Topicos: Contorno e Preenchimento --------------------------- */
.postprofile {
border: 1px solid rgba(82, 82, 82, 0.51) !important;
border-radius: 10px;
background: rgba(189, 196, 199, 0.14);
}
/* ---------- Alinhamento de Texto/Caixa nos Botoes ---------------------------------- */
fieldset.submit-buttons input {
margin-top: -1px !important;
padding-bottom: 2px;
padding-top: 2px;
padding: 2px 8px;
font-family: trebuchet MS,trebuchet MS;
overflow: visible;
vertical-align: middle;
}
/* ---------- Alinhamento de Titulo nos Topicos -------------------------------------- */
.author, p.author, .postbody .topic-title {
position: relative !important;
margin-left: -7px !important;
}
.topic-title, .author, p.author {
position: relative !important;
margin-left: -3px !important;
}
/* ---------- Ultimo mensagem: mostrar foto - precisa ativar JAVA -------------------- */
 .mini_ava {
 float: left;
 }

 .mini_ava img {
width: 24px;
height: 27px;
margin: 0 5px;
padding: 1px;
border: 1px solid #D5D5D5;
background: white;
 -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
 }

 .mini_ava img:hover {
border-color: #a1a1a1;
 -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
 -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
 }
/* ------------ Barra de rolagem Google Chrome --------------------------------------- */
::-webkit-scrollbar {
width: 15px;
height: 5px;
}
::-webkit-scrollbar-track-piece {
background: #e0dcd5;
}
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background: #000;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color: #948f87;
}
/* ------------ Caixas de Busca ------------------------------------------------------ */
#search_keywords {
margin-top: -2px !important
}
#search_keywords, #keywords {
-moz-box-sizing: content-box;
background: none repeat scroll 0 0 #FFF;
border: 1px solid #D9D9D9;
border-radius: 4px 4px 4px 4px;
color: #000;
height: 19px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset;
color: #515151;
cursor: text;
display: inline-block;
font-size: 13px;
line-height: 18px;
outline: 0 none;
padding: 4px;
}
#search_keywords:hover, #keywords:hover {
transition: all 1s ease-in-out 0;
width: 150px;
border: 1px solid #000;
}
.button2, .nomargin .button2 {
background-color: #F5F5F5;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 3px 3px 3px 3px;
color: #666;
cursor: pointer;
font-size: 11px;
font-weight: 700;
height: 27px;
line-height: 25px;
min-width: 50px;
padding: 0 8px;
text-align: center;
}
#search-box input.button2, .nomargin .button2 {
    background-color: #F5F5F5;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px 2px 2px 2px;
    color: #666666;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    height: 29px;
    line-height: 29px;
    margin: 11px 6px 11px;
    min-width: 54px;
    padding: 0 8px;
    text-align: center;
}
#search-box {
    float: right;
    margin-right: 5px;
    margin-top: -7px;
    white-space: nowrap;
}
#search #keywords:focus {
    width: 290px;
}
#search #keywords {
    transition: all 1s ease-in-out 0s;
    width: 150px;
}
#search-box #keywords {
    background-color: #FFFFFF;
    width: 110px;
}
#search-box input {
    -moz-box-sizing: content-box;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 4px 4px 4px 4px;
    color: #000000;
    height: 23px;
}

.conteneur_container_IE{position: relative;bottom: -3px;margin-top: -2px;padding: 1px;}
/* ------------ Widgets: Distancia em relacao ao topo --------------------------------- */
#right,#left{margin-top:48px}
/* ------------ Widgets: Tamanho Fonte ------------------------------------------------ */
.module{
font-size: 12.5px !important;
}
/* ------------ Botoes Reputacao: Posicao --------------------------------------------- */
.vote {
margin-top: 360px !important;
}
/* ------------ Botoes Reputacao: Modificacao ----------------------------------------- */
.vote-button {
position: relative !important;
left: 3px !important;
top: 2px !important;
}
.vote {
padding: 4px 1px 4px 1px;
text-align: center;
width:20px;
background-color: #eaeaea;
border: 1px solid #d4d6d5;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
}

.vote .vote-no-bar {
display: none;
}

.vote .vote-bar {
border-left: 0px;
border-right: 0px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #d4d6d5;
font-size: 0px;
height: 50px;
margin: 0px;
width: 20px;
padding: 3px 0px 3px 0px;
}

.vote .vote-bar-plus {
margin-left: 7px;
width: 6px;
}

.vote .vote-bar-minus {
margin-left: 7px;
width: 6px;
top: -60 !important;
}

.vote .vote-button a[href*="plus"] {
background: url('http://i27.servimg.com/u/f27/15/17/71/53/add1010.png');
background-repeat: no-repeat;
color:transparent;
display:block;
height:21px;
width:22px;
}

.vote .vote-button a[href*="minus"] {
background-image: url('http://i27.servimg.com/u/f27/15/17/71/53/delete10.png');
background-repeat: no-repeat;
color:transparent;
display:block;
height:21px;
width:22px;
top: -60 !important;
}
/* ------------ Caixa dos Perfis nos Topicos: Largura -------------------------------- */
.postprofile {width: 245px;}
/* ------------ Texto dos Perfis nos Topicos: Alinhamento a esquerda ----------------- */
div.postprofile dl dd{text-align:left;}
dl dd img {margin-left:2px;}
div.postprofile dl dt{margin-right:42px;}
span.Líder b {margin-left:15px;}
/* ------------ Caixa em Relevo unica em volta do Avatar nos Topicos ------------------ */
.postprofile dt img {
background: none repeat scroll 0 0 #FFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 1px 30px rgba(0,0,0,0.27), 0 0 30px rgba(0,0,0,0.1) inset;
margin-bottom: -2;
max-height: 300px!important;
max-width: 150px!important;
padding: 9px 9px;
}
.postprofile dt img:hover {
background-color: #e8eaff;
box-shadow: 0 0 3px #AAA inset;
cursor: pointer;
text-decoration: none;
}
/* ------------ Titulos em Neon: Retirada do Sublinhado ------------------------------ */
a:hover{text-decoration:none!important}
/* ------------ Fonte dos Grupos no rodape: Estilo ----------------------------------- */
em {
font-style: normal;
}
/* ------------ Codigo Padrao -------------------------------------------------------- */
.topics {
border: none !important;
}
.lastpost {
border: none !important;
}
.posts {
border: none !important;
}
#picture_legend {
background-color: #a3a3a3;
border: 2px solid #B5B5B5;
border-radius: 3px 3px 3px 3px;
width: 500px;
margin-left: 30%;
}
#picture_legend img{
opacity: 0.5;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}
#picture_legend img:hover{
opacity: 1;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}
#i_whosonline.img-whois {
margin-left: -5px;
}
#tabs .activetab a {
background-color: #B5B5B5;
background-position: 0 0;
border-bottom: 1px solid #B5B5B5;
margin-bottom: -1px;
color: #000000;
}
#tabs a {
-moz-border-radius: 4px 4px 0 0;
-o-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
background-color: #B5B5B5;
border-radius: 4px 4px 0 0;
margin: 0 2px;
}
.linklist.navlinks {
border: none;
}
ul.linklist li a img {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
opacity: 0.5;
}
ul.linklist li a img:hover {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
opacity: 1;
}
forabg {
border-radius: 50px 50px 50px 50px;
}
a:hover {
text-shadow: 0px 0px 5px;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}
a {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}
li.row:hover {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}
li.row {
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}
.navbar {
font-size: 16px;
background-color: transparent;
}
#wrap {
border: 2px solid #A3A3A3;
border-radius: 10px 10px 10px 10px;
}
.headerbar {
background-color: transparent;
}
.forabg {
border-radius: 10px 10px 10px 10px;
}
.forumbg {
border-radius: 10px 10px 10px 10px;
}
.post {
border: 2px solid #A3A3A3;
border-radius: 10px 10px 10px 10px;
}
.postprofile {
border-right: none;
text-align: center;
}
#tabs {
border-radius: 10px 10px 10px 10px;
}

Atenciosamente,
Hizu. Piscada
avatar

Hizu
****

Membro desde : 08/07/2013
Mensagens : 249
Pontos : 360

Ir para o topo Ir para baixo

Tópico resolvido Re: Icone dentro da caixa de login e senha

Mensagem por AlfaBeta. 16.07.13 5:02

Opa. Otimo.
Dou como resolvido.

Muito obrigado.
AlfaBeta.

AlfaBeta.
****

Membro desde : 12/07/2013
Mensagens : 208
Pontos : 342

http://carrosegames.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos