Como adicionar o ícone conectado ao lado do nome

Detalhes da questão

Endereço do fórum: https://lucianomicle.foroactivo.com/
Versão do fórum: AwesomeBB

Descrição

Olá amigos!
Eu tenho esse código, mas funciona para PhppBB3 e agora estou usando a versão AwesomeBB

Spoiler:

Tenho um código que funciona no Phppbb3, queria usá-lo para colocar na minha nova versão que estou usando mas não funciona para mim.
Deixo o código para ver o que pode ser feito

Código:

$(function() {
$('.post.online').find(".authname").prepend('<img src="https://i.servimg.com/u/f13/19/81/07/80/useron10.gif" alt="conectado" title="Conectado"/> ');
  $('.post:not(.online)').find(".authname").prepend('<img src="https://i.servimg.com/u/f13/19/81/07/80/userof10.gif" alt="desconectado" title="Desconectado"/> ');
});

Olá @LucianoMicle,

Mas a #awesomebb já tem os ícones de estado por defeito. Qual será o propósito de adaptar o código? Adicionar o estado Offline?! Redirecionar?


(Aguardo uma resposta sua)
Atenciosamente,
pedxz.

Olá @Pedxz

Sim, eles têm seus códigos, mas eu não sei como editá-los, então quero adicionar o código que imprimi no meu fórum Phpbb3 ao AwesomeBB

Sinceramente,
Luciano.

Olá, boa noite @LucianoMicle!

O mesmo pode me informar onde você quer que esse código funcione?

(Aguardo respostas).
Atenciosamente,
Wusthy.

Wusthy escreveu:Olá, boa noite @LucianoMicle!

O mesmo pode me informar onde você quer que esse código funcione?

(Aguardo respostas).
Atenciosamente,
Wusthy.

Olá boa noite @Wusthy

Sim, quero usar o código ao lado do apelido, parte esquerda.

Saudações

Olá @LucianoMicle

Seria nessa parte?

É onde eu gostaria de colocar o ícone, seja online ou offline.

Apage o script e adicione na folha de estilo (CSS) o seguinte código:

Código:

.online .post-author-status {
  display: none !important;
}

.post-wrap .post-author-name::before {
  content: url(https://i.servimg.com/u/f13/19/81/07/80/userof10.gif);
  padding-right: .5rem;
}

.online .post-author-name::before {
  content: url(https://i.servimg.com/u/f13/19/81/07/80/useron10.gif);
}

Olá! @Pedxz
Parece ótimo, mas você pode adicionar um sinal que diga se está offline ou online?
É como uma dica de ferramenta.

Saudações!

Olá @LucianoMicle!

Modifique o código de sua Folha de estilo (CSS) passada pelo meu amigo @pedxz
E adicione essa abaixo:

Código:

.online .post-author-status {
  display: none !important;
}
 
.post-wrap .post-author-name::before {
  content: url(https://i.servimg.com/u/f13/19/81/07/80/userof10.gif) 'Offline';
  padding-right: .5rem;
}
 
.online .post-author-name::before {
  content: url(https://i.servimg.com/u/f13/19/81/07/80/useron10.gif) 'Online';
}


Acredito que esteja mais fácil de identificar quando está offline e/ou online!

Alguma solução que saia como um tipo de dica de ferramenta ao passar o mouse?

Olá @LucianoMicle!

Modifique o código anterior para esse aqui abaixo:

Código:

.online .post-author-status {
  display: none !important;
}
 
.post-wrap .post-author-name::before {
  content: url(https://i.servimg.com/u/f13/19/81/07/80/userof10.gif);
  padding-right: .5rem;
}
.post-wrap .post-author-name:hover::before {
  content: 'Desconectado';
  background: red;
  border-radius: 5px;
  color: white;
  display: inline-flex;
  margin-right: 5px;
  padding-left: 7px;
  padding-right: .5rem;
}
.online .post-author-name::before {
  content: url(https://i.servimg.com/u/f13/19/81/07/80/useron10.gif) ;
}
.online .post-author-name:hover::before {
  content: 'En Linea';
  background: #0cac04;
  border-radius: 5px;
  color: white;
  display: inline-flex;
  margin-right: 5px;
  padding-left: 7px;
  padding-right: .5rem;
}


Eu sou excelente! Muito Obrigado.

Até a próxima

De nada, amigo.

Tópico resolvido Movido para "Questões resolvidas".

Tópico movido O tópico foi movido para o setor: Questões sobre a aparência do fórum.

Nota: É importante que procure escolher a área certa para a sua questão afim de manter a organização do fórum.
Para mais informações, leia o Regulamento do Fórum dos Fóruns