Bonjouuur mes petit(e)s <3 (ok, sopiens !).

Suite au poste d'un sujet sur les infobulles, qu'en fait c'est pas ça et que ça pause encore plus de problème, je viens vous voir (ah oui la chance !) pour régler ce problème, car ça me prend la tête et ça ne fait pas avancer le forum.
Voilà, je souhaiterais mettre une image au dessus des informations et deux ou trois autres bricoles, voici donc un exemple et ma template (il faut posté pour la vouar c'est quand même mon boulot donc je tien a le garder for me e.e).

http://img15.hostingpics.net/pics/184338Sanstitre14.png

ça ne parait pas bien difficile à faire (traitez-moi d'idiote, je retiens !), mais, comme vous le voyez j'ai un contour d'avatar (violet le fond est brun oui je sais !), et quand j'installe l'image, ça le fait aussi sur cette dite image, vu que mon css / template date d'il y a un an, je ne me souviens plus trop de ce que j'avais fais, et donc je me retrouve avec des informations centrée par l'opération du saint esprit ET ce contour d'avatar sur mon image.

Ensuite je souhaiterais afficher un cadre ou plus une ligne, qui sépare la partie rp de la partie normale du profile (j'aime pas les feuilles donc je fais tout par champs c'est plus propre :<), mais ça donne un truc comme ça.
Après quoi d'autre ah mes css/template.

viewtopic_body


Et le CSS


D'ailleurs je ne me souviens plus de certaines choses dans mon css, voyez le contour en texture du forum et le contour violet, je ne me souviens pas si j'avais affiché ça dans le css ou pas, ne trouvent pas de manière de changer cette couleur violette ! (pourquoi violet d'ailleurs ?).

Coucou (enfin re ^^)

Citation:

ça ne parait pas bien difficile à faire (traitez-moi d'idiote, je retiens !), mais, comme vous le voyez j'ai un contour d'avatar (violet le fond est brun oui je sais !), et quand j'installe l'image, ça le fait aussi sur cette dite image, vu que mon css / template date d'il y a un an, je ne me souviens plus trop de ce que j'avais fais, et donc je me retrouve avec des informations centrée par l'opération du saint esprit ET ce contour d'avatar sur mon image.

ça correspond à ça dans ton template

Code:

<span class="postdetails poster-profile">                                   {postrow.displayed.POSTER_AVATAR}<br><span class="ombre"><FONT size=4>{ {postrow.displayed.POSTER_NAME}.}</FONT><br>{postrow.displayed.POSTER_RANK}<br>{postrow.displayed.RANK_IMAGE}<br /><br />                         <!-- BEGIN profile_field -->             {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}             <!-- END profile_field -->             {postrow.displayed.POSTER_RPG}             </div></div>         </span>

et à ça dans le css

Code:

.postdetails.poster-profile a img { -moz-border-radius-bottomleft:20px; -moz-border-radius-bottomright:0px; -moz-border-radius-topleft:0px; -moz-border-radius-topright:20px; border: 10px solid #7D5577; }

En fait, le contour est fait sur l'image. Tu n'as pas un bloc violet contenant une image mais tu as ajouté une bordure de 10px d'épaisseur sur ton image (ahem... j'sais pas si c'est clair )


---------------

Citation:

Ensuite je souhaiterais afficher un cadre ou plus une ligne, qui sépare la partie rp de la partie normale du profile (j'aime pas les feuilles donc je fais tout par champs c'est plus propre :<), mais ça donne un truc comme ça.

Donc tu veux ajouter une ligne entre les champs "normaux" (messages, date d'inscription) et les champs RPG (arme, avatar, RP).

ça se passe donc ici

Code:

postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}             <!-- END profile_field -->             {postrow.displayed.POSTER_RPG}

Code:

postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} => champs "normaux" {postrow.displayed.POSTER_RPG} => Champs RPG

Cependant, il me semble que par "champs RPG", FA veut dire "qui sont générés grâce à la feuille RPG".

---------------

Citation:

voyez le contour en texture du forum et le contour violet,

Zioup !

Code:

.forumline { -moz-border-radius: 15px; /* Bordure Arrondie de 15px */   background-image: url(http://obsession27.free.fr/divers/fonds/pfo2.gif); -webkit-border-radius: 15px; /* Bordure Arrondie de 15px IE */ border-radius: 15px; /* Bordure Arrondie de 15px */ box-shadow: 0 0 5px #000000; /* Ombre Portée */ -moz-box-shadow: 0 0 5px #000000; /* Ombre Portée */ -webkit-box-shadow: 0 0 5px #000000; /* Ombre Portée IE */ padding: 3px; /* 3px entre le texte et le contour */ }

_________________

SoP Story :: Votes pour la 3ème épreuve

Tellement de chose :<.

http://img15.hostingpics.net/pics/727397Sanstitre14.png

Le cadre rouge (côté gauche), arriver a mettre ce fichu cadre avec ce partern http://obsession27.free.fr/divers/fonds/pfo2.gif.

Le violet, mettre sur la gauche le texte que je n'arrive plus (rires).

Le dernier, fiche les options "profil mp email" et autre, à cet endroit tout en retirant le tableau qui les contient.

Pour les infos bulles je verrais plus tard x).

Edite;
Tien tant que j'y pense, j'aurais voulu faire des infobulles sur la page d'accueil, j'ai beau cassé mon petit c*l dans tout les sens (urh), je n'arrive pas à avoir ce que je voudrais, donc voilà une petit maquette pour montrer dans l'ensemble, je pense que tu arriveras à m'expliquer comment faire ! x)

http://img15.hostingpics.net/pics/692238Sanstitre14.png

Pour la première image, c'est ça qu'il faut changer :

Code:

.bodyline{border:7px solid #B39AAE; }

Donc on va :
1/ Ajouter du remplissage entre le bord du cadre et le contenu (padding)
2/ mettre une image de fond qui sera ton pattern
3/ mettre un micro bordure (je vais mettre en blanc à toi de modifier la couleur ensuite)

Code:

.bodyline{    border:1px solid #fff;    padding:7px;    background-image:url('http://obsession27.free.fr/divers/fonds/pfo2.gif'); }

Citation:

Le violet, mettre sur la gauche le texte que je n'arrive plus (rires).

Dans ton html, remplace ça

Code:

{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}             <!-- END profile_field -->             {postrow.displayed.POSTER_RPG}

par

Code:

<div class="info_posteur">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}             <!-- END profile_field -->             {postrow.displayed.POSTER_RPG}</div>

et ensuite, ajoute dans le CSS

Code:

div.info_posteur{    text-align:left;    }

Citation:

Le dernier, fiche les options "profil mp email" et autre, à cet endroit tout en retirant le tableau qui les contient.

C'est cette partie du template

Code:

<table border="0" cellspacing="0" cellpadding="0">             <tr>               <td valign="middle">                   {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}               </td>             </tr>         </table>

qu'il faut ajouter juste après le div qu'on vient de créer


------------

Pour l'infobulle logiquement le lien que je t'ai donné dans l'autres topics devrait t'aider

_________________

SoP Story :: Votes pour la 3ème épreuve

*Grogne*
Encore ce fichu cadre ! Mais j'aime pas le profile sans, ça donne bien plus joli *déprime*.
Faut vraiment que je div que l'avatar ! x).

Pour le reste ça fonctionne tout propre, j'vais aller chipoter info bulles, par contre ça donne un truc comme ça > .
C'est... comment dire, encadré ? xD

Faudrait pouvoir retiré cette partie, mais je t'avoue que là, j'ose pas y toucher ! :<
http://img15.hostingpics.net/pics/839101Sanstitre17.png

J'peux pas voir le rendu sans être connectée

Oh mince, tien, là tu pourras y aller (j'avais oublier que j'avais retiré les accès aux présentation).
>
J'y pense qu'il faut que je mette ton pseudo dans les css / templates des crédits tien :O!

Ah tien, et le code pour le fond, ça ne touche toujours pas le contour du forum (le violet avec l'ombre), mais le fond du forum (là où il y a l'header).

Ok

Alors, pour le truc "profil, email" toussa toussa, dans le template de base, c'est ici :

Code:

<td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">         <table border="0" cellspacing="0" cellpadding="0">             <tr>               <td valign="middle">                   {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}               </td>             </tr>         </table>       </td>

il faut donc supprimer ce code et le remplacer par

Code:

<td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">&*nbsp;</td>

sans l'* entre le & et le n

--------

Pour le contour du forum, tout ce qui le concerne dans le CSS est là :

Code:

.bodyline { -moz-border-radius: 0px; /* Bordure Arrondie de 15px */ -webkit-border-radius: 0px; /* Bordure Arrondie de 15px IE */ border-radius: 0px; /* Bordure Arrondie de 15px */ box-shadow: 0 0 5px #000000; /* Ombre Portée */ -moz-box-shadow: 0 0 5px #000000; /* Ombre Portée */ -webkit-box-shadow: 0 0 5px #000000; /* Ombre Portée IE */ } .bodyline {-moz-border-radius:20px;} .bodyline{border:7px solid #B39AAE; }

-----------

Pour le truc bleu derrière les messages, c'est cette partie

Code:

.forumline { -moz-border-radius: 15px; /* Bordure Arrondie de 15px */   background-image: url(http://obsession27.free.fr/divers/fonds/pfo2.gif); -webkit-border-radius: 15px; /* Bordure Arrondie de 15px IE */ border-radius: 15px; /* Bordure Arrondie de 15px */ box-shadow: 0 0 5px #000000; /* Ombre Portée */ -moz-box-shadow: 0 0 5px #000000; /* Ombre Portée */ -webkit-box-shadow: 0 0 5px #000000; /* Ombre Portée IE */ padding: 3px; /* 3px entre le texte et le contour */ }

_________________

SoP Story :: Votes pour la 3ème épreuve

D'accord, je fais mon bazar sur un autre forum et je regarde ça.

Je suis arrivée à faire mon infobulle à un pixel près, j'arrive pas plus loin *grogne*.
Merci de ton aide, je te dis ça pour le suite (vers 15h je pense).

____

Edite; Quelques bugs, mais j'ai trouver pour la séparation des informations profil.
Il y a une option ou l'on peu faire la séparation avec une barre horizontale (rires).

Pour l'moment c'est bon ! Je pense qu'on peu archivé tout ça.
Je risque de revenir mais dans un temps <3.

Ok d'acc

Ravie d'avoir pu t'aider, je mets donc ça en résolu ^^