[TUTORIAL] Imagem flutuante

A imagem flutuante é uma figura que fica em uma posição na página e acompanha a barra de rolagem. Sua utilidade é variada, desde informações e, até mesmo um pequeno logotipo do fórum.

--> Tutoriais, Dicas e Astúcias <--
Imagem flutuante

1º - Inserindo o códgo CSS
Para a mensagem funcionar correctamente, você deverá adicionar um código CSS na sua folha de estilos para que ela não apresente problemas:

Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

Onde terá de adicionar o seguinte código:

#flutuante {
display: scroll;
position: fixed;
Posição
}

Iremos compreender como definir a posição da imagem na página no próximo passo, então leia-o antes de adicionar este código á sua Folha de estilos CSS. Após adicionado, não se esqueça de clicar em Validar para salvar as alterações no código CSS.



2º - Definir a posição da imagem no fórum;
Para estas configuração, terá de ser adicionado algumas propriedades onde está escrito "posição" no código CSS apresentado no item anterior.

Vejamos como devemos fazer a configuração:
Primeiro deveremos definir onde ela estará posicionada em relação ao topo ou a parte inferior do fórum. Veja a aplicabilidade:

top:10px;

Vermelho -> Deverá ser top para topo da página ou bottom para a parte inferior. Lembre-se que se adicionar um não necessitará adicionar o outro.
Verde -> É a distância entre o topo ou a parte inferior, dependerá do que foi definido na indicação dada acima.

Após definir a posição vertical, teremos de definir se ele estará localizado á direita ou á esquerda. Vejamos como estruturar:

left:5px;

Vermelho -> Deverá ser left para a esquerda da página ou right para a margem direita da página. Lembre-se que se adicionar um não necessitará adicionar o outro.
Verde -> É a distância entre a margem e a imagem direita ou esquerda, dependerá do que foi definido na indicação dada acima.

Como resultado final á adicionar, no caso deste exemplo teríamos:

top: 10px;
left: 5px;

3º - Elaborar o código HTML
Após inserir o código CSS teremos de trabalhar o código para que o mesmo funcione. Para isso somente terá de adicionar a este código predefinido o endereço da imagem:

<img id="flutuante" src="Endereço_da_imagem" />

Vermelho -> Será o endereço da imagem que deseja adicionar. Lembre-se de que o mesmo terá de estar em um formato de imagem, caso contrário o código não irá funcionar perfeitamente.


4º - Teremos de inserir o código para que funcione em todas as páginas:
Devemos colocá-lo em um campo que seja mostrado em todas as páginas, como somente há um campo que se encaixe neste requisito, a descrição do seu fórum será comprometida com este código. Pode manter ambos em funcionamento, para isso basta separar o código da descrição.

Para adicionar o código aceda a:
Painel de Controle -> Geral -> Fórum -> Configurações

Ele deverá ser adicionado ao campo "Descrição do site". Caso encontre códigos nesta área, deverá colá-lo primeiro, antes de tudo mais que possa existir neste campo.



Foi mencionado este exemplo, mas poderá colocar este código em qualquer parte do Fórum, desde que aceite HTML, poderá fazê-lo em widgets, mensagem da Home Page, ou em mensagens, desde que estas aceitem a linguagem HTML (este não muito recomendável).


4º - Resultado final, com uma imagem de exemplo:

---

© Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Imagem flutuante