[TUTORIAL] Alterar imagens da caixa fluante Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o temaVoltar para a ficha do tema

[TUTORIAL] Alterar imagens da caixa fluante

Ir para baixo

[TUTORIAL] Alterar imagens da caixa fluante Empty [TUTORIAL] Alterar imagens da caixa fluante

Mensagem por while 26.03.17 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)
[TUTORIAL] Alterar imagens da caixa fluante Cp_tpl10
[TUTORIAL] Alterar imagens da caixa fluante 110111 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.
[TUTORIAL] Alterar imagens da caixa fluante 110210Seta 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.
[TUTORIAL] Alterar imagens da caixa fluante 110310Seta 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.
[TUTORIAL] Alterar imagens da caixa fluante 110410 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.
[TUTORIAL] Alterar imagens da caixa fluante 110510Seta 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).
[TUTORIAL] Alterar imagens da caixa fluante Pervie10
[TUTORIAL] Alterar imagens da caixa fluante 110510Seta 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:
    [TUTORIAL] Alterar imagens da caixa fluante TaKkZDk

    Depois:
    [TUTORIAL] Alterar imagens da caixa fluante 8BDBkUg


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


while
while
Hiper Membro

Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761

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

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos