|
|
Mitchie
{ Membre }
Messages : 7
| Bonjour ^^ J'aimerais avoir de l'aide pour faire ce genre d'effet de profil. Je suppose que ça se fait avec les templates ? J'aimerais juste savoir comme faire, pour pouvoir personnalisé à ma façon ensuite. - Spoiler:
Adresse du forum : http://tick-tack-boom.forums-actifs.net/forum.htm Merci d'avance | | |
|
| |
Invité Invité
| Bonjour Mitchie, il s'agit d'un encadrement opéré via css et modifications du template viewtopic body. L'encadrement est éffectué par trois images qu'il te faudra créer. le css - Code:
-
#haut_profil{ background-image: url('adresse de l'image'); background-color: transparent; background-repeat: no-repeat; border: none; width: largeur; height: hauteur; } #centre_profil{ background-image: url('adresse de l'image'); background-repeat: repeat-y; background-color: transparent; margin: 0px; padding: 5px; border: none; width: largeur; max-height: hauteur; text-align: center; } #bas_profil{ background-image: url('adresse de l'image'); background-color: transparent; background-repeat: no-repeat; border: none; width: largeur; height: hauteur; } les modifications à apporter à ton template trouver - Code:
-
<!-- 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}{postrow.displayed.POSTER_AVATAR}
<!-- 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>
<img src="http://2img.net/i/fa/vide.gif" alt="" style="width:150px;height:1px" /> </td> et le remplacer par - Code:
-
<!-- BEGIN displayed --> <tr class="post">
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"><div id="haut_profil"></div><div id="centre_profil"> <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} <!-- END profile_field --> {postrow.displayed.POSTER_RPG} </span>
<img src="http://2img.net/i/fa/vide.gif" alt="" style="width:150px;height:1px" /> </div> <div id="bas_profil" ></div> </td> |
Dernière édition par fascicularia le Lun 06 Sep 2010, 16:47, édité 1 fois | |
|
| |
Mitchie
{ Membre }
Messages : 7
| Ah super merci ^^ Mais dans quel template ? :s | | |
|
| |
LittleThing
{ Membre }
Messages : 175
| Si je ne me trompe c'est le template "view_topic_body". | | |
|
| |
Mitchie
{ Membre }
Messages : 7
| Merci je vais essayer | | |
|
| |
Invité Invité
| C'est bien celui ci, je l'ai indiqué dans ma première intervention. - fascicularia a écrit:
- Bonjour Mitchie, il s'agit d'un encadrement opéré via css et modifications du template viewtopic body.
| | |
|
| |
Mitchie
{ Membre }
Messages : 7
| Ah oui en effet je n'avais pas vu, merci | | |
|
| |
Invité Invité
| Bonjour Mitchie, tu t'en sors? | | |
|
| |
TaeYeon
{ Membre }
Messages : 89
| Alors moi j'ai essayé sur un template viewtopic body d'origine, et un css vierge et ça donne pas du tous l'image qua montré Mitchie et je l'ai fait sur mon vrai forum et ça à vraiment donné quelque chose d'horrible! Et j'ai bien suivie les indications!
Mais les 3 images se sont en PNG qu'il les faut? | | |
|
| |
Kimi Sâto
{ Membre actif }
Messages : 335
| Je ne pense pas, enfin pas forcément. Le png améliore juste la qualité de l'image. Je testerai aussi pour ma part, c'est vrai que c'est sympa des effets comme ça ^w^
EDIT:J'ai testée, et c'est vrai que le résultat n'est pas terrible, l'image et le reste du profil ne s'emboîte pas du tout...Il faudrait qu'il n'y ai aucun espace entre les deux pour que ça soit potable. Est-ce que tu sais comment faire fascicularia? Bisous~ | | |
|
| |
Invité Invité
| Il faut jouer sur le margin et le padding de l'image centrale. Bon, je vous préviens , il s'agit d'un travail de patience qui personnellement m'a fait un peu criser.
Voici le résultat sur mon forum
http://altitudetropicale.forums-actifs.com/bananiers-f3/curcuma-petiolata-floraison-au-bout-de-cinq-ans-t677.htm | | |
|
| |
TaeYeon
{ Membre }
Messages : 89
| Comment ça jouer? et c'est quoi le margin et le padding de l'image centrale? Sinon oui c'est bien jolie travail! | | |
|
| |
Invité Invité
| Ceci Taeyeon
#centre_profil{ background-image: url('adresse de l'image'); background-repeat: repeat-y; background-color: transparent; margin: 0px; padding: 5px; border: none; width: largeur; max-height: hauteur; text-align: center; } |
Dernière édition par fascicularia le Lun 06 Sep 2010, 16:48, édité 1 fois | |
|
| |
TaeYeon
{ Membre }
Messages : 89
| Merci tu peux me donner les dimensions que tu as prise pour toute ton image de profile stp, c'est pour me faire une basse sur se que je dois créer! EDIT alors je crois que ya un tres gros problème ça me déforme bien le forum mais sur mon test ça marche nickel, tu pourrais essayer de me le mettre dans celui là? je te passe mon template avec des modif mais pas pour ce tuto LE CSS est bon par contre! Et ya aussi un truc que je veux enlever mais je sais pas ou il se cache c'est ça : - 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 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" nowrap="nowrap" class="t-title"><h1 class="cattitle"> <!-- google_ad_section_start -->{TOPIC_TITLE}<!-- google_ad_section_end --></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="#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" colspan="2">{L_MESSAGE}</th> <th class="thLRight" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th> </tr> <!-- BEGIN postrow --> <!-- BEGIN displayed --> <tr class="post"> <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">
{postrow.displayed.MESSAGE}
<div class="signature_div"> {postrow.displayed.SIGNATURE} </div> </div> <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span> </td> </tr> </table> </td> <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><div align="center"><strong>{postrow.displayed.POSTER_NAME}</strong></ <span class="postdetails poster-profile"> {postrow.displayed.POSTER_RANK}<br /> {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br /> <!-- BEGIN profile_field --> {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field --> <div onClick="this.firstChild.value=(this.firstChild.value=='Afficher le Profil')?'MASQUER LE PROFIL':'AFFICHER LE PROFIL';this.lastChild.style.display=(this.firstChild.value=='AFFICHER LE PROFIL')?'none':'block';" style="text-align: center;"><input type="button" value="AFFICHER LE PROFIL" class="trucmuche"/><div style="display: none;"><center>{postrow.displayed.POSTER_RPG}</center></div></div> </span><br /> <img src="http://2img.net/i/fa/vide.gif" alt="" style="width:150px;height:1px" /> </td> </tr> <tr> <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> <td colspan="2" 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> </tr> <!-- BEGIN first_post_br --> </table> <br /> <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" nowrap="nowrap" 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}<br /> <!-- 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"><br />{S_TOPIC_ADMIN}<br /> <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}<br />{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 type="text/javascript" src="{JS_DIR}addthis/addthis_widget.js?pub=forumotion"></script> | | |
|
| |
TaeYeon
{ Membre }
Messages : 89
| - TaeYeon a écrit:
- Merci tu peux me donner les dimensions que tu as prise pour toute ton image de profile stp, c'est pour me faire une basse sur se que je dois créer!
EDIT alors je crois que ya un tres gros problème ça me déforme bien le forum mais sur mon test ça marche nickel, tu pourrais essayer de me le mettre dans celui là?
je te passe mon template avec des modif mais pas pour ce tuto LE CSS est bon par contre! Et ya aussi un truc que je veux enlever mais je sais pas ou il se cache c'est ça : AFFICHER LE PROFILE (car ont peut meme pas cliquer dessus il sert à rien)
- 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 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" nowrap="nowrap" class="t-title"><h1 class="cattitle"> <!-- google_ad_section_start -->{TOPIC_TITLE}<!-- google_ad_section_end --></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="#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" colspan="2">{L_MESSAGE}</th> <th class="thLRight" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th> </tr> <!-- BEGIN postrow --> <!-- BEGIN displayed --> <tr class="post"> <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">
{postrow.displayed.MESSAGE}
<div class="signature_div"> {postrow.displayed.SIGNATURE} </div> </div> <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span> </td> </tr> </table> </td> <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><div align="center"><strong>{postrow.displayed.POSTER_NAME}</strong></ <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} <!-- END profile_field --> <div onClick="this.firstChild.value=(this.firstChild.value=='Afficher le Profil')?'MASQUER LE PROFIL':'AFFICHER LE PROFIL';this.lastChild.style.display=(this.firstChild.value=='AFFICHER LE PROFIL')?'none':'block';" style="text-align: center;"><input type="button" value="AFFICHER LE PROFIL" class="trucmuche"/><div style="display: none;"><center>{postrow.displayed.POSTER_RPG}</center></div></div> </span>
<img src="http://2img.net/i/fa/vide.gif" alt="" style="width:150px;height:1px" /> </td> </tr> <tr> <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> <td colspan="2" 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> </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" nowrap="nowrap" 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> <!-- 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}" /> <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 type="text/javascript" src="{JS_DIR}addthis/addthis_widget.js?pub=forumotion"></script> | | |
|
| |
Invité Invité
| - fascicularia a écrit:
- Bonjour Mitchie, il s'agit d'un encadrement opéré via css et modifications du template viewtopic body.
L'encadrement est éffectué par trois images qu'il te faudra créer.
le css
- Code:
-
#haut_profil{ background-image: url('adresse de l'image'); background-color: transparent; background-repeat: no-repeat; border: none; width: largeur; height: hauteur; } #centre_profil{ background-image: url('adresse de l'image'); background-repeat: repeat-y; background-color: transparent; margin: 0px; padding: 5px; border: none; width: largeur; max-height: hauteur; text-align: center; } #bas_profil{ background-image: url('adresse de l'image'); background-color: transparent; background-repeat: no-repeat; border: none; width: largeur; height: hauteur; } les modifications à apporter à ton template
trouver
- Code:
-
<!-- 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}{postrow.displayed.POSTER_AVATAR}
<!-- 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>
<img src="http://2img.net/i/fa/vide.gif" alt="" style="width:150px;height:1px" /> </td> et le remplacer par
- Code:
-
<!-- BEGIN displayed --> <tr class="post">
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"><div id="haut_profil"></div><div id="centre_profil"> <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} <!-- END profile_field --> {postrow.displayed.POSTER_RPG} </span>
<img src="http://2img.net/i/fa/vide.gif" alt="" style="width:150px;height:1px" /> </div> <div id="bas_profil" ></div> </td> |
Dernière édition par fascicularia le Lun 06 Sep 2010, 16:49, édité 1 fois | |
|
| |
Invité Invité
| 1/Dimensions des images #haut_profil width:200px; height: 64px; #centre_rofil width: 200px; max-height: 900px; #bas_profil width: 200px; height: 64px; 2/il te suffit de supprimer ceci - Code:
-
<div onClick="this.firstChild.value=(this.firstChild.value=='Afficher le Profil')?'MASQUER LE PROFIL':'AFFICHER LE PROFIL';this.lastChild.style.display=(this.firstChild.value=='AFFICHER LE PROFIL')?'none':'block';" style="text-align: center;"><input type="button" value="AFFICHER LE PROFIL" class="trucmuche"/><div style="display: none;"><center>{postrow.displayed.POSTER_RPG}</center></div></div> Ce template ne comporte aucune modification autre que le masquage du profil. Pourquoi ne pas importer tout simplement le template de ton forum test sur ton forum d'origine ? | | |
|
| |
TaeYeon
{ Membre }
Messages : 89
| D'accord merci pour l'instant c'est no par contre j'ai un problème quelque infos sont décalés par rapport à l'avatar comment remédier à ça? | | |
|
| |
Invité Invité
| Pour centrer toutes informations contenues dans le profil. Cherchez ceci : - Code:
-
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
Et ajoutez y ceci : - Code:
-
style="text-align: center;" Ce qui vous donne donc : - Code:
-
<td style="text-align: center;" class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> Pour un alignement à gauche des informations - Code:
-
<td style="text-align: center;" class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> |
Dernière édition par fascicularia le Lun 06 Sep 2010, 18:41, édité 1 fois | |
|
| |
TaeYeon
{ Membre }
Messages : 89
| Et bien en faite je sais pas ce qui ce passe un coup ça fonctionne un coup ça me déforme mon forum, il se répète, du coup j'ai laisser, tomber, car l'image des liens je sais pas elle se mets pas comme je voudrais! Je peux vous donnez le css pour voir ce qui va pas! - Code:
-
} #haut_profil{ background-image: url('http://img10.hostingpics.net/pics/2932812.png'); background-color: transparent; background-repeat: no-repeat; border: none; width: largeur; height: hauteur; }
#centre_profil{ background-image: url('http://img10.hostingpics.net/pics/2932812.png'); background-repeat: repeat-y; background-color: transparent; margin: 0px; padding: 0px; border: none; width: largeur; text-align: center; }
#bas_profil{ background-image: url('http://img10.hostingpics.net/pics/2932812.png'); background-color: transparent; background-repeat: no-repeat; border: none; width: largeur; height: hauteur; } | | |
|
| |
Invité Invité
| Normal, plusieurs informations de ton css ne sont renseignées
Je vais décomposer tout ça pour que tu puisses le compléter
} #haut_profil{ background-image: url('https://2img.net/r/hpimg10/pics/2932812.png'); background-color: transparent; background-repeat: no-repeat; border: none; width: largeur; A compléter largeur de l'image en px height: hauteur; A compléter hauteur de l'image en px }
#centre_profil{ background-image: url('https://2img.net/r/hpimg10/pics/2932812.png'); background-repeat: repeat-y; background-color: transparent; margin: 0px; padding: 0px; border: none; width: largeur; A compléter largeur de l'image en px max-height: hauteur totale en px de la répétition de l'image; A rajouter text-align: center; }
#bas_profil{ background-image: url('https://2img.net/r/hpimg10/pics/2932812.png'); background-color: transparent; background-repeat: no-repeat; border: none; width: largeur; A compléter largeur de l'image en px height: hauteur; A compléter hauteur de l'image en px }
Bon, par contre, tu es sur de tes images ????? Au niveau encadrement une répétition de trois images identiques et qui plus est tout en hauteur, c'est un peu bizarroïde | | |
|
| |
Kimi Sâto
{ Membre actif }
Messages : 335
| En fait, j'ai essayée en modifiant les valeurs, et en reprenant les images du forum (je ne l'ai pas appliquée évidemment, c'est pour voir si cela valait le coup que je les fassent moi-même), mais le profil n'est pas collé aux images, et comment peut-on savoir la bonne largeur que l'on doit prendre pour les images?
Bisous~ | | |
|
| |
Kaiji
Blanche-Neige
Messages : 5578
| Bonjour, Votre problème est-il résolu ? Si oui, merci de cocher dans "icône du sujet" l'icône en éditant votre 1er post.
| | |
|
| |
TaeYeon
{ Membre }
Messages : 89
| |
| |
Kimi Sâto
{ Membre actif }
Messages : 335
| Pour ma part non plus xD | | |
|
| |
Contenu sponsorisé
| |
| |
|