Image de couverture de profil pour forum phpBB

Ce tutoriel a pour but de vous apprendre à créer manuellement une couverture de profil pour votre forum phpBB

3.1.x

3.2.x

3.3.x

en utilisant des champs de profil personnalisés.

Capture d’écran 2021-11-23 à 10.55.35.png

Note
Bien que nous utilisions Prosilver, nous ne recommandons pas de modifier le style phpBB par défaut. En effet, lors de la mise à jour, vous perdrez vos modifications dans les substitutions de fichiers. Idéalement, vous créez un style basé sur Prosilver et y apportez toutes les modifications.
Création de la bannière Champ de profil PCA

Se rendre ici :

► PCA > MEMBRES ET GROUPES > Champs de profil personnalisés.

En bas de page choisissez le type URL (lien)

Cliquez ensuite sur Créer un nouveau champ.

Définissez le nom couverture pour Identification du champ

Cocher la case Afficher dans le panneau de l’utilisateur

Nom/titre du champ affiché à l’utilisateur inscrire Couverture

Description du champ inscrire URL de votre couverture de profil

Cliquer sur Options particulières du type de champ

Renseignez ainsi

Capture d’écran 2021-11-23 à 09.14.04.png

Cliquer sur Options particulières de langue rensiegner les champs et sauvegarder

Capture d’écran 2021-11-23 à 12.47.03.png

Modification du template

Ouvrir le template memberlist_view.html

Ce template est à ajouter à votre style personnel, depuis Prosilver, s'il ne figure pas dans le dossier template de votre style.

Trouver : (peut correspondre à un résultat partiel dans une ligne de code ou à une ligne de code entière.)

Code : Tout sélectionner

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

Remplacer par : (remplacer les lignes de code précédemment trouvées par celles ci-dessous.)

Code : Tout sélectionner

<!-- BEGIN custom_fields -->
		<!-- IF not custom_fields.S_PROFILE_CONTACT and not custom_fields.S_PROFILE_CAPA  -->

Trouver : (peut correspondre à un résultat partiel dans une ligne de code ou à une ligne de code entière.)

Code : Tout sélectionner

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

Remplacer par : (remplacer les lignes de code précédemment trouvées par celles ci-dessous.)

Code : Tout sélectionner

<div class="panel bg1">

Trouver : (peut correspondre à un résultat partiel dans une ligne de code ou à une ligne de code entière.)

Code : Tout sélectionner

<!-- 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>

Remplacer par : (remplacer les lignes de code précédemment trouvées par celles ci-dessous.)

Code : Tout sélectionner

<!-- START OF HEADER -->
<div class="image-profile-cover">
<!-- IF S_PROFILE_CAPA -->
	<img src="{PROFILE_CAPA_VALUE_RAW}" class="header-custom" />
<!-- ELSE -->
	<img src="{T_THEME_PATH}/images/no_cover.jpg" class="header-custom" />
<!-- ENDIF -->
<!-- Top of column with avatar and information -->
	<div class="columnProfile"> 
		<div style="display:block" class="columnAvatar">
			<!-- 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>
<!-- END OF HEADER -->

Le fichier CSS

À la fin de votre fichier stylesheet.css du style personnel, ajouter ceci :

Code : Tout sélectionner

/* Profile cover by LucasLV */
@media (max-width: 700px) {
	.image-profile-cover {
		height: auto;
	}
}


@media (min-width: 700px) {
	.image-profile-cover {
		height: 310px;
	}
}

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


.image-profile-cover {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.image-profile-cover > .header-custom {
  width: 100%;
}

.columnProfile {
	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; }

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

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

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

#offline {
	color: #CF0404;
	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;
}
/* End of profile */

Maintenant, envoyez l'image no_cover.jpg dans le dossier ./theme/images de votre style, cette image apparaitra par défaut pour les utilisateurs qui n'ont pas défini leur propre couverture de profil.

no_cover.jpg

Pour définir votre couverture de profil, accédez à PCU > Profil

Capture d’écran 2021-11-23 à 12.44.57.png

Source :

https://www.suportephpbb.com.br/viewtopic.php?t=49558

Merci c'est super.

CAForum-phpBB

Entraide phpBB 3.3.x

Entraide phpBB 3.2.x

Tutoriels

Correctifs

phpBB 3.0.x

phpBB 3.1.x

phpBB 3.2.x

phpBB 3.3.x

Installation

Style perso

Version de php

Discussion phpBB

Extensions

Base de données des extensions

Demander une traduction

Traduction en cours

Traductions terminées

Patch français

[Tuto] Image de couverture de profil pour forum phpBB

Image de couverture de profil pour forum phpBB

Re: Image de couverture de profil pour forum phpBB