Invision | Boutons de contact

2 participants

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

Résolu Invision | Boutons de contact

Message par Kendall Mar 25 Jan 2022 - 13:19

Détails techniques

Version du forum : Invision
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Toujours
Lien du forum : https://chicagosdawn.forumactif.com

Description du problème

Bien le bonjour,

Je m'arrache un peu les cheveux depuis hier avec ces histoires de boutons de contact.

Sur Invision, ils sont cachés dans une liste déroulante qui s'active au clic. Ca ne m'intéresse pas. Je souhaite les disposer comme sur la maquette que j'ai réalisée.
maquette ici : https://i.imgur.com/jvF7UCz.jpg

Je voudrais une barre en dessous du contenu du message avec les boutons en lien, sans image, designés comme je le souhaite via le CSS.

Sauf que si je touche au code et que j'enlève la partie "liste" pour ne garder que la variable, le profil, le mail et les mp restent, mais toute la partie réseaux sociaux / champs de contact disparaît. Je n'arrive pas à la conserver.
+ J'aimerais également savoir comme facilement remplacer l'image par juste un lien. Je suppose qu'une class .bouton a {} pourrait fonctionner pour designer le lien en lui-même mais je ne sais pas comment supprimer simplement l'image.

J'ai cherché toute la soirée hier comment gérer ça sur google et je n'ai rien trouvé qui ai fonctionné... C'est pourquoi je demande votre aide.

Merci d'avance,

PS : c'est la toute première fois que je code sous invision, habituée au phpbb2, du coup je suis un peu paumée désolée si c'est un truc super simple
Kendall

Kendall
***

Messages : 178
Inscrit(e) le : 30/04/2011

Kendall a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Invision | Boutons de contact

Message par Oka.mi Mar 25 Jan 2022 - 22:54

Bonjour,

Dans votre template viewtopic_body, retrouvez le passage concerné :
Code:
<div class="popmenubutton-new-out popmenubutton">
                     <a href="javascript:void(0);"{postrow.displayed.ONCLICK}>{postrow.displayed.ONLINE_IMG_INV}{postrow.displayed.POSTER_NAME_INV}</a>
                  </div>
                  <!-- BEGIN user_logged_in -->
                  <div id="pm{postrow.displayed.U_POST_ID}" class="popupmenu clearfix" style="display:none;">
                     <div class="avatar">
                        {postrow.displayed.POSTER_AVATAR}
                     </div>
                     <ul>
                        <li class="popupmenu-item">{postrow.displayed.PROFILE_IMG}&nbsp;</li>
                        <!-- BEGIN switch_user_pm -->
                        <li class="popupmenu-item">{postrow.displayed.PM_IMG}&nbsp;</li>
                        <!-- END switch_user_pm -->
                        <!-- BEGIN switch_user_email -->
                        <li class="popupmenu-item">{postrow.displayed.EMAIL_IMG}&nbsp;</li>
                        <!-- END switch_user_email -->
                        <!-- BEGIN switch_contact_row -->
                        <li class="popupmenu-item">
                           <!-- BEGIN contact_field -->
                           {postrow.displayed.user_logged_in.switch_contact_row.contact_field.CONTENT}&nbsp;
                           <!-- END contact_field -->&nbsp;
                        </li>
                        <!-- END switch_contact_row -->
                        <!-- BEGIN switch_user_posts -->
                        <li class="popupmenu-item last">{postrow.displayed.USER_POSTS_IMG}&nbsp;</li>
                        <!-- END switch_user_posts -->
                     </ul>
                  </div>
                  <!-- END user_logged_in -->

Pour cette partie
Code:
<div class="popmenubutton-new-out popmenubutton">
                     <a href="javascript:void(0);"{postrow.displayed.ONCLICK}>{postrow.displayed.ONLINE_IMG_INV}{postrow.displayed.POSTER_NAME_INV}</a>
                  </div>
Cela dépend de si vous comptez supprimer totalement le menu déroulant ou garder le système avec quelques liens dedans. Si vous voulez le supprimer totalement, vous pouvez supprimer la balise div, le Javascript, et garder uniquement les deux variables {postrow.displayed.ONLINE_IMG_INV}{postrow.displayed.POSTER_NAME_INV}

La partie suivante
<!-- BEGIN user_logged_in -->
...
<!-- END user_logged_in -->

vous la coupez pour la coller un peu plus loin. Si on veut se baser sur la maquette présentée, ce serait après les balises
<!-- END switch_likes_active -->
</div>


donc juste avant
</div>
<div class="post-footer clearfix"{postrow.displayed.THANK_BGCOLOR}>


Remplacez maintenant cette ligne
Code:
<div id="pm{postrow.displayed.U_POST_ID}" class="popupmenu clearfix" style="display:none;">
par une div class de votre choix, par exemple
Code:
<div class="machin">

Vous pouvez aussi supprimer
Code:
<div class="avatar">
                        {postrow.displayed.POSTER_AVATAR}
                     </div>
:enreg: et n'oubliez pas de publier Invision | Boutons de contact Check_10 votre template à la suite.

À cette étape, vous avez
  • déplacé toute la liste à l'endroit souhaité.
  • remplacé la balise div de la liste par une que vous pouvez personnaliser librement.


Tout en sachant que comme l'indiquent les variables, "profil", "mp" et "email" peuvent être gérés séparément, donc si vous avez gardé le menu déroulant, vous pouvez toujours replacer une partie du ul dedans (en n'oubliant pas de remettre le <div id="pm{postrow.displayed.U_POST_ID}" class="popupmenu clearfix" style="display:none;">).

Il nous reste quelques ajustements CSS :
Code:
li.popupmenu-item {display:inline-block;}
pour afficher toute la liste sur une ligne.

Code:
.machin img {display:none;}
pour ne pas afficher les images de la liste.

Code:
a[title*="site"]::after{content:"Site";}
a[title*="facebook"]::after{content:"Facebook";}
a[title*="twitter"]::after{content:"Twitter";}
pour cibler les liens concernés et ajouter via CSS le texte du lien. Ici j'ai vu sur votre maquette que vous avez deux liens de type "site web" ("présentation", "liens"), donc il faudra les cibler autrement, par exemple avec un nth.


Invision | Boutons de contact 1213Donnez un titre explicite Invision | Boutons de contact VTzsyWB à votre sujet pour améliorer son référencement

Remerciez Invision | Boutons de contact 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP Invision | Boutons de contact FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2777
Inscrit(e) le : 06/01/2011

https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Invision | Boutons de contact

Message par Kendall Mer 26 Jan 2022 - 10:26

Bonjour !

Merci beaucoup pour le temps et les réponses apportées Smile
J'avais déjà bien modifié mon template mais je ne l'avais pas publié - vu que je n'avais pas fini - du coup j'ai adapté vos recommandations à mes modifications.

Alors dans le principe, ça fonctionne.

Maintenant la question va se poser de la personnalisation.
Comme vous pouvez le voir sur le forum (avec le template validé cette fois), les liens sont très longs. Ce qui ne m'arrange pas trop.

Comment remplacer "Message privé" par "MP", "voir le profil de l'utilisateur" par "Profil" ?
(concernant les liens "présentation" et "liens" j'ai simplement remplace "facebook" et "twitter" qui ne me sons d'aucune utilité pour mettre ces liens à la place et ça semble fonctionner)

Ah et j'ai un lien qui ne s'affiche pas je ne sais pas du coup lequel c'est...

J'ai aussi un petit souci de CSS... Sur les liens "MP" et "Profil" j'ai un padding left qui est plus important et qui du coup n'est pas modifiable en même temps que tous les autres... Va peut-être falloir que je triche avec une deuxième class css 🤔
J'ai essayer de bidouiller ça en attendant votre retour sur la personnalisation des champs.

En tout cas merci beaucoup. Je note qu'on ne doit pas retirer la liste mais qu'on doit la forcer via le css Smile
Bonne journée !
Kendall

Kendall
***

Messages : 178
Inscrit(e) le : 30/04/2011

Kendall a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Invision | Boutons de contact

Message par Oka.mi Mer 26 Jan 2022 - 21:47

Bonsoir,

Kendall a écrit:Comment remplacer "Message privé" par "MP", "voir le profil de l'utilisateur" par "Profil" ?
Pour cela on peut passer par du JavaScript. D'ailleurs les "padding left" que vous mentionnez n'en sont pas, ce sont des espaces ajoutées à la base pour séparer les icônes du texte, images dont on a retiré l'affichage, donc ne subsistent que l'espace et le texte. En remplaçant le texte par JavaScript, on règle en même temps le problème de l'espace.
Code:
$(function(){
    $('.boutons_contact').each(function(){
      $(this).find('.popupmenu-item a[title*="profil"]').text('Profil');
      $(this).find('.popupmenu-item a[title*="privé"]').text('MP');
      $(this).find('.popupmenu-item a[href*="email"]').text('Email');
    });
});
Avec ce script, on dit que pour chaque div boutons_contact, on trouve le a du popupmenu-item qui a pour title ... et on remplace le texte par ...

Kendall a écrit:Ah et j'ai un lien qui ne s'affiche pas je ne sais pas du coup lequel c'est...
Là je ne saurais pas trop vous aider, notamment parce que je ne vois pas tous les liens en mode invité.

Petite remarque en passant concernant votre forum : votre page d'accueil possède une largeur fixe de 1090px, alors que le corps de votre forum est paramétré à 57% de largeur. Cela s'affiche bien sur les grands écrans, mais dès que l'on visite le forum avec un écran plus modeste, cela crée un décalage. Je vous recommande donc de passer la largeur de votre forum à la valeur fixe de 1090px pour être sûr que cela s'affiche pareil partout.


Invision | Boutons de contact 1213Donnez un titre explicite Invision | Boutons de contact VTzsyWB à votre sujet pour améliorer son référencement

Remerciez Invision | Boutons de contact 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP Invision | Boutons de contact FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2777
Inscrit(e) le : 06/01/2011

https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Invision | Boutons de contact

Message par Kendall Jeu 27 Jan 2022 - 11:23

Hello !

Alors merci ! ça fonctionne pour remplacer les liens ** et ça solutionne effectivement l'espace sur certains.

Concernant le liens qui ne s'affiche pas ! https://prnt.sc/26k2xqa

C'est le lien "présentation" qui ne s'affiche pas. J'ai utilisé celui de facebook pour le transformer (j'ai changé le nom du champs dans le PA) https://prnt.sc/26k303b

Je me suis dis que c'était peut-être l'accent mais en remettant facebook ça ne fonctionne pas non plus 🤔

Merci pour l'info pour la largeur du forum, c'est modifié Wink

Bonne journée !
Kendall

Kendall
***

Messages : 178
Inscrit(e) le : 30/04/2011

Kendall a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Invision | Boutons de contact

Message par Oka.mi Jeu 27 Jan 2022 - 17:16

Bonsoir,

Sur mon forum test, en mettant
Code:
a[title*="facebook"]::after{content:"Présentations";}
à la place de a[title*="facebook"]::after{content:"Facebook";}, cela fonctionne.
Aviez-vous retiré cette ligne durant vos tests ? Car là, je la vois dans votre css, donc vous devriez avoir "Facebook" affiché. (Je n'ai le problème du lien qui ne s'affiche pas que quand cette ligne de CSS est absente, ce qui est logique puisqu'on a display:none sur l'icône Facebook)


Invision | Boutons de contact 1213Donnez un titre explicite Invision | Boutons de contact VTzsyWB à votre sujet pour améliorer son référencement

Remerciez Invision | Boutons de contact 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP Invision | Boutons de contact FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2777
Inscrit(e) le : 06/01/2011

https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Invision | Boutons de contact

Message par Kendall Ven 28 Jan 2022 - 12:50

Bonjour Oka.mi !

Alors non ça ne fonctionne toujours pas.
Je n'avais pas retiré la ligne de CSS non, je n'ai que modifié les termes.
J'ai remplacé avec le code que tu m'as donné là et je n'ai pas de changement, ça ne fonctionne pas... Le carré noir est toujours là mais le lien ne s'affiche pas.

Merci à toi,
Bonne journée
Kendall

Kendall
***

Messages : 178
Inscrit(e) le : 30/04/2011

Kendall a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Invision | Boutons de contact

Message par Oka.mi Ven 28 Jan 2022 - 13:50

Bonjour,

D'accord, dans ce cas, si cela ne vous dérange pas, je vais me créer un compte test ce soir sur votre forum, pour pouvoir regarder ça plus précisément.


Invision | Boutons de contact 1213Donnez un titre explicite Invision | Boutons de contact VTzsyWB à votre sujet pour améliorer son référencement

Remerciez Invision | Boutons de contact 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP Invision | Boutons de contact FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2777
Inscrit(e) le : 06/01/2011

https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Invision | Boutons de contact

Message par Kendall Ven 28 Jan 2022 - 13:54

Aucun souci pour moi Smile Merci beaucoup en tout cas.
Kendall

Kendall
***

Messages : 178
Inscrit(e) le : 30/04/2011

Kendall a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Invision | Boutons de contact

Message par Oka.mi Ven 28 Jan 2022 - 17:39

Re,

Alors, si ça ne fonctionne pas c'est parce que le a title a changé en fonction du a href, du coup comme vous avez mis un lien différent de Facebook, cibler avec a[title*="facebook"] ne fonctionne plus... je ne comprends pas pourquoi ça change le title en fonction du href d'ailleurs, la logique m'échappe un peu. Enfin, pas grave. Donc, au lieu de la ligne
Code:
a[title*="facebook"]::after {
   content:"Présentations"
}

Vous pouvez mettre
Code:
.boutons_contact li:nth-child(3) a:nth-child(2)::after{content:"Présentations";}
Avec ça on cible le 2e <a> du 3e <li>, à adapter selon comment vous organisez vos liens.

Invision | Boutons de contact Image23

Soit dit en passant, j'ai vu que vous avez mis le 1090px de largeur, mais ce passage dans le css écrase le paramétrage.
Code:
#ipbwrapper {
   background-color:#fff;
   width:57%
}


Invision | Boutons de contact 1213Donnez un titre explicite Invision | Boutons de contact VTzsyWB à votre sujet pour améliorer son référencement

Remerciez Invision | Boutons de contact 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP Invision | Boutons de contact FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2777
Inscrit(e) le : 06/01/2011

https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Invision | Boutons de contact

Message par Kendall Mar 1 Fév 2022 - 22:19

Bonsoir

Je suis absolument NAVRÉE j'ai eu un week-end de fou et un début de semaine aussi compliqué.

Je vais regarder la solution que vous me proposez et revenir vers vous. Mille fois désolée.

Kendall

Kendall
***

Messages : 178
Inscrit(e) le : 30/04/2011

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

Résolu Re: Invision | Boutons de contact

Message par Kendall Mar 1 Fév 2022 - 22:23

Okay j'ai donc utilisé ce que vous m'avez donné !
Ca fonctionne.
Merci beaucoup beaucoup pour votre aide, je pense pouvoir dire que mon souci est terminé.

Merci encore pour votre temps ♥
Kendall

Kendall
***

Messages : 178
Inscrit(e) le : 30/04/2011

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

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

- Sujets similaires

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