[TUTORIAL] Caixa de busca em um fórum em modo hover
Página 1 de 1 • Compartilhe
[TUTORIAL] Caixa de busca em um fórum em modo hover
Caixa de busca |
As vezes, uma seção que tem um grande fluxo, são criados tópicos repetitivos, mais agora é possível colocar uma caixa de busca em um fórum em modo hover.
Para continuar a leitura deste tutorial recomendamos a leitura dos tutoriais a seguir: |
--> Tutoriais, dicas e astúcias <--
Caixa de busca em modo hover num certo fórum
Caixa de busca em modo hover num certo fórum
1º - Configurando o código HTML:
Primeiro precisamos configurar o código HTML, para depois adicionar o código CSS.
Vermelho: Deverá inserir o número do fórum, utilizando o fórum "Questões sobre a aparência do fórum" o número dele é "25", como podemos ver a seguir "ajuda.forumeiros.com/f25-questoes-sobre-a-aparencia-do-forum".<div class="desc-search"><form method="get" action="/search"><input class="inputbox search" type="text" name="search_keywords" id="search_keywords" size="20" value="Buscar..." onclick="if (this.value == 'Pesquisa') this.value = '';" onblur="if (this.value == '') this.value = 'Pesquisa';"><input class="button2" type="submit" value="Buscar"><input type="hidden" value="fN" name="search_where"></form></div>
2º - Adicionando o código HTML:
Vá até Painel de Controle Geral Fórum Categorias e fóruns, selecione o fórum que deseja adicionar a caixa de busca em modo hover, clicando na engrenagem na coluna de opções.
Na descrição deverá adicionar o código configurado na parte acima.
3º - Código CSS a ser utilizado:
Como cada versão tem sua especificidade em relação a classes css, utilizaremos um respectivo código para cada versão:
PhpBB 3 |
- Código:
ul.topiclist.forums li.row:hover .desc-search {
visibility: visible;
}
.desc-search {
visibility: hidden;
margin: 3px 0 0;
}
.desc-search .inputbox {
width: 180px;
}
PhpBB 2 |
- Código:
td.row1.over:hover .desc-search {
visibility: visible;
}
.desc-search {
visibility: hidden;
margin: 3px 0 0;
}
.desc-search .inputbox {
width: 180px;
}
Invision |
- Código:
td.row2.icon:hover .desc-search {
visibility: visible;
}
.desc-search {
visibility: hidden;
margin: 3px 0 0;
}
.desc-search .inputbox {
width: 180px;
}
PunBB |
- Código:
td.tcl:hover .desc-search {
visibility: visible;
}
.desc-search {
visibility: hidden;
margin: 3px 0 0;
}
.desc-search .inputbox {
width: 180px;
}
3º - Aplicando o código CSS:
Agora deverá seguir um esquema de onde o código deverá ser adicionado:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS
© Fórum dos Fóruns
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Caixa de busca em um fórum em modo hover |
Consolado- Hiper Membro
- Membro desde : 09/05/2011
Mensagens : 4243
Pontos : 6128
Tópicos semelhantes
» [TUTORIAL] Sub-fóruns em modo hover
» Efeito hover na caixa de busca
» [TUTORIAL] Tópicos e mensagens em modo hover
» [TUTORIAL] Visualizar tópico em modo hover
» Sobre o tutorial visualizar em modo hover
» Efeito hover na caixa de busca
» [TUTORIAL] Tópicos e mensagens em modo hover
» [TUTORIAL] Visualizar tópico em modo hover
» Sobre o tutorial visualizar em modo hover
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos