Informações do Perfil

4 participantes

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

Tópico resolvido Informações do Perfil

Mensagem por Cooper 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:
4a4a4a - 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
*****

Membro desde : 19/02/2013
Mensagens : 415
Pontos : 741

http://apixelados.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Informações do Perfil

Mensagem por tikky 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.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Informações do Perfil

Mensagem por Cooper 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
*****

Membro desde : 19/02/2013
Mensagens : 415
Pontos : 741

http://apixelados.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Informações do Perfil

Mensagem por Cooper 12.09.19 22:18

up?
Cooper

Cooper
*****

Membro desde : 19/02/2013
Mensagens : 415
Pontos : 741

http://apixelados.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Informações do Perfil

Mensagem por Cooper 13.09.19 22:24

up?
Cooper

Cooper
*****

Membro desde : 19/02/2013
Mensagens : 415
Pontos : 741

http://apixelados.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Informações do Perfil

Mensagem por Harleen 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
Super Membro

Membro desde : 09/07/2012
Mensagens : 1779
Pontos : 2373

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Informações do Perfil

Mensagem por Cooper 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
*****

Membro desde : 19/02/2013
Mensagens : 415
Pontos : 741

http://apixelados.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Informações do Perfil

Mensagem por Harleen 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
Super Membro

Membro desde : 09/07/2012
Mensagens : 1779
Pontos : 2373

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Informações do Perfil

Mensagem por Cooper 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
*****

Membro desde : 19/02/2013
Mensagens : 415
Pontos : 741

http://apixelados.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Informações do Perfil

Mensagem por RafaelS. 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!
RafaelS.

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Informações do Perfil

Mensagem por Cooper 16.09.19 16:12

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

Cooper
*****

Membro desde : 19/02/2013
Mensagens : 415
Pontos : 741

http://apixelados.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Informações do Perfil

Mensagem por Harleen 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
Super Membro

Membro desde : 09/07/2012
Mensagens : 1779
Pontos : 2373

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Informações do Perfil

Mensagem por Cooper 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
*****

Membro desde : 19/02/2013
Mensagens : 415
Pontos : 741

http://apixelados.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Informações do Perfil

Mensagem por RafaelS. 18.09.19 19:10

Olá!

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

Até mais. Feliz
RafaelS.

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Informações do Perfil

Mensagem por Cooper 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
*****

Membro desde : 19/02/2013
Mensagens : 415
Pontos : 741

http://apixelados.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Informações do Perfil

Mensagem por RafaelS. 18.09.19 20:35

Adicione ainda este CSS:

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

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Informações do Perfil

Mensagem por Cooper 18.09.19 20:43

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

Cooper
*****

Membro desde : 19/02/2013
Mensagens : 415
Pontos : 741

http://apixelados.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Informações do Perfil

Mensagem por RafaelS. 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.
RafaelS.

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos