[TUTORIAL] Alterar imagens da caixa fluante

Gestão da edição dos templates

Painel de Controle Visualização Templates

(carregue na imagem para aumentar)

Forçar modelos padrão - Ao selecionar a opçao Sim, todos os templates editados perdem o seu valor, sendo substituído pelo template padrão (sem edição). Mesmo ativando o recurso, os templates editados continuam com as edições feita pelo Administrador.

Nome - Esta coluna mostra o nome de cada template em específico. Estes nomes são responsáveis pela edição de uma parte do fórum, sendo seguida por uma extensão chamada de .tpl. Ou seja, index_body.tpl ! Apesar de não ser visível, você poderá usar este posicionamento para indicar os templates.

Descrição - Uma breve descrição a respeito do template mencionado. Este ajuda-o a saber exatamente que parte do fórum está para ser editado.

Valor padrão- Consiste no valor padrão do seu template de fórum. Ou seja, cada versão possuí um template específico. Este link Valor padrão quando clicado exibe o código padrão do seu template sem edições, independente do template mencionado estar editado.

Status - Qualquer atribuição feita ao template será mostrada nesta coluna, afim de informar o Administrador de que o template encontra-se pendente ou publicado. Quando este não estiver público, pode ser visto pelo Administrador no fórum antes mesmo de ser publicado (como uma espécie de pré-visualização).

Ação - Permite editar ou excluir os templates do fórum. Para isso, basta clicar no botão para editar.

Painel de Controle Visualização Templates Geral mentions_tooltip

Código:

<!-- BEGIN switch_button_tooltip_PROFILE -->
<li>
    <a href="{switch_button_tooltip_PROFILE.URL}" title="{switch_button_tooltip_PROFILE.LANG}">
        <img src="{switch_button_tooltip_PROFILE.IMAGE}" alt="{switch_button_tooltip_PROFILE.LANG}" />
    </a>
</li>

Código:

<!-- BEGIN switch_button_tooltip_PROFILE -->
<li>
    <a href="{switch_button_tooltip_PROFILE.URL}" title="{switch_button_tooltip_PROFILE.LANG}">
        <img src="http://exemplo.com/minha-imagem.png" alt="{switch_button_tooltip_PROFILE.LANG}" />
    </a>
</li>

Código:

<img src="http://exemplo.com/minha-imagem.png" alt="{switch_button_tooltip_PROFILE.LANG}" />

• Resultado do tutorial:
  
  Antes:
  
  
  
  Depois:
  
  

Dúvidas gerais

• Como saber qual parte do código altera qual imagem?
  É bem simples, existem 6 imagens. Antes de cada imagem podemos localizar os seguintes trechos, que nos indicarão qual imagem modificar:
  
  <!-- BEGIN switch_button_tooltip_PROFILE Seta Perfil
  <!-- BEGIN switch_button_tooltip_PM Seta Mensagem Privada
  <!-- BEGIN switch_button_tooltip_FRIEND Seta Adicionar amigo
  <!-- BEGIN switch_button_tooltip_MESSAGES Seta Ver mensagens do usuário
  <!-- BEGIN switch_button_tooltip_FACEBOOK Seta Facebook
  <!-- BEGIN switch_button_tooltip_TWITTER Seta Twitter