Code avatar + template topics_list_box

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

Résolu Code avatar + template topics_list_box

Message par illyria le Dim 23 Avr 2017 - 10:17

Bonjour,
Je sollicite à nouveau votre aide sur 3 points. I love you

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">&nbsp;{topics_list_box.row.L_TITLE}&nbsp;</th>
<th align="center" nowrap="nowrap" width="100">&nbsp;{topics_list_box.row.L_AUTHOR}&nbsp;</th>
<th align="center" nowrap="nowrap" width="150">&nbsp;{topics_list_box.row.L_LASTPOST}&nbsp;</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">&nbsp;<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>&nbsp;
<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>&nbsp;<span class="gensmall">{PAGINATION}</span></td>
<td align="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</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 ! I love you
avatar

illyria
***

Féminin
Messages : 118
Inscrit(e) le : 19/04/2006

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

Résolu Re: Code avatar + template topics_list_box

Message par Walt le Dim 23 Avr 2017 - 12:04

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 :
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
avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 3740
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code avatar + template topics_list_box

Message par lmc38510 le Dim 23 Avr 2017 - 12:07

Bonjour "illyria" Hi

Pour le point 1 corrige cette partie de ton CSS Very Happy

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;
}
avatar

lmc38510
*****

Masculin
Messages : 891
Inscrit(e) le : 22/02/2012

http://lacaverneauxgrimoire.forumactif.org/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code avatar + template topics_list_box

Message par illyria le Dim 23 Avr 2017 - 14:12

Bonjour à vous deux. Smile

lmc38510, merci (à nouveau !) pour ton aide, je viens de résoudre mon point 1 grâce à ta modification. I love you

Walt, toutes mes excuses pour ce manquement au règlement, je ne me souvenais pas de ce point, cela ne se reproduira pas. Embarassed

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. Smile

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...
avatar

illyria
***

Féminin
Messages : 118
Inscrit(e) le : 19/04/2006

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

Résolu Re: Code avatar + template topics_list_box

Message par lmc38510 le Dim 23 Avr 2017 - 16:00

@illyria 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. Smile
Je suppose que tu parles de la visibilité de ton texte


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;
}
avatar

lmc38510
*****

Masculin
Messages : 891
Inscrit(e) le : 22/02/2012

http://lacaverneauxgrimoire.forumactif.org/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code avatar + template topics_list_box

Message par illyria le Mar 25 Avr 2017 - 11:37

Bonjour lmc38510 Very Happy

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é ! What a Face
avatar

illyria
***

Féminin
Messages : 118
Inscrit(e) le : 19/04/2006

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

Résolu Re: Code avatar + template topics_list_box

Message par lmc38510 le Mar 25 Avr 2017 - 13:10

Hi "illy"

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;
avatar

lmc38510
*****

Masculin
Messages : 891
Inscrit(e) le : 22/02/2012

http://lacaverneauxgrimoire.forumactif.org/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code avatar + template topics_list_box

Message par Walt le Mar 25 Avr 2017 - 13:22

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. Wink

Cordialement,
Walt
avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 3740
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code avatar + template topics_list_box

Message par lmc38510 le Mar 25 Avr 2017 - 13:34

Bonjour "Walt"

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é !
avatar

lmc38510
*****

Masculin
Messages : 891
Inscrit(e) le : 22/02/2012

http://lacaverneauxgrimoire.forumactif.org/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code avatar + template topics_list_box

Message par Walt le Mar 25 Avr 2017 - 13:55

Merci bien, il suffit donc de remplacer pour .profil_mess le background :

Code:
background: #ffffff;

par

Code:
background: rgba(255,255,255, 0.3);

Cordialement,
Walt
avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 3740
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code avatar + template topics_list_box

Message par illyria le Mar 25 Avr 2017 - 15:19

Merci beaucoup à tous les deux ! J'ai effectivement remplacé comme indiqué et ça fonctionne parfaitement. ::fleur::

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 ?
avatar

illyria
***

Féminin
Messages : 118
Inscrit(e) le : 19/04/2006

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

Résolu Re: Code avatar + template topics_list_box

Message par Walt le Mar 25 Avr 2017 - 17:27

Oui, faisons comme cela Wink

Cordialement,
Walt
avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 3740
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

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


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