Code avatar + template topics_list_box
3 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 1 • Partagez
Code avatar + template topics_list_box
Bonjour,
Je sollicite à nouveau votre aide sur 3 points.
Capture d'écran :
Point 1.
Il faut zoomer l'image pour le voir mais le contour de l'avatar ne colle pas réellement à ce dernier : en haut et à gauche il semble y avoir 1 pixel d'écart entre l'avatar et le contour noir. Un décalage que l'on retrouve également quand on passe la souris dessus et qu'on active le hover.
Point 2.
J'aimerais que les informations du profil (quand on est en hover) soient en opacité 1. Il faudrait que l'avatar reste sur cette opacité, mais que les éléments du profil soient, eux, bien visibles par-dessus.
Je pense que ces 2 points peuvent être résolus dans le CSS mais je ne trouve pas où, je vous le mets ci-dessous.
Point 3.
Il concerne le template topics_list_box. Sur la capture d'écran en bas, je me retrouve avec une colonne non voulue (flèche rouge). J'ai essayé de l'enlever mais à chaque fois les résultats ne sont pas satisfaisants... Je vous laisse mon template ci-dessous.
Je vous remercie par avance de votre aide !
Je sollicite à nouveau votre aide sur 3 points.
Capture d'écran :
Point 1.
Il faut zoomer l'image pour le voir mais le contour de l'avatar ne colle pas réellement à ce dernier : en haut et à gauche il semble y avoir 1 pixel d'écart entre l'avatar et le contour noir. Un décalage que l'on retrouve également quand on passe la souris dessus et qu'on active le hover.
Point 2.
J'aimerais que les informations du profil (quand on est en hover) soient en opacité 1. Il faudrait que l'avatar reste sur cette opacité, mais que les éléments du profil soient, eux, bien visibles par-dessus.
Je pense que ces 2 points peuvent être résolus dans le CSS mais je ne trouve pas où, je vous le mets ci-dessous.
- Spoiler:
- .avatar_mess
{
display: block;
width: 200px;
height: 320px;
overflow: hidden;
background: #ffffff;
border: 1px solid #000000;
opacity:1;
-moz-transition: opacity 0.8s ease-in-out;
-webkit-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
.avatar_mess:hover
{
opacity:0.8;
-moz-transition: opacity 0.8s ease-in-out;
-webkit-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
.profil_mess
{
position: absolute;
display: block;
width: 190px;
height: 310px;
margin: auto;
padding: 5px;
overflow: auto;
background: #ffffff;
color: #c5bea0;
font-size: 11px;
opacity:0;
-moz-transition: opacity 0.8s ease-in-out;
-webkit-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
.profil_mess:hover
{
opacity: 0.5;
-moz-transition: opacity 0.8s ease-in-out;
-webkit-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
Point 3.
Il concerne le template topics_list_box. Sur la capture d'écran en bas, je me retrouve avec une colonne non voulue (flèche rouge). J'ai essayé de l'enlever mais à chaque fois les résultats ne sont pas satisfaisants... Je vous laisse mon template ci-dessous.
- Spoiler:
- <!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
var all_checked = true;
for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
}
}
document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
}
}
}
</script>
<!-- END multi_selection -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap"> {topics_list_box.row.L_TITLE} </th>
<th align="center" nowrap="nowrap" width="100"> {topics_list_box.row.L_AUTHOR} </th>
<th align="center" nowrap="nowrap" width="150"> {topics_list_box.row.L_LASTPOST} </th>
<!-- BEGIN multi_selection -->
<th align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th>
<!-- END multi_selection -->
</tr>
<!-- BEGIN pagination -->
<tr>
<td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
</tr>
<!-- END pagination -->
<!-- END header_table --><!-- BEGIN header_row -->
<tr>
<td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
</tr>
<!-- END header_row -->
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
<tr>
<!-- BEGIN single_selection -->
<td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
<!-- END single_selection -->
<td class="{topics_list_box.row.ROW_FOLDER_CLASS}" align="center" valign="middle" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td>
<!-- BEGIN icon -->
<td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
<!-- END icon -->
<td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
<div class="topictitle">
{topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
<h2 class="topic-title">
<a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
</h2>
</div>
<!-- BEGIN switch_description -->
<span class="genmed">
<br />
{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
</span>
<!-- END switch_description -->
<span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
<span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
</td>
<td class="row3" align="center" valign="middle"><span class="name"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></td>
<td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap">
<table><tr><td><!-- BEGIN avatar -->
<span class="lastpost-avatar2">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
<!-- END avatar --><td></td><td><span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span></td></tr></table></td>
<!-- BEGIN multi_selection -->
<td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
<!-- END multi_selection -->
</tr>
<!-- END topic --><!-- BEGIN no_topics -->
<tr>
<td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
</tr>
<!-- END no_topics --><!-- BEGIN bottom -->
<tr>
<td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <span class="gensmall">{PAGINATION}</span></td>
<td align="right"><a href="#top">{L_BACK_TO_TOP}</a> </td>
</tr>
</table>
</td>
</tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->
Je vous remercie par avance de votre aide !
Re: Code avatar + template topics_list_box
Bonjour,
Avant toute chose, je vous rappelle qu'il est interdit de poster plusieurs questions dans un même sujet. A éviter à l'avenir...
Pour le point n°1 il va nous falloir l'URL du forum, et un forum accessible aux invités pour que l'on puisse voir le problème sur un sujet.
Pour le point n°2, retirez l'instruction du CSS relative à l'opacité, et mettez un fond blanc transparent à la div :
Vous pouvez augmenter ou diminuer la transparence en modifiant 0.5 : plus vous augmenter vers le 1, plus c'est opaque, plus vous allez vers 0, plus c'est transparent.
Et pour le point n°3, il s'agit de la colonne qui contient l'icône de sujet. Vous souhaitez la supprimer totalement ?...
Cordialement,
Walt
Avant toute chose, je vous rappelle qu'il est interdit de poster plusieurs questions dans un même sujet. A éviter à l'avenir...
Pour le point n°1 il va nous falloir l'URL du forum, et un forum accessible aux invités pour que l'on puisse voir le problème sur un sujet.
Pour le point n°2, retirez l'instruction du CSS relative à l'opacité, et mettez un fond blanc transparent à la div :
- Code:
background-color: rgba(255,255,255,0.5);
Vous pouvez augmenter ou diminuer la transparence en modifiant 0.5 : plus vous augmenter vers le 1, plus c'est opaque, plus vous allez vers 0, plus c'est transparent.
Et pour le point n°3, il s'agit de la colonne qui contient l'icône de sujet. Vous souhaitez la supprimer totalement ?...
Cordialement,
Walt
Walt- Modéractif
-
Messages : 6081
Inscrit(e) le : 08/09/2015
Re: Code avatar + template topics_list_box
Bonjour "illyria"
Pour le point 1 corrige cette partie de ton CSS
Si tu souhaites conserver le cadre bordure noir sur le profil
Corrige cette partie du CSS comme ceci:
Pour le point 1 corrige cette partie de ton CSS
- Code:
.avatar_mess
{
/*display: block;*/ /* Ligne supprimée*/
border: 0px solid #000; /* bordure modifiée ... passée à 0px */
width: 200px;
height: 320px;
overflow: hidden;
background: #ffffff;
border: 1px solid #000000;
opacity:1;
-moz-transition: opacity 0.8s ease-in-out;
-webkit-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
Si tu souhaites conserver le cadre bordure noir sur le profil
Corrige cette partie du CSS comme ceci:
- Code:
.profil_mess
{
position: absolute;
display: block;
width: 190px;
height: 310px;
margin: auto;
padding: 5px;
overflow: auto;
background: #ffffff;
border: 1px solid #000; /* ajout d'une bordure*/
color: #c5bea0;
font-size: 11px;
opacity:0;
-moz-transition: opacity 0.8s ease-in-out;
-webkit-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
Re: Code avatar + template topics_list_box
Bonjour à vous deux.
lmc38510, merci (à nouveau !) pour ton aide, je viens de résoudre mon point 1 grâce à ta modification.
Walt, toutes mes excuses pour ce manquement au règlement, je ne me souvenais pas de ce point, cela ne se reproduira pas.
Concernant le point 2, je ne comprends pas à quel endroit du CSS je dois retirer la mention de l'opacité et mettre ce nouveau code ? J'ai tenté de le faire sur le profil_mess:hover mais ça ne fonctionne pas donc j'ai certainement raté quelque chose.
Pour le point 3, non je ne souhaite pas tout enlever, juste la petite case qui se situe entre l'icone du sujet et le titre du sujet. Je n'arrive pas à comprendre où elle se situe dans mon template...
lmc38510, merci (à nouveau !) pour ton aide, je viens de résoudre mon point 1 grâce à ta modification.
Walt, toutes mes excuses pour ce manquement au règlement, je ne me souvenais pas de ce point, cela ne se reproduira pas.
Concernant le point 2, je ne comprends pas à quel endroit du CSS je dois retirer la mention de l'opacité et mettre ce nouveau code ? J'ai tenté de le faire sur le profil_mess:hover mais ça ne fonctionne pas donc j'ai certainement raté quelque chose.
Pour le point 3, non je ne souhaite pas tout enlever, juste la petite case qui se situe entre l'icone du sujet et le titre du sujet. Je n'arrive pas à comprendre où elle se situe dans mon template...
Re: Code avatar + template topics_list_box
Je suppose que tu parles de la visibilité de ton texteillyria a écrit:Concernant le point 2, je ne comprends pas à quel endroit du CSS je dois retirer la mention de l'opacité et mettre ce nouveau code ? J'ai tenté de le faire sur le profil_mess:hover mais ça ne fonctionne pas donc j'ai certainement raté quelque chose.
il faut retoucher ton CSS:
- Code:
.profil_mess:hover
{
opacity: 1.0; /* modifier de 0.5 ...à 1.0 */
-moz-transition: opacity 0.8s ease-in-out;
-webkit-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
Re: Code avatar + template topics_list_box
Bonjour lmc38510
Merci pour ton retour !
Oui c'est bien ça, il s'agit de l'opacité du texte. Mais si je change comme indiqué, alors l'avatar s'efface complètement et un fond blanc apparaît. J'aurais voulu que l'opacité de l'avatar reste à 0.8, mais que les informations du profil soient, elles, en opacité 1. Je ne sais pas si c'est faisable en réalité !
Merci pour ton retour !
Oui c'est bien ça, il s'agit de l'opacité du texte. Mais si je change comme indiqué, alors l'avatar s'efface complètement et un fond blanc apparaît. J'aurais voulu que l'opacité de l'avatar reste à 0.8, mais que les informations du profil soient, elles, en opacité 1. Je ne sais pas si c'est faisable en réalité !
Re: Code avatar + template topics_list_box
"illy"
Dans ton CSS change cette partie:
Color (du texte) passe de -> #c5bea0 à -> #000
font supprimée -> font-family: indie flower;
Dans ton CSS change cette partie:
- Code:
.profil_mess
{
position: absolute;
display: block;
/* font-family: indie flower; Ligne supprimée */
width: 190px;
height: 310px;
margin: auto;
padding: 5px;
overflow: auto;
background: #ffffff;
color:#000; /* anciennement #c5bea0;*/
font-size: 11px;
opacity:0;
-moz-transition: opacity 0.8s ease-in-out;
-webkit-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
Color (du texte) passe de -> #c5bea0 à -> #000
font supprimée -> font-family: indie flower;
Re: Code avatar + template topics_list_box
Bonjour,
@lmc38510 en réalité @illyria ne veut pas modifier la couleur du texte, elle veut simplement que le fond de la div ait une opacité de 80% mais que cela n'affecte pas l'opacité du texte.
La solution je l'ai donnée mais j'attends toujours l'URL du forum pour pouvoir la préciser.
Cordialement,
Walt
@lmc38510 en réalité @illyria ne veut pas modifier la couleur du texte, elle veut simplement que le fond de la div ait une opacité de 80% mais que cela n'affecte pas l'opacité du texte.
La solution je l'ai donnée mais j'attends toujours l'URL du forum pour pouvoir la préciser.
Cordialement,
Walt
Walt- Modéractif
-
Messages : 6081
Inscrit(e) le : 08/09/2015
Re: Code avatar + template topics_list_box
Bonjour "Walt"
Un lien pour consulter -> http://yettobenamed.forumactif.com/t1-votre-1er-sujet
Edit
Un lien pour consulter -> http://yettobenamed.forumactif.com/t1-votre-1er-sujet
Edit
illyria a écrit:Oui c'est bien ça, il s'agit de l'opacité du texte. Mais si je change comme indiqué, alors l'avatar s'efface complètement et un fond blanc apparaît. J'aurais voulu que l'opacité de l'avatar reste à 0.8, mais que les informations du profil soient, elles, en opacité 1. Je ne sais pas si c'est faisable en réalité !
Re: Code avatar + template topics_list_box
Merci bien, il suffit donc de remplacer pour .profil_mess le background :
par
Cordialement,
Walt
- Code:
background: #ffffff;
par
- Code:
background: rgba(255,255,255, 0.3);
Cordialement,
Walt
Walt- Modéractif
-
Messages : 6081
Inscrit(e) le : 08/09/2015
Re: Code avatar + template topics_list_box
Merci beaucoup à tous les deux ! J'ai effectivement remplacé comme indiqué et ça fonctionne parfaitement.
Souhaitez-vous que j'édite mon titre/premier message, que je mette en résolu et que je poste un nouveau sujet pour le point 3 ?
Souhaitez-vous que j'édite mon titre/premier message, que je mette en résolu et que je poste un nouveau sujet pour le point 3 ?
Re: Code avatar + template topics_list_box
Oui, faisons comme cela
Cordialement,
Walt
Cordialement,
Walt
Walt- Modéractif
-
Messages : 6081
Inscrit(e) le : 08/09/2015
Sujets similaires
» Désactivation avatar (Template)
» Rang et pseudo sous l'avatar - problème template
» Le pseudo sous l'avatar avec un template déjà personnalisé
» Insérer l'avatar dans un template modifié
» Template viewtopic_body [avatar au dessus du message]
» Rang et pseudo sous l'avatar - problème template
» Le pseudo sous l'avatar avec un template déjà personnalisé
» Insérer l'avatar dans un template modifié
» Template viewtopic_body [avatar au dessus du message]
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 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum