comment mettre le offline-sur-profil-du-post en invision

[Meridius]

Bonjour ,voila ,je voudrais mettre le bouton "off line" cette fois sur le profil du post
voir le tuto précédent pour le "on line"
https://forum.forumactif.com/t362597-mettre-le-online-sur-profil-du-post-en-invision?highlight=invision
sachant que le code de @milouze14 fonctionne a merveille

Code:

/*Déplacement de l image en ligne*/
.postprofile-head .popmenubutton-new-out  
{

popmenubutton-new-out étant le "en ligne" ,pour le hors ligne ?? quel est le code ?
merci a tous

[Invité]

Salut Meridius ,

as tu le lien de l'image hors ligne stp    .

a++

[Meridius]

bonjour Milouze14
voici https://i.servimg.com/u/f76/17/92/36/69/offlin10.png

[Invité]

Re,

ce ne sera pas possible car il faut impérativement que les deux images soient de
taille équivalentes.
Je recherche de mon côté    .

a++

[Meridius]

elles sont de la même taille ,le "online et "offline
je te remercie en tout cas !  
a++

[Invité]

Re,

si je me base sur le message initial ou tu mentionnes un autre topic,
tu as déposé cette image il me semble:


Donc la taille est bien plus importante .

a++

[Meridius]

ca c'est le code que j'ai mis pour le "en ligne"

Code:

.postprofile-head .popmenubutton-new-out
{  
margin-top:15px;
width: 142px;
margin-left: 1px;  
}

et ca donne ceci

[Invité]

Re,

ok il aurait fallut le renseigner cher ami(e) , je ne suis pas devin    ,

donc pour éviter toute perte de temps,
tu as l'icône vert pour le "En ligne" et tu veux avoir l'icône pour le hors ligne


a++

[Meridius]

oui , tout a fait ,c'est ce que souhaiterais avoir   

[Invité]

Re,
ok merci ,

il va falloir tricher pour avoir l'icône "En ligne" qui cachera l'icône "Hors ligne "   

Voilà la disposition sur forum test :


Pour cela on va créer un script :
Modules/HTML&JAVASCRIPT/
Gestion des codes Javascript/Créer un nouveau Javascript


Mettre un titre explicite.
Cocher "Sur les sujets"

Colles ceci:

Code:


//on donne une class a l image en ligne
$(function(){
$("div.popmenubutton-new-out.popmenubutton a img[alt='En ligne']").addClass("M14_online");
});


//on place l icone hors ligne
$(function(){
$('.postprofile-details.postdetails').has('dt').before('<span id="M14_online"title="Hors ligne"><img src="http://i76.servimg.com/u/f76/17/92/36/69/offlin10.png"/></span>');
});



Penses à cliquer sur le bouton


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Code:


.M14_online
{
position:absolute;
width:11px;
height:11px;
margin-top:29px;  /*modifier la valeur si besoin*/
margin-left:-25px; /*modifier la valeur si besoin*/
z-index:2;
}
#M14_online
{
position:absolute;
width:11px;
height:11px;
margin-left:2px; /*modifier la valeur si besoin*/
z-index:1;
}


Penses à cliquer sur le bouton


Il faudra jouer avec les valeurs de margin-left et margin-right pour arriver
a masquer complétement l image hors ligne   .

Voilà mon ami.

a++

[Meridius]

re milouze
un grand merci a toi ,ca fonctionne  
le seul souci ,si le pseudo est grand tout est décalé   
ca ne s'ajuste pas automatiquement

[Invité]

Re,
chaque structure de forum est différente ,
il aurait fallut mettre le lien de ton forum stp   .

a++

[Meridius]

re ,un grand merci a Milouze14 qui pendant 2 jours m'a aidé pour trouver la solution
grâce a lui ,tout fonctionne correctement
voici le script et CSS final de Milouze14
le script

Code:

$(function(){
    $("div.popmenubutton-new-out.popmenubutton a img[alt='En ligne']").addClass("M14_online");
    });


    //on place l icone hors ligne
    $(function(){
    $('.popmenubutton-new-out.popmenubutton a').has('span').before('<span class="M14_offline"title="Hors ligne"><img src="http://i76.servimg.com/u/f76/17/92/36/69/offlin10.png"/></span><br />');
    });

CSS

Code:

.M14_online
{
position:absolute;
margin-top:-20px;
margin-left: 18px;
z-index:2;
}

.M14_offline
{
position:absolute;
margin-top:5px;
margin-left: 0px;
z-index:1;
}

encore merci Milouze14 pour ta gentillesse et le temps passé
sujet résolu