Suporte phpBB • Navbar Show de Bola (Pesquisa abaixo do "Indice do Forum")

Página 1 de 1

Navbar Show de Bola (Pesquisa abaixo do "Indice do Forum")

Enviado: 04 Jun 2012, 22:50

por Godarth

Qual a URL do seu fórum: http://www.canalsocial.com.br/forum
Tipo de Hospedagem: Pago
Qual a versão do phpBB: phpBB 3.0.10
É um novo ou uma conversão: Instalação Limpa
Usuário de teste: Usuário: teste Senha: testeteste
Estilos instalados: Prosilver* ; Artodia Mobile Verde
Modificações instaladas:
Qual seu nivel de experiência: Iniciante
Quando começou o problema: Desci a pesquisa para o navbar mas não sei programar o suficiente para colocar onde quero
Descreva seu problema:

Fiz uso de uma dica que o Robra mencionou e desci a pesquisa para o navbar usando seu tutorial kb.php?a=106

Fiz tudo direitinho mas ao ver o resultado no canto direito, preferi manter o botão e a pesquisa avançada mesmo ficando desalinhado mas gostaria de colocar do lado esquerdo e abaixo do "Indice do Forum".
Acho que ficaria show de bola além de uma estética mais agradável, tudo no mesmo lugar e mais na cara do usuário. Se desse pra colocar aquela linha branca entre eles então hummmm seria uma obra de arte.

Olha minha montagem photoshop Imagem

Imagem

Obrigado

Re: Navbar Show de Bola (Pesquisa abaixo do "Indice do Forum

Enviado: 04 Jun 2012, 23:36

por gssilva

Eu vi que você já coloco a caixa de pesquisa na navbar, então vou explicar como você vai colocar o código.

Substitua o código da pesquisa que você colocou na sua navbar pelo código abaixo:

Código: Selecionar todos

				<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
				<hr class="navlinks2">
			<div id="search-box">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
					<input class="button2" value="{L_SEARCH}" type="submit" />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
<br>
		<!-- ENDIF -->

Abra o arquivo common.css e procure por:

Código: Selecionar todos

#search-box {
	color: #FFFFFF;
	position: relative;
	margin-top: 30px;
	margin-right: 5px;
	display: block;
	float: rightz;
	text-align: right;
	white-space: nowrap; /* For Opera */
}

Substitua por:

Código: Selecionar todos

#search-box {
	color: #FFFFFF;
	position: relative;
	display: block;
	float: left;
	text-align: right;
	white-space: nowrap; /* For Opera */
}

Procure por:

Código: Selecionar todos

ul.navlinks {
	padding-bottom: 1px;
	margin-bottom: 1px;
	border-bottom: 1px solid #FFFFFF;
	font-weight: bold;
}

Adicione antes:

Código: Selecionar todos

.navlinks2 {
	background-color: #FFFFFF;
	border: none;
}

Atualize o tema e a template do seu estilo.

Qualquer dúvida basta postar.

Como ficou no prosilver original

phpbb.png

Re: Navbar Show de Bola (Pesquisa abaixo do "Indice do Forum

Enviado: 05 Jun 2012, 01:37

por Godarth

Sensacional Gssilva

Mas tem 1 errinho no ultimo trecho a ser colado antes. Por associação, completei o código com um ul. igual do código de referência e deu certo. Edita lá pra ficar fino grão.
O correto é

Código: Selecionar todos

ul.navlinks2 {
   background-color: #FFFFFF;
   border: none;
}

Também estou com 2 Links "Index do forum" porque seu código tem essa função embutida.
Daí, deletei a linha original (a de cima) que fica antes da linha de código que aumenta a fonte.
Deletei essa linha e resolveu.

Código: Selecionar todos

<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

Obrigado pessoal mais uma vez. Ficou show de bola

Re: Navbar Show de Bola (Pesquisa abaixo do "Indice do Forum

Enviado: 05 Jun 2012, 01:44

por gssilva

Quanto ao link duplicado foi distração minha, desculpe.

Agora falando do código

Código: Selecionar todos

.navlinks2 {
   background-color: #FFFFFF;
   border: none;
}

Ele é assim mesmo por que ele é a classe desse código:

Código: Selecionar todos

<hr class="navlinks2">

Não há a necessidade de colcar o ul antes.
Eu vi no seu fórum que a linha que está entre os links e a caixa de pesquisa não está branca. Foi você que modificou ou ele ficou assim com a edição que eu te passei?

Se você não modificou a cor dela, tente deletar o ul do css que você adicionou.

Não se esqueça de atualizar o tema.

Qualquer dúvida basta postar.

Re: Navbar Show de Bola (Pesquisa abaixo do "Indice do Forum

Enviado: 05 Jun 2012, 02:05

por Godarth

É verdade, não precisa do "ul."
A linha permaneceu opaca sem esse detalhe.

Mentira! Ficou branca sem o "ul".
Esqueci de atualizar o navegador .

Agora tá show de bola.
Caso resolvido. Valeu

Re: Navbar Show de Bola (Pesquisa abaixo do "Indice do Forum

Enviado: 05 Jun 2012, 15:54

por gssilva

Eu alterei o código da pesquisar pra fazer uma pequena correção.
Se o usuário não tiver permissão de usar a pesquisa então a caixa de pesquisa não aparece e a navbar fica assim.

phpbb.png

Isso acontece que por a tag <hr class="navlinks2"> está fora das condições IF então as permissões não se aplicam a ela.

Para corrigir isso basta você trocar o código da caixa de pesquisa que você colocou no overall_header.html pelo que da minha primeira mensagem.

Atualize a template.

Para quem não entendeu o que foi feito aqui.

Pegamos o código da caixa de pesquisa:

Código: Selecionar todos

<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->

Recortamos ele do local original e colocamos abaixo do código:

Código: Selecionar todos

<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

Adicionamos o código abaixo logo após a linha 

Código: Selecionar todos

				<hr class="navlinks2">

E adicionamos o código abaixo logo antes da linha 

Código: Selecionar todos

<br>

Abrimos o arquivo style/prosilver/theme/common.css

Achamos o código:

Código: Selecionar todos

#search-box {
	color: #FFFFFF;
	position: relative;
	margin-top: 30px;
	margin-right: 5px;
	display: block;
	float: right;
	text-align: right;
	white-space: nowrap; /* For Opera */
}

E substituímos por:

Código: Selecionar todos

#search-box {
	color: #FFFFFF;
	position: relative;
	display: block;
	float: left;
	text-align: right;
	white-space: nowrap; /* For Opera */
}

Achamos o código:

Código: Selecionar todos

ul.navlinks {
	padding-bottom: 1px;
	margin-bottom: 1px;
	border-bottom: 1px solid #FFFFFF;
	font-weight: bold;
}

Adicionamos logo acima:

Código: Selecionar todos

.navlinks2 {
	background-color: #FFFFFF;
	border: none;
}

Salve os arquivos a atualize a template e o tema pelo ACP na Aba Estilos.

Qualquer dúvida abar um tópico postando toda sua duvida referente a essa modificação feita aqui.