Editar barra de ferramentas

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

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

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

[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

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

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

[Tulio94]

Deu certo, obrigado robra pela atenção

[robra]

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.

[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

[robra]

Não que eu saiba.
No Google Chrome, IE e no Firefox está normal.

Abraço.