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

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

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

Mensagem por Consolado em 07/02/13, 01:31 pm



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



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

- Adicionando o código HTML:
Vá até Painel de Controle Seta Geral Seta Fórum Seta 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.


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

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

Consolado
Super usuário

Inscrito dia : 09/05/2011
Mensagens : 4243
Pontos Ativos : 6128

Ver perfil do usuário

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum