[Résolu] Présentation profil

[chrisnvidia]

Salut Fred

Dit moi je recherche à modifier la Présentation du profil de ce genre là

Merci pour ton aide :wink:

[CAForum-bot]

Nous donnerons suite à ce sujet dans les plus brefs délais.


Merci de prendre note de ce formulaire de demande d'aide afin de détailler au mieux ce qui peut être utile pour cerner le problème.

Modèle de demande d'assistance

Quelle est la version de ton forum ?
Quelle est l'URL du forum concerné pour cette demande ?
Chez qui est hébergé le forum ?
Comment a été installé ce forum (avec le pack complet ou automatique) ?


Quelle est l'action la plus récente effectuée sur ce forum ?
Une inscription est-elle nécessaire pour reproduire ce problème ?
Est-ce que des extensions sont installées sur ce forum ?
Si oui, lesquelles ?


À partir de quelle version de phpBB3 la mise à jour a été faite ?
Quels styles sont installés sur le forum ?
Quelle est la langue par défaut du forum ?
Quel est la version de php du forum ?

Quelles mesures ont été prises (mise à jour du forum, installation d'une extension, d'un style, etc...) avant que ce problème ne devienne perceptible ?

[Fred]

Salut Chris
Le plus simple est d'installer cette extension :

Profile Box 1010 Full.zip

[chrisnvidia]

Je t'envois le retour qui donne assez bien mais faut que je réduit le cadre intérieur

[Fred]

Je viens de faire une petite modification afin de centrer un peu l'histoire




Quand tu parles du cadre intérieur, tu parles du cadre autour de l'avatar ?

[chrisnvidia]

Réduire ceci

[Fred]

Rend toi ici :

► ./ext/alex75/profilebox/styles/prosilver/theme

Ouvre le fichier profilbox.css


Pour le cadre de l'avatar trouve ceci :

Code : Tout sélectionner

@media (min-width: 700px)
.avatar img {
    border: 3px solid #fff; 
    border-color: #336699;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

Modifie cette partie :

Code : Tout sélectionner

border: 3px solid #fff; 

Réduit la valeur 3px ou supprime le cadre en commentant la ligne, ainsi :

Code : Tout sélectionner

/*border: 3px solid #fff; */

Pour le cadre du profil trouve ceci :

Code : Tout sélectionner

.postprofile {
	background-color: none ;
    border: 3px solid #336699 !important;
    padding-bottom: 10px;
    margin-top: 5px;
    margin-left: 5px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	width: 20%;
}

Les modifications à faire sont identiques


Pour les cadres des champs de profil trouve ceci :

Code : Tout sélectionner

.profile-custom-field, .profile-posts, .profile-joined, .profile-warnings, .profile-contact {
    background-color: none ;
    border: 3px solid #336699 ;
    padding: 3px;
    margin-top: 2px;
    margin-left: 5px;
	margin-right: 5px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
}

Les modifications à faire sont identiques

Enregistre les modifications et vide le cache.

[chrisnvidia]

sa fait beaucoup plus propre réduit à 1px :wink:

[chrisnvidia]

Une question

Comment on fait pour avoir le carde avec la couleur des légendes

[Fred]

Alors pour les rangs il va falloir en premier lieu que tu importes le template viewtopic_body.html de Prosilver dans le répertoire template de ton style
Pour importer le template tu le fais glisser depuis Prosilver vers un dossier de ton ordinateur. Et ensuite tu le glisses depuis ton ordinateur vers le répertoire template de ton style
Dans Prosilver le template se trouve ici :

► ./styles/prosilver/template


Il faudra le glisser ici ensuite :

► /styles/sospc/template


Une fois que le template viewtopic_body.html est dans le répertoire template de ton style, tu l'ouvres et tu recherches ceci (ligne 156 à 158) :

Code : Tout sélectionner

<!-- EVENT viewtopic_body_postrow_rank_before -->
			<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG --><dd class="profile-rank">{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF -->{postrow.RANK_IMG}</dd><!-- ENDIF -->
			<!-- EVENT viewtopic_body_postrow_rank_after -->

Tu supprimes et tu remplaces par ceci :

Code : Tout sélectionner

{% EVENT viewtopic_body_postrow_rank_before %}
			{% if postrow.RANK_TITLE or postrow.RANK_IMG %}<dd class="profile-rank">{% if not postrow.RANK_IMG %}<div class="banner-rank" style="background-color:{{ postrow.POST_AUTHOR_COLOUR }}">{{ postrow.RANK_TITLE }}</div>{% else %}{{ postrow.RANK_TITLE }}{% endif %}{% if postrow.RANK_TITLE and postrow.RANK_IMG %}<br />{% endif %}{{ postrow.RANK_IMG }}</dd>{% endif %}
			{% EVENT viewtopic_body_postrow_rank_after %}

Et tu enregistres les modifications.



Ensuite il faut ajouter l'habillage CSS, rend toi ici :

► /styles/sospc/theme


Tu ouvres le fichier sospc.css et tu ajoutes ce code à la fin :

Code : Tout sélectionner

/* Rangs
--------------------*/
.banner-rank {
   font-weight : 700;
   position : relative;
   margin-top : 5px;
   /*margin-right : -16px;*/
   /*margin-left : -16px;*/
   padding : 5px;
   margin-right: 8px;
   border-bottom-right-radius : 3px;
   border-bottom-left-radius : 3px;
   color: #eee;
   text-align: center;
}

/* --------------------------------------------------------
--------- Responsive tablette et mobile  ---------
------------------------------------------------------- */
@media (max-width: 700px) {
    .banner-rank {
        display: none;
    }
}

.banner-rank {
    color: #fff;
    background-color: #324a6c;
    background-image: linear-gradient(to bottom,transparent,rgba(0,0,0,0.3));
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 5px 5px -5px rgba(0,0,0,0.2);
    text-shadow: 0 1px 1px #000;
    border-radius: 5px;
}
.banner-rank:before, .banner-rank:after {
   position : absolute;
   top : -3px;
   width : 4px;
   height : 3px;
   content : '';
   opacity : 0.8;
}
.banner-rank:before {
   left : 0;
   border-top-left-radius : 3px;
}
.banner-rank:after {
   right : 0;
   border-top-right-radius : 3px;
} 

Tu enregistres la modification et tu vides le cache.

[chrisnvidia]

J'ai tout fais à la lettre et recommencer plusieurs fois et rien n'y fait :ugeek:

[Fred]

Chris,
Non tu n'as pas tout fait à la lettre !
Tu n'as pas ajouté le code CSS dans le fichier sospc.css

[chrisnvidia]

J'ai bien rajouter le code css dans le répertoire de sospc.css

[Fred]

Et tu as vidé le cache ?

[chrisnvidia]

C'est bon sa marche

[rammstein]

bonjour
comment on peux mettre l'avatar au centre ? et en ligne aussi ?

[rammstein]

bonjour
comment on peux mettre l'avatar au centre ? et en ligne aussi ?