AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Navigation remplacer "Déconnexion [ Pseudo ]" par un autre texte (CSS)

    Partagez
    avatar
    Nihil Scar Winspeare
    Messages : 4810

    le Ven 20 Mai 2016 - 11:42



    Navigation - Remplacer "Déconnexion [ Pseudo ]" par un autre texte


    Hello,

    Si dans votre barre de navigation vous affichez les textes, la présence du pseudo peut parfois vous gêner / prendre trop de place ! Voici comment le remplacer rapidement en CSS pour mettre le texte de votre choix.

    Information : Testé sur phpbb2

    Exemple



    Avant "Déconnexion [ Pseudo ]"


    Après "Déconnexion [ Pseudo ]" devient "Quitter"

    Code CSS


    Le code est à placer ici :
    PA > Affichage > Gestion des images & couleurs > Couleurs > Feuille de style CSS

    Code:
    /* Remplacer le lien déconnexion */
    #logout {
      font-size: 0!important; /* on cache le lien */
      letter-spacing: normal!important; /* on enlève un eventuel letter spacing présent */
    }

    /* Lien déconnexion faux texte */
    #logout::after {
      content: "Quitter"; /* nouveau texte*/
      font-size: 12px; /* taille du texte */
      /* style supplémentaire à mettre ici */
    }
    /* Fin remplacer le lien déconnexion */

    La partie à modifier est celle-ci :
    Code:
    #logout::after {
      content: "Quitter"; /* nouveau texte*/
      font-size: 12px; /* taille du texte */
      /* style supplémentaire à mettre ici */
    }
    Le !important est seulement là pour éviter qu'une personnalisation de la navigation ne passe pas "au dessus" de notre code CSS Wink

    Vous pouvez remplacer "Quitter" par un autre texte
    Le 12px doit être remplacé par la même taille de police que le reste de votre barre de navigation :)

    BONUS:

    Effet au survol


    La plupart des effets au survol marcheront encore, néanmoins si vous voulez en faire un spécial, voici ce qu'il faut ajouter :
    Code:
    /* Lien déconnexion faux texte - HOVER */
    #logout::hover:after {
      color: red;
    }


    En cas de soucis, merci d'aller dans "Problème avec mon code" ou "Personnalisation"


    N'oubliez pas de mettre sur votre forum un remerciement pour Never Utopia :hug:


    Dernière édition par Nihil Scar Winspeare le Sam 7 Jan 2017 - 19:36, édité 4 fois
    avatar
    Cheshire Cat
    FémininAge : 20Messages : 873

    le Dim 17 Juil 2016 - 18:32

    Wesh, j'ai testé et c'est bien cool tout ça, j'approuve totalement :3
    Ca fonctionne sur Opera, Mozilla, IE et Chrome comme j'ai tout regardé. Voilà :face:



    avatar
    Onyx
    FémininAge : 23Messages : 3050

    le Dim 24 Juil 2016 - 0:09

    Bouh!

    Alors ça fonctionne aussi chez moi, sur toutes les versions sauf safari. Pareil que ton générateur de code pour CB en fait. C'est comme si le "Déconnexion [Admin]" était encore là en invisible et on peut pas cliquer sur le quitter : http://img15.hostingpics.net/pics/459614Sanstitre.png Je sais pas pourquoi Safari ne m'aime pas T_T Je l'ai même désinstallé et réinstallé pour voir, mais ça n'a rien fait.



    avatar
    Nihil Scar Winspeare
    Messages : 4810

    le Lun 5 Déc 2016 - 21:08

    Coucou Onyx !

    Est ce que tu pourrais me dire quelle version de Safari tu utilises ? Sur mon Safari je n'ai aucun souci :hum:
    C'est possible que ça soit une très vieille version (que plus personne n'utilise) et donc que le problème soit "acceptable" :hudada:
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Lun 5 Déc 2016 - 22:41

    Nan mais Safari c'est le nouvel IE depuis quelques temps t'façon x) (enfin je trouve U_U).

    En tout cas très bonne idée d'utiliser ::after^^ En voyant le titre j'ai pensé que tu avais utilisé du JS pour remplacer les mots directement, mais c'est plus léger comme ça.
    D'ailleurs y'a pas deux ":" pour after et before ? :hum: Je crois que j'en mets deux à chaque fois moi.



    avatar
    Nihil Scar Winspeare
    Messages : 4810

    le Ven 30 Déc 2016 - 15:17

    En fait, en CSS2 il y a en a un seul et en CSS3 il y en a 2 pour éviter de confondre avec les pseudo-classes xDDD
    Je garde l'habitude d'en mettre un seul car ça marche encore Rolling Eyes, mais il faut que je me force un peu à mettre les 2, du coup j'ai édité ça :)

    J'en profite pour valider et déplacer ^^
    avatar
    Nymeria.
    FémininAge : 22Messages : 297

    le Ven 9 Juin 2017 - 20:28

    Ah merci beaucoup, c'est exactement ce que je recherchais :') !
    avatar
    Kelalin
    FémininAge : 25Messages : 1710

    le Sam 10 Juin 2017 - 0:07

    Merci pour le partage !
    avatar
    Miikan
    FémininAge : 23Messages : 18

    le Lun 4 Sep 2017 - 1:07

    Je suis curieuse de voir ça
    merci pour le tuto :)
    Contenu sponsorisé


      La date/heure actuelle est Sam 25 Nov 2017 - 0:49