Un codage d'avatar et de fiche de personnage

par Rimaï J. Godwin Ven 8 Mai 2015 - 17:07

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://contrast.forumactif.org

Description du problème

Hello tout le monde,
Alors voilà, je voudrais modifier le profil des joueurs en général.
Voilà, je voudrais que dans les sujets, on puisse voir déjà l'avatar aux bords arrondit et en au survol de la souris, la fiche de personnage que le joueur peut compléter seul.
Comme je l'ai dit, les bords du vava arrondit, et la fiche de personnage au passage de la souris. Avec un effet fondu si possible (ou poussé). J'aimerai également que sur l'avatar soit écrit le pseudo du joueur (par-dessus) en haut et le grade (par-dessus en bas)(voir schéma!). La taille réglementaire est de 200x360

Schéma d'aide:

J'ai cru comprendre qu'il fallait modifier le template viewtopic_body, donc le voilà:

template:

Code:: <script type="text/javascript"> //<![CDATA[ var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" }; $(function(){ if(typeof(_atc) == "undefined") { _atc = { }; } _atc.cwait = 0; $('.addthis_button').mouseup(function(){ if ($('#at15s').css('display') == 'block') { addthis_close(); } }); }); var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' }; showHiddenMessage = function(id) { try { var regId = parseInt(id, 10); if( isNaN(regId) ) { regId = 0; } if( regId > 0) { $('.post--' + id).toggle(0, function() { if( $(this).is(":visible") ) { $('#hidden-title--' + id).html(hiddenMsgLabel.visible); } else { $('#hidden-title--' + id).html(hiddenMsgLabel.hidden); } }); } } catch(e) { } return false; }; //]]> </script> <h1 class="page-title"> <a href="{TOPIC_URL}">{TOPIC_TITLE}</a> </h1> <div class="topic-actions"> <div class="buttons">  <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>   <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>  </div> <div class="pathname-box"> <p itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a class="nav" href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a>  {NAV_CAT_DESC} </p> </div> <p class="right">  <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/{LANGUAGE}/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>  </p> <div class="pagination"> {PAGE_NUMBER} • <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>  • <script type="text/javascript">//<![CDATA[ var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}'; var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}'; var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}'; var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}'; var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}'; var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}'; insert_plus_menu_new('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES}); //]]> </script>  </div> <div class="clear"></div> </div>  <p class="pagination">{PAGINATION}</p>  <p class="left-box"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a></p> <div class="clear"></div> {POLL_DISPLAY}   <div class="post {postrow.hidden.ROW_COUNT}"> <div class="inner"> <span class="corners-top"><span></span></span> <p style="text-align:center">{postrow.hidden.MESSAGE}</p> <div class="clear"></div> <span class="corners-bottom"><span></span></span> </div> </div>   <div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}"> <div class="inner"><span class="corners-top"><span></span></span> <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div> <div class="postbody"> <ul class="profile-icons"> <li>{postrow.displayed.THANK_IMG}</li> <li>{postrow.displayed.MULTIQUOTE_IMG}</li> <li>{postrow.displayed.QUOTE_IMG}</li> <li>{postrow.displayed.EDIT_IMG}</li> <li>{postrow.displayed.DELETE_IMG}</li> <li>{postrow.displayed.IP_IMG}</li> <li>{postrow.displayed.REPORT_IMG_NEW}</li> </ul> <h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h2> <p class="author"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" /> {L_TOPIC_BY} {postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</p> <div class="clearfix"></div>  <div class="vote gensmall">  <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>   <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">  <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>   <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>  </div>   <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>   <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>  </div>  <div style="display:none"></div> <div class="content clearfix"> <div>{postrow.displayed.MESSAGE}</div>  <dl class="attachbox"> <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt> <dd class="attachments">  <dl class="file clearfix"> <dt> <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/> </dt> <dd>  <span><a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}</span>   <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}</span>   <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</span>   <span><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></span>  <span>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span> </dd> </dl>  </dd> </dl>  </div> {postrow.displayed.EDITED_MESSAGE}  <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>  </div> <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">  <dl> <dt> {postrow.displayed.POSTER_AVATAR} <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong> </dt> <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd> <dd><br /></dd> <dd>  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}  {postrow.displayed.POSTER_RPG} </dd> <dd><br /></dd> <dd> {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT} </dd> </dl> </div> <div class="clear"></div> <p class="right"><a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a></p> <span class="corners-bottom"><span></span></span></div> </div>  <hr id="first-post-br" />    <a name="bottomtitle"></a>  <p class="pagination">{PAGINATION}</p>  <p class="left-box"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a></p> <div class="clear"></div> <div class="noprint">   <p class="right">{S_WATCH_TOPIC}</p>   </div>  <div class="post row2" id="ptrafic_close" style="display:none;font-size:1.3em;line-height:1.4em"> <span class="corners-top"><span></span></span> <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a></span> <span class="ptrafic"> {PROMOT_TRAFIC_TITLE}</span> <span class="corners-bottom"><span></span></span> </div> <div class="post row2" id="ptrafic_open" style="display:'';font-size:1.3em;line-height:1.4em"> <span class="corners-top"><span></span></span> <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a></span> <span class="ptrafic"> {PROMOT_TRAFIC_TITLE}</span> <div class="clear"></div> <div>  » <a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />  </div> <span class="corners-bottom"><span></span></span> </div>   <div class="post row1" id="forum_rules"> <span class="corners-top"><span></span></span> <div class="h3"> {L_FORUM_RULES}</div> <div class="clear"></div> <table class="postbody"> <tr>  <td class="logo"> <img src="{RULE_IMG_URL}" alt="" /> </td>  <td class="rules content"> {RULE_MSG} </td> </tr> </table> <span class="corners-bottom"><span></span></span> </div>   <a name="quickreply"></a> {QUICK_REPLY_FORM}  <hr /> <div class="topic-actions"> <div class="buttons">  <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>   <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>  </div> <div class="pathname-box"> <p><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC}</p> </div> <div class="pagination"> {PAGE_NUMBER} </div> </div> <div class="clear"></div>  <form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}"> <fieldset class="jumpbox"> <label>{L_JUMP_TO}: </label> {S_JUMPBOX_SELECT} <input class="button2" type="submit" value="{L_GO}" /> </fieldset> </form>   <form method="get" action="{S_FORM_MOD_ACTION}"> <fieldset class="quickmod"> <input type="hidden" name="t" value="{TOPIC_ID}" />  <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" /> <label>{L_MOD_TOOLS}: </label> {S_SELECT_MOD}  <input class="button2" type="submit" value="{L_GO}" /> </fieldset> </form> <div class="clear"></div> <p class="right">{S_TOPIC_ADMIN}</p>   <div class="h3">{L_TABS_PERMISSIONS}</div> {S_AUTH_LIST}   <script type="text/javascript"> //<![CDATA[ $(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} })); //]]> </script>  <script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

Voilà, je pense avoir tout dit et j'espère avoir été claire surtout.
Merci infiniment à tout ceux qui m'aideront ou tenteront de m'aider.

PS: J'espère avoir fais ma demande au bon endroit >>

par Rimaï J. Godwin Sam 9 Mai 2015 - 19:06

Demande toujours d'actu' c:

par Audrey75 Dim 10 Mai 2015 - 11:02

Bonjour,

Pour modifier le profil sur vos forum vous devez aller dans le template "viewtopic_body", autrement nommé "Affichage d'un sujet". Dans ce template, repérez le code suivant :

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 commence à la ligne 87 normalement. C'est la case du profil ("td" en codage html désignant la case d'un tableau).

Remplacez l'intégralité de ce passage par celui-ci :

Code:: <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> <div class="profil_mess"> <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}</span> <span class="avatar_mess">{postrow.displayed.POSTER_AVATAR}</span><br /> </div> <div class="profil2_mess"> <center><img src="http://img15.hostingpics.net/pics/665019profilimage.png" /></center> <div class="profil2_content"><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> </div> </td>

N'oubliez pas d'enregistrer et de valider votre template modifié !

Installation CSS
Allez ensuite dans votre Feuille CSS pour y ajouter ce code, qui mettra en forme votre profil :

Code:: .profil_mess { position: relative; z-index: 9; width: 210px; margin-left: auto; margin-right: auto; margin-top: 10px; background-color: #333333; padding: 4px; text-align: center; border-radius: 10px; -moz-border-radius: 10px; -htm-border-radius: 10px; -o-border-radius: 10px; -webkit-border-radius: 10px; border: 2px solid #5b5b5b; box-shadow: 0px 0px 5px #000000; -moz-box-shadow: 0px 0px 5px #000000; -htm-box-shadow: 0px 0px 5px #000000; -o-box-shadow: 0px 0px 5px #000000; -webkit-box-shadow: 0px 0px 5px #000000; } .name { display: block; text-transform: uppercase; margin-top: -15px; margin-bottom: -10px; font-size: 14px; font-family: arial black; text-shadow: 1px 1px 0px #000000; padding-bottom: 5px; border-bottom: 1px dashed #5b5b5b; } .avatar_mess { display: block; width: 200px; margin-left: auto; margin-right: auto; margin-top: 10px; height: 320px; overflow: hidden; border: 5px solid #0d0d0d; opacity: 0.7; -moz-opacity: 0.7; -khtml-opacity: 0.7; filter: alpha(opacity=70); transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s; } .avatar_mess:hover { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100); transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s; } .profil2_mess { position: relative; z-index: 1; width: 180px; margin-left: auto; margin-right: auto; margin-top: -202px; background-color: #141414; padding-left: 4px; padding-right: 4px; text-align: left; border-radius: 10px; -moz-border-radius: 10px; -htm-border-radius: 10px; -o-border-radius: 10px; -webkit-border-radius: 10px; border: 2px solid #434343; box-shadow: 0px 0px 5px #000000; -moz-box-shadow: 0px 0px 5px #000000; -htm-box-shadow: 0px 0px 5px #000000; -o-box-shadow: 0px 0px 5px #000000; -webkit-box-shadow: 0px 0px 5px #000000; color: #434343 !important; transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -htm-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transition: 2s; -moz-transition: 2s; -o-transition: 2s; -htm-transition: 2s; -webkit-transition: 2s; } .profil2_mess:hover { margin-top: -42px; transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -htm-transform: rotate(0deg); -webkit-transform: rotate(0deg); transition: 2s; -moz-transition: 2s; -o-transition: 2s; -htm-transition: 2s; -webkit-transition: 2s; } .profil2_content { display: block; width: 180px; height: 200px; max-height: 200px; overflow: auto; }

Personnalisation

Comme vous pouvez le constater, le profil est placé à l'envers sous l'avatar pour ensuite être remis dans le bon sens au survol. Du coup, il est OBLIGATOIRE que votre petite image de profil soit créée A L'ENVERS ! Bah oui, puisqu'elle n'apparait à l'endroit que parce que le bloc est à l'envers... Vous suivez ? XD

Pour le reste, il s'agit essentiellement de couleurs à changer, guère plus.

Parmi les effets du profil, l'avatar est en opacité légèrement réduite et devient opaque au survol, et le pseudo est en majuscules.

Source: Never-Utopia

par Rimaï J. Godwin Dim 10 Mai 2015 - 17:57

Audrey75
Merci beaucoup pour ton aide, j'avais déjà vu ce tuto x) mais je pense avoir trouvé ce qu'il me faut désormais, merci encore de t'être proposé ^^

Un codage d'avatar et de fiche de personnage