Personnalisation du profil
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Personnalisation du profil
Bonjour !
Bon, n'étant pas très douée en templates/css, j'implore votre aide.
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 :
Bon, je pense que le schéma a tout dit. ^^
J'ai modifier mon template "Viewtopic_body" que voici.
Voilà, je pense que tout y est...
Merci d'avance pour vos réponses ! A bientot.
Bon, n'étant pas très douée en templates/css, j'implore votre aide.
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}&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[
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}&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://2img.net/i/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
Re: Personnalisation du profil
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é ?
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é ?
Re: Personnalisation du profil
Bonsoir !
Un grand merci pour votre réponse, déjà.
Ensuite, je n'ai aucun CSS pour la partie du profil dans les sujets... ^^
Un grand merci pour votre réponse, déjà.
Ensuite, je n'ai aucun CSS pour la partie du profil dans les sujets... ^^
Re: Personnalisation du profil
A ce que je vois, tu as mis un bouton pour la feuille RPG, mais ton schéma montre autre chose.
Doit-il rester ?
Doit-il rester ?
Re: Personnalisation du profil
Je préfèrerai qu'il reste, oui.
Re: Personnalisation du profil
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 :
Mais tu peux remettre le tien en faisant bien attention aux fermetures des balises "/div".
Le CSS :
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.
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://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td>
- Spoiler:
- Code:
PARTIE CORRIGÉE PLUS BAS
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)
Re: Personnalisation du profil
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 :
Ce "width" n'est qu'à titre d'exemple et tu peux le modifier à ta convenance (comme tout le reste d'ailleurs).
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://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td>
Ce "width" n'est qu'à titre d'exemple et tu peux le modifier à ta convenance (comme tout le reste d'ailleurs).
Re: Personnalisation du profil
Un énorme merci pour ton aide ! J'ai réparé mes erreurs, et j'ai pu commencer le design !
Mais j'ai cependant quelques problèmes... ^^'
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 !
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 !
Re: Personnalisation du profil
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 :
Je pense que ce devrait jouer...
/*.....*/
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>
- 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...
Re: Personnalisation du profil
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 ?
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 ?
Re: Personnalisation du profil
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*/
Re: Personnalisation du profil
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 :/ ?
Je souhaiterai que le texte soit supperposé sur l'image. Comme le rang sur la capture, (ici, "Demi-dieu"). Est-ce possible :/ ?
Re: Personnalisation du profil
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)...
Avec des valeurs négatives (comme c'est le cas dans l'exemple) et avec des valeurs positives (sans le -??px)...
Re: Personnalisation du profil
- 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...
Re: Personnalisation du profil
Voici mon résultat avec ce paramétrage :
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.
Comme tu peux le constater, le pseudo et le rang chevauchent juste un peu le cadre de l'avatar./*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;
}
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.
Re: Personnalisation du profil
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 :
Et (Oui oui, je demande encore quelque chose...) pourrait-on faire en sorte de l'arranger en quelque chose comme ça ? :
Encore merci pour vos réponses.
Ce problème est réglé, c'était la police qui causait ce décalage... Voilà ce que ça donne maintenant :
- Spoiler:
Et (Oui oui, je demande encore quelque chose...) pourrait-on faire en sorte de l'arranger en quelque chose comme ça ? :
- Spoiler:
Encore merci pour vos réponses.
Re: Personnalisation du profil
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 :
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...
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>
=.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...
Re: Personnalisation du profil
Nikel, merci !
Je mets le sujet en résolu !
Encore merci pour votre aide !
Je mets le sujet en résolu !
Encore merci pour votre aide !
Re: Personnalisation du profil
Je t'en prie.
Avec le bon code CSS on arrive ensuite à placer l'avatar, le pseudo, etc, comme on veut (même légèrement de biais).
C'est vraiment le plus simple.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...
Avec le bon code CSS on arrive ensuite à placer l'avatar, le pseudo, etc, comme on veut (même légèrement de biais).
Sujets similaires
» [Profil] Un choix multiple pour une liste d'images, profil d'utilisateur
» Barre de défilement dans le profil+ cadre arrondi au profil
» Isoler champs du profil (et seulement du profil)
» [Profil] Rendre le champ "Sexe" du profil inclusif
» Isoler les champs de profil dans la page du profil
» Barre de défilement dans le profil+ cadre arrondi au profil
» Isoler champs du profil (et seulement du profil)
» [Profil] Rendre le champ "Sexe" du profil inclusif
» Isoler les champs de profil dans la page du profil
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum