Suporte phpBB

Suporte com ética e seriedade
https://suportephpbb.com.br/

Editar barra de ferramentas

https://suportephpbb.com.br/viewtopic.php?t=45458

Página 1 de 1

Editar barra de ferramentas

Enviado: 14 Out 2011, 18:57
por Tulio94
URL do Fórum: http://ligachampionsbr.portallbfv.com.br

Não tenho ideia de como editar a barra de ferramentas, ali onde tem "FAQ" - "MEMBROS". Queria colocar mais uns 2 itens, só que sou muito amador nisso aqui ainda, alguem da um help ai?

Re: Editar barra de ferramentas

Enviado: 14 Out 2011, 19:01
por smallbreeds
Dá sim, poste aqui o conteúdo de seu arquivo root/styles/seu_estilo/template/overall_header.html e os links dos ítens que quer acrescentar. Se tiver imagens para preceder os links, informe o nome das mesmas.

Re: Editar barra de ferramentas

Enviado: 14 Out 2011, 20:06
por robra
Bem... como iniciante, não sei sabe, mas você precisará do programa Notepad++ para editar os arquivos. Se você não o tem, então baixe-o pelo link http://download.tuxfamily.org/notepadpl ... .4.bin.zip e após descompactar o arquivo, abra o executável notepad++.exe da pasta "unicode", porque esta versão lhe dá a opção de alterar o idioma do programa para o português brasileiro.
Pelo que vi o seu estilo é o GREEN CHAMPION.
Abra o arquivo styles/greenchampion/template/overall_header.html com o Notepad++ e no final dele você encontrará as linhas:

Código: Selecionar todos

<ul class="linklist rightside">
		<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
		<!-- IF not S_IS_BOT -->
		<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
		<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
		<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></li>
		<!-- ENDIF -->
</ul>
A inserção será feita antes ou após a linha abaixo, que corresponde ao ícone Imagem e ao texto FAQ, no canto direito superior da página: <li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>.
Exemplo:
Digamos que você queira colocar os 2 itens antes do ícone e texto FAQ da página. Ok ?
Então, as linhas ficariam desta forma:

Código: Selecionar todos

<ul class="linklist rightside">
		<li class="icon-exemplo1"><a href="http://www.exemplo1.com" title="Exemplo 1">Exemplo 1</a></li>
		<li class="icon-exemplo2"><a href="http://www.exemplo2.com" title="Exemplo 2">Exemplo 2</a></li>
		<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
		<!-- IF not S_IS_BOT -->
		<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
		<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
		<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></li>
		<!-- ENDIF -->
</ul>
Onde:
class="icon-exemplo1" é o endereço do ícone referente ao Exemplo 1.
a href="http://www.exemplo1.com" é o endereço da página que se abrirá ao clicar sobre o texto Exemplo 1, na página.
title="Exemplo 1" é o texto que aparecerá ao colocar o mouse sobre o texto Exemplo 1, na página.
O texto Exemplo 1 entre os símbolos > < é o texto que vai aparecer ao lado do ícone.

Abraço. Imagem

Re: Editar barra de ferramentas

Enviado: 14 Out 2011, 21:10
por Tulio94
Muito bom robra, me ajudou muito, consegui

A style que estou mexendo é a TITAN , a GREENCHAMPION é o style atual do forum mas nao estou mexendo nele

Mas agora a imagem que fica do lado do nome não estou conseguindo colocar a imagem, ja upei pelo ftp, ja editei o tema e nada

A imagem que eu quero colocar tem o nome de "icon_cog"

ta assim

Código: Selecionar todos

/* Icon images
---------------------------------------- */
.sitehome, .icon-cog, .icon-faq, .icon-members, .icon-home, .icon-ucp, .icon-register, .icon-logout,
.icon-bookmark, .icon-bump, .icon-subscribe, .icon-unsubscribe, .icon-pages, .icon-search {
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-image: none;
	padding: 1px 0 0 17px;
e mais pra baixo

Código: Selecionar todos

/* Icon images
---------------------------------------- */
.sitehome						{ background-image: url("{T_THEME_PATH}/images/icon_home.gif"); }
.icon-cog                                       { backgroud-image: url("{T_THEME_PATH}/images/icon_cog.png"); }
.icon-faq						{ background-image: url("{T_THEME_PATH}/images/icon_faq.gif"); }
.icon-members					{ background-image: url("{T_THEME_PATH}/images/icon_members.gif"); }
.icon-home						{ background-image: url("{T_THEME_PATH}/images/icon_home.gif"); }
.icon-ucp						{ background-image: url("{T_THEME_PATH}/images/icon_ucp.gif"); }
.icon-register					{ background-image: url("{T_THEME_PATH}/images/icon_register.gif"); }
.icon-logout					{ background-image: url("{T_THEME_PATH}/images/icon_logout.gif"); }
E a imagem não aparece

Re: Editar barra de ferramentas

Enviado: 14 Out 2011, 22:30
por robra
Uma dica é fazer a edição do arquivo em seu PC, depois fazer um backup do que está no servidor para depois fazer o upload do arquivo editado, porque se der alguma "zica" é só voltar o arquivo anterior. Se for fazer a edição direto pelo ACP, então, como não sabe qual será o arquivo alterado aí é melhor fazer o backup de todos os arquivos na pasta style/estilo_em_uso/theme, que dará mais trabalho.
1) Abra o arquivo /theme/buttons.css e ache:, .icon-faq
Adicione após, na mesma linha: , .icon-cog

2) Abra o arquivo /theme/bidi.css e ache:, .rtl .icon-faq
Adicione após, na mesma linha: , .rtl .icon-cog

3) Abra o arquivo /theme/colours.css e ache:

Código: Selecionar todos

.icon-faq                        { background-image: url("{T_THEME_PATH}/images/icon_faq.gif"); } 
Adicione após, em uma nova linha:

Código: Selecionar todos

.icon-cog                        { background-image: url("{T_THEME_PATH}/images/icon_cog.png"); } 
4) No arquivo overall_header.html ficará desta forma:

Código: Selecionar todos

<ul class="linklist rightside">
      <li class="icon-cog"><a href="http://www.exemplo1.com" title="Exemplo 1">Exemplo 1</a></li>
      <li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
      <!-- IF not S_IS_BOT -->
5) Colocar o arquivo icon_cog.png na pasta /theme/images.

6) Limpe o cache do Fórum, o cache de seu navegador, e atualize o Tema do estilo Green Champion na aba ESTILOS.

Veja se isso vai resolver.

Abraço. Imagem

Re: Editar barra de ferramentas

Enviado: 14 Out 2011, 23:06
por robra
Se de todo não der certo, então volte os arquivos aos anteriores à edição e deixe a respectiva linha no overall_header.html desta forma:

Código: Selecionar todos

<ul class="linklist rightside">
      <li><a href="http://www.exemplo1.com" title="Exemplo 1"><img src="{T_THEME_PATH}/images/icon_cog.png" width="16" height="14" align="center" />Exemplo 1</a></li>
      <li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
      <!-- IF not S_IS_BOT -->
É bem mais simples.

Abraço. Imagem

Re: Editar barra de ferramentas

Enviado: 15 Out 2011, 04:00
por Tulio94
Deu certo, obrigado robra pela atenção

Re: Editar barra de ferramentas

Enviado: 15 Out 2011, 11:31
por robra
Tulio94 escreveu:Deu certo, obrigado robra pela atenção
Beleza... vi que você optou pela minha 2ª sugestão, a mais simples. Não sei se você tentou a 1ª sugestão e não conseguiu, mas no item 6, além de limpar o cache e atualizar o Tema, tem também de atualizar a Template e o Sets de imagem do Estilo Green Champion para o ícone e o texto aparecerem corretamente.
Fiz um teste e deu certo.

Abraço. Imagem

Re: Editar barra de ferramentas

Enviado: 15 Out 2011, 16:51
por Tulio94
Sim sim fiz pela 2ª opção

Eu tentei acessar pelo MAC e o banner fica cobrindo a barra de ferramentas, isso é normal?

Mas pelo Windows ta normal

Re: Editar barra de ferramentas

Enviado: 15 Out 2011, 17:36
por robra
Não que eu saiba.
No Google Chrome, IE e no Firefox está normal.

Abraço. Imagem
Todos os horários são UTC-03:00
Página 1 de 1

Powered by phpBB® Forum Software © phpBB Limited

Traduzido por: Suporte phpBB