Centrer et encadrer l'avatar

4 participants

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

Résolu Centrer et encadrer l'avatar

Message par Lunathiel Dim 31 Oct 2010 - 20:30

Bonjour, bonsoir cher ami(e)

Voila j'aimerais pouvoir centrer dans la colonne de gauche l'avatar, le pseudo et le rang du membre à côté du message qu'il poste

===> Centrer et encadrer l'avatar Centre10

J'aimerais aussi pouvoir faire un encadré arrondi autour de l'avatar comme cela a été fait sur ce forum => ici


Un grand merci d'avance


Dernière édition par Lunathiel le Mar 2 Nov 2010 - 19:37, édité 1 fois
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer et encadrer l'avatar

Message par Lixyr Dim 31 Oct 2010 - 20:47

Ce forum est à la mode ?


Vous allez direction les templates :

"viewtopic_body"

Vous le modifiez et vous cherchez ce passage :


<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}{postrow.displayed.POSTER_AVATAR}



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

mettez une balise de centrage autour :

Code:
<center> </center>

Ça donne

Code:
<center><strong>{postrow.displayed.POSTER_NAME}</strong></span>

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

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

Ensuite, pour le cadre, vous encadrez la variable de l'avatar d'une div :

Code:
<div class="nom de la div"> </div>

Ici on appellera la div "cadreavatar" : Ca donne :

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

Vous enregistrez le template et vous le validez : Ajout


Ensuite direction le css :

Panneau d'Admin >> Affichage >> Gestion des couleurs >> Feuille de style CSS

Vous mettez ce code :

Code:
.cadreavatar {
border : 1px solid red;
-moz-border-radius: 3px 3px 3px 3px;
}

Vous pouvez changer ces valeurs :

* 1px solid red;

=> 1 c'est l'épaisseur du cadre
=> solid c'est l'apparence du cadre. Ici c'est un simple cadre
=> Red c'est la couleur du cadre

* -moz-border-radius: 3px 3px 3px 3px;

=> 3 ce sont les arrondis des cadres, en partant dans le sens des aiguilles d'un montre pour savoir quel chiffre correspond à quel bord.
Plus le chiffre est élevé, plus l'arrondis sera marqué.

Vous enregistrez le code, et normalement c'est bon.
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer et encadrer l'avatar

Message par Lunathiel Lun 1 Nov 2010 - 8:30

Hey c'est super ça marche super bien!!!
Cependant j'ai un petit problème... j'avais déjà précédemment fait un changement sur le template... Pour afficher un bouton "fiche de personnage" qui masquait les informations du personnage, hors depuis que j'ai fait ce changement, le bouton ne sert plus il reste tout le temps actif... Sais-tu y jeter un coup d'oeil?

Voici mon template:

Code:
<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIVOQUE_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}&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&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&pub=forumotion">{L_SHARE}</a>
            |
            <script type="text/javascript">//<![CDATA[
              insert_plus_menu('f{FORUM_ID}&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><center><strong>{postrow.displayed.POSTER_NAME}</strong></span>

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

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


            <div onClick="this.firstChild.src=(this.firstChild.src=='http://i22.servimg.com/u/f22/14/22/05/48/profil15.png')?'http://i22.servimg.com/u/f22/14/22/05/48/masque10.png':'http://i22.servimg.com/u/f22/14/22/05/48/profil15.png';this.lastChild.style.display=(this.firstChild.src=='http://i22.servimg.com/u/f22/14/22/05/48/profil15.png')?'none':'block';" style="text-align: center; padding: 3px;"><input type="image" src="http://i22.servimg.com/u/f22/14/22/05/48/profil15.png"/><div style="display: none; text-align: left;"><span style="white-space:nowrap;"></center>
            <!-- 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}</span></div></div>
        </span>

        <img src="http://2img.net/i/_.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>

<table class="forumline noprint" width="100%" border="0" cellspacing="1" 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>

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

      <!-- 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}" />
            <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>

Et voici mon forum ni besoin => http://www.thoawin.com/

En image ce que ça donne=>
Centrer et encadrer l'avatar Fiche_11

PS: qu'entends-tu par un forum a la mode drunken


Dernière édition par Lunathiel le Lun 1 Nov 2010 - 8:32, édité 1 fois
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer et encadrer l'avatar

Message par Lyress Lun 1 Nov 2010 - 8:31

Bonjour,

Ce que j'utilise pour faire toussa :
Code:
.postprofile-details{
text-align: center;
}
Et pour border l'avatar :
Code:
.postprofile-details a img {
border: 5px inset #89416b;
}
Lyress

Lyress
****

Masculin
Messages : 330
Inscrit(e) le : 09/08/2010

http://morpheus.forumgratuit.org/
Lyress a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer et encadrer l'avatar

Message par Lixyr Lun 1 Nov 2010 - 13:36

Oups, nop, je n'ai encore jamais utilisé ce genre de système, donc je ne saurai te dire ce qui ne va pas dans ton code.
Cependant, en supposant que tu ais trouvé le code sur ce forum-ci, tu peux retrouver tout ça, et poster ça dans un nouveau sujet.
Les personnes habilitées à ce genre de problème sauront t'aider.
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer et encadrer l'avatar

Message par Lunathiel Lun 1 Nov 2010 - 15:33

J'ai prévenu la personne qui m'as codée la 1er partie pour qu'elle viennent voir sur ce sujet l'erreur... en espérant qu'elle le voit^^
N'empêche un grand merci à toi quand même
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer et encadrer l'avatar

Message par Lixyr Lun 1 Nov 2010 - 15:41

Je t'en prie. ^^
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer et encadrer l'avatar

Message par Lunathiel Lun 1 Nov 2010 - 16:32

Ne fermer cependant pas ce sujet tout de suite. Je fini de voir pour la partie "Profil du perso" en bouton puis je verrais alors avec mon template modifié comment faire en sorte que les infos soit centrée et l'avatar encadré
Je reviendrais donc sur ce sujet assez vite!!!
Un grand merci encore à très vite
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer et encadrer l'avatar

Message par Kiirii Mar 2 Nov 2010 - 12:41

Rebonjour,

Alors on va centrer tout ça et rendez-vous dans les templates (car apparemment il y aurait un conflit entre row1 et posdetails Confused ).

    Arrow PA
    Arrow Affichage
    Arrow Templates
    Arrow Viewtopic_body edit

Cherchez ce bout de balise
Code:
<td class="{postrow.displayed.ROW_CLASS}"

Et ajoutez-y ceci:
Code:
align="center"

Vous devriez obtenir ceci:
Code:
<td align="center" class="{postrow.displayed.ROW_CLASS}"


Toujours dans cette template cherchez
Code:
text-align: left;
Et remplacez left par center, vous devriez obtenir ceci:
Code:
text-align: center;
:enreg: et Ajout

Voilà c'est terminé =)
Kiirii

Kiirii
****

Féminin
Messages : 293
Inscrit(e) le : 13/12/2009

https://forum.forumactif.com/
Kiirii a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer et encadrer l'avatar

Message par Lunathiel Mar 2 Nov 2010 - 16:36

C'est formidable merci infiniment!!!

Reste maintenant à encadrer l'avatar... avec un cadre au coin arrondis comme sur le forum que j'ai donné sur le premier message de ce sujet...
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer et encadrer l'avatar

Message par Kiirii Mar 2 Nov 2010 - 18:15

Le code que vous a donné Lixyr Yrna est bon... sauf qu'il ne marche que sous Firefox. Par exemple le forum que vous nous avez montrer, pour ma part qui suis sur Chrome je ne vois pas les coins arrondis car la propriété moz-border ne marche que sous Firefox Razz.

Direction le CSS

    Arrow PA
    Arrow Affichage
    Arrow Images et couleurs
    Arrow Couleurs
    Arrow Feuille de style CSS

Ajoutez le code ci-dessous:
Code:
.postdetails.poster-profile a img{
border : 5px solid red;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Idea Explications:
Border:
  • 1px signifie que le contour sera de 1 pixel
  • Solid signifie que le contour sera continue (vous pouvez faire des pointillés (dotted) ou des tirets (dashed) etc.
  • Red est la couleur du contour

Border-radius:
    Tous les coins seront d'angle 10px. Un petit outil bien utile pour voir le résultat. Cette fois-ci vos coins arrondis marcheront sur tous les navigateurs, exceptés Internet Explorer qui ne supporte pas le CSS3. (pour régler ce problème il faudrait créer des coins arrondis avec un outil de retouche d'image puis les héberger et bla et bla. >.>)

Validez

C'est terminé!
Kiirii

Kiirii
****

Féminin
Messages : 293
Inscrit(e) le : 13/12/2009

https://forum.forumactif.com/
Kiirii a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer et encadrer l'avatar

Message par Lixyr Mar 2 Nov 2010 - 18:47

Effectivement, au départ j'avais toujours eu des codes avec
moz-border-radius: 10px;
border-radius: 10px;

Sauf que je ne savais pas à quoi correspondait le border-radius: j'ai toujours pensé que c'était un autre code qui donnait la même chose que moz-border-radius (c'est le cas) mais pas que c'était pour être visible sous d'autres exploitations internet.
Pour ça que je l'ai pas mis, je m'en rappelai plus de celui-là.
Je crois que je vais le remettre. Cool
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer et encadrer l'avatar

Message par Lyress Mar 2 Nov 2010 - 19:30

N'oublie pas le - au début de moz et de webkit :
Code:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
moz ne marche pas sous chrome, donc je te conseil de mettre webkit et moz.
Lyress

Lyress
****

Masculin
Messages : 330
Inscrit(e) le : 09/08/2010

http://morpheus.forumgratuit.org/
Lyress a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer et encadrer l'avatar

Message par Lunathiel Mar 2 Nov 2010 - 19:36

WALAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
un tout tout grand merci encore une fois à toi

*soupir* je serais arriver au bout de tout ce que je voulais faire pour ça... un grand merci je vous adore!!!
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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