[Tuto] Image de couverture de profil pour forum phpBB

Retrouvez ici quelques tutoriels pour vos forums phpBB
Avatar du membre
Fred Fred
Fondateur
Messages: []
Enregistré depuis: 4 ans 10 mois
Identité: Fred Rimbert
Forum phpBB: https://caforum.fr
Localisation: Le Lude - Pays de la Loire
Intérêt: GitHub

Image de couverture de profil pour forum phpBB

Message par Fred »

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 :
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.
Avatar du membre
Claude Claude
Membre VIP
Messages: []
Enregistré depuis: 4 ans 10 mois
Identité: Claude Peitrequin
Forum phpBB: https://www.secretlife.ch/

Re: Image de couverture de profil pour forum phpBB

Message par Claude »

Merci c'est super.
Le principe de Peter :
Chaque employé tend à s'élever à son niveau d'incompétence.