Barra divisória nos tópicos

[Diogo Ferreira]

Qual é minha questão:
Olá amigos, eu gostaria de ter uma "barra" dessas no meu fórum, vejam: http://gyazo.com/6b5a2083e5a37711f6fee9348cd6ff3f

A barra que tem o nome, o símbolo de Offline/Online antes do nome, data etc.

Obrigado.

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

Versão do fórum:
PUNBB

[Raayzeck]

Poderia enviar o link do fórum em que viu tal efeito ?

[Diogo Ferreira]

http://contra-ataque.com/

Tem aí amigo.

[JScript]

@Diogo Ferreira

Olá amigo, apesar de seu fórum ser versão punbb onde é possível a edição dos templates, o mesmo efeito dá pra ser feito somente com CSS, veja:

Código:


.pun .posthead {
  margin: -8px 0 0 -207px !important;
  width: 939px !important;
}
.pun .posthead h2 strong:before {
  content: "#";
}


Resultado em seu fórum:


Nota: Se você não ficar satisfeito, podemos fazer de várias outras formas incluindo a edição dos templates!

Abraços,

JS

[Diogo Ferreira]

Amigo esse é o original do fórum, eu gostava do que meti acima.

[JScript]

Amigo esse é o original do fórum, eu gostava do que meti acima.

O original de seu fórum é esse:


O código que é mais semelhante ao que você deseja é:

Código:


.pun .post .user {
  background-color: rgba(0, 0, 0, 0) !important;
  padding-top: 55px !important;
  top: -45px !important;
}
.pun .posthead {
  margin: -8px 0 0 -207px !important;
  width: 939px !important;
}
.posthead h2:not(strong) {
  margin-left: 190px !important;
}
.pun .posthead h2 strong:before {
  content: "#";
}
.pun .posthead h2 strong {
  margin-right: 10px;
}


Resultado:


As cores ficam a seu critério,

JS

[Diogo Ferreira]

Amigo, onde diz "Mundial 2014 - informações em quinta..." não dá para tirar tudo e colocar apenas "Postado .." e a data e a hora em que é postado, exatamente igual à imagem - http://gyazo.com/b10d22dc6bb212b7eb461f5f44ced5fb

---------------------------

Outra coisa é o nick, será que dá para encostar ao lado esquerdo e que antes meta o simbolo do Online e do Offline, dependendo. 
imagem - http://gyazo.com/5f4bfe543e4ff7543cf0ab3a4bb9327d

[JScript]

Com certeza, troque o código acima por este:

Spoiler:

Resultado:


Nota: Eu não vi que você habilitou o ícone de Online/Offline, verifique no painel de controle ok?

Abraços,

JS

[Diogo Ferreira]

Aii JScript, desculpe mas esqueci-me de uma coisa!

Os nomes queria iguais a estes - http://gyazo.com/5f4bfe543e4ff7543cf0ab3a4bb9327d , sem bold nem cores, iguais completamente.

-------------------

Icon de online já ativado, está de momento em baixo das rankbars, queria atrás do nick. Vou deixar os icons de off e on aqui.

Online: https://2img.net/h/i137.photobucket.com/albums/q224/RM_7/online.png

Offline: https://2img.net/h/i137.photobucket.com/albums/q224/RM_7/offline.png

Atrás do nick sff, mais uma vez desculpe!

[JScript]

Fique tranquilo...

Troque por este código abaixo:

Spoiler:

Resultado:


JS

[Diogo Ferreira]

Tá perfeito amigo, só uma coisa, quando está offline aparece o icon q lhe dei para offline, certo?

[JScript]

Com certeza que sim!!!

Abraços,

JS

[Diogo Ferreira]

Amigo quando se está offfline reparei que o simbolo de offline não aparece e que o nome dos outros users não está igual ao meu (Diogoo.), queria todos iguais.
Imagem: http://gyazo.com/ed05548631b503c12715ba8a0182327f

Abraços.

[JScript]

No último código que postei acima, procure por:
.pun .user-ident .username a strong
E troque por:
.pun .user-ident .username a strong, .pun .user-ident .username a

Sobre o ícone offline, verifique no painel de controle se ao adicionar você salvou a configuração pois ele não está presente, somente o Online!

JS

[Diogo Ferreira]

Ao ir ao Painel de Controlo não dava para colocar o ícon Offline, na zona da 'Gestão das Imagens'.
Eu pensei numa situação, não dava para por na barra o icon de offline a todos e só aparecia o de Online a quem realmente tivesse conetado, se desconetasse aparecia o offline again. Percebeu?

[Mesuko]

O código para PhpBB3 é o mesmo?

[JScript]

O código para PhpBB3 é o mesmo?

Infelizmente não, terás que abrir seu próprio tópico!

@Diogo Ferreira
Eu fui conferir e realmente é dessa forma... Mas a sua ideia é excelente e funcional, basta adicionar o código abaixo:

Código:


.pun .posthead {
  background-image: url("http://i137.photobucket.com/albums/q224/RM_7/offline.png") !important;
  background-position: 15px center !important;
  background-repeat: no-repeat !important;
  z-index: 0;
}


Resultado:


Abraços,

JS

[Diogo Ferreira]

JScript, muito obrigado pela ajuda e disponibilidade, leva +!

Pode fechar amigo.