AccueilDernières imagesRechercherS'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.

Le Deal du moment : -34%
-34% LG OLED55B3 – TV OLED 4K 55″ 2023 ...
Voir le deal
919 €
-20%
Le deal à ne pas rater :
Pack Gigabyte Ecran PC Gamer 27″ LED M27Q (rev2.0) + Radeon RX 6950 ...
749 € 939 €
Voir le deal

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

    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    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 ]"
    Navigation remplacer "Déconnexion [ Pseudo ]" par un autre texte (CSS) MM4jEse

    Après "Déconnexion [ Pseudo ]" devient "Quitter"
    Navigation remplacer "Déconnexion [ Pseudo ]" par un autre texte (CSS) 44ph4hZ

    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:


    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

    Cheshire Cat
    Cheshire Cat
    FémininAge : 26Messages : 975

    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:
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    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 : https://2img.net/r/hpimg15/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.



    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    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:

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    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.



    sign
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    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 ^^

    ROGERS.
    ROGERS.
    FémininAge : 29Messages : 335

    Ven 9 Juin 2017 - 20:28

    Ah merci beaucoup, c'est exactement ce que je recherchais :') !
    Anonymous
    Invité

    Sam 10 Juin 2017 - 0:07

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

    Lun 4 Sep 2017 - 1:07

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


      La date/heure actuelle est Jeu 28 Mar 2024 - 22:07