Personnalisation du profil

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Personnalisation du profil

Message par Floramagic le Dim 11 Sep 2011 - 15:11

Bonjour !
Bon, n'étant pas très douée en templates/css, j'implore votre aide. Confused
J'ai beaucoup cherché de sujets traitant le même problème, mais rien ne me convient vraiment... Et n'ayant pas le nom exacte de ce que je voudrais faire, c'est encore plus embettant. ^^'
Alors voilà, je souhaiterai personnaliser la partie "Profil" dans un sujet, mais je ne sais pas vraiment comment m'y prendre

Voici un schéma :
Spoiler:

Bon, je pense que le schéma a tout dit. ^^

J'ai modifier mon template "Viewtopic_body" que voici.
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(){
   _atc.cwait = 0;
   $('.addthis_button').mouseup(function(){
      if ($('#at15s').css('display') == 'block') {
         addthis_close();
         addthis_close();
      }
   });
});
//]]>
</script>

<table width="100%" border="0" cellspacing="2" cellpadding="0">
   <tr>
      <td align="left" valign="middle" nowrap="nowrap">
         <span class="nav">
         <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
         <!-- END switch_user_authpost -->
         <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
         <!-- END switch_user_authreply -->
         </span>
      </td>
      <td align="left" valign="middle" nowrap="nowrap">
         <!-- BEGIN switch_twitter_btn -->
         <span id="twitter_btn" style="margin-left: 6px; ">
         <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
         <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
         </span>
         <!-- END switch_twitter_btn -->
         <!-- BEGIN switch_fb_likebtn -->
         <span id="fb_likebtn" style="margin-left: 6px; ">
            <iframe src="http://www.facebook.com/plugins/like.php?href={FORUM_URL}{TOPIC_URL}&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
         </span>
         <!-- END switch_fb_likebtn -->
      </td>
      <td class="nav" valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
      <td align="right" valign="bottom" nowrap="nowrap" width="100%">
         <span class="gensmall bold">
            <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;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('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
            //]]>
            </script>
         </span>
      </td>
   </tr>
</table>

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr align="right">
      <td class="catHead" colspan="3" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td width="9%" class="noprint"> </td>
               <td align="center" class="t-title">
                  <h1 class="cattitle"> {TOPIC_TITLE}</h1>
               </td>
               <td align="right" width="9%" class="browse-arrows"><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> </td>
            </tr>
         </table>
      </td>
   </tr>
   <!-- BEGIN topicpagination -->
   <tr>
      <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
   </tr>
   <!-- END topicpagination -->
   {POLL_DISPLAY}
   <tr>
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
   </tr>
   <!-- BEGIN postrow -->
   <!-- BEGIN displayed -->
   <tr class="post">
      <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>

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

            {postrow.displayed.RANK_IMAGE}<div align="center">{postrow.displayed.POSTER_AVATAR}</div>

            <!-- BEGIN profile_field -->
            <div align="center">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field --></div>
            </br>
                              <div align="center"><div class="quotetitle"><input type="button" value="Voir feuille perso'" style="width:98px;font-size:12px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Masquer feuille'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Voir feuille perso'; }" /></div><div class="quotecontent"><div style="display: none;">
{postrow.displayed.POSTER_RPG}</div>
         </span>

         <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
               <td valign="top" nowrap="nowrap" class="post-options">
                  {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
               </td>
            </tr>
            <tr>
               <td colspan="2" class="hr">
                  <hr />
               </td>
            </tr>
            <tr>
               <td colspan="2">
                  <!-- BEGIN switch_vote_active -->
                  <div class="vote gensmall">
                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                     <!-- END switch_vote -->

                     <!-- BEGIN switch_bar -->
                     <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                        <!-- BEGIN switch_vote_plus -->
                        <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                        <!-- END switch_vote_plus -->

                        <!-- BEGIN switch_vote_minus -->
                        <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                        <!-- END switch_vote_minus -->
                     </div>
                     <!-- END switch_bar -->

                     <!-- BEGIN switch_no_bar -->
                     <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                     <!-- END switch_no_bar -->

                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                     <!-- END switch_vote -->
                  </div>
                  <!-- END switch_vote_active -->

                  <div class="postbody">

                     <div>{postrow.displayed.MESSAGE}</div>

                     <!-- BEGIN switch_attachments -->
                     <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                           <!-- BEGIN switch_post_attachments -->
                           <dl class="file">
                              <dt>
                                 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />

                                 <!-- BEGIN switch_dl_att -->
                                 <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}
                                 <!-- END switch_dl_att -->

                                 <!-- BEGIN switch_no_dl_att -->
                                 {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}
                                 <!-- END switch_no_dl_att -->
                              </dt>

                              <!-- BEGIN switch_no_comment -->
                              <dd>
                                 <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                              </dd>
                              <!-- END switch_no_comment -->

                              <!-- BEGIN switch_no_dl_att -->
                              <dd>
                                 <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                              </dd>
                              <!-- END switch_no_dl_att -->

                              <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                           </dl>
                           <!-- END switch_post_attachments -->
                        </dd>
                     </dl>
                     <!-- END switch_attachments -->

                     <div class="clear"></div>
                     <div class="signature_div">
                        {postrow.displayed.SIGNATURE}
                     </div>

                  </div>
                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
         <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
      </td>
      <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>
   </tr>
   <!-- BEGIN first_post_br -->
</table>


<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
   </tr>
   <!-- END first_post_br -->
   <!-- END displayed -->
   <!-- BEGIN hidden -->
   <tr>
      <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
   </tr>
   <!-- END hidden -->
   <!-- END postrow -->
   <!-- BEGIN no_post -->
   <tr align="center">
      <td class="row1" colspan="3" height="28">
         <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
   </tr>
   <!-- END no_post -->
   <tr align="right">
      <td class="catBottom" colspan="3" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td width="9%" class="noprint"> </td>
               <td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
               <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><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> </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

<!-- BEGIN promot_trafic -->
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
   <tr>
      <td class="catBottom" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
               <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
            </tr>
         </table>
      </td>
   </tr>
</table>

<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
   <tr>
      <td class="catBottom" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
               <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <td class="row2 postbody" valign="top">
         <!-- BEGIN link -->
         » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{promot_trafic.link.TITLE}</a>

         <!-- END link -->
      </td>
   </tr>
</table>
<!-- END promot_trafic -->

<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
      <!-- BEGIN topicpagination -->
      <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
      <!-- END topicpagination -->
   </tr>
   <!-- BEGIN switch_user_logged_in -->
   <!-- BEGIN watchtopic -->
   <tr>
      <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
   </tr>
   <!-- END watchtopic -->
   <!-- END switch_user_logged_in -->
   <tr>
      <td class="row2" colspan="2" align="center" style="padding:0px">
         <!-- BEGIN switch_user_logged_in -->
         <a name="quickreply"></a>
         {QUICK_REPLY_FORM}

         <!-- END switch_user_logged_in -->
      </td>
   </tr>
   <tr>
      <td style="margin:0; padding: 0;" colspan="2">
         <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
            <tbody>
      <!-- BEGIN show_permissions -->
      <tr>
         <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
         <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
      </tr>
      <!-- END show_permissions -->
      <tr>
         <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <!-- BEGIN show_permissions -->
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
                  <!-- END show_permissions -->
               </tr>
            </table>
         </td>
      </tr>
   </tbody>
         </table>
      </td>
   </tr>
   <tr>
      <td style="margin:0; padding: 0;" colspan="2">
         <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
            <tbody>
      <tr>
         <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
               </tr>
            </table>
         </td>
      </tr>
   </tbody>
         </table>
      </td>
   </tr>
</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
         <span class="nav">
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->
         </span>
      </td>

      <!-- BEGIN viewtopic_bottom -->
      <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
      <!-- END viewtopic_bottom -->

      <!-- BEGIN moderation_panel -->
      <td align="center">
         <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
      </td>
      <td align="center" width="250">
         <span class="gensmall"> </span>
      </td>
      <!-- END moderation_panel -->
   </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap">
{S_TOPIC_ADMIN}

         <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />

            <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
            <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

            <span class="gen">{L_MOD_TOOLS}
{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
         </form>
      </td>
   </tr>
</table>
<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

Voilà, je pense que tout y est...

Merci d'avance pour vos réponses ! A bientot.


Dernière édition par Floramagic le Mer 28 Sep 2011 - 19:15, édité 1 fois

Floramagic
Nouveau membre

Messages : 19
Inscrit(e) le : 11/09/2011

http://percyjackson.harrypotter-forum.com/
Floramagic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Floramagic le Lun 12 Sep 2011 - 18:07

Up Wink

Floramagic
Nouveau membre

Messages : 19
Inscrit(e) le : 11/09/2011

http://percyjackson.harrypotter-forum.com/
Floramagic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Floramagic le Mar 13 Sep 2011 - 18:27

Up. Smile

Floramagic
Nouveau membre

Messages : 19
Inscrit(e) le : 11/09/2011

http://percyjackson.harrypotter-forum.com/
Floramagic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Floramagic le Mer 14 Sep 2011 - 21:40

Up ! Razz

Floramagic
Nouveau membre

Messages : 19
Inscrit(e) le : 11/09/2011

http://percyjackson.harrypotter-forum.com/
Floramagic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Floramagic le Jeu 15 Sep 2011 - 21:29

Up... Smile

Floramagic
Nouveau membre

Messages : 19
Inscrit(e) le : 11/09/2011

http://percyjackson.harrypotter-forum.com/
Floramagic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Floramagic le Sam 17 Sep 2011 - 10:56

Up. ^^

Floramagic
Nouveau membre

Messages : 19
Inscrit(e) le : 11/09/2011

http://percyjackson.harrypotter-forum.com/
Floramagic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Final-Blonde le Mar 20 Sep 2011 - 21:19

Bonsoir,

Peux-tu donner la partie du CSS concernant seulement le profil des posts que tu as déjà, histoire de s'y retrouver avec ce que tu as déjà réalisé ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Floramagic le Mar 20 Sep 2011 - 21:33

Bonsoir !
Un grand merci pour votre réponse, déjà. Smile

Ensuite, je n'ai aucun CSS pour la partie du profil dans les sujets... ^^

Floramagic
Nouveau membre

Messages : 19
Inscrit(e) le : 11/09/2011

http://percyjackson.harrypotter-forum.com/
Floramagic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Final-Blonde le Mer 21 Sep 2011 - 6:59

A ce que je vois, tu as mis un bouton pour la feuille RPG, mais ton schéma montre autre chose.

Doit-il rester ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Floramagic le Mer 21 Sep 2011 - 12:59

Je préfèrerai qu'il reste, oui. Smile

Floramagic
Nouveau membre

Messages : 19
Inscrit(e) le : 11/09/2011

http://percyjackson.harrypotter-forum.com/
Floramagic a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Personnalisation du profil

Message par Final-Blonde le Mer 21 Sep 2011 - 13:27

Tout d'abord, nous allons essayer de scinder toute cette partie en différents blocs avec des balises "div", ensuite leur donner des attributs "class" dont nous pourrons gérer le style via le CSS.
Je vais essayer de t'aider pour la structuration, mais à toi de réaliser ton design, ok ?

1°- Au passage, tu as bien du CSS à cet endroit puisque tu as mis les attributs "class" pour le bouton :
"quotetitle" et "quotecontent"
Tu verras si tu veux le garder ou pas.
2°- Une grosse erreur avec les sauts de ligne : Ce n'est pas </br>
Mais br / entre les balises html <>
3°- Tu as mis 4 balises "div" autour du bouton et de son contenu, tu n'en a refermées que deux...
Attention, c'est rédhibitoire !

Commençons par remplacer cette partie de ton template viewtopic_body :
Spoiler:
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>
 
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}
 
            {postrow.displayed.RANK_IMAGE}<div align="center">{postrow.displayed.POSTER_AVATAR}</div>
 
            <!-- BEGIN profile_field -->
            <div align="center">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field --></div>
            </br>
                              <div align="center"><div class="quotetitle"><input type="button" value="Voir feuille perso'" style="width:98px;font-size:12px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Masquer feuille'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Voir feuille perso'; }" /></div><div class="quotecontent"><div style="display: none;">
{postrow.displayed.POSTER_RPG}</div>
        </span>
 
        <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>
Par :
Spoiler:
Code:
PARTIE CORRIGÉE PLUS BAS
J'ai mis un autre code pour le bouton, parce que le tien m'a pris la tête.
Mais tu peux remettre le tien en faisant bien attention aux fermetures des balises "/div".

Le CSS :
Spoiler:
/*poster-profile*/
/*pseudo*/
div.post-pseudo, span.name a {
font-size: ??px;
margin-bottom: -8px; /*positionnement du pseudo par rapport au haut du cadre-avatar*/
padding: 4px 7px 0px 0px; /*dans le sens des aiguilles d'une montre : top > right > bottom > left*/
}
/*avatar*/
div.post-avatar img {
width: 200px;
height: 300px;
border: ?px solid #color;
-moz-border-radius: ??px; /*arrondis pour FF*/
-webkit-border-radius: ??px; /*arrondis pour autres navigateurs*/
border-radius: ??px; /*arrondis pour Opera*/
padding: 4px;
}
/*rang*/
div.post-rank {
font-size: ??px;
margin-top: -8px; /*positionnement du rang par rapport au bas du cadre-avatar*/
propriétés couleurs de fond, texte, etc;
padding: ?px;
-propriétés arrondis;
-propriétés arrondis;
propriétés arrondis;
}
/*infos-profil*/
div.post-profil-infos {
propriétés couleurs de fond, radius, texte, espacement (padding), etc;
}
/*bouton show-mask*/
.rpgbutton {
propriétés couleurs de fond, radius, texte, espacement (padding), etc;
}
/*contenu-feuille-rpg*/
.rpgcontent {
text-align: center;
font-size: ?px;
}

D'après les identifiants dans le template avec ceux dans le CSS, tu retrouveras aisément ton chemin, je pense.

N'hésite pas si tu as des questions.


Dernière édition par Final-Blond le Mer 21 Sep 2011 - 14:22, édité 1 fois (Raison : erreur dans le code-template corrigée dans le post suivant)

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Final-Blonde le Mer 21 Sep 2011 - 14:19

Sorry pour le doubling, mais j'ai fait une erreur dans la dernière "div" avec un double "class".
Voici la bonne version de cette partie :
Spoiler:
Code:
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="210">
<div align="right" class="post-pseudo">
        <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>
</div>
 <div align="center" class="post-avatar">
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_AVATAR}
</div>
<div align="center" class="post-rank">
          {postrow.displayed.RANK_IMAGE}
            {postrow.displayed.POSTER_RANK}
</div>
            <!-- BEGIN profile_field -->
<div align="center" class="post-profil-infos">
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
</div>
            <!-- END profile_field -->
<br />         
<div align="center" onClick="this.firstChild.value=(this.firstChild.value=='See')?'Mask':'See';this.lastChild.style.display=(this.firstChild.value=='See')?'none':'block';" style="text-align: center;">
<input type="button" value="See" class="rpgbutton" />
<div style="display: none;" class="rpgcontent">
{postrow.displayed.POSTER_RPG}
</div></div>

        </span>
          <br />
        <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>
La colonne ("td") du tout début a aussi été modifiée quant à sa largeur en fonction de l'image-avatar.
Ce "width" n'est qu'à titre d'exemple et tu peux le modifier à ta convenance (comme tout le reste d'ailleurs).

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Floramagic le Mer 21 Sep 2011 - 16:53

Un énorme merci pour ton aide ! Very Happy J'ai réparé mes erreurs, et j'ai pu commencer le design !

Mais j'ai cependant quelques problèmes... ^^'
Spoiler:

Comme on le voit sur cette capture, le pseudo est sous l'image. N'y a t-il pas un moyen de faire superposer le texte sur l'image ...?

Ensuite, pour la partie infos profils chaques champs sont entourés... Peut-on faire en sorte que seulement la totalité des champs soit entourée ?

Encore un grand merci ! Smile

Floramagic
Nouveau membre

Messages : 19
Inscrit(e) le : 11/09/2011

http://percyjackson.harrypotter-forum.com/
Floramagic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Final-Blonde le Mer 21 Sep 2011 - 17:50

Pour ce qui est du pseudo, tu peux le positionner avec ce qui est dans le CSS entre les balises "commentaires" .
/*.....*/
Il faut faire plusieurs essais.

Quant à cette div des profil-infos il suffit de mettre la div autour des deux grandes balises :
Code:
<div class="post-profil-infos">
            <!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
</div>
En lieu et place de :
Code:
            <!-- BEGIN profile_field -->
<div class="post-profil-infos">
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
</div>
            <!-- END profile_field -->

Je pense que ce devrait jouer...

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Floramagic le Mer 21 Sep 2011 - 19:39

Pour le problème du cadre, c'est arrangé, merci !

Mais pour le pseudo, je n'ai pas exactement compris ce qu'il faudrait faire avec le CSS pour l'afficher au dessus de l'image... ^^' Vraiment désolée, je ne suis pas très doué. Pouvez-vous me rééxpliquer comment faire ?

Floramagic
Nouveau membre

Messages : 19
Inscrit(e) le : 11/09/2011

http://percyjackson.harrypotter-forum.com/
Floramagic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Final-Blonde le Mer 21 Sep 2011 - 19:46

Dans cette ligne (en bleu) tu modifies la valeur (en rouge) :
/*pseudo*/
div.post-pseudo, span.name a {
font-size: ??px;
margin-bottom: -8px; /*positionnement du pseudo par rapport au haut du cadre-avatar*/

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Floramagic le Mer 21 Sep 2011 - 19:58

Je me suis sans doutes mal exprimé tout à l'heure... :/
Je souhaiterai que le texte soit supperposé sur l'image. Comme le rang sur la capture, (ici, "Demi-dieu"). Est-ce possible :/ ?

Floramagic
Nouveau membre

Messages : 19
Inscrit(e) le : 11/09/2011

http://percyjackson.harrypotter-forum.com/
Floramagic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Final-Blonde le Mer 21 Sep 2011 - 20:04

Oui, il te suffit de régler cette valeur en rouge.

Avec des valeurs négatives (comme c'est le cas dans l'exemple) et avec des valeurs positives (sans le -??px)...

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Floramagic le Mer 21 Sep 2011 - 20:47

Spoiler:

Alors ce n'est pas normal que le pseudo s'affiche en dessous de l'image, si ?

Voilà le CSS sur le pseudo :
Spoiler:

/*pseudo*/
div.post-pseudo, span.name a {
font-size: 15px;
font-variant: small-caps;
font-family: 'Singer mears','Felix Titling';
margin-bottom: -10px;
padding: 4px 7px 0px 0px;
}

J'ai bien modifié la valeur du "margin-bottom", le texte est bien descendu, mais sous l'image...

Floramagic
Nouveau membre

Messages : 19
Inscrit(e) le : 11/09/2011

http://percyjackson.harrypotter-forum.com/
Floramagic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Final-Blonde le Jeu 22 Sep 2011 - 18:28

Voici mon résultat avec ce paramétrage :
/*pseudo*/
div.post-pseudo, span.name a {
font-size: 18px;
margin-bottom: -8px; /*positionnement du pseudo par rapport au haut du cadre-avatar*/
padding: 4px 7px 0 0px;
}
Comme tu peux le constater, le pseudo et le rang chevauchent juste un peu le cadre de l'avatar.

Et voici ce que j'obtiens avec ton paramétrage (2px plus bas) :

Donne-moi le CSS entier du profil, peut-être y a-t-il une erreur quelque part.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Floramagic le Sam 24 Sep 2011 - 16:42

Désolée pour le temps de ma réponse !

Ce problème est réglé, c'était la police qui causait ce décalage... Voilà ce que ça donne maintenant Smile :
Spoiler:


Et (Oui oui, je demande encore quelque chose...) pourrait-on faire en sorte de l'arranger en quelque chose comme ça ? :

Spoiler:
Ou

Encore merci pour vos réponses. Smile

Floramagic
Nouveau membre

Messages : 19
Inscrit(e) le : 11/09/2011

http://percyjackson.harrypotter-forum.com/
Floramagic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Final-Blonde le Dim 25 Sep 2011 - 8:45

Salut Floramagic,

J'adore les défis, mais là j'ai cherché et cherché (même sur la toile et mes différents sites CSS préférés), je n'ai trouvé qu'une demi-solution :
Créer une table et des cellules juste pour la bordure du haut de l'avatar...

Dans le template viewtopic_body après avant la "div"-avatar (si tu as conservé cette structuration) on crée un tableau factice :
Code:
<div align="center" class="post-avatar">
<table align="left" height="3" class="tbavatsbord"><tr>
<td width="7" align="left" valign="bottom"></td><td align="left" valign="bottom" class="tdavatsbord"></td></tr></table>
<span class="postdetails poster-profile">
            {postrow.displayed.POSTER_AVATAR}
</div>
Dans le CSS on donne leurs propriétés à ces deux "class" tbavatsbord et tdavatsbord :
.tbavatsbord {
.tbavatsbord {
border-collapse: collapse;
margin-left: 3px;
margin-bottom: -3px;
}
.tdavatsbord {
width: 99px; /*la logueur horizontale du trait*/
border-top: 3px solid black; /*pointillé > dotted*/
}
=

Mais je pense qu'on ne peut pas faire qu'un bout de bordure, il faut trouver une parade via les cellules d'un tableau et bidouiller les distances jusqu'à arriver au plus près...
Du moins c'est ce que j'ai trouvé et s'il y a plus simple, je suis prenante. :-)

EDIT : Ou alors plus simple déjà : Créer l'image du cadre faite avec Paint, Gimp ou autre et placer les avatars dedant...

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Floramagic le Mer 28 Sep 2011 - 19:15

Nikel, merci ! Smile
Je mets le sujet en résolu !
Encore merci pour votre aide ! Very Happy

Floramagic
Nouveau membre

Messages : 19
Inscrit(e) le : 11/09/2011

http://percyjackson.harrypotter-forum.com/
Floramagic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du profil

Message par Final-Blonde le Mer 28 Sep 2011 - 19:39

Je t'en prie.

Final-Blond a écrit:EDIT : Ou alors plus simple déjà : Créer l'image du cadre faite avec Paint, Gimp ou autre et placer les avatars dedant...
C'est vraiment le plus simple.
Avec le bon code CSS on arrive ensuite à placer l'avatar, le pseudo, etc, comme on veut (même légèrement de biais).

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum