Substituir imagem de "Online" nos tópicos por Texto

Nome do Arquivo: Substituir imagem de "Online" nos tópicos por Texto
Autor: Je4n
Funcionalidade: Todas as versões
Categoria: Recursos BestSkins

Acabei de fazer essa função para o meu fórum e decidi compartilhar com quem gostaria também de fazer essa pequena mudança.

Adicione a seguinte CSS na sua folha de estilo:

Código:

img.i_icon_online {
  content: '';
  background-color: green;
  height: 10px;
  width: 10px;
  display: block;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
}
img.i_icon_online:before {
  content: 'Online';
  font-size: 13px;
  display: inline-block;
  margin: -4px 0px 0px 15px;
}

Podemos criar este efeito apenas com CSS:

Código:

img.i_icon_online {
  content: '';
  background-color: green;
  height: 10px;
  width: 10px;
  display: block;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
}
img.i_icon_online:before {
  content: 'Online';
  font-size: 13px;
  display: inline-block;
  margin: -4px 0px 0px 15px;
}

Muito mais eficaz e rápido do que utilizar um código jQuery! Posso substituir seu código por este que passei? Até mais!

Daemon escreveu:Podemos criar este efeito apenas com CSS:

Código:

img.i_icon_online {
  content: '';
  background-color: green;
  height: 10px;
  width: 10px;
  display: block;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
}
img.i_icon_online:before {
  content: 'Online';
  font-size: 13px;
  display: inline-block;
  margin: -4px 0px 0px 15px;
}

Muito mais eficaz e rápido do que utilizar um código jQuery! Posso substituir seu código por este que passei? Até mais!

Foi a minha primeira opção, mas não havia dado certo... agora percebi como você fez, funcionou graças ao content no seletor img.i_icon_online {, eu não tinha pensando nisso. haha

 Pode substituir sim! e obrigado.

[alerta="Mensagem automática"][/alerta]



Este tópico foi movido de "Propor um tutorial" para "Dicas e Tutoriais (Forumeiros)".

Um ótimo código achei muito útil. Obrigado por compartilhar [Tens de ter uma conta e sessão iniciada para poderes visualizar este link].

Obrigado por compartilhar [Tens de ter uma conta e sessão iniciada para poderes visualizar este link].

Da hora amigo. Esse sistema pode ser posto em qualquer parte do tópico né?
Obrigado pelo tutorial.

Belo tutorial e parabéns aos seus códigos.
Diapt

Júnior Duarte escreveu:Da hora amigo. Esse sistema pode ser posto em qualquer parte do tópico né?
Obrigado pelo tutorial.

Olá, o texto vai ficar onde a imagem está. no meu caso, ficava na área de perfil em cima do texto "mensagens". Dependendo da sua Skin, ás vezes a função da imagem de status fica em locais diferentes, dessa forma talvez ocorra algum "bug"... mas pode ser facilmente corrigido editando o CSS que está no tutorial ou até mesmo mudando de posição no HTML.

Era só isso que faltava em meu forum, Obrigado :v

Obrigado , por ter compartilhado !

Me dói o que pode ser feito com esse código.