Contour autour de l'avatar
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 2 • Partagez
Page 1 sur 2 • 1, 2
Contour autour de l'avatar
Bonjour à tous,
J'aimerais savoir comment on peut faire pour qu'un cadre change autour de l'avatar s'il est en ligne ou hors ligne.
J'ai déjà pioché dans un sujet dans le template viewtopic-body j'ai remplacer ceci
par ça :
Et dans le css du forum j'ai mis :
Merci pour votre aide.
J'aimerais savoir comment on peut faire pour qu'un cadre change autour de l'avatar s'il est en ligne ou hors ligne.
J'ai déjà pioché dans un sujet dans le template viewtopic-body j'ai remplacer ceci
- 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}{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/empty.gif" alt="" style="width:150px;height:1px" />
</td>
par ça :
- Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<div align="center"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}
</strong></span>
</div>
<span class="postdetails poster-profile">
<div class="postrank">{postrow.displayed.POSTER_RANK}
</div>
<div align="center" class"postava">{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}</div>
<div align="center" class="postinfos">
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
</div>
<div align="center" class="postrpg">{postrow.displayed.POSTER_RPG}</div>
</span>
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td>
Et dans le css du forum j'ai mis :
- Code:
div.post-pseudo, span.name a {
font-size: 19px;
padding: 7px;
}
div.postava, .poster-profile a img {
Background: #80B2D9;
border: 4px solid #80B2D9;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
-htm-border-radius: 5px;
}
Merci pour votre aide.
Re: Contour autour de l'avatar
Bonjour Valou,
Tiens je reconnais cette structure du template viewtopic_body...
Ce que toi tu demandes est néanmoins un peu plus complexe.
Le plus "évident" me parait-il, c'est de :
- Créer un cadre-image pour le on_line et une autre pour le off_ligne
- Les placer dans leur champ respetif >> Mini-icônes des messages
- Enfin, essayer de les positionner avec l'identifiant par défaut : #i_icon_online
Tiens je reconnais cette structure du template viewtopic_body...
Ce que toi tu demandes est néanmoins un peu plus complexe.
Le plus "évident" me parait-il, c'est de :
- Créer un cadre-image pour le on_line et une autre pour le off_ligne
- Les placer dans leur champ respetif >> Mini-icônes des messages
- Enfin, essayer de les positionner avec l'identifiant par défaut : #i_icon_online
Re: Contour autour de l'avatar
D'accord et qu'elle est le code a mettre ? A la place de quoi ?
Re: Contour autour de l'avatar
L'identifiant mentionné plus haut n'est pas à mettre à la place d'autre chose, tout ce qu'on peut essayer, c'est de le positionner sur l'avatar, ce qui n'est pas une mince affaire.
Bien sûr dans le cadre, il faut que ce soit en transparence.
Bien sûr dans le cadre, il faut que ce soit en transparence.
Re: Contour autour de l'avatar
D'accord mais ou ce trouve la partie : Mini-icone des messages ?
Re: Contour autour de l'avatar
Désolé du double poste mais quand vous dite que dans le cadre ça doit être transparent, tous mes avatar ne sont pas de la même taille donc ça va s'adapter ?
Re: Contour autour de l'avatar
Ah pardon, c'est un identifaint pour le CSS.
PA >> Affichage >> Couleurs > Feuille de style CSS :
Créée déjà les images, mets-les à l'endroit indiqué et je t'aiderai pour le positionnement, si j'y arrive...
Il me semble que nous ne pourrons afficher par ce biais qu'une seule image, on-line ou off-line.
EDIT : Nous avons posté en même temps.
Euh là c'est carrément compliqué, mais nous pouvons voir.
La transparence dans le cadre est obligée, sinon pas moyen de voir les avatars.
Par Gimp ou autres éditeurs d'images, ce doit être faisable...
PA >> Affichage >> Couleurs > Feuille de style CSS :
#i_icon_online {
propriétés CSS;
}
Créée déjà les images, mets-les à l'endroit indiqué et je t'aiderai pour le positionnement, si j'y arrive...
Il me semble que nous ne pourrons afficher par ce biais qu'une seule image, on-line ou off-line.
EDIT : Nous avons posté en même temps.
Euh là c'est carrément compliqué, mais nous pouvons voir.
La transparence dans le cadre est obligée, sinon pas moyen de voir les avatars.
Par Gimp ou autres éditeurs d'images, ce doit être faisable...
Re: Contour autour de l'avatar
Peux-tu donner les liens de tes images,parce que je ne saurais le faire à vue.
Re: Contour autour de l'avatar
D'accord les voici :
En ligne : https://i.servimg.com/u/f46/15/26/45/11/en_lig11.png
Hors ligne : https://i.servimg.com/u/f46/15/26/45/11/hors_l11.png
Merci de votre aide.
En ligne : https://i.servimg.com/u/f46/15/26/45/11/en_lig11.png
Hors ligne : https://i.servimg.com/u/f46/15/26/45/11/hors_l11.png
Merci de votre aide.
Re: Contour autour de l'avatar
Bonsoir, bonjour Valou,
Alors nous allons tout d'abord placer l'image du "en-ligne" aussi dans :
Affichage >> Images > Mini-icônes ET > Boutons
Le hors-ligne juste dans : Mini-icônes
Ensuite, dans le template viewtopic_body cherche la variable :
- Colle-la (Ctrl+V) avant la variable de l'avatar, d'après ton template :
Voici toute la partie :
Enfin, dans le CSS nous allons pouvoir placer ce cadre (petit, non ?) sur l'avatar :
Tout dépend ce que tu as placer dans le "div-avatar", pour moi, trois fois la hauteur du cadre (40px) le place pile au milieu de l'avatar.
Alors nous allons tout d'abord placer l'image du "en-ligne" aussi dans :
Affichage >> Images > Mini-icônes ET > Boutons
Le hors-ligne juste dans : Mini-icônes
Ensuite, dans le template viewtopic_body cherche la variable :
- Code:
{postrow.displayed.ONLINE_IMG}
- Colle-la (Ctrl+V) avant la variable de l'avatar, d'après ton template :
- Code:
<div align="center" class"postava">{postrow.displayed.ONLINE_IMG}{postrow.displayed.POSTER_AVATAR}
</div>
Voici toute la partie :
- Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<div align="center"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}
</strong></span>
</div>
<span class="postdetails poster-profile">
<div class="postrank">{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}
</div>
<div align="center" class"postava">{postrow.displayed.ONLINE_IMG}{postrow.displayed.POSTER_AVATAR}
</div>
<br /><br />
<div align="center" class="postinfos">
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
</div>
<div align="center" class="postrpg">{postrow.displayed.POSTER_RPG}</div>
</span>
<br />
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td>
Enfin, dans le CSS nous allons pouvoir placer ce cadre (petit, non ?) sur l'avatar :
C'est depuis le haut (en rouge) que tu vas chercher à placer ce cadre.#i_icon_online {
display: inline;
position: relative;
top: 120px;
width: 40px;
hight: 40px;
margin: 0 auto;
}
Tout dépend ce que tu as placer dans le "div-avatar", pour moi, trois fois la hauteur du cadre (40px) le place pile au milieu de l'avatar.
Re: Contour autour de l'avatar
EDIT : Ancien poste supprimé.
Je ne comprend pas comment on peut placer la cadre ? Mais si je choisis la taille ca veut dire que le cadre ne s'adapte pas au contour de l'image si ?
2eme Edit : moi quand je met 40px déjà il est au milieu du forum, et je le vois que pour une personne pas sur tout les messages.
Je ne comprend pas comment on peut placer la cadre ? Mais si je choisis la taille ca veut dire que le cadre ne s'adapte pas au contour de l'image si ?
2eme Edit : moi quand je met 40px déjà il est au milieu du forum, et je le vois que pour une personne pas sur tout les messages.
Re: Contour autour de l'avatar
Bonjour Valou,
Pas oublié, juste le temps qui souffle très vite...
Alors reprenons ça seulement depuis la partie de la variable "online" coupée et placée avec le div de l'avatar.
En fait, mon erreur a été de ne pas rendre ces deux images "parents" afin que l'on puisse utiliser la position absolue pour le cadre, dont voici comment se présente le code HTML au final :
pour répondre à ta question sur les dimensions de ces deux images, ton cadre est bel et bien trop petit.
Il me semble que si tu prenais des dimensions comme par exemple 160*210 pixels
tu pourrais ensuite limiter les dimensions des avatars (en demandant à tes membres d'en tenir compte lors du choix de leur avatar) avec dans le CSS :
Les dimensions ne sont qu'à titre d'exemple.
Pas oublié, juste le temps qui souffle très vite...
Alors reprenons ça seulement depuis la partie de la variable "online" coupée et placée avec le div de l'avatar.
En fait, mon erreur a été de ne pas rendre ces deux images "parents" afin que l'on puisse utiliser la position absolue pour le cadre, dont voici comment se présente le code HTML au final :
- Code:
<div align="center" class="imgava">
{postrow.displayed.POSTER_AVATAR}
<p class="imgaround"> {postrow.displayed.ONLINE_IMG} </p>
</div>
- Code:
<div align="center" class"postava">{postrow.displayed.ONLINE_IMG}{postrow.displayed.POSTER_AVATAR}
</div>
div.imgava, .poster-profile a img {
display: inline block;
position: relative;
width: auto;
height: auto;
margin: 0 auto;
}
p.imgaround, #i_icon_online img {
display: inline block;
position: absolute;
top: 20px;
left: 60px;
width: 40px;
height: 40px;
z-index: 1;
}
pour répondre à ta question sur les dimensions de ces deux images, ton cadre est bel et bien trop petit.
Il me semble que si tu prenais des dimensions comme par exemple 160*210 pixels
tu pourrais ensuite limiter les dimensions des avatars (en demandant à tes membres d'en tenir compte lors du choix de leur avatar) avec dans le CSS :
Pour arriver à avoir quelque chose de pas trop déséquilibrer..poster-profile a img {
max-width: 150px;
max-height: 200px;
min-width: 140px;
min-height: 190px;
}
Les dimensions ne sont qu'à titre d'exemple.
Re: Contour autour de l'avatar
J'ai bien remplacer le code HTML mais c'est au niveau du CSS que je bloque. Je ne sais pas si j'ai bien fais. Voici mon code css de mon forum personnalisé :
L'image en ligne apparaît dans les raccourcis de contact (en fin de message) et il n’apparaît qu'une fois et pas pour chaque message.
- Code:
.forumline, td.row3Right, td.catBottom { border: 1px solid black; }
input, select, textarea { border: 1px solid white; padding: 3px; margin: 3px; }
td.catHead { padding: 3px; border: 1px solid black; padding-left: 10px; letter-spacing: 1px; }
td.row1.over, div.topictitle { padding: 10px; }
th { padding: 5px; }
td.bodyline { padding-top: 0px; margin: 0px; }
a.mainmenu { display: block; }
a.forumlink:hover {
text-decoration: none; }
body{
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.genmed a,.genmed a:active{
font-size:0.8em;
text-decoration:none;
}
.genmed a:hover{
text-decoration:underline;
}
div.post-pseudo, span.name a {
font-size: 19px;
padding: 7px;
}
div.imgava, .poster-profile a img {
display: inline block;
position: relative;
width: auto;
height: auto;
margin: 0 auto;
}
p.imgaround, #i_icon_online img {
display: inline block;
position: absolute;
top: 5px;
left: 60px;
width: 40px;
height: 40px;
z-index: 1;
}
L'image en ligne apparaît dans les raccourcis de contact (en fin de message) et il n’apparaît qu'une fois et pas pour chaque message.
Re: Contour autour de l'avatar
Je ne vois rien au niveau du CSS.
Peux-tu me redonner le template viewtopic_body en entier et un lien sur un sujet que je puisse voir en tant qu'invité ?
Peux-tu me redonner le template viewtopic_body en entier et un lien sur un sujet que je puisse voir en tant qu'invité ?
Re: Contour autour de l'avatar
Template entier :
http://frdark.gameproforums.com/t1-hey-toi-tu-veux-rentrer-dans-ma-team
- 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" style="border-bottom: 0px;">
<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">
<div align="center"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}
</strong></span>
</div>
<span class="postdetails poster-profile">
<div class="postrank">{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}
</div>
<div align="center" class="imgava">
{postrow.displayed.POSTER_AVATAR}
<p class="imgaround"> {postrow.displayed.ONLINE_IMG} </p>
</div>
<br /><br />
<div align="center" class="postinfos">
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
</div>
<div align="center" class="postrpg">{postrow.displayed.POSTER_RPG}</div>
</span>
<br />
<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 -->
</td>
</tr>
</table>
</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" 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="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
<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 -->
</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><br />
<!-- END link -->
</td>
</tr>
</table>
<!-- END promot_trafic -->
<!-- BEGIN switch_forum_rules -->
<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
<tbody>
<tr>
<td class="catBottom">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top">
<h1 class="cattitle"> {L_FORUM_RULES}</h1>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="row1 clearfix">
<table>
<tr>
<!-- BEGIN switch_forum_rule_image -->
<td class="logo">
<img src="{RULE_IMG_URL}" />
</td>
<!-- END switch_forum_rule_image -->
<td class="rules postbody">
{RULE_MSG}
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!-- END switch_forum_rules -->
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
<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}" /> -->
<input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
<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 src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>
http://frdark.gameproforums.com/t1-hey-toi-tu-veux-rentrer-dans-ma-team
Re: Contour autour de l'avatar
Mais je ne vois rien du tout dans ton sujet : Il n'y a ni avatar, ni cadre !
Si je souhaite voir un sujet, c'est pour me rendre compte de ce que ça fait chez toi.
EDIT : Voici ce que ça donne chez moi avec ton template et le CSS donné plus haut, deux avatars de taille différente :
Si je souhaite voir un sujet, c'est pour me rendre compte de ce que ça fait chez toi.
EDIT : Voici ce que ça donne chez moi avec ton template et le CSS donné plus haut, deux avatars de taille différente :
Re: Contour autour de l'avatar
Je ne vais pas reprendre tout le tuto, alors je me contenterai de récapituler les étapes :
1°- Insérer les images on-offline dans les mini-icônes
2°- Insérer l'image online dans son champ dans les boutons
3°- Supprimer la variable en la copiant online de son emplacement d'origine du template (voir tuto plus haut)
4°- Coller la variable selon dernier HTML du template donné plus haut
5°- Installer le nouveau CSS à la place de l'ancien (attention, dans la feuille de style c'est le dernier code sur la feuille qui prévaut en cas de double identifiants)
Il n'y a pas de raison que ça donne autre chose chez toi alors que j'ai mis ton template et ton CSS et que j'ai le résultat montré plus haut...
EDIT : Zut, crotte et pataflûte, bien sûr qu'en invité on ne voit pas le "online" !
1°- Insérer les images on-offline dans les mini-icônes
2°- Insérer l'image online dans son champ dans les boutons
3°- Supprimer la variable en la copiant online de son emplacement d'origine du template (voir tuto plus haut)
4°- Coller la variable selon dernier HTML du template donné plus haut
5°- Installer le nouveau CSS à la place de l'ancien (attention, dans la feuille de style c'est le dernier code sur la feuille qui prévaut en cas de double identifiants)
Il n'y a pas de raison que ça donne autre chose chez toi alors que j'ai mis ton template et ton CSS et que j'ai le résultat montré plus haut...
EDIT : Zut, crotte et pataflûte, bien sûr qu'en invité on ne voit pas le "online" !
Re: Contour autour de l'avatar
J'ai refait le tuto est toujours pas. J'ai peut-être fait une erreur quelques part ? Je me demanderais si vous aurez l'amabilité de faire une assistance via team viewer ?
Merci tout de même de votre aide !
Merci tout de même de votre aide !
Re: Contour autour de l'avatar
C'est ton CSS qui a posé problème et c'est réglé.
Il faut que tu regardes celui qui a le pseudo "petitcochon".
Refais des cadres avec des dimensions correctes, ajuste le positionnement et c'est encore sympa comme idée.
Il faut que tu regardes celui qui a le pseudo "petitcochon".
Refais des cadres avec des dimensions correctes, ajuste le positionnement et c'est encore sympa comme idée.
Re: Contour autour de l'avatar
Oui ! Excellent merci maintenant je dois le mettre en 160*210 comme vous m'avez dit.
EDIT : Encore un problème ^^' j'ai essayé de placer mon cadre au top : 0px je suis pas assez haut.
EDIT : Encore un problème ^^' j'ai essayé de placer mon cadre au top : 0px je suis pas assez haut.
Dernière édition par Valou78230 le Jeu 10 Nov 2011 - 19:54, édité 1 fois
Re: Contour autour de l'avatar
Exactement et penser à limiter les avatare avec 5 ou 10 pixels de moins.
Bonne soirée.
Bonne soirée.
Re: Contour autour de l'avatar
Oui oui c'est ce que j'ai fais j'ai limiter au rectangle qu'il y a dans le cadre et ca marche toujours pas.
Bonne soirée et merci encore !
Bonne soirée et merci encore !
Re: Contour autour de l'avatar
Essaie d'augmenter le z-index: 10; et ainsi de suite...
Re: Contour autour de l'avatar
Eh bien mets quelques sauts de ligne entre l'avatar et le rang .
Ton image-cadre est bizarrement déformée et ce n'est pas très beau...
Pourquoi ne pas refaire un cadre aux bonnes dimensions avec un éditeur d'images comme Gimp ou photoshop ?
- Code:
<br />
Ton image-cadre est bizarrement déformée et ce n'est pas très beau...
Pourquoi ne pas refaire un cadre aux bonnes dimensions avec un éditeur d'images comme Gimp ou photoshop ?
Re: Contour autour de l'avatar
J'en ai refait un cadre car c'est vrai que celui là n'étais pas très bonne qualité.
JE comprend pas trop ce que vous avez mis pour mettre des espaces entre le rang et l'avatar
JE comprend pas trop ce que vous avez mis pour mettre des espaces entre le rang et l'avatar
Re: Contour autour de l'avatar
Eh bien il y a deux solutions pour l'espace entre le rang et l'avatar :
1°- D'après la partie concernée dans ton template que je t'avais mis plus haut, il y a :
Ou un margin-top: ??px; au div de l'avatar.
2°- Tu peux placer deux (ou plus) sauts de ligne après le bloc (div) du rang :
1°- D'après la partie concernée dans ton template que je t'avais mis plus haut, il y a :
- Code:
<div class="postrank">{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}
</div>
<div align="center" class"postava">{postrow.displayed.ONLINE_IMG}{postrow.displayed.POSTER_AVATAR}
</div>
Ou un margin-top: ??px; au div de l'avatar.
2°- Tu peux placer deux (ou plus) sauts de ligne après le bloc (div) du rang :
- Code:
<div class="postrank">{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}
</div>
<br /><br />
<div align="center" class"postava">{postrow.displayed.ONLINE_IMG}{postrow.displayed.POSTER_AVATAR}
</div>
Re: Contour autour de l'avatar
Voilà ça marche à merveille je te montre une image pour te faire voir ce que ca donne, car sans toi je n'y aurais pas réussit.
Voilà (et non il manque un truc à ma demande ^^' désolé si je te suis pénible)
Il faudrait que quand la personne est hors ligne le cadre change (enfin que ça soit un autre cadre quoi) est-ce que c'est possible ? Si oui comment ?
Voilà (et non il manque un truc à ma demande ^^' désolé si je te suis pénible)
Il faudrait que quand la personne est hors ligne le cadre change (enfin que ça soit un autre cadre quoi) est-ce que c'est possible ? Si oui comment ?
Page 1 sur 2 • 1, 2
Sujets similaires
» Contour autour des photos de profils
» Contour autour du cadre du forum
» Ajouter un contour autour des messages
» Faire un encadré/contour autour des blocs Sujets
» Contour uniquement autour du QEEL, sans impact sur les catégories
» Contour autour du cadre du forum
» Ajouter un contour autour des messages
» Faire un encadré/contour autour des blocs Sujets
» Contour uniquement autour du QEEL, sans impact sur les catégories
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum