[PHPBB3][Pedido] Cuadro personalizado alrededor del perfil

spinelsuns escribió:Bon d'accord, dans le titre, ce n'est pas très bien expliquer, mais aujourd'hui, je vais vous apprendre à faire ceci:




Ce qui veux dire: Travailler avec le CSS et le Template, donc, être le Fondateur du forum! Ce tutoriel est long et demande une écoute minutieuse,

É T A P E  N U M E R O 1 ::

Nous voulons créer un Cadre, donc vous allez devoir créer une nouvelle class. Vous lui donner donc le nom que vous voulez. Dans cette exemple, je l'ai appelé ''Cadre Avatar'' voici le code;

Código:

.cadreavatar {
background-color : #COULEUR DU FOND ;
border : 5px solid #COULEUR DE LA BORDURE ;
-moz-border-radius: 5px 5px 5px 5px
}

Mais après, c'est libre à vous de changer les variables! En voici quelques unes qui pourrais vous être utiles:

background-image : url("URL") : pour ajouter une image de fond à votre cadre
border : Xpx solid/dotted/dashed/double #COLOR : Solid/dotted/Dashed/double littéralement: Bordure Solide, pointillée, brisée ou double
Selon la taille de votre avatar, vous pourrez ajouter une taille ou une largeur.
height : XXpx ;
width : XXpx ;
OU
Overflow: auto (Qui mettera la taille automatiquement)
padding : XXpx ; : pour faire une marge avec le bord du cadre

É T A P E  N U M E R O 2 ::

Maintenant, nous devons nous attaquer aux Templates, (Rappel: Vous devez être Fondateur du forum pour y avoir accès, Sinon, demandez au fondateur de s'en occuper)

> Panneau d'Administration » Affichage » Templates » Général » viewtopic_body

À cette étape, je vous conseil FORTEMENT de copier/coller votre template dans un traitement de texte/bloc note/notepad ++ afin de ne perdre aucun détail s'il as déjà été changer et que vous désirez le conservé. Sinon, si le résultat ne vous plait pas, alors vous n'aurez qu'à copier coller le template par défaut.

cherchez ce code:

Código:

<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>

            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}

            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}

* Si votre code as été changer, il se peu qu'il soit différent, mais normalement le span class reste le même.

Quelques infos utiles:

{postrow.displayed.POSTER_NAME} Le Pseudo.
{postrow.displayed.POSTER_RANK}  Le rang
{postrow.displayed.RANK_IMAGE} Une image du rang, si vous en avez une
{postrow.displayed.POSTER_AVATAR}  L'avatar

Ensuite, il faudra ajouter notre class dans ce code, il faudra le placer exactement où ont veux qu'il soit (dans notre cas, pour ce tuto, il encadrera tout le span class donc il faudra inclure ceci;

Código:

<div class="cadreavatar">    </div>

ainsi, votre code deviendra celui ci:

Código:

<div class="cadreavatar"> <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>

            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}

            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}</div>

Au contraire, si vous voulez que ce soit que l'avatar (supposons) que vous voulez d'encadré, alors vous devrez faire ceci:

Código:

<div class="cadreavatar"> {postrow.displayed.POSTER_AVATAR} </div>

Cliquez sur Enregistré et ensuite sur la prévisualisation, si ça vous plait alors sur la croix verte !

A VÉRIFIER:

Verifiez si la variable

Código:

<span class="postdetails poster-profile">

soit placé AVANT la class div

Código:

<div class="cadreavatar">

ainsi

Spoiler:

sinon vous aurez des caractères énorme et ce n'est pas vraiment ce qu'on veux

Le résultat:



(P.S: je n'ai pas vu de tuto de ce genre ici donc c'est pour ça que je fais celui ci, s'il est dejà sur le forum, vous pouvez effacé et je suis désoler pour l'explication, c'est mon premier tuto ^^)


--------

Pour entouré tout les éléments du profil comme ceci:



Il suffit simplement de placé sa div class dans le template avant

Código:

<!-- BEGIN profile_field -->

et la finir après

Código:

<!-- END profile_field -->

Normalement ça devrai fonctionner

Código:

http://img15.hostingpics.net/pics/929368rangemeraude.png

Código:

{postrow.displayed.POSTER_RANK}

Código:

<span class="rambo">{postrow.displayed.POSTER_RANK}</span>

Código:

.postprofile {
    position: relative;
}

.postprofile .rambo {
    position: absolute;
    top: 0;
    left: 0;
}