Barra divisória nos tópicos

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Barra divisória nos tópicos

Mensagem por Diogo Ferreira em 13/01/14, 07:19 pm

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
avatar

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

Ver perfil do usuário http://foradjogo.forumeiros.com/

Resolvido Re: Barra divisória nos tópicos

Mensagem por @ Thiago @ Arromba @ em 13/01/14, 07:46 pm

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

@ Thiago @ Arromba @
Nível 9

Masculino
Inscrito dia : 07/09/2012
Mensagens : 181
Pontos Ativos : 343

Ver perfil do usuário http://mundial.forum-pro.net https://www.facebook.com/thiago.jackson.16 https://twitter.com/thiago3457

Resolvido Re: Barra divisória nos tópicos

Mensagem por Diogo Ferreira em 13/01/14, 07:48 pm

avatar

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

Ver perfil do usuário http://foradjogo.forumeiros.com/

Resolvido Re: Barra divisória nos tópicos

Mensagem por JScript em 14/01/14, 02:08 pm

@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
avatar

JScript
Membro do Fórum

Masculino
Inscrito dia : 14/03/2013
Mensagens : 1449
Pontos Ativos : 1900

Ver perfil do usuário http://jscript.forumeiros.com/

Resolvido Re: Barra divisória nos tópicos

Mensagem por Diogo Ferreira em 14/01/14, 04:25 pm

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

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

Ver perfil do usuário http://foradjogo.forumeiros.com/

Resolvido Re: Barra divisória nos tópicos

Mensagem por JScript em 14/01/14, 04:36 pm

@Diogo Ferreira escreveu: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
avatar

JScript
Membro do Fórum

Masculino
Inscrito dia : 14/03/2013
Mensagens : 1449
Pontos Ativos : 1900

Ver perfil do usuário http://jscript.forumeiros.com/

Resolvido Re: Barra divisória nos tópicos

Mensagem por Diogo Ferreira em 14/01/14, 04:53 pm

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
avatar

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

Ver perfil do usuário http://foradjogo.forumeiros.com/

Resolvido Re: Barra divisória nos tópicos

Mensagem por JScript em 14/01/14, 05:04 pm

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

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;
}
.posthead h2 a {
  display: none;
}
.posthead h2:before {
  content: "Postado" !important;
}
.pun .user-ident .username {
  margin-left: -15px !important;
}

Resultado:


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

Abraços,

JS
avatar

JScript
Membro do Fórum

Masculino
Inscrito dia : 14/03/2013
Mensagens : 1449
Pontos Ativos : 1900

Ver perfil do usuário http://jscript.forumeiros.com/

Resolvido Re: Barra divisória nos tópicos

Mensagem por Diogo Ferreira em 14/01/14, 05:19 pm

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: http://illiweb.com/fa/pbucket.gif

Offline: http://illiweb.com/fa/pbucket.gif

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

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

Ver perfil do usuário http://foradjogo.forumeiros.com/
  • 0

Resolvido Re: Barra divisória nos tópicos

Mensagem por JScript em 14/01/14, 05:36 pm

Fique tranquilo...

Troque por este código abaixo:
Spoiler:

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) {
  color: #777777 !important;
  margin-left: 190px !important;
  text-shadow: 0 1px 0 #FFFFFF !important;
}
.pun .posthead h2 strong:before {
  content: "#";
}
.pun .posthead h2 strong {
  margin-right: 10px;
}
.posthead h2 a {
  display: none;
}
.posthead h2:before {
  content: "Postado" !important;
}
.pun .user-ident .username {
  margin-left: -1px !important;
}
.pun .user-ident .username a strong {
  color: #555555 !important;
  font-weight: normal !important;
  text-shadow: 0 1px 0 #FFFFFF !important;
}
.i_icon_online {
  left: 0;
  position: absolute;
  top: 6px;
}

Resultado:


JS
avatar

JScript
Membro do Fórum

Masculino
Inscrito dia : 14/03/2013
Mensagens : 1449
Pontos Ativos : 1900

Ver perfil do usuário http://jscript.forumeiros.com/

Resolvido Re: Barra divisória nos tópicos

Mensagem por Diogo Ferreira em 14/01/14, 05:43 pm

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

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

Ver perfil do usuário http://foradjogo.forumeiros.com/

Resolvido Re: Barra divisória nos tópicos

Mensagem por JScript em 14/01/14, 05:45 pm

Com certeza que sim!!!

Abraços,

JS
avatar

JScript
Membro do Fórum

Masculino
Inscrito dia : 14/03/2013
Mensagens : 1449
Pontos Ativos : 1900

Ver perfil do usuário http://jscript.forumeiros.com/

Resolvido Re: Barra divisória nos tópicos

Mensagem por Diogo Ferreira em 14/01/14, 05:52 pm

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.
avatar

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

Ver perfil do usuário http://foradjogo.forumeiros.com/

Resolvido Re: Barra divisória nos tópicos

Mensagem por JScript em 14/01/14, 05:56 pm

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
avatar

JScript
Membro do Fórum

Masculino
Inscrito dia : 14/03/2013
Mensagens : 1449
Pontos Ativos : 1900

Ver perfil do usuário http://jscript.forumeiros.com/

Resolvido Re: Barra divisória nos tópicos

Mensagem por Diogo Ferreira em 14/01/14, 06:03 pm

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?
avatar

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

Ver perfil do usuário http://foradjogo.forumeiros.com/

Resolvido Re: Barra divisória nos tópicos

Mensagem por Mesuko em 14/01/14, 06:12 pm

O código para PhpBB3 é o mesmo?

Mesuko
Nível 5

Masculino
Inscrito dia : 29/05/2012
Mensagens : 56
Pontos Ativos : 94

Ver perfil do usuário http://WorldZumbie.forumeiro.com
  • 0

Resolvido Re: Barra divisória nos tópicos

Mensagem por JScript em 14/01/14, 06:27 pm

@Mesuko escreveu: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://illiweb.com/fa/pbucket.gif") !important;
  background-position: 15px center !important;
  background-repeat: no-repeat !important;
  z-index: 0;
}

Resultado:


Abraços,

JS
avatar

JScript
Membro do Fórum

Masculino
Inscrito dia : 14/03/2013
Mensagens : 1449
Pontos Ativos : 1900

Ver perfil do usuário http://jscript.forumeiros.com/

Resolvido Re: Barra divisória nos tópicos

Mensagem por Diogo Ferreira em 14/01/14, 06:33 pm

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

Pode fechar amigo.
avatar

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

Ver perfil do usuário http://foradjogo.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum