Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
Edição das caixas de busca
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Edição das caixas de busca
Qual é minha questão:
Olá,
Anteriormente foi sanada minha duvida quanto a mudança das caixas de busca, da pag. principal e a dos topicos.
Agora, gostaria de uma ajuda, pra fazer poucos retoques nelas.
Assim, como faço para:
- Caixa pg. principal (cor e efeito quando se começa a digitar): gostaria que ficasse como da Caixa de busca dos topicos... bem suave...e não trepidando.
- Caixa dos topicos: altura da caixa e do botao 'Buscar' iguais... como na Caixa da pag. principal. Isso é possivel?
Codigo já usado:
Agradeço.
Endereço do meu fórum:
http://carrosegames.forumeiros.com
Versão do fórum:
PHPBB3
Olá,
Anteriormente foi sanada minha duvida quanto a mudança das caixas de busca, da pag. principal e a dos topicos.
Agora, gostaria de uma ajuda, pra fazer poucos retoques nelas.
Assim, como faço para:
- Caixa pg. principal (cor e efeito quando se começa a digitar): gostaria que ficasse como da Caixa de busca dos topicos... bem suave...e não trepidando.
- Caixa dos topicos: altura da caixa e do botao 'Buscar' iguais... como na Caixa da pag. principal. Isso é possivel?
Codigo já usado:
- Código:
#search_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: 23px;
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 {
transition: all 1s ease-in-out 0;
width: 150px;
border: 1px solid #000;
}
.button2 {
background-color: #F5F5F5;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 2px 2px 2px 2px;
color: #666;
cursor: pointer;
font-size: 11px;
font-weight: 700;
height: 29px;
line-height: 27px;
min-width: 54px;
padding: 0 8px;
text-align: center;
}
#search-box input.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: 27px;
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: 95px;
}
#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;}
Agradeço.
Endereço do meu fórum:
http://carrosegames.forumeiros.com
Versão do fórum:
PHPBB3
Última edição por AlfaBeta. em 13.07.13 2:27, editado 1 vez(es)
Re: Edição das caixas de busca
Olá!
Troque por esse:
Até mais.
Troque por esse:
- Código:
#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: 23px;
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: 2px 2px 2px 2px;
color: #666;
cursor: pointer;
font-size: 11px;
font-weight: 700;
height: 29px;
line-height: 27px;
min-width: 54px;
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: 27px;
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: 95px;
}
#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;}
Até mais.
Re: Edição das caixas de busca
Opa, muito bom, Crazy. Obrigado.
Vejo que arrumaste a caixa de busca principal: ficou sem o dourado e não 'trepida' mais. E ainda diminuiu a fonte. Otimo.
E quanto a caixa de busca dos topicos, como mencionei no inicio. Haveria como encurtar sua altura...pra ficar na mesma altura do botão...como está na caixa principal, colocando ainda mais cima?
Porque agora ela está desparelha...como visto nas imagens:
Img1) ex de como está alinhado a altura da caixa principal: https://i.servimg.com/u/f34/18/40/06/56/imagem12.jpg
Img2) Como está a caixa dos topicos: em vermelho= indica sobre a altura, em azul=indicando a direção e como ficaria a posição da caixa (mais pra cima)
https://i.servimg.com/u/f34/18/40/06/56/imagem13.jpg
Vejo que arrumaste a caixa de busca principal: ficou sem o dourado e não 'trepida' mais. E ainda diminuiu a fonte. Otimo.
E quanto a caixa de busca dos topicos, como mencionei no inicio. Haveria como encurtar sua altura...pra ficar na mesma altura do botão...como está na caixa principal, colocando ainda mais cima?
Porque agora ela está desparelha...como visto nas imagens:
Img1) ex de como está alinhado a altura da caixa principal: https://i.servimg.com/u/f34/18/40/06/56/imagem12.jpg
Img2) Como está a caixa dos topicos: em vermelho= indica sobre a altura, em azul=indicando a direção e como ficaria a posição da caixa (mais pra cima)
https://i.servimg.com/u/f34/18/40/06/56/imagem13.jpg
Re: Edição das caixas de busca
Olá!
Troque por este:
Até mais.
Troque por este:
- Código:
#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: 17px;
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;
text-align: center !important;
}
#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: 2px 2px 2px 2px;
color: #666;
cursor: pointer;
font-size: 11px;
font-weight: 700;
height: 29px;
line-height: 27px;
min-width: 54px;
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: 27px;
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: 95px;
}
#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;}
Até mais.
Re: Edição das caixas de busca
Ok, Crazy. Grande ajuda. Foi encurtada a altura da caixa dos topicos.
E resolvi testar varios comandos, no entanto ainda não consegui empurrar essa caixa dos topicos mais pra cima. Não achei o comando pra isso. Sabes me dizer?
E uma curiosidade: Porque há esses comandos repetidos? Vejo que mudei itens no 1ºparagrafo e q surtiram efeito. Precisaria mudar tambem no 2ºparagrafo... ou deixo assim?
E resolvi testar varios comandos, no entanto ainda não consegui empurrar essa caixa dos topicos mais pra cima. Não achei o comando pra isso. Sabes me dizer?
E uma curiosidade: Porque há esses comandos repetidos? Vejo que mudei itens no 1ºparagrafo e q surtiram efeito. Precisaria mudar tambem no 2ºparagrafo... ou deixo assim?
- Código:
.button2, .nomargin .button2 {
background-color: #F5F5F5;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 2px 2px 2px 2px;
color: #666;
cursor: pointer;
font-size: 11px;
font-weight: 700;
height: 29px;
line-height: 27px;
min-width: 54px;
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: 27px;
margin: 11px 6px 11px;
min-width: 54px;
padding: 0 8px;
text-align: center;
}
Re: Edição das caixas de busca
Olá!
Os comandos, cada um serve para uma coisa, peço que não modifique nada que não saiba.
O comando e "margin-top: -15px !important;" sem as aspas.
Até mais.
Os comandos, cada um serve para uma coisa, peço que não modifique nada que não saiba.
O comando e "margin-top: -15px !important;" sem as aspas.
Até mais.
Re: Edição das caixas de busca
Mas onde está esse comando? Ou devo acrescentar?
Lembrando que só queremos mexer na caixa dos topicos.
Lembrando que só queremos mexer na caixa dos topicos.
Re: Edição das caixas de busca
Olá!
Acrescente este código:
Até mais.
Acrescente este código:
- Código:
#search_keywords {
margin-top: -10px !important
}
Até mais.
Re: Edição das caixas de busca
Obrigado, Crazy.
Pra terminar, como faço pra fazer a mesma coisa na 'caixinha buscar' que fica a direita. Pois com o codigo, trabalho apenas a altura da caixa buscar.
Pra terminar, como faço pra fazer a mesma coisa na 'caixinha buscar' que fica a direita. Pois com o codigo, trabalho apenas a altura da caixa buscar.
Re: Edição das caixas de busca
Olá!
Não sei se eu entendi corretamente, mais troque pelo código abaixo:
Até mais.
Não sei se eu entendi corretamente, mais troque pelo código abaixo:
- Código:
#search_keywords, keywords {
margin-top: -10px !important;
}
Até mais.
Re: Edição das caixas de busca
O que quis dizer é o codigo apenas mexe na caixa onde voce coloca o texto. Esse ultimo codigo tambem só faz isso.
E por isso pergunto como mexo, tambem, na caixinha [Buscar] que fica ao lado. Se não ficará desparelho.
E por isso pergunto como mexo, tambem, na caixinha [Buscar] que fica ao lado. Se não ficará desparelho.
Re: Edição das caixas de busca
Olá!
Troque por esse:
Até mais.
Troque por esse:
- Código:
#search_keywords, #search-box input.button2 {
margin-top: -10px !important;
}
Até mais.
Re: Edição das caixas de busca
Não. Agora esse mexe com a caxinha [Buscar] na pag. principal.
Mas tudo bem. Acho que ja incomodei o bastante com isso. É só um detalhe. Podemos dar como resolvido.
Muito obrigado.
Mas tudo bem. Acho que ja incomodei o bastante com isso. É só um detalhe. Podemos dar como resolvido.
Muito obrigado.
Tópicos semelhantes
» Bordas das caixas de busca
» Caixas de edição sem funcionar
» Modificação das caixas
» Personalização das caixas de textos
» Personalizar as caixas de mensagem
» Caixas de edição sem funcionar
» Modificação das caixas
» Personalização das caixas de textos
» Personalizar as caixas de mensagem
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos