Atualizado: CAPA DE PERFIL e HEADER semelhante ao IPB para phpbb 3.2.x

Encontre aqui diversos Tutoriais, Dicas e Truques para iniciantes e avançados em phpBB3.
Avatar do usuário
LucasLV
Moderador
Moderador
Mensagens: 711
Registrado em: 18 Out 2013, 04:40

Atualizado: CAPA DE PERFIL e HEADER semelhante ao IPB para phpbb 3.2.x

Mensagem por LucasLV »

Tutorial atualizado em setembro de 2017: Header com capa de perfil semelhante ao IPBoard 4

Esse tutorial, em sua versão anterior, tinha como intuito ensinar como fazer manualmente uma capa de perfil para seu fórum phpbb 3.1.x ou 3.2.x usando campos de perfis personalizados. Por um tempo melhorei algumas coisas e procurei trazer um header bastante semelhante ao do ipboard, para que fique completo. Vamos usar o estilo prosilver como base.

RECOMENDAÇÃO: Embora usaremos o prosilver, não é recomendável que se faça alterações no estilo padrão do phpbb. Isso porque, ao atualizar, você perderá as suas modifcações na substituições dos arquivos. O ideal é você criar um estilo baseado no prosilver e fazer todas as alterações nele.

CRIANDO O CAMPO DE PERFIL CAPA - 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 seu novo campo de perfil. Não se esqueça, o nome dele é capa

ACABAMENTO - NO TEMPLATE

Lembre-se, estamos usando um template baseado em prosilver, portanto, caso não ache os códigos abaixe é possível que seu estilo seja bastante modificado.

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.

PROCURE:

Código: Selecionar todos

<div class="panel bg1<!-- IF S_ONLINE --> online<!-- ENDIF -->">
SUBSTITUA COM:

Código: Selecionar todos

<div class="panel bg1">
PROCURE:

Código: Selecionar todos

<!-- IF AVATAR_IMG -->
		<dl class="left-box">
			<dt class="profile-avatar">{AVATAR_IMG}</dt>
			<!-- EVENT memberlist_view_rank_avatar_before -->
			<!-- IF RANK_TITLE --><dd style="text-align: center;">{RANK_TITLE}</dd><!-- ENDIF -->
			<!-- IF RANK_IMG --><dd style="text-align: center;">{RANK_IMG}</dd><!-- ENDIF -->
			<!-- EVENT memberlist_view_rank_avatar_after -->
		</dl>
	<!-- ENDIF -->

	<dl class="left-box details profile-details">
		<dt>{L_USERNAME}{L_COLON}</dt>
		<dd>
			<!-- IF USER_COLOR --><span style="color: {USER_COLOR}; font-weight: bold;"><!-- ELSE --><span><!-- ENDIF -->{USERNAME}</span>
			<!-- IF U_EDIT_SELF --> [ <a href="{U_EDIT_SELF}">{L_EDIT_PROFILE}</a> ]<!-- ENDIF -->
			<!-- IF U_USER_ADMIN --> [ <a href="{U_USER_ADMIN}">{L_USER_ADMIN}</a> ]<!-- ENDIF -->
			<!-- IF U_USER_BAN --> [ <a href="{U_USER_BAN}">{L_USER_BAN}</a> ]<!-- ENDIF -->
			<!-- IF U_SWITCH_PERMISSIONS --> [ <a href="{U_SWITCH_PERMISSIONS}">{L_USE_PERMISSIONS}</a> ]<!-- ENDIF -->
		</dd>
		<!-- IF not AVATAR_IMG -->
			<!-- EVENT memberlist_view_rank_no_avatar_before -->
			<!-- IF RANK_TITLE --><dt>{L_RANK}{L_COLON}</dt> <dd>{RANK_TITLE}</dd><!-- ENDIF -->
			<!-- IF RANK_IMG --><dt><!-- IF RANK_TITLE -->&nbsp;<!-- ELSE -->{L_RANK}{L_COLON}<!-- ENDIF --></dt> <dd>{RANK_IMG}</dd><!-- ENDIF -->
			<!-- EVENT memberlist_view_rank_no_avatar_after -->
		<!-- ENDIF -->
		<!-- IF S_USER_INACTIVE --><dt>{L_USER_IS_INACTIVE}{L_COLON}</dt> <dd>{USER_INACTIVE_REASON}</dd><!-- ENDIF -->
		<!-- IF AGE !== '' --><dt>{L_AGE}{L_COLON}</dt> <dd>{AGE}</dd><!-- ENDIF -->
		<!-- IF S_GROUP_OPTIONS --><dt>{L_USERGROUPS}{L_COLON}</dt> <dd><select name="g">{S_GROUP_OPTIONS}</select> <input type="submit" name="submit" value="{L_GO}" class="button2" /></dd><!-- ENDIF -->
		<!-- EVENT memberlist_view_non_contact_custom_fields_before -->
		<!-- BEGIN custom_fields -->
			<!-- IF not custom_fields.S_PROFILE_CONTACT -->
				<dt>{custom_fields.PROFILE_FIELD_NAME}{L_COLON}</dt> <dd>{custom_fields.PROFILE_FIELD_VALUE}</dd>
			<!-- ENDIF -->
		<!-- END custom_fields -->
		<!-- EVENT memberlist_view_non_contact_custom_fields_after -->
		<!-- EVENT memberlist_view_zebra_before -->
		<!-- IF S_USER_LOGGED_IN and S_ZEBRA -->
			<!-- IF U_REMOVE_FRIEND -->
				<dt>&nbsp;</dt> <dd class="zebra"><a href="{U_REMOVE_FRIEND}" data-ajax="zebra"><strong>{L_REMOVE_FRIEND}</strong></a></dd>
			<!-- ELSEIF U_REMOVE_FOE -->
				<dt>&nbsp;</dt> <dd class="zebra"><a href="{U_REMOVE_FOE}" data-ajax="zebra"><strong>{L_REMOVE_FOE}</strong></a></dd>
			<!-- ELSE -->
				<!-- IF U_ADD_FRIEND -->
					<dt>&nbsp;</dt> <dd class="zebra"><a href="{U_ADD_FRIEND}" data-ajax="zebra"><strong>{L_ADD_FRIEND}</strong></a></dd>
				<!-- ENDIF -->
				<!-- IF U_ADD_FOE -->
					<dt>&nbsp;</dt> <dd class="zebra"><a href="{U_ADD_FOE}" data-ajax="zebra"><strong>{L_ADD_FOE}</strong></a></dd>
				<!-- ENDIF -->
			<!-- ENDIF -->
		<!-- ENDIF -->
		<!-- EVENT memberlist_view_zebra_after -->
	</dl>
SUBSTITUA COM:

Código: Selecionar todos

<!-- INÍCIO DO HEADER -->
<div class="capa-de-perfil-imagem">
<!-- IF S_PROFILE_CAPA -->
	<img src="{PROFILE_CAPA_VALUE_RAW}" class="header-customizado" />
<!-- ELSE -->
	<img src="{T_THEME_PATH}/images/no_cover.jpg" class="header-customizado" />
<!-- ENDIF -->
<!-- Início da coluna com avatar e informações -->
	<div class="colunaPerfil"> 
		<div style="display:block" class="colunaAvatar">
			<!-- IF AVATAR_IMG -->
					{AVATAR_IMG}
			<!-- ELSE -->
					<img src="{T_THEME_PATH}/images/no_avatar.gif" />
			<!-- ENDIF -->
		</div>
		
		<strong class="box-nick box-user"><!-- IF S_ONLINE --><i id="online" class="fa fa-circle" aria-hidden="true" title="Online"></i><!-- ELSE --><i id="offline" class="fa fa-circle" aria-hidden="true" title="Offline"></i><!-- ENDIF --><span style="vertical-align:middle;display:inline;">{USERNAME}</span></strong>
		<br/><br/>
		<strong class="box-nick" style="line-height:0px;font-size:17px">{RANK_TITLE}</strong>
		<br><br><br>
		<!-- IF S_USER_LOGGED_IN and S_ZEBRA -->
		<!-- EVENT memberlist_view_zebra_before -->
			<!-- IF U_REMOVE_FRIEND --><a href="{U_REMOVE_FRIEND}" data-ajax="zebra" class="hide-mobile button"><i class="fa fa-minus-circle"></i><span>{L_REMOVE_FRIEND}</span></a><!-- ELSEIF U_REMOVE_FOE --><a href="{U_REMOVE_FOE}" data-ajax="zebra" class="hide-mobile button"><i class="fa fa-minus-circle"></i><span>{L_REMOVE_FOE}</span></a><!-- ELSE --><!-- IF U_ADD_FRIEND --><a href="{U_ADD_FRIEND}" data-ajax="zebra" class="hide-mobile button"><i class="fa fa-smile-o"></i><span>{L_ADD_FRIEND}</span></a><!-- ENDIF --><!-- IF U_ADD_FOE --><a href="{U_ADD_FOE}" data-ajax="zebra" class="hide-mobile button"><i class="fa fa-frown-o"></i><span>{L_ADD_FOE}</span></a><!-- ENDIF --><!-- ENDIF -->
		<!-- ENDIF -->
		<!-- EVENT memberlist_view_zebra_after -->
		<!-- IF U_EDIT_SELF -->
			<a href="{U_EDIT_SELF}" class="hide-mobile button"><i class="fa fa-pencil-square-o" aria-hidden="true"></i><span>{L_EDIT_PROFILE}</span></a>
		<!-- ENDIF -->
		<!-- IF U_USER_ADMIN -->
			<a href="{U_USER_ADMIN}" class="hide-mobile button"><i class="fa fa-pencil" aria-hidden="true"></i><span>{L_USER_ADMIN}</span></a>
		<!-- ENDIF -->
		<!-- IF U_USER_BAN -->
			<a href="{U_USER_BAN}" class="hide-mobile button"><i class="fa fa-ban" aria-hidden="true"></i><span>{L_USER_BAN}</span></a>
		<!-- ENDIF -->
		<!-- IF U_SWITCH_PERMISSIONS -->
			<a href="{U_SWITCH_PERMISSIONS}" class="hide-mobile button"><i class="fa fa-user" aria-hidden="true"></i><span>{L_USE_PERMISSIONS}</span></a>
		<!-- ENDIF -->
	</div>
</div>
<!-- FIM DO HEADER -->
Se preferir, crie um arquivo chamado custom.css. Se não, use o common mesmo

Abra root/styles/seuestilo/theme/common.css

ADICIONE EM QUALQUER PARTE, DE PREFERÊNCIA LÁ EMBAIXO[/c]

Código: Selecionar todos

/* Capa de perfil por LucasLV */
@media (max-width: 700px) {
	.capa-de-perfil-imagem {
		height: auto;
	}
}


@media (min-width: 700px) {
	.capa-de-perfil-imagem {
		height: 310px;
	}
}

@media (max-width: 700px) {
	.hide-mobile {
		display: none;
	}
}


.capa-de-perfil-imagem {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.capa-de-perfil-imagem > .header-customizado {
  width: 100%;
}

.colunaPerfil {
	color: #fff;
	padding: 12px;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	min-height: 80px;
	box-sizing: border-box;
	flex-direction: row;
	flex: 0;
	flex-wrap: nowrap; }

.colunaAvatar {
	top: 15px;
	left: 10px;
	width: 130px;
	height: 130px;
	overflow:hidden;
	margin-right:19px;
	float: left; }

.colunaAvatar img {
	width: 130px;
	height: auto;
}

#online {
	color: #228B22;
	font-size: 27px;
	vertical-align: middle;
	margin-right: 6px;
}

#offline {
	color: #BEBEBE;
	font-size: 27px;
	vertical-align: middle;
	margin-right: 6px;
}

.box-nick {
	background-color: rgba(0,0,0,.3);
	padding: 7px 10px;
	text-shadow: 0px 0px 4px rgba(0,0,0,0.5);
	width: auto;}

.box-user {
	color: #fff;
	font-size: 33px;
}
	
/* Fim do perfil */

Agora, envie a imagem no_cover.jpg para a sua pasta /theme/images para que ela apareça para usuários que não têm uma capa de perfil definidas.

Download abaixo:
no_cover.jpg
Para definir sua capa de perfil, vá ao Painel de Controle de Usuário - Perfil

Imagem

RESULTADOS:

Com capa definida no UCP

Imagem

Imagem

Imagem

SEM CAPA DEFINIDA NO UCP:

Imagem

- É responsiva (pelos testes que fiz tá tudo bem ajustado, mas qualquer coisa é só falar)
- Nao pretendo lançar em extensão, até porque nem sei muito bem fazer isso
- O header padrão tem altura de 310pixels e foi ajustado no celular para não causar aqueles espaços em branco quando se define altura e largura de um elemento em outras resoluções. Não domino totalmnte o CSS, qualquer sugestão é muito mais do que bem-vinda.
Você não está autorizado a ver ou baixar esse anexo.
// PRECISA DE UM TRABALHO PARA SEU SITE/FORUM? Contate-me...
henrique.seven2011
Moderador
Moderador
Mensagens: 984
Registrado em: 23 Mar 2012, 13:50
Nome Real: Saulo Henrique

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

Mensagem por henrique.seven2011 »

Cloud de Verdade?! Recomendo: Vultr, DigitalOcean e LetsCloud | Freelancer a disposição!
Avatar do usuário
LucasLV
Moderador
Moderador
Mensagens: 711
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 »

Que maravilha! :-D

VOu baixar
// PRECISA DE UM TRABALHO PARA SEU SITE/FORUM? Contate-me...
Avatar do usuário
orange
Novato
Novato
Mensagens: 9
Registrado em: 22 Ago 2017, 21:20
Nome Real: Lucas

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

Mensagem por orange »

O tutorial não deu certo comigo =(
Talvez seja por causa do estilo, uso o Basic.
A extensão também não foi, provavelmente por causa do estilo tmb =/
Lucas d'Albuquerque e Orange
Províncias Unidas de Maurícia
Avatar do usuário
Chico Gois
Administrador
Administrador
Mensagens: 3623
Registrado em: 03 Jul 2004, 03:53
Nome Real: Chico Gois
Localização: São Paulo - Capital
Contact:

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

Mensagem por Chico Gois »

Pelo painel de administração limpe o cache
eunaumtenhoid
Novato
Novato
Mensagens: 113
Registrado em: 12 Mai 2009, 04:26
Localização: No momento, aqui no forum suportephpbb
Contact:

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

Mensagem por eunaumtenhoid »

fantastico cara vou usar vlw
Minhas traduções das extensões mais usada no phpBB, para o português brasileiro:
https://github.com/phpBBTraducoes
Avatar do usuário
LucasLV
Moderador
Moderador
Mensagens: 711
Registrado em: 18 Out 2013, 04:40

Re: Atualizado: CAPA DE PERFIL e HEADER semelhante ao IPB para phpbb 3.2.x

Mensagem por LucasLV »

Atualizei o tutorial, agora com um header diferente...

Não domino muito bem o CSS, então qualquer sugestão é bem vinda.
// PRECISA DE UM TRABALHO PARA SEU SITE/FORUM? Contate-me...
Avatar do usuário
Alma
Novato
Novato
Mensagens: 10
Registrado em: 18 Set 2017, 12:52
Localização: França

Re: Atualizado: CAPA DE PERFIL e HEADER semelhante ao IPB para phpbb 3.2.x

Mensagem por Alma »

Olá
Um ID deve ser exclusivo, e alguns são mencionados várias vezes em seu código html. Como "box-nick" e "hideprofile".
Algumas class presentes no seu código css não são encontradas no código html, eles são úteis ?
A imagem "online" está escondida por a imagem capa-de-perfil, isso é normal ?

Alma / tomberaid
Perdoe-me o meu português, mas estou na França desde os 2 anos de idade.
Avatar do usuário
LucasLV
Moderador
Moderador
Mensagens: 711
Registrado em: 18 Out 2013, 04:40

Re: Atualizado: CAPA DE PERFIL e HEADER semelhante ao IPB para phpbb 3.2.x

Mensagem por LucasLV »

Alma escreveu: 24 Set 2017, 13:46 Olá
Um ID deve ser exclusivo, e alguns são mencionados várias vezes em seu código html. Como "box-nick" e "hideprofile".
Algumas class presentes no seu código css não são encontradas no código html, eles são úteis ?
A imagem "online" está escondida por a imagem capa-de-perfil, isso é normal ?

Alma / tomberaid
Olá Alma, muito obrigado pelos toques, vou ver tudo isso mais tarde.

Quando eu fiz o código, eu peguei as caracteristicas do IPB e montei como algo só pra mim, por isso toda desorganização, vou arrumar tudo certinho.
// PRECISA DE UM TRABALHO PARA SEU SITE/FORUM? Contate-me...
Avatar do usuário
LucasLV
Moderador
Moderador
Mensagens: 711
Registrado em: 18 Out 2013, 04:40

Re: Atualizado: CAPA DE PERFIL e HEADER semelhante ao IPB para phpbb 3.2.x

Mensagem por LucasLV »

Atualizado, dessa vez todos os erros de CSS foram corrigidos. Os IDs usados de forma exagerada e errada foram substituídos por classes, as outras classes css que não eram usadas (derivadas de um outro código que eu estava montando) foram retiradas. Tudo que está aí é necessário e apenas isso.

O problema com a imagem ONLINE e OFFLINE també m foi solucionado, o tutorial foi atualizado

Vou tentando melhorar e aprimorar o código conforme o tempo. Obrigado Alma pelo toque.
// PRECISA DE UM TRABALHO PARA SEU SITE/FORUM? Contate-me...
Trancado