Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
SUGESTÃO - Adicionar ícone Online / Offline
2 participantes
Universal Fórum :: Geral :: Área do Usuário :: Sugestões :: Sugestões Recusadas
Página 1 de 1
SUGESTÃO - Adicionar ícone Online / Offline
Tópico da Forumeiros
Bom vou direto ao Assunto
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.
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
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.
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).
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).
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
Adicionar ícone Offline
4º - Resultado final:
Perfil do lado direito - Online
https://i.servimg.com/u/f16/12/46/70/00/on10.png
Perfil do lado esquerdo - Online
https://i.servimg.com/u/f16/12/46/70/00/left10.png
Perfil do lado direito - Offline
https://i.servimg.com/u/f16/12/46/70/00/on1010.png
Perfil do lado esquerdo - Offline
https://i.servimg.com/u/f16/12/46/70/00/left11.png
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.
Bom vou direto ao Assunto
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.
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
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(https://2img.net/i/bl/logo.png);
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:
Perfil do lado direito - Online
https://i.servimg.com/u/f16/12/46/70/00/on10.png
Perfil do lado esquerdo - Online
https://i.servimg.com/u/f16/12/46/70/00/left10.png
Perfil do lado direito - Offline
https://i.servimg.com/u/f16/12/46/70/00/on1010.png
Perfil do lado esquerdo - Offline
https://i.servimg.com/u/f16/12/46/70/00/left11.png
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.
Arthur29- Membro Avançado
- Mensagens : 4099
Reputação : 143
Pontos : 4321
Cash : 55
Re: SUGESTÃO - Adicionar ícone Online / Offline
Não é necessário.
Fechado
Fechado
HeaD- Membro Avançado
- Mensagens : 4252
Reputação : 1686
Pontos : 6839
Cash : 20
Tópicos semelhantes
» [Sugestão] - PhotoShop Online
» [-Sugestão]Revista Online Universal
» [-Sugestão]Área Series Online
» [PEDIDO]Alguem pode me dizer onde aparece o ìcone da IMAGE SIZE (TAMANHO DA FOTO) No PhotoScape?
» DDTank BR Offline!
» [-Sugestão]Revista Online Universal
» [-Sugestão]Área Series Online
» [PEDIDO]Alguem pode me dizer onde aparece o ìcone da IMAGE SIZE (TAMANHO DA FOTO) No PhotoScape?
» DDTank BR Offline!
Universal Fórum :: Geral :: Área do Usuário :: Sugestões :: Sugestões Recusadas
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
Sáb Ago 24, 2024 9:59 am por Civilization
» [UF] Reinauguração da Universal Fórum
Seg Jul 08, 2024 8:54 pm por Reset
» Reencontro Mensal
Sex Nov 24, 2023 5:04 pm por -Destruidor
» O que VOCÊ faz hoje em dia
Ter Set 05, 2023 11:49 pm por αvαsŧ™
» mais um ano xD
Ter Ago 22, 2023 11:16 am por SouthPark.
» Retorno do Droops.
Qui Mar 09, 2023 6:32 pm por , WallMaster
» 10 anos de Universal Fórum
Ter maio 10, 2022 4:47 pm por Reset
» Saudades rs'
Qui Mar 17, 2022 11:24 pm por HeaD
» Saudades de vocês
Sáb Fev 05, 2022 3:52 pm por -Gui
» Sim... é mais um post de um antigo usuário com saudade do fórum
Qua Nov 17, 2021 9:35 pm por HeaD