Informações do Perfil

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

Atendido / Resolvido Informações do Perfil

Mensagem por Cooper em 11.09.19 15:17

Detalhes da questão


Endereço do fórum: http://apixelados.forumeiros.com
Versão do fórum: PunBB

Descrição


Olá, bom dia
Estava passando por um fórum e vi essas informações:
Informações do Perfil WGAHrBE
Gostei muito do estilo dessas informações, queria saber se é possível fazer o mesmo no meu fórum.

Link do fórum aonde eu vi: https://hazeforum.com/
Cooper

Cooper
Usuário avançado

Masculino
Inscrito dia : 19/02/2013
Mensagens : 413
Pontos Ativos : 732

http://apixelados.forumeiros.com

Atendido / Resolvido Re: Informações do Perfil

Mensagem por Pedxz em 11.09.19 15:36

Olá @Cooper,
o senhor poderia ir mais a fundo do que deseja? Algum semelhante a esta Questão Resolvida!?

Aguardo uma resposta sua,
pedxz.
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 3254
Pontos Ativos : 3912

https://power-pixel.net

Atendido / Resolvido Re: Informações do Perfil

Mensagem por Cooper em 11.09.19 16:05

Desculpe se não foi muito especifico, eu quero colocar as informações do meu perfil igual (se tiver como) a esse print que postei, com os ícones, esse mesmo alinhamento e etc.
Cooper

Cooper
Usuário avançado

Masculino
Inscrito dia : 19/02/2013
Mensagens : 413
Pontos Ativos : 732

http://apixelados.forumeiros.com

Atendido / Resolvido Re: Informações do Perfil

Mensagem por Cooper em 12.09.19 22:18

up?
Cooper

Cooper
Usuário avançado

Masculino
Inscrito dia : 19/02/2013
Mensagens : 413
Pontos Ativos : 732

http://apixelados.forumeiros.com

Atendido / Resolvido Re: Informações do Perfil

Mensagem por Cooper em 13.09.19 22:24

up?
Cooper

Cooper
Usuário avançado

Masculino
Inscrito dia : 19/02/2013
Mensagens : 413
Pontos Ativos : 732

http://apixelados.forumeiros.com

Atendido / Resolvido Re: Informações do Perfil

Mensagem por Harleen em 14.09.19 0:08

Boa noite... vou iniciar pela posição das informações, quanto aos ícones, ainda estou pensando em como fazer

no viewtopic_body procure por
Código:
<!-- BEGIN profile_field --><span class="post_field">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
e troque por
Código:
<!-- BEGIN profile_field -->
<span class="profile-field">{postrow.displayed.profile_field.LABEL}
<span class="value">{postrow.displayed.profile_field.CONTENT}</span>               {postrow.displayed.profile_field.SEPARATOR}</span>
<!-- END profile_field -->

Na sua folha CSS
Código:
/* center profile fields */
.profile-field {
  font-size:0;
  display:block;
}
.profile-field .label, .profile-field .value {
  font-size:12px;
  vertical-align:top;
  display:inline-block;
  width:50%;
  overflow:hidden;
  word-break:break-word;
}
.profile-field .label {text-align: left;}
.profile-field .value {text-align: right;}
.profile-field .value:before {
  content:" ";
  margin-left:3px;
}

O resultado esperado será esse https://prnt.sc/p5vr0i

Como disse ainda estou tentando os ícones...
Harleen

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1735
Pontos Ativos : 2302

https://antenadogames.forumeiros.com/

Atendido / Resolvido Re: Informações do Perfil

Mensagem por Cooper em 14.09.19 13:39

@Harleen escreveu:Boa noite... vou iniciar pela posição das informações, quanto aos ícones, ainda estou pensando em como fazer

no viewtopic_body procure por
Código:
<!-- BEGIN profile_field --><span class="post_field">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
e troque por
Código:
<!-- BEGIN profile_field -->
<span class="profile-field">{postrow.displayed.profile_field.LABEL}
<span class="value">{postrow.displayed.profile_field.CONTENT}</span> {postrow.displayed.profile_field.SEPARATOR}</span>
<!-- END profile_field -->

Na sua folha CSS
Código:
/* center profile fields */
.profile-field {
  font-size:0;
  display:block;
}
.profile-field .label, .profile-field .value {
  font-size:12px;
  vertical-align:top;
  display:inline-block;
  width:50%;
  overflow:hidden;
  word-break:break-word;
}
.profile-field .label {text-align: left;}
.profile-field .value {text-align: right;}
.profile-field .value:before {
  content:" ";
  margin-left:3px;
}

O resultado esperado será esse https://prnt.sc/p5vr0i

Como disse ainda estou tentando os ícones...

Boa, deu certo, só falta os ícones se tiver como, se for de ajuda eu já utilizo o fontfont awesome nos ranks, se tiver como aproveitar. ^^
Cooper

Cooper
Usuário avançado

Masculino
Inscrito dia : 19/02/2013
Mensagens : 413
Pontos Ativos : 732

http://apixelados.forumeiros.com

Atendido / Resolvido Re: Informações do Perfil

Mensagem por Harleen em 16.09.19 3:30

@Cooper escreveu:Boa, deu certo, só falta os ícones se tiver como, se for de ajuda eu já utilizo o fontfont awesome nos ranks, se tiver como aproveitar. ^^

Pois bem... graças a essa mensagem do RafaelS. nessa questão Envergonhado , consegui terminar de adicionar os ícones.

Crie um novo JavaScript com investimento nos tópicos.
Código:
$(function() {
   $('.label:contains("Título")').addClass("tit");
   $('.label:contains("Registro")').addClass("reg");
   $('.label:contains("Mensagens")').addClass("msgs");
   $('.label:contains("Reputação")').addClass("rep");
});

E na folha CSS
Código:
span.label:before { font-family: "Fontawesome"; margin-right: 3px; }
span.label.tit:before { content: "\f1c2";}
span.label.reg:before { content: "\f133";}
span.label.msgs:before { content: '\f003';}
span.label.rep:before {content:'\f164';}

Ainda na folha CSS procure na busca .pun .user .user-info e troque por esse
Código:
.pun .user .user-info {
    background: #F5F5F5;
    border-top: 1px solid #D9DBDD;
    color: #666;
    line-height: 1.8em;
    padding: 3px!important;
}

O Resultado https://prnt.sc/p6knvr
Harleen

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1735
Pontos Ativos : 2302

https://antenadogames.forumeiros.com/

Atendido / Resolvido Re: Informações do Perfil

Mensagem por Cooper em 16.09.19 13:16

Olá, bom dia Harleen, obtive o resultado que queria, antes de fechar o tópico teria como tirar o espaço entre os títulos, por exemplo: "Mensagens : ", quero deixar "Mensagens:".
Cooper

Cooper
Usuário avançado

Masculino
Inscrito dia : 19/02/2013
Mensagens : 413
Pontos Ativos : 732

http://apixelados.forumeiros.com

Atendido / Resolvido Re: Informações do Perfil

Mensagem por RafaelS. em 16.09.19 14:40

Olá!

Adicione à sua folha de estilos (CSS):
Código:
span.label {
    font-size: 0px !important;
}

span.label span {
    font-size: 12px;
}

span.label span:after {content: ':';}
span.label:before {
    font-size: 12px;
}

Até breve!


Eu sou o RafaelS.,
Eu aconselho-lhe ler os seguintes tópicos:

Seta Para evitar ser punido é importante que leia  o regulamento geral do Fórum dos fóruns.
Seta Antes de criar o seu pedido de suporte certifique-se de ler o regulamento da seção de suporte.
Seta Quando for criar o seu tópico tente ser o mais específico possível, para que nós possámos entender!

"O importante não é vencer todos os dias, mas lutar sempre."
Informações do Perfil XCPergr
Informações do Perfil 6KeRsER
RafaelS.

RafaelS.
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 4966
Pontos Ativos : 5948

http://techmais.forumeiros.com/

Atendido / Resolvido Re: Informações do Perfil

Mensagem por Cooper em 16.09.19 16:12

Teve resultado porém meio que desorganizou o código do Harleen, veja:
Antes:
Informações do Perfil P9i4Daj
Depois:
Informações do Perfil Ka49ATq
Cooper

Cooper
Usuário avançado

Masculino
Inscrito dia : 19/02/2013
Mensagens : 413
Pontos Ativos : 732

http://apixelados.forumeiros.com

Atendido / Resolvido Re: Informações do Perfil

Mensagem por Harleen em 17.09.19 15:54

Deixe o primeiro campo visível para visitantes e depois adicione o código que o Rafael te enviou.
Harleen

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1735
Pontos Ativos : 2302

https://antenadogames.forumeiros.com/

Atendido / Resolvido Re: Informações do Perfil

Mensagem por Cooper em 17.09.19 16:29

@Harleen escreveu:Deixe o primeiro campo visível para visitantes e depois adicione o código que o Rafael te enviou.

Fiz isso, mas não resultou, continuou a mesma coisa =\
Cooper

Cooper
Usuário avançado

Masculino
Inscrito dia : 19/02/2013
Mensagens : 413
Pontos Ativos : 732

http://apixelados.forumeiros.com

Atendido / Resolvido Re: Informações do Perfil

Mensagem por RafaelS. em 18.09.19 19:10

Olá!

Na gestão dos perfis, mude a cor do campo Título para #4A4A4A.

Até mais. Feliz


Eu sou o RafaelS.,
Eu aconselho-lhe ler os seguintes tópicos:

Seta Para evitar ser punido é importante que leia  o regulamento geral do Fórum dos fóruns.
Seta Antes de criar o seu pedido de suporte certifique-se de ler o regulamento da seção de suporte.
Seta Quando for criar o seu tópico tente ser o mais específico possível, para que nós possámos entender!

"O importante não é vencer todos os dias, mas lutar sempre."
Informações do Perfil XCPergr
Informações do Perfil 6KeRsER
RafaelS.

RafaelS.
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 4966
Pontos Ativos : 5948

http://techmais.forumeiros.com/

Atendido / Resolvido Re: Informações do Perfil

Mensagem por Cooper em 18.09.19 20:05

@RafaelS. escreveu:Olá!

Na gestão dos perfis, mude a cor do campo Título para #4A4A4A.

Até mais. Feliz

Perfeito, agora só o espaçamento entre eles que ficou muito, teria como diminuir?
Cooper

Cooper
Usuário avançado

Masculino
Inscrito dia : 19/02/2013
Mensagens : 413
Pontos Ativos : 732

http://apixelados.forumeiros.com

Atendido / Resolvido Re: Informações do Perfil

Mensagem por RafaelS. em 18.09.19 20:35

Adicione ainda este CSS:

Código:
.user-info span.profile-field {
    margin-top: -5px;
}


Eu sou o RafaelS.,
Eu aconselho-lhe ler os seguintes tópicos:

Seta Para evitar ser punido é importante que leia  o regulamento geral do Fórum dos fóruns.
Seta Antes de criar o seu pedido de suporte certifique-se de ler o regulamento da seção de suporte.
Seta Quando for criar o seu tópico tente ser o mais específico possível, para que nós possámos entender!

"O importante não é vencer todos os dias, mas lutar sempre."
Informações do Perfil XCPergr
Informações do Perfil 6KeRsER
RafaelS.

RafaelS.
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 4966
Pontos Ativos : 5948

http://techmais.forumeiros.com/

Atendido / Resolvido Re: Informações do Perfil

Mensagem por Cooper em 18.09.19 20:43

Agora sim, perfeito, pode fechar, muito obrigado a todos.
@Resolvido
Cooper

Cooper
Usuário avançado

Masculino
Inscrito dia : 19/02/2013
Mensagens : 413
Pontos Ativos : 732

http://apixelados.forumeiros.com

Atendido / Resolvido Re: Informações do Perfil

Mensagem por RafaelS. em 18.09.19 21:12

Questão resolvida

Esta questão foi dada como resolvida pelo seu autor, e por esse motivo será marcada como resolvida e movida para o arquivo de questões resolvidas desta área.


Eu sou o RafaelS.,
Eu aconselho-lhe ler os seguintes tópicos:

Seta Para evitar ser punido é importante que leia  o regulamento geral do Fórum dos fóruns.
Seta Antes de criar o seu pedido de suporte certifique-se de ler o regulamento da seção de suporte.
Seta Quando for criar o seu tópico tente ser o mais específico possível, para que nós possámos entender!

"O importante não é vencer todos os dias, mas lutar sempre."
Informações do Perfil XCPergr
Informações do Perfil 6KeRsER
RafaelS.

RafaelS.
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 4966
Pontos Ativos : 5948

http://techmais.forumeiros.com/

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


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