3.1.x
3.2.x
3.3.x
en utilisant des champs de profil personnalisés. 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
Cliquer sur Options particulières de langue rensiegner les champs et sauvegarder
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 --> <!-- 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> </dt> <dd class="zebra"><a href="{U_REMOVE_FRIEND}" data-ajax="zebra"><strong>{L_REMOVE_FRIEND}</strong></a></dd>
<!-- ELSEIF U_REMOVE_FOE -->
<dt> </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> </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> </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.
Pour définir votre couverture de profil, accédez à PCU > Profil
Source :
"Les logiciels propriétaires n'ont aucune éthique"
