[TUTORIAL] Caixa de busca em um fórum em modo hover Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o temaVoltar para a ficha do tema

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

Ir para baixo

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

Mensagem por Consolado 07.02.13 15:31


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

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.

[TUTORIAL] Caixa de busca em um fórum em modo hover Act_bottomPara 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.

[TUTORIAL] Caixa de busca em um fórum em modo hover Catego11
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:
[TUTORIAL] Caixa de busca em um fórum em modo hover Versio12 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;
}

[TUTORIAL] Caixa de busca em um fórum em modo hover Versio11 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;
}

[TUTORIAL] Caixa de busca em um fórum em modo hover Versio14 Invision
Código:
td.row2.icon:hover .desc-search {
visibility: visible;
}
.desc-search {
visibility: hidden;
margin: 3px 0 0;
}
.desc-search .inputbox {
width: 180px;
}

[TUTORIAL] Caixa de busca em um fórum em modo hover Versio15 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)
[TUTORIAL] Caixa de busca em um fórum em modo hover 1114




© Fórum dos Fóruns


[TUTORIAL] Caixa de busca em um fórum em modo hover Act_bottom 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
Consolado
Hiper Membro

Membro desde : 09/05/2011
Mensagens : 4243
Pontos : 6128

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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