CAPA DE PERFIL (como facebook, twitter e IPB) sem extensões - phpbb 3.1.X/3.2.X

Tutoriais, Dicas e Truques
Avatar do usuário
LucasLV
Moderador
Moderador
Mensagens: 547
Registrado em: 18 Out 2013, 04:40

CAPA DE PERFIL (como facebook, twitter e IPB) sem extensões - phpbb 3.1.X/3.2.X

Mensagem por LucasLV » 16 Jan 2017, 22:11

Introdução:
Vamos aprender hoje como fazer uma capa de perfil para phpBB, semelhante àquela do facebook, twitter, IPB e etc. Usaremos campos de perfil personalizados e desta forma o usuário só precisará inserir o linik da imagem. O que é bom, pois a imagem não será copiada pro servidor e não ocupará espaço no mesmo.

Primeira etapa - No ACP
Navegue até ACP > USUÁRIOS E GRUPOS > Campos de perfil personalizados. Lá no rodapé, defina o nome como capa e escolha o tipo URL (link), como mostra a imagem abaixo. Depois clique em Criar novo campo.

Imagem

Na próxima tela, apenas marque a opção Exibir no Painel de controle do usuário.

Imagem

Na próxima tela, em Opções específicas ao tipo de perfil, você pode deixar como mostra a imagem.

Imagem

Salve o novo campo de perfil. Agora é hora de posicionar o campo para que seja imprimida a imagem e não link, através de HTML.

Segunda Etapa - No template
Abra root/styles/seuestilo/template/memberlist_view.html

Procure

Código: Selecionar todos

<!-- BEGIN custom_fields -->
			<!-- IF not custom_fields.S_PROFILE_CONTACT -->
Substitua com

Código: Selecionar todos

<!-- BEGIN custom_fields -->
		<!-- IF not custom_fields.S_PROFILE_CONTACT and not custom_fields.S_PROFILE_CAPA  -->
Explicação:Como vimos no tutorial anterior, este código faz com que o campo não seja exibido na localização padrão dos profile fields e assim podemos posicionar nossa capa lá em cima do perfil, como deve ser.

Ainda em memberlist_view.html, procure:

Código: Selecionar todos

<form method="post" action="{S_PROFILE_ACTION}" id="viewprofile">
ADICIONE ABAIXO

Código: Selecionar todos

<!-- IF S_PROFILE_CAPA -->
	<div class="capa-de-perfil-imagem">
		<img src="{PROFILE_CAPA_VALUE_RAW}" class="header-customizado" />
	</div>
<!-- ENDIF -->
Abra root/styles/seuestilo/common.css
Adicione la embaixo

Código: Selecionar todos

/* Capa de perfil por LucasLV */

.capa-de-perfil-imagem {
  width: 100%;
  overflow: auto;
  position: relative;
}
.capa-de-perfil-imagem > .header-customizado {
  width: 100%;
}
E o resultado se segue...

No UCP, link para a imagem
Imagem

No perfil, a capa é exibida
Imagem

E é isso. Espero que gostem. E peço que se reproduzirem esse tutorial, creditem o suporte phpBB, da mesma forma que damos o crédito necessário a conteúdos extraídos de outros sites :-)


Avatar do usuário
LucasLV
Moderador
Moderador
Mensagens: 547
Registrado em: 18 Out 2013, 04:40

Re: CAPA DE PERFIL (como facebook, twitter e IPB) sem extensões - phpbb 3.1.X/3.2.X

Mensagem por LucasLV » 23 Jan 2017, 19:23

Que maravilha! :-D

VOu baixar

Responder

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado e 1 visitante