[phpBB 3.0.x] Personnaliser le profil

[Dakin Quelia]

» Personnaliser votre profil

Nous allons vous expliquer comment personnaliser votre profil. Cela vous permettra d'avoir un profil totalement personnalisé.

• Champs de profil à la couleur du groupe
• Ajouter une boîte information
• Afficher image dans les champs de profil
• Afficher le groupe dans le profil
• Icône en ligne au-dessus de l'avatar
• Icône-lien du profil
• Champ avertissement

Dernière mise à jour le 21/12/09

[Dakin Quelia]

» Champs de profil à la couleur du groupe

Vous voulez que vos champs de profils soient dans la même couleur que votre pseudo? Hé bien, nous allons vous y aider. Suivez ce qui suit.

Ouvrez le fichier template styles/{TON_THEME}/template/viewtopic_body.html.

Cherchez:

Code : Tout sélectionner

<!-- IF postrow.POSTER_POSTS != '' --><dd><strong>{L_POSTS}:</strong> {postrow.POSTER_POSTS}</dd><!-- ENDIF -->
<!-- IF postrow.POSTER_JOINED --><dd><strong>{L_JOINED}:</strong> {postrow.POSTER_JOINED}</dd><!-- ENDIF -->
<!-- IF postrow.POSTER_FROM --><dd><strong>{L_LOCATION}:</strong> {postrow.POSTER_FROM}</dd><!-- ENDIF -->

<!-- IF postrow.S_PROFILE_FIELD1 -->
	<!-- Use a construct like this to include admin defined profile fields. Replace FIELD1 with the name of your field. -->
	<dd><strong>{postrow.PROFILE_FIELD1_NAME}:</strong> {postrow.PROFILE_FIELD1_VALUE}</dd>
<!-- ENDIF -->

<!-- BEGIN custom_fields -->
	<dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
<!-- END custom_fields -->

Remplacez par:

Code : Tout sélectionner

<!-- IF postrow.POSTER_POSTS != '' --><dd><span style="color: {postrow.POST_AUTHOR_COLOUR}; font-weight: bold;">{L_POSTS}:</span> {postrow.POSTER_POSTS}</dd><!-- ENDIF -->
<!-- IF postrow.POSTER_JOINED --><dd><span style="color: {postrow.POST_AUTHOR_COLOUR}; font-weight: bold;">{L_JOINED}:</span> {postrow.POSTER_JOINED}</dd><!-- ENDIF -->
<!-- IF postrow.POSTER_FROM --><dd><span style="color: {postrow.POST_AUTHOR_COLOUR}; font-weight: bold;">{L_LOCATION}:</span> {postrow.POSTER_FROM}</dd><!-- ENDIF -->
		
<!-- IF postrow.S_PROFILE_FIELD1 -->
	<!-- Use a construct like this to include admin defined profile fields. Replace FIELD1 with the name of your field. -->
	<dd><span style="color: {postrow.POST_AUTHOR_COLOUR}; font-weight: bold;">{postrow.PROFILE_FIELD1_NAME}:</span> {postrow.PROFILE_FIELD1_VALUE}</dd>
<!-- ENDIF -->

<!-- BEGIN custom_fields -->
	<dd><span style="color: {postrow.POST_AUTHOR_COLOUR}; font-weight: bold;">{postrow.custom_fields.PROFILE_FIELD_NAME}:</span> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
<!-- END custom_fields -->

N'oubliez pas de rafraîchir le template (onglet Styles) et de vider le cache (onglet Général).

[Dakin Quelia]

» Boîte d'informations

Ceci vous permettra d'ajouter une boîte d'informations liée à un champ de profil personnalisé.

Avant toute opération, il est recommandé de sauvegarder ses fichiers.

» Transférer des fichiers

Il vous faudra télécharger ce pack. Ce pack est à mettre dans le dossier « styles/{VOTRE_THEME}/theme/ ».

» Créer le champ de profil personnalisé "Infos"

Ici, il vous faudra créer le champ de profil qui va servir à contenir les informations qui seront affichées dans la boîte d'informations. Pour cela, rendez-vous dans les coulisses de votre forum, c'est-à-dire dans le panneau d'administration. Ensuite, cliquez sur l'onglet « Utilisateurs et groupes». Une fois à l'intérieur, vous avez un lien nommé « Champs de profil personnalisés » sur votre gauche, cliquez dessus.

» Modifier le fichier template

Dans cette partie, nous expliquons comment ajouter une boîte d'information.

Ouvrez le fichier styles/{VOTRE_THEME}/template/overall_header.html.

Cherchez:

Code : Tout sélectionner

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

Après, ajoutez:

Code : Tout sélectionner

<link href="{T_THEME_PATH}/highslide/highslide.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{T_THEME_PATH}/highslide/highslide-full.js"></script>
<script type="text/javascript">
	hs.graphicsDir = '{T_THEME_PATH}/highslide/graphics/';
	hs.align = 'center';
	hs.transitions = ['expand', 'crossfade'];
	hs.outlineType = 'rounded-white';
	hs.fadeInOut = true;
	hs.allowMultipleInstances = false; 
	//hs.dimmingOpacity = 0.75;

	// Add the controlbar
	if (hs.addSlideshow) hs.addSlideshow(
	{
		slideshowGroup: 'highslide',
		interval: 5000,
		repeat: false,
		useControls: true,
		fixedControls: false,
		overlayOptions: {
			opacity: 1,
			position: 'top right',
			hideOnMouseOut: false
		}
	});
</script>

Ouvrez le fichier styles/{VOTRE_THEME}/template/viewtopic_body.html.

Cherchez:

Code : Tout sélectionner

<dt>
	<!-- IF postrow.POSTER_AVATAR -->
		<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />
	<!-- ENDIF -->
	<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
</dt>

Remplacez par:

Code : Tout sélectionner

<dt>
				<!-- IF postrow.POSTER_AVATAR -->
					<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />
				<!-- ENDIF -->
				<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
				
				<!-- BEGIN custom_fields -->            
					<!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "Infos" -->
					<span style="color: {postrow.POST_AUTHOR_COLOUR}"> - </span><a style="color: {postrow.POST_AUTHOR_COLOUR}" href="#info" onclick="return hs.htmlExpand(this, { contentId: '{postrow.POST_AUTHOR}{postrow.POST_ID}', slideshowGroup: '{postrow.POST_AUTHOR}', width: '400' } )" title="Info">Info</a>
					<div class="highslide-maincontent" id="{postrow.POST_AUTHOR}{postrow.POST_ID}">
						<div class="highslide-header">
							<ul>
								<li class="highslide-move"><a href="#" onclick="return false">Move</a></li>
								<li class="highslide-close"><a href="#" onclick="return hs.close(this)">Close</a>&nbsp;</li>
							</ul>
						</div>
						<hr />
						<table border="0" width="100%">
							<tr>
								<td>
									<!-- IF postrow.POSTER_AVATAR -->
										<a href="{postrow.U_PROFILE}">{postrow.POSTER_AVATAR}</a>
									<!-- ELSE -->
										<a href="{postrow.U_PROFILE}"><img src="{T_THEME_PATH}/images/no_avatar.gif" width="90" height="90" alt="Default Avatar" /></a>
									<!-- ENDIF -->
								</td>
								<td style="text-align: justify; padding-left: 5px; padding-right: 5px;">{postrow.custom_fields.PROFILE_FIELD_VALUE}</td>
							</tr>
						</table>
					</div>
					<!-- ENDIF -->
				<!-- END custom_fields -->
			</dt>

N'oubliez pas de rafraîchir le template (onglet Styles) et de vider le cache (onglet Général).

[Dakin Quelia]

» Afficher image dans les champs de profil

Dans cette documentation, nous allons vous expliquer comment utiliser une image dans un champ de profil personnalisé qu'il soit un menu déroulant ou un simple champ texte.

Ici, nous allons vous donner un exemple d'utilisation avec une barre de progression mais vous pourrez le faire avec autre chose.

1) Il vous faut ce fichier.
2) Créez le champ dans le panneau d'administration et nommes-le « Progression ».
3) Allez dans les « Paramètres de charge » et coche « oui » à « Afficher les champs personnalisés dans les pages de sujet ».

» Champ texte simple

Cette modification est pour un simple champ texte.

Ouvrez le fichier template styles/{TON_THEME}/template/viewtopic_body.html.

Cherchez:

Code : Tout sélectionner

<!-- IF postrow.POSTER_FROM --><dd><strong>{L_LOCATION}:</strong> {postrow.POSTER_FROM}</dd><!-- ENDIF -->

Après, ajoutez:

Code : Tout sélectionner

<!-- BEGIN custom_fields -->
			<!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "Progression" -->
				<dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> <img src="{ROOT_PATH}pbart.php?p={postrow.custom_fields.PROFILE_FIELD_VALUE}" alt="progression" /></dd>
			<!-- ENDIF -->
		<!-- END custom_fields -->

Cherchez et supprimez:

Code : Tout sélectionner

	<!-- IF postrow.S_PROFILE_FIELD1 -->
			<!-- Use a construct like this to include admin defined profile fields. Replace FIELD1 with the name of your field. -->
			<dd><strong>{postrow.PROFILE_FIELD1_NAME}:</strong> {postrow.PROFILE_FIELD1_VALUE}</dd>
		<!-- ENDIF -->

		<!-- BEGIN custom_fields -->
			<dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
		<!-- END custom_fields -->

Rafraîchissez le template (onglet Styles) et videz le cache (onglet Général).

» Champ de type liste

Cherchez:

Code : Tout sélectionner

<!-- IF postrow.POSTER_FROM --><dd><strong>{L_LOCATION}:</strong> {postrow.POSTER_FROM}</dd><!-- ENDIF -->

Après, ajoutez:

Code : Tout sélectionner

<!-- BEGIN custom_fields -->
	<!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "Navigateur" -->
		<dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> 
		<!-- IF postrow.custom_fields.PROFILE_FIELD_VALUE eq "Internet Explorer" -->
			<img src="{ROOT_PATH}/images/navigateurs/ie.png" alt="{postrow.custom_fields.PROFILE_FIELD_VALUE}" /></dd>
		<!-- ENDIF -->
		<!-- IF postrow.custom_fields.PROFILE_FIELD_VALUE eq "Firefox" -->
			<img src="{ROOT_PATH}/images/navigateurs/firefox.png" alt="{postrow.custom_fields.PROFILE_FIELD_VALUE}" /></dd>
		<!-- ENDIF -->
	<!-- ENDIF -->
<!-- END custom_fields -->

Rafraîchissez le template (onglet Styles) et videz le cache (onglet Général).

[Dakin Quelia]

» Afficher le groupe

Dans cette partie, nous allons vous expliquer comment faire en sorte que le nom du groupe dans lequel vous êtes apparaisse.

» Modifications php

Nous devons ajouter un morceau de code dans la partie php. Dans notre cas, dans le fichier viewtopic.

Ouvrez le fichier viewtopic.php.

Cherchez:

Code : Tout sélectionner

    //
    $postrow = array(   

Avant, ajoutez:

Code : Tout sélectionner

    // Get the default group name of the poster
    if (!function_exists('get_group_name'))
    {
        include_once($phpbb_root_path . 'includes/functions_user.'.$phpEx);
    }
    $poster_group = get_group_name($user_cache[$poster_id]['group_id']);    

Cherchez:

Code : Tout sélectionner

        'POSTER_AGE'            => $user_cache[$poster_id]['age'],  

Après, ajoutez:

Code : Tout sélectionner

        'POSTER_GROUP'          => $poster_group,  

» Modifications templates

Maintenant que nous avons défini la variable « POSTER_GROUP », il nous faut placer le code dans le fichier template pour qu'il puisse être affiché.

Ouvrez le fichier template styles/{VOTRE_THEME}/template/viewtopic_body.html.

Cherchez:

Code : Tout sélectionner

		<!-- IF postrow.POSTER_JOINED --><dd><strong>{L_JOINED}:</strong> {postrow.POSTER_JOINED}</dd><!-- ENDIF -->

Après, ajoutez:

Code : Tout sélectionner

		<!-- IF postrow.POSTER_GROUP --><dd><strong>{L_GROUP}:</strong> <span style="color: {postrow.POST_AUTHOR_COLOUR}; font-weight: bold;">{postrow.POSTER_GROUP}</span></dd><!-- ENDIF -->

N'oubliez pas de rafraîchir le template (onglet Styles) et vider le cache (onglet Général).

[Dakin Quelia]

» Icône en ligne au-dessus de l'avatar

Dans cette documentation, nous allons vous expliquer comment faire apparaître la mention « connecté » au-dessus de l'avatar aussi bien dans les messages normaux que dans les messages privés.

» Messages normaux

Ici, nous appliquons la méthode pour l'icône « connecté » uniquement aux messages dans les sujets.

Ouvrez le fichier template styles/{VOTRE_THEME}/template/viewtopic_body.html.

Cherchez:

Code : Tout sélectionner

<!-- IF not postrow.S_IGNORE_POST -->
         <dl class="postprofile" id="profile{postrow.POST_ID}">

Remplacez par:

Code : Tout sélectionner

<!-- IF not postrow.S_IGNORE_POST -->
         <dl class="postprofile" id="profile{postrow.POST_ID}">
         <!-- IF postrow.ONLINE_IMG --><dt class="online-image" style="position: absolute; margin: -10px 0 0 135px;">{postrow.ONLINE_IMG}</dt><!-- ENDIF -->

» Messages privés

Cette fois, nous appliquons la méthode au niveau des messages privés.

Ouvrez le fichier template styles/{VOTRE_THEME}/template/ucp_pm_viewmessage.html.

Cherchez et supprimez:

Code : Tout sélectionner

<!-- IF S_ONLINE --> online<!-- ENDIF -->

Cherchez:

Code : Tout sélectionner

<dl class="postprofile" id="profile{MESSAGE_ID}">

Arès, ajoutez:

Code : Tout sélectionner

    <!-- IF ONLINE_IMG --><dt class="pm-online-image" style="position: absolute; margin: -10px 0 0 95px;">{ONLINE_IMG}</dt><!-- ENDIF -->

Ouvrez le fichier styles/{VOTRE_THEME}/theme/tweaks.css.

Ajoutez à la fin:

Code : Tout sélectionner

* html .online-image { margin-left: 125px !important; }
*:first-child+html .online-image { margin-left: 125px !important; }
* html .pm-online-image { margin-left: 88px !important; }
*:first-child+html .pm-online-image { margin-left: 88px !important; }

Vous devrez ajuster les marges.

» Rafraîchissement

Après toutes les modifications, il est temps de rafraîchir le template et le thème (onglet Styles) et de vider le cache (onglet Général).

Source: Traduction de phpBB.com.

[Dakin Quelia]

» Icône-lien du profil

Dans cette partie, nous allons vous expliquer comment ajouter une icône pour le profil comme sur la version phpBB2.

Tout d'abord, il faudra placer cette image dans le style Prosilver.



» Modifications dans le fichier CFG

Dans cette partie, il faut définir l'icône dans le fichier « imageset.cfg ». Pour cela, faites ce qui suit:

Ouvrez le fichier « styles/{VOTRE_THEME}/imageset/imageset.cfg ».

Cherchez:

Code : Tout sélectionner

img_icon_user_profile = 

Remplacez par:

Code : Tout sélectionner

img_icon_user_profile = icon_user_profile.png*20*20

» Modifications CSS

Il faut définir l'icône dans la feuille de style. Pour cela, procédons comme suit:

Ouvrez le fichier « styles/{VOTRE_THEME}/theme/buttons.css ».

Cherchez:

Code : Tout sélectionner

.quote-icon, .quote-icon a		{ background: none top left no-repeat; }

Après, ajoutez:

Code : Tout sélectionner

.profile-icon, .profile-icon a	{ background: none top left no-repeat; }

Cherchez:

Code : Tout sélectionner

ul.profile-icons li.warn-icon		{ width: {IMG_ICON_USER_WARN_WIDTH}px; height: {IMG_ICON_USER_WARN_HEIGHT}px; }

Après, ajoutez:

Code : Tout sélectionner

ul.profile-icons li.profile-icon	{ width: {IMG_ICON_USER_PROFILE_WIDTH}px; height: {IMG_ICON_USER_PROFILE_HEIGHT}px; }

Ouvrez le fichier « styles/{VOTRE_THEME}/theme/colours.css ».

Cherchez:

Code : Tout sélectionner

.quote-icon, .quote-icon a		{ background-image: url("{IMG_ICON_POST_QUOTE_SRC}"); }

Après, ajoutez:

Code : Tout sélectionner

.profile-icon, .profile-icon a	{ background-image: url("{IMG_ICON_USER_PROFILE_SRC}"); }

» Rafraichissement et vidage du cache

Maintenant que tout est mis en place, il ne vous reste plus qu'à rafraîchir le template, le thème et le pack images (onglet Styles) et vider le cache (onglet Général) afin que toutes les modifications soient prises en compte.

[Dakin Quelia]

» Champ avertissements

Dans cette partie, nous vous expliquons comment ajouter le nombre d'avertissements du membre dans son profil dans la vue des sujets.

Ouvrez le fichier template styles/{VOTRE_THEME}/template/viewtopic_body.html.

En suivant cette étape, vous aurez donc le nombre d'avertissements du membre dans son profil.

Cherchez:

Code : Tout sélectionner

		<!-- IF postrow.POSTER_FROM --><dd><strong>{L_LOCATION}:</strong> {postrow.POSTER_FROM}</dd><!-- ENDIF -->

Après, ajoutez:

Code : Tout sélectionner

		<!-- IF postrow.POSTER_WARNINGS --><dd><strong>{L_WARNINGS}:</strong> {postrow.POSTER_WARNINGS}</dd><!-- ENDIF -->

N'oubliez pas de rafraîchir le template (onglet Styles) et vider le cache (onglet Général).