Entrar
Os membros mais ativos do mês
Nenhum usuário |
Quem está conectado?
Há 5 usuários online :: 0 registrados, 0 invisíveis e 5 visitantes Nenhum
[ Ver toda a lista ]
O recorde de usuários online foi de 23 em Seg Jun 08, 2020 3:43 am
Últimos assuntos
[TUTORIAL] Adicionar ícone Online / Offline
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Scripts CSS
Página 1 de 1
[TUTORIAL] Adicionar ícone Online / Offline
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | Efeito CSS |
Muitas vezes gostariamos de visualizar se um usuário está online no fórum sem ter que olhar nas estatísticas. Agora poderemos adicionar os ícones para diferenciar o status dos usuários.
/!\ Devido a aplicação das classes CSS nas versões, este código somente foi satisfatório para a versão PhpBB 3, logo, somente existe neste tutorial um código para modificar esta versão.
--> Perguntas e respostas freqüentes <--
Adicionar ícone Online / Offline
Adicionar ícone Online / Offline
1º - Teremos de aceder à "Folha de estilo CSS":
Para que possamos personalizar ao fundo das categorias, é necessário adicionar códigos CSS para criarmos o efeito desejado, sendo assim, teremos de aceder a:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS
(clique na imagem para aumentar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
2º - Ter uma noção de CSS em relação ás imagens:
Antes de adicionarmos o código, temos de saber o que estamos a personalizar, pois não basta adicionar o link da imagem, melhor dizendo, temos de saber trabalhar a aparência.
O que podemos utilizar para personalizar a nossa caixa de texto:
- background-image:
Esta propriedade, é das principais, pois ela permitirá adicionar a imagem pretendida para que se possa ter uma imagem de fundo.EXEMPLO escreveu:background-image: url([Tens de ter uma conta e sessão iniciada para poderes visualizar este link]); - background-repeat:
Definirá se haverá repetição da imagem ou não (no-repeat), podendo esta repetição fazer-se somente na horizontal (repeat-x), na vertical (repeat-y) ou também nos dois planos (repeat).EXEMPLO escreveu:background-repeat: no-repeat; - background-position:
Para definir a posição da imagem, se no topo (top), em baixo (bottom), à esquerda (left), à direita (right) ao centro (center), ou então por definição de valores em percentagem (%) ou em píxeis (px).
Atenção pois quando é utilizado palavras deve a primeiras variar entre top/center/bottom e a segunda entre left/center/right.EXEMPLO escreveu:background-position: 100% 0%;
3º - Agora deverão copiar o código:
Este código deverá ser adicionado na Folha de estilos CSS, depois que as propriedades que desejar sejam aplicadas e o código esteja pronto para ser utilizado.
Adicionar ícone Online
.online {
propriedades
}
Adicionar ícone Offline
div.post {
propriedades
}
4º - Resultado final:
TÍTULO | |
SUBTÍTULO | |
Perfil do lado direito - Online (carregue na imagem para aumentar) [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] | Perfil do lado esquerdo - Online (carregue na imagem para aumentar) [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] |
Perfil do lado direito - Offline (carregue na imagem para aumentar) [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] | Perfil do lado esquerdo - Offline (carregue na imagem para aumentar) [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] |
--> FAQ do Tutorial <--
Adicionar ícone Online / Offline
Adicionar ícone Online / Offline
- Posso atribuir um ícone de online para as outras versões?
Sim! para isso aceda à:
Painel de Controle -> Visualização -> Imagens e cores -> Gestão das imagens -> Modo Avançado / Botões
Localize a palavra "conectado", a frente terá o campo para definir a imagem que será reproduzida quando o membro estiver online.
© Fórum dos Fóruns
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Adicionar ícone Online / Offline |
Tópicos semelhantes
» [TUTORIAL] Adicionar fóruns à um widget
» [TUTORIAL] Adicionar um vídeo num tópico
» [TUTORIAL] Adicionar imagem no fundo do menu
» [TUTORIAL] Criar widget "Adicionar aos Favoritos"
» [TUTORIAL] Adicionar sombra em volta da estrutura do fórum
» [TUTORIAL] Adicionar um vídeo num tópico
» [TUTORIAL] Adicionar imagem no fundo do menu
» [TUTORIAL] Criar widget "Adicionar aos Favoritos"
» [TUTORIAL] Adicionar sombra em volta da estrutura do fórum
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Scripts CSS
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Dom Jun 24, 2012 11:15 am por Alisson Silva
» [Re-Apresentação] Fábio
Sex maio 25, 2012 4:45 pm por Fábio
» PixelZIP ~ design&programção em só lugar
Sex maio 25, 2012 4:44 pm por Fábio
» Pedido de logo
Dom maio 20, 2012 10:06 am por Alisson Silva
» Kernel - Apresentação
Sáb maio 19, 2012 9:49 am por Alisson Silva
» [Galeria] Gabriel Schiavi - Atualizado (20/02 - !5:21)
Sáb maio 19, 2012 9:48 am por Alisson Silva
» HEBBO HOTEL 24 HORAS ONLINE !!
Sex maio 04, 2012 7:20 pm por Alisson Silva
» Pedido de Layout
Sex maio 04, 2012 5:23 pm por Fonsecca
» [RESOLVIDO]TV CCE HPS 2071-D (IMAGEM SÓ EMBAIXO, ACIMA, LINHAS DE RETRAÇO E FAIXA PRÊTA NO TOPO DA TELA).
Qua Abr 11, 2012 4:07 pm por Fry
» [contato] Deixo aqui meus contatos virtuais
Qua Abr 11, 2012 3:25 pm por Fry