Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
201 usuários online :: 7 usuários cadastrados, Nenhum Invisível e 194 Visitantes :: 2 Motores de busca

adamonofre, Br_SP_Rodrigo, Claudio Arthur, Kyo Panda, Lobs, Mythology, Neji

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

[TUTORIAL] Alterar imagens da caixa fluante

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Alterar imagens da caixa fluante

Mensagem por while em Dom 26 Mar 2017 - 2:28

Alterar imagens da caixa flutuante
Neste tutorial iremos aprender a substituir as imagens padrão da nova função recentemente adicionada.

Alterar imagens da caixa flutuante
TUTORIAIS, DICAS E ASTÚCIAS

Gestão da edição dos templates

A edição de template é o que faz com que seu fórum tenha o maior número de personalizações possíveis. Este recurso é agradável e merece cautela para ser editado, afim de evitar qualquer bug ou erro na publicação. Você pode contar com o apoio de nossos voluntários para editar seu template.

Painel de Controle Seta Branca Visualização Seta Branca Templates

(carregue na imagem para aumentar)
Seta 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.
Seta 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.
Seta 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.
Seta 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.
Seta 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).
Seta Ação - Permite editar ou excluir os templates do fórum. Para isso, basta clicar no botão Editar para editar.

Para este tutorial, focaremos no seguinte template:

Painel de Controle Seta Branca Visualização Seta Branca Templates Seta Branca Geral Seta Branca mentions_tooltip

A substituição das imagens é bem simples! Localize a tag <img> e em src coloque o link da nova imagem. Por exemplo:

Antes:

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>

Depois:

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>

Note a parte que alteramos:

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


Logo após a aplicação, será possível visualizar o resultado.

  • 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 Seta Perfil
    <!-- BEGIN switch_button_tooltip_PM Seta Seta Mensagem Privada
    <!-- BEGIN switch_button_tooltip_FRIEND Seta Seta Adicionar amigo
    <!-- BEGIN switch_button_tooltip_MESSAGES Seta Seta Ver mensagens do usuário
    <!-- BEGIN switch_button_tooltip_FACEBOOK Seta Seta Facebook
    <!-- BEGIN switch_button_tooltip_TWITTER Seta Seta Twitter


avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3105
Pontos Ativos : 4493

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum