profil personnalisé

par Lyah Mer 28 Déc - 22:47

bonsoir tout le monde

voila pour la version de mon forum j'aimerais changer l'apparence des profils de mes membres voici une idée de ce que j'aimerai bien sure pas a l'identique puisque que la forme ou sera offline et online je veut que ce soit un demi cercle

merci a tout ceux qui pourront m'aider

Mon index_body

Spoiler:

Code:: {JAVAscript}  <div class="accueil"> <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">  <tr> <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td> </tr>   <tr> <td class="row1" rowspan="3" align="center" valign="middle"> <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div> </td> </tr>  </table> </div>   <form action="{S_LOGIN_ACTION}" method="post" name="form_login"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline"> <tr> <td width="100%" valign="top" align="center" class="row1"> <label><span class="genmed">{L_USERNAME}:</span> <input class="post" type="text" size="10" name="username" /></label> <label><span class="genmed">{L_PASSWORD}:</span> <input class="post" type="password" size="10" name="password" /></label> {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /> <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> </td> </tr> </table> </form>  {CHATBOX_TOP} {BOARD_INDEX} <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="50%" valign="top">  <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>   <a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>  </span> </td> <td width="50%" align="right"> <span class="gensmall"> <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a> <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a> <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>   <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>   </span> </td> </tr> </table>  <form action="{S_LOGIN_ACTION}" method="post" name="form_login"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline"> <tr> <td width="95%" valign="top" align="center" class="row1"> <span class="genmed">{L_USERNAME}:</span> <input class="post" type="text" size="10" name="username"/> <span class="genmed">{L_PASSWORD}:</span> <input class="post" type="password" size="10" name="password"/> {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /> <span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /> </td> </tr> </table> </form>   <table border="0" width="100%" class="qeel_start" cellpadding="2"> <tr> <td width="100%" colspan="2" align="center"> <span class="groupes"><a href="http://graphic-art.forumgratuit.org/g1-administrateurs"><font color="#5e7f8f">Admin</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif"> <span class="groupes"><a href="http://graphic-art.forumgratuit.org/g2-moderateurs"><font color="#7f97a3">Modérateurs</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif"> <span class="groupes"><a href="http://graphic-art.forumgratuit.org/g5-monet"><font color="#ccd1d4">Monets</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif"> <span class="groupes"><a href="http://graphic-art.forumgratuit.org/g4-picassohttp://gridouforumamoi.forumgratuit.org/g7-les-residents"><font color="#d17d7d">picasso</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif"> <span class="groupes"><a href="http://graphic-art.forumgratuit.org/g6-van-gogh"><font color="#c690a3">Van Gogh</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif"> <span class="groupes"><a href="http://graphic-art.forumgratuit.org/g7-cezanne"><font color="#c690a3">Cezanne</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif"> <span class="groupes"><a href="http://graphic-art.forumgratuit.org/g8-segantini"><font color="#c690a3">Segantini</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif"> <span class="groupes"><a href="http://graphic-art.forumgratuit.org/g10-redacteurs"><font color="#c690a3">Rédacteurs</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif"> <span class="groupes"><a href="http://graphic-art.forumgratuit.org/g3-professeurs"><font color="#c690a3">professeurs</font></a></span><img src="http://i63.servimg.com/u/f63/11/83/54/29/space10.gif"> <br><br> <div style="margin-left: 15%; margin-right: 15%; border-top: 1px dashed #c3c3be;"></div> </td> </tr> <tr> <td width="50%"> <div class="qeel_align"><span class="gensmall"><span id="messages">{TOTAL_POSTS}</span> <script type="text/javascript"> document.getElementById('messages').innerHTML=document.getElementById('messages').innerHTML.replace(/Nos membres ont posté un total de/,"Les artistes de Graphic Art ont rédigé un total de"); </script> <script type="text/javascript"> document.getElementById('messages').innerHTML=document.getElementById('messages').innerHTML.replace(/messages/,"messages"); </script> <br> <span id="users">{TOTAL_USERS}</span> <script type="text/javascript"> document.getElementById('users').innerHTML=document.getElementById('users').innerHTML.replace(/membre enregistré/,"artistes"); document.getElementById('users').innerHTML=document.getElementById('users').innerHTML.replace(/membres enregistrés/,"artistes enregistrés "); </script> <br><br> <span id="newuser">{NEWEST_USER}</span> <script type="text/javascript"> document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier artiste à nous avoir rejoint est"); </script>. <br>Nous lui souhaitons la bienvenue sur Graphic Art. <br><br> <span id="totaluser">{TOTAL_USERS_ONLINE}</span> <script type="text/javascript"> document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/utilisateur en ligne/,"artiste présent"); document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/utilisateurs en ligne/,"artistes présents"); document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Enregistré/,"artiste"); document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Enregistrés/,"artistes"); document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invisible/,"artistes Perdue"); document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invisibles/,"artistes Perdues"); document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invité/,"Etranger"); document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invités/,"Etrangers"); </script> <br><br> <span id="connecteduser">{LOGGED_IN_USER_LIST}</span> <script type="text/javascript"> document.getElementById('connecteduser').innerHTML=document.getElementById('connecteduser').innerHTML.replace(/Utilisateurs enregistrés/,"Artistes éveillés parcourant actuellement Graphic Art "); </script> <br><br> <span id="record">{RECORD_USERS}</span> <script type="text/javascript"> document.getElementById('record').innerHTML=document.getElementById('record').innerHTML.replace(/Le record du nombre d'utilisateurs en ligne est de/,"Le record d'artistes éveillés en même temps est de "); </script> </span></div> </td> <td style="padding-left: 10px; vertical-align: top; border-left: 1px dashed #c3c3be;" width="50%"></div></div> <br><div style="background;>{L_CONNECTED_MEMBERS}</div> </table> </td> </tr>  <tr> <td align="center" width="100%" colspan="2" style="padding-top: 20px;"> <span class="gensmall">Utilisateurs connectés sur la Chatbox: {CHATTERS_LIST}  <div id="chatbox_popup"></div> <script type="text/javascript"> //<![CDATA[ insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}'); //]]> </script>  </span> </td> </tr>  </table>  {CHATBOX_BOTTOM} <br clear="all" />  <table border="0" cellspacing="3" cellpadding="0" align="center"> <tr> <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td> <td><span class="gensmall">{L_NEW_POSTS}</span></td> <td></td> <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td> <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td> <td> </td> <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td> <td><span class="gensmall">{L_FORUM_LOCKED}</span></td> </tr> </table>

Mon css

Spoiler:

Code:: td.cat { text-align: center; } a { text-decoration: none; } .secondarytitle { background-image: url('http://nsa21.casimages.com/img/2011/12/20/111220045058332744.png'); height: 153px; width: 950px; background-repeat: no-repeat; repeat: no repeat; } body{ background-color: #4d0508; background-image: url("http://img266.imageshack.us/img266/7141/graphicart2.png"); background-position:top; background-repeat:no-repeat; } .bodyline { border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; } .arrondi { width: 90%; margin: 0px; border: 1px solid #COULEUR DU CONTOUR; -moz-border-radius: 20px; -webkit-border-radius: 20px; padding: 5px; background-color:#ffffff} .panel.introduction { background: none; } .accueil .forumline{ background-color: transparent !important; border: none !important; } .accueil .row1{ background-color: transparent !important; border: none !important; } .cadreavatar { background-color : #f3ebdb ; -moz-border-radius: 6px 6px 6px 6px; Overflow: auto; padding : 8px; } .postdetails.poster-profile a img { -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border: 5px solid #E8818C; } a {font-variant: small-caps;} a:link {text-decoration: none;} a:visited {text-decoration: none;} a:hover {text-decoration: none;} a:active {text-decoration: none;} a.forumlink { font-color: #E8818D; font-family: pea weenie; font-size: 17px; padding : 8px; } /*derniers messages*/ .forum-stats { background-color: #f3ebdb; -moz-border-radius: 20px; webkit-border-radius: 20px; border-radius: 20px; border: 1px solid #a0dcd5; font-size: 11px; padding: 1px; text-align: center; } /*moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border: 1px solid #000;*/ .titresfora{ font-size: 11px; height: 20px; padding-left:0px; position: relative; text-align: center; } input, select { color : #COULEUR DU TEXTE; font: normal 11px Trebuchet MS; border: #CA7B6C; border-left-style: solid; border-left-width: 1px; border-right-style: solid; border-right-width: 1px; background-color: #FEF7D1; -moz-border-radius: 10px 10px 10px 10px; } textarea, select { color : #COULEUR DU TEXTE; font: normal 11pxTrebuchet MS; border: #CA7B6C; border-left-style: solid; border-left-width: 3px; border-right-style: solid; border-right-width: 3px; background-color: #FEF7D1; -moz-border-radius: 10px 10px 10px 10px; } .accueil .forumline{ background-color: transparent !important; border: none !important; } .accueil .row1{ background-color: transparent !important; border: none !important; } .name{ font-size : 13px; color : #code_couleur_pseudo; font-style :bold; } .statistiques{ border:0px; background-image: url(""); background-repeat: no-repeat; background-position: center; height:270px;}

par Lyah Sam 31 Déc - 2:30

up svp

par Invité Dim 1 Jan - 10:28

Bonjour,

Les demandes afin de copier une grande partie d'un forum sont interdites, merci d'éditer votre premier message pour remplacer la capture d'écran par un schéma personnel de ce que vous souhaitez obtenir. Je pourrais alors valider votre demande.

Cordialement.

par Lyah Mar 3 Jan - 14:16

Voila j'ai edité pour le coté c'est un demi cercle merci a celui ou celle qui voudra bien m'aider

par Lyah Lun 9 Jan - 2:11

par Lyah Mar 17 Jan - 20:22

up svp

par Lyah Jeu 19 Jan - 18:21

Bonsoir
up svp

par Lyah Ven 20 Jan - 14:57

Bonjour up svp

par Lyah Sam 21 Jan - 13:13

Bonjour
aider moi svp up c'est assez urgent

par Lyah Dim 22 Jan - 0:38

Bonjour up svp

par Lyah Lun 23 Jan - 23:08

Bonsoir up svp

par Invité Mar 24 Jan - 13:58

Bonjour,

Il me semble que c'est réalisable en utilisant 2 images de mêmes dimensions pour "offline" et "online".

Le template à modifié est le viewtopic_body, plus précisément cette partie:

Code:: <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br /> <span class="postdetails poster-profile"> {postrow.displayed.POSTER_RANK}<br /> {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}  {postrow.displayed.POSTER_RPG} </span><br /> <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" /> </td>

Il faut ajouter une div pour l'image, et une pour entourer le profil, ensuite on se sert de la class postdetail poster-profile pour les autres cadres.
Dans la div de l'image, on rajoute la variable de l'image "en ligne":

Code:: {postrow.displayed.ONLINE_IMG}

Donc la partie du template devient:

Code:: <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> <div class="on_off"> {postrow.displayed.ONLINE_IMG}</div> <div class="profil"> {postrow.displayed.POSTER_AVATAR}<br /><br /> <span class="postdetails poster-profile"> {postrow.displayed.POSTER_RANK}<br /> {postrow.displayed.RANK_IMAGE}</span> <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br /> <span class="postdetails poster-profile">  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}  {postrow.displayed.POSTER_RPG} </span><br /> <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" /> </div> </td>

Pour la mise en place et l'apparence des éléments, on ajoute les class a la feuille de style CSS:

Code:: .profil{ border: 2px solid #000; padding: 3px; } .postdetails.poster-profile{ border: 2px solid #000; padding: 3px; display: block; } .on_off{ position: relative; left: -55px; top:20px; background: url('ADRESSE DE L'IMAGE OFFLINE'); width: 60px; }

Cette partie est à personnaliser avec l'image "offline" et avec les propriétés que vous souhaitez. Il faudra affiner le positionnement (left et top) en fonction de la taille de l'image.

Si vous avez des questions, n'hésitez pas;).

Cordialement.