Adicionar "status" antes da imagem online

Qual é minha questão:
Saudações, vim por meio desse tópico pedir-lhes ajuda sobre como eu arrumaria a imagem online do meu fórum e colocasse escrito: Status antes ?
Como no print que destaquei em verde:


Queria apenas colocar Status antes da imagem.
Tentei esse code, mas não dei sucesso, eu não sei css ^^ apenas achei que iria dar certo, mas falhei =P

Código:

<h4 Status: ><a class="onlineuserpost" style="margin-left: 5px;">{postrow.displayed.ONLINE_IMG}</a></h4>

Endereço do meu fórum:
http://rpgplayadventure.forumeiros.com

Versão do fórum:
PUNBB

Saudações meu caro!

Aceda à:
Painel de Controle >> Visualização >> Imagens e Cores >> Cores >> Folha de estilo CSS

Tente um desses dois códigos(tente um de cada vez, se um não resultar, substitua-o pelo o outro).

Código 1:

Código:

.online:after {
content: "\A STATUS";
}

Código 2:

Código:

.online {
content: "\A STATUS";
}

Não se esqueça de salvar após implementar tal código!

Cordiais saudações!

Desculpe meu caro, mas nenhum deles resultou =\ nada mudou!

@recagonlei

Olá amigo, primeiramente terás que corrigir o erro no html:

<h4 status:=""><a style="margin-left: 5px;" class="onlineuserpost"></a></h4>

Remova status:="" e adicione o código abaixo:

Código:


.onlineuserpost:before {
  content: "Status ";
}


O resultado é:


Perceba que no momento do "print", você não estava online e por isso só ficou o nome!

Se trocar o seletor .onlineuserpost:before por este .onlineuserpost img:before, provavelmente o texto só aparecerá quando estiveres online!

Podemos melhorar isso ok?

JS

Eu irei adicionar onde no meu template ou css ? '-- eu não entendi muito bem meu caro!
E também eu queria que aparecesse tanto online quanto offline o status entende ?

@recagonlei

Você ainda não corrigiu o erro no html <h4 status:=""> no template!

JS

Desculpe , mas onde eu corrijo ? html perdão, mas não compreendi.
Eu procurei por essa linha no meu viewtopicbody, porém eu não achei.

Código:

<h4 status:=""><a style="margin-left: 5px;" class="onlineuserpost"></a></h4>

A seguinte frase sua revela que você sabe muito bem qual é o template:

recagonlei escreveu:
Tentei esse code, mas não dei sucesso, eu não sei css ^^ apenas achei que iria dar certo, mas falhei =P

Código:

<h4 Status: ><a class="onlineuserpost" style="margin-left: 5px;">{postrow.displayed.ONLINE_IMG}</a></h4>

Não estou certo?

JS

Me desculpe, mas você deveria ter especificador melhor que era para eu substituir pelo o meu antigo code, achei que estava se referindo há algum code existente quando disse para corrigir o erro!

Pois bem eu fiz o que mandaste agora, só que a "bolinha verde" ficou abaixo em vez de ficar ao lado!

Vamos começar do zero ok?

---

1- Novamente no template, remova o que está em negrito no código abaixo:

<h4 ";}="" "status:="" {content:="" .onlineuserpost:before="">

Deverá ficar apenas: <h4>
Não esqueça de publicar o template!

2- Entre no painel de controle de seu fórum e vá em Visualização -> Imagens e cores -> Cores, selecione a aba Folha de estilos CSS e adicione o código abaixo:

Código:

.user-basic-info h4:after {
  content: url("http://2img.net/i/fa/offline.png");
  margin-left: 19px;
  margin-top: -15px;
  position: absolute;
}
.onlineuserpost:before {
  content: "Status ";
}
.i_icon_online {
  z-index: 100;
}
.user-basic-info > h4 {
  z-index: 0;
}


Não pude comprovar o funcionamento pois você no momento estava offline!

JS

Não meu caro, eu estou online faz muito tempo e não sai, deixei a página em aberto para o teste do mesmo!

E tudo que disse para apagar não tem, a não ser o onlineuserpost mas não tem o before e o content, mas são vários

Meu template para ficar mais fácil para me ajudar:

Spoiler:

E o código css que me mandaste, faz com que o icone offline fique ao lado do nome do rank!

A seguinte variável da Forumeiros {postrow.displayed.ONLINE_IMG} é substituída pelo conteúdo de uma imagem na qual você adiciona no painel de controle seguindo os passos da imagem abaixo:


Mas de acordo com essa imagem:


Não consta o ícone de "Online", o endereço do ícone que está marcado na imagem é do offline que adicionei no código e lhe passei, perceba que eu o desabilitei para não haver dúvidas e ele somente ficará na posição correta quando você seguir os passos para adicionar o ícone de "Online"!!!

JS

Nossa agora eu me embaralhei todo, mas o template e o css está correto ? nada está de errado ? pois eu me embaralhei mais. Se você pudesse arrumar o template e o css com os icones já adicionados ficaria mais fácil, pois eu não estou entendendo :s
Pois aqui na minha máquina quando eu estou online aparece o ícone online, só que em baixo em vez do lado, dai eu não entendi o que disse na última resposta!

Vamos tentar novamente:

---

Veja a imagem abaixo:


Me mostre onde está o ícone de "Online" nela! Não vale falar que é o que está circulado pois esse ai é o de "Offline" que postei nesta mensagem: https://ajuda.forumeiros.com/t88874-adicionar-status-antes-da-imagem-online#602835

JS

Da maneira como você me informou não coloquei online, apenas está no lugar padrão onde fica e a imagem também de quando estou online:

Pois bem, não resolvi meu problema, mas como que acho que ninguém vai ajudar, podem fechar o tópico.