Remplacement image par texte + modification texte

[Lana Cleevest]

C'est encore moi...

Cette fois c'est parce que j'ai voulu remplacer l'image qui renvoie au profil, au site web, etc. qui s'affichent sur les sujets par du texte. Ca fonctionne, sauf que je voudrais pouvoir remplacer le texte, par exemple que "Voir le profil de l'utilisateur" ne devienne plus que "profil"... J'ai essayé avec un script mais je crois pas avoir trop saisi le language.

viewtopic_body:

[mSyx]

Hello o/
C'est faisable en CSS:

Code:

.imgprofil a[href^="/u"]::before {
  content: "Profil"; } /* remplace 'Voir le profil d'utilisateur' */

.imgprofil a[href^="/privmsg?"]::before {
  content: "Message privé"; } /* remplace 'Envoyer un message privé' */

 
/* CSS nécessaire pour changer les textes */
.imgprofil a {font-size: 0;}
.imgprofil a::before {font-size: 10px;}

Pour le coup, j'ai remplacé le lien du profil et du message privé; libre à toi de modifier ces valeurs et de l'ajouter pour les autres. (si tu as un doute sur comment faire, n'hésite pas)

[Lana Cleevest]

Merci ! Pour la modification d'apparence du texte ça fonctionne, par contre pour le remplacement j'ai l'impression que non...

Code:

/* CHAMP MESSAGE PRIVE PROFIL ETC */

.imgprofil a[href^="/u"]::before {
  content: "Profil"; } /* remplace 'Voir le profil d'utilisateur' */
 
.imgprofil a[href^="/privmsg?"]::before {
  content: "Message privé"; } /* remplace 'Envoyer un message privé' */

.imgprofil a {
    background-color:#!important;
    border-top: 1px dashed #;
    margin-top: 0px;
    padding: 2px;
    border: 1px solid #8f532d;
    font-family: Lato, sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 9px;
    text-transform: uppercase;}

.imgprofil a::before {font-size: 10px;}

[mSyx]

Il y a une raison pour laquelle j'ai mis un font-size: 0; à une balise :b

Code:

/* CSS nécessaire pour changer les textes */
.imgprofil a {font-size: 0;}
.imgprofil a::before {font-size: 10px;}

.imgprofil a {font-size: 0;} « on cache le texte de base avec une valeur nulle pour la taille de texte
.imgprofil a::before {font-size: 10px;} « on remet la taille de police par défaut seulement sur le ::before (qui contient le nouveau texte)

[Lana Cleevest]

Haha, autant pour moi. Ca fonctionne parfaitement maintenant, merci beaucoup

[Lana Cleevest]

Désolée pour le DP... En fait, sais-tu s'il est possible d'utiliser un icon de FontAwesome dans le CSS ? Que le texte "profil" par exemple soit un

Code:

<i class="far fa-user"></i>

?

[mSyx]

(pour les futures recherches: #FontAwesome)

Dans le CSS, ça se ferait en ::before ou ::after du coup. Il faut récupérer l'unicode de l'icône voulue.
Exemple avec l'icône battery-full: https://fontawesome.com/icons/battery-full?style=solid



Tu peux voir l'unicode à droite de l'icône, qui (souvent, voire tout le temps je crois) commence par f. Ici, l'unicode est f240. Du coup, en CSS, ça donnerait ça:

Code:

.sélecteur::before {
content: "\f240";
font-family: "Font Awesome 5 Free";
font-weight: 900; }

en n'oubliant pas le \ avant l'unicode.

[Lana Cleevest]

C'est merveilleux ! T'es un génie

[Lana Cleevest]

J'abuse je m'extasie trop vite. Je n'ai aucune idée de comment faire pour les "site web de l'utilisateur" et FB par exemple, étant donné que les liens seront externes...

[mSyx]

Re o/
Alors, j'ai pensé au CSS simple pour ça, mais j'imagine qu'ils ne mettraient pas forcément tous un lien facebook (ou un lien tout court, juste un pseudo par ex.). Pour quand même avoir un texte:

Dans le template (viewtopic_body), trouver:

Code:

                                 <center>
                                    <div class="imgprofil">{postrow.displayed.PROFILE} {postrow.displayed.PM} <br />
                                    <!-- BEGIN contact_field --> <div class="contact">{postrow.displayed.contact_field.CONTENT}</div><!-- END contact_field --><br />
                                    </div></center>

Remplacer par:

Code:

<center>
                                    <div class="imgprofil">{postrow.displayed.PROFILE} {postrow.displayed.PM} <br />
                                    <div class="contactfields"><!-- BEGIN contact_field --> <div class="contact">{postrow.displayed.contact_field.CONTENT}
                                      <span style="display: none;">{postrow.displayed.contact_field.LABEL}</span>
                                      </div>
                                      <!-- END contact_field --></div><br />
                                    </div>
    </center>
                                        
   <script type="text/javascript">
                                          $('.contactfields .contact').each(function(i) {
    var text = $(this).children('span').text();
    $(this).attr('data-label', text);
  });</script>

La partie chiante (mais pas trop longue): il faut mettre une couleur pour chaque champs de contact dans le PA.



La couleur importe peu pour le script (mais changera sûrement dans l'édition de profil), mais c'est nécessaire pour faire apparaître les labels de chaque champs de contact. (je n'avais d'ailleurs jamais eu connaissance de l'existence de "{postrow.displayed.contact_field.LABEL}" jusqu'à ce soir o_o)

Une fois que c'est fait, tu pourras sélectionner chaque champs indépendamment et mettre le nouveau texte en before.

Ex. utile: Si tu veux viser le champs Twitter, ça donnera:

Code:

.contact[data-label*="Twitter"] a::before {
  content: "Twitter";
}

L'astérisque après le data-label ([data-label*="Twitter"]) est important :b

[Lana Cleevest]

Ca fonctionne, est-ce que tu sais ce que c'est l'image sous chaque champ, et comment je peux m'en débarrasser ?

[mSyx]

Peut-être avec ça:

Code:

.contact a img {display: none;}

[Lana Cleevest]

Ouais c'est bien ça

J'ai essayé avec le

Code:

nowrap="nowrap"

de faire en sorte qu'ils restent tous sur la même ligne, et d'ajouter un padding dans le CSS pour séparer les icons du cadre en haut mais non...

[mSyx]

Time to dodo pour l'instant; je verrai ça demain. Du coup, tu pourrais retirer la maintenance ? Si ça t'embête de le laisser visible toute la nuit, un compte test (sans aucun droit, juste voir les sujets) au pire :b

[Lana Cleevest]

Bien sûr, je t'envoie des identifiants par MP

[mSyx]

Re o/
Ça devrait être mieux avec ce CSS:

Code:

.imgprofil {
  margin-top: 10px;
}

.contactfields {
  margin-left: 5px;
  display: inline-block;
}

.contactfields .contact {
  display: inline-block;
}

[Lana Cleevest]

PARFAIT

[mSyx]

Niquel
Je me suis déconnecté du compte (si jamais). Tout est bon ?