[TUTORIAL] Caixa de busca em um fórum em modo hover

[Consolado]

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: [FAQ] Criar, visualizar e gerir as categorias, fóruns e subfóruns; [FAQ] Folha de estilo CSS.

--> Tutoriais, dicas e astúcias <--
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.

<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>

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".

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

(carregue na imagem para aumentar)

---

© 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