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.


    Cacher le header dans les pages d'affichage des forums/sujets

    Partagez
    Valkyija
    Valkyija
    FémininAge : 88Messages : 61

    le Dim 10 Mar 2019 - 2:47

    Cacher le header dans les pages d'affichage des forums/sujets



    D'abord, comme d'hab, je débute en vous lançant une tonne de fleures, des licornes et des cookies. Vous êtes beaux et efficace et merci d'avance ++ coeur coeur pour votre aide !

    Voilà, dans un soucis d'épurer et de maximiser l'expérience utilisateur de mon forum de RP, je me demandais si vous auriez pas une idée comment pin-pointer des éléments dans le overall_header, qui s'affiche sur toute les pages internes du forum. J'explique : J'aimerais qu'une fois dans les pages des forums et des sujets, le design du header disparaisse, pour laisser place à une version graphique plus mince/épurée/que du texte ( tout en gardant la navigation ).

    Je pensais à trouver une méthode qui me permettait de display:none certaine partie du header et dans changer attribut de classes et / ou dans les pages internes, faire disparaitre totalement le header puis ajouter manuellement une version épurée via les templates d'affichage des forum/sujet.

    Mon majeur problème, c'est de trouver le moyen d'identifier les pages internes et pouvoir les viser pour faire la modification dans le overall_header seulement sur celle-là.

    Ou encore, si on vire le problème dans l'autre sens : Comment faire pour que le header ( une div ajouté dans le overhall_header) affiche que sur l'index ?



    Schéma(s) et Eléments


    Schémas : Voici un example avec N-U





    Version de votre forum : PHPBB3


    Autres précisions ?


    Je vous laisse ici le forum sur lequel j'aimerais tester ce principe. Je suis entrain de le coder, les page internes ne sont pas du tout entamée ( donc, c'est laid ! XD ) mais je prend d'avance pour vois si vous avez pas une idée géniale et soudaine à tester avec moi !



    :yay:


    Dernière édition par Valkyija le Dim 10 Mar 2019 - 14:16, édité 1 fois
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5068

    le Dim 10 Mar 2019 - 12:29

    Coucou :hudada:

    (me revoilà décidément)

    @Valkyija a écrit:Ou encore, si on vire le problème dans l'autre sens : Comment faire pour que le header ( une div ajouté dans le overhall_header) affiche que sur l'index ?

    Il y a plein de façon de faire ça et tu as totalement raison de retourner le problème dans l'autre sens !

    Comme j'ai vu dans la partie "Problème avec mon code" que tu n'hésites pas à chercher un peu et te dépatouiller, je te donne pas la solution directement mais d'abord une solution pour chercher puis en dessous en spoiler une solution possible :)

    1/ Une idée pourrait être par exemple de mettre dans ton template overall_header ceci :

    Code:
    <div class="header-small">Bonjour je suis un petit header sur toutes les pages</div>
    <div class="header-homepage">Bonjour je suis un GRAND header seulement sur l'accueil</div>

    Si tu as valides, tu auras donc maintenant ces 2 phrases qui s'affichent sur toutes les pages, ce qui n'est pas ce qu'on veut. Mais vérifie qu'elles s'affichent bien avant de passer à la suite des explications.

    2/ Dans le CSS de ton forum, il faut cacher le grand header.

    3/ Et ensuite, trouver un endroit, pour seulement sur l'index, afficher le grand header, et masquer le petit.
    BINGO, il y a un template seulement pour la homepage dans les templates forumactif. Tu pourrais mettre dedans du CSS pour réafficher ton menu :)

    Je te laisse chercher un peu comment faire, et je mets sous spoiler en dessous une possibilité:

    Exemple de code quand tu en as marre de chercher:

    2/ Du coup, dans le CSS de ton forum, il faut cacher par défaut le grand header.

    Code:
    /* Le forum a 2 header, par defaut on cache celui de la homepage */
    .header-homepage {
        display: none;
    }
    /* Le CSS du header de la homepage est change dans le template index_body */


    3/ Et ensuite, trouver un endroit, pour seulement sur l'index, afficher le grand header, et masquer le petit. BINGO, il y a un template seulement pour la homepage dans les templates forumactif. Tu pourrais mettre dedans du CSS pour réafficher ton menu

    Dans le template index_body, tout en haut, on va mettre ça :
    Code:
    <style>
        /* Le forum a 2 header, sur la homepage on affiche seulement le grand */
        .header-homepage { display: block; }
        .header-small { display: none; }
    </style>

    Sur mon forum test ça fonctionne plutôt bien :hug:

    Hésite pas si tu as des questions !



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    Valkyija
    Valkyija
    FémininAge : 88Messages : 61

    le Dim 10 Mar 2019 - 12:50

    Attend, attend, est-ce que je peux élever une statue en ton honneur !?
    Sérieux, ta disponibilité et ta rapidité me flabbergast ( rien de moins ! ) :han:

    Je me complique tellement la vie et pourtant, Keep it simple (stupid) devrait être mon motto ! :batte:

    Je test le tout et je te reviens rapidement avec le résultat ( mais entre toi et moi, si ça fonctionne nickel sur ton forum test, je vois pas pourquoi ça le ferais pas chez moi )

    Amour sur toi + + coeur coeur !



    Valkyija
    Valkyija
    FémininAge : 88Messages : 61

    le Dim 10 Mar 2019 - 14:16

    Double post pour te dire, comme tu en doutes, que ça fonctionne parfaitement !



    Ça va tellement être pratique ! J'ai ( ou du moins, ma team de codeuses/grapheuses sur FA ) tendance à faire des header full width, full parallax ou avec des effets qui en jette ! C'est que dernièrement que je me suis rendu compte que c'était ridicule de le faire suivre à l'intérieur du forum. C'est pas bon pour la lisibilité et la rapidité de la page.

    Et c'est tout simple et tout logique comme code ! :panic:

    J'vais utilisé souvent cette astuces !
    Merci encore beaucoup pour ton aide ! ( Encore une fois ultra rapide et judicieuse ! )

    Je repasserais pour une prochaine demande tout aussi folle ! :chomp:

    Coeur coeur !



    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5068

    le Mar 12 Mar 2019 - 21:05

    Super, c'est vrai que c'est plus pratique d'avoir moins à scroller :hudada:

    J'archive le sujet :)



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    Contenu sponsorisé


      La date/heure actuelle est Dim 24 Mar 2019 - 15:59