[Tuto] Image de couverture de profil pour forum phpBB
-
- Messages : 2934
- Enregistré depuis : 3 ans 9 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
MessageNote
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.
Code : Tout sélectionner
<!-- BEGIN custom_fields -->
<!-- IF not custom_fields.S_PROFILE_CONTACT -->
Code : Tout sélectionner
<!-- BEGIN custom_fields -->
<!-- IF not custom_fields.S_PROFILE_CONTACT and not custom_fields.S_PROFILE_CAPA -->
Code : Tout sélectionner
<div class="panel bg1<!-- IF S_ONLINE --> online<!-- ENDIF -->">
Code : Tout sélectionner
<div class="panel bg1">
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>
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 :
Mettre à jour son forum | Mettre à jour son style perso | Sauvegarde des fichiers du forum | Extra CSS
- Richard Stallman
-
- Messages : 40
- Enregistré depuis : 3 ans 9 mois
- Identité : Claude Peitrequin
- Forum phpBB : https://www.secretlife.ch/
Chaque employé tend à s'élever à son niveau d'incompétence.
Inscrivez-vous pour participer au forum ou Connecter-vous à votre compte.