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.


    (Onyx) Menu complet sur le côté avec PA

    Partagez
    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Mer 2 Mai 2018 - 11:53

    Menu complet sur le côté avec PA



    Bonjour ou bonsoir tout le monde! J'aimerai demander de l'aide. J'ai essayé de faire un codage, mais il a complètement foiré. Je préfère donc me tourner vers des personnes plus compétentes pour la réalisation de mon projet. Il s'agit d'un menu complet sur l'un des cotés du forum, ou on pourrait retrouver les éléments de base (messagerie, connexion, membre, etc), associé à d'autres éléments de mon choix. Je vous en remercie beaucoup si vous pouvez m'aider.


    Schéma(s) et Eléments


    Schémas :
    Schéma 1:
    Schéma 2:
    Schéma 3:
    Schéma 4:
    Tailles des éléments : La barre de navigation/menu, à droite, pourrait faire la longueur du forum, de la bannière à la QEEL.
    Les images de prédéfinis, de dimension 100x100 px, quand on passe la souris sur l'une ou l'autre image, on verrait les informations apparaître.

    Effets voulus :
    En haut, l'avatar du membre connecté pourrait apparaître. Et quand on passe la souris sur l'avatar on verrait le pseudo apparaître. C'est L'effet hover si je me trompe pas? Ou Transparence?
    Quand on passe la souris sur l'image de la PA, un petit texte pourrait apparaître. Les trois ronds sur le coté gauche pourraient présenter le staff, et quand on passe la souris dessus on verrait le pseudo et le rang.

    Version de votre forum : PHPBB2


    Ressources


    /


    Autres précisions ?


    Pour le potin et les informations, les colonnes pourraient avoir un scroll, pour permettre d'avoir plus de donnée.
    Un système de bouton sous le contexte, qui en cliquant dessus conduit à la page du forum qui contient le contexte en entier.
    Pour les partenariats, les icônes seraient dans un cadre, et on pourrait les faire défiler grâce au bouton flèche, se trouvant à droite et à gauche.
    La petite bulle à droite pourrait contenir le logo de discord, qui une fois qu'on clique dessus amène au serveur discord du forum.
    Pour les couleurs :
    -PA : #a5b2be pour le cadre principal, #c7cfd6 pour le cadre texte du contexte, et le cadre qui contiendra les partenariat, #808080 pour les cadres titres du partenariat et du contexte, #282929 pour la cartouche contenant le staff, et la bulle contenant le discord.
    -Menu : #282929 pour le fond du menu. #a5b2be pour le cadre des prédéfinis et les grands titres du menu. Les liens rapides pourraient avoir une police légèrement plus petite que les grands titres du menu.



    avatar
    Onyx
    FémininAge : 24Messages : 3097

    le Jeu 3 Mai 2018 - 0:12

    Salut!

    C'est avec quelle version de forum?
    Tu nous donne le lien de ton forum?
    C'est quoi la taille des images pour les partenariats?
    Tu peux fournir les images de séparations dans la navigation à droite?



    Ma présence varie beaucoup ><

    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Jeu 3 Mai 2018 - 20:25

    Bonjour Onyx. Et merci d'avoir répondu ^^

    Alors la version de mon forum c'est PHPBB2 et voici le lien : http://hetalialastjudgment.forumactif.org/forum
    Pour les partenariats, j'hésite entre du 50px-50px, et le modèle 88px-31px. Tout dépendra du rendu? Si cela fait trop chargé je pense que le modèle 50px-50px serait le mieux.

    Pour les images de séparations dans la navigation à droite, j'avais bricolé ceci : http://image.noelshack.com/fichiers/2018/18/4/1525371846-separation.png

    Mais il sera possible de les changer plus tard? Je ferai une image plus propre.


    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Dim 6 Mai 2018 - 17:55

    Up?
    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Mar 8 Mai 2018 - 19:00

    Up?
    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Jeu 10 Mai 2018 - 21:35

    Up?
    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Lun 14 Mai 2018 - 17:23

    Up?
    avatar
    Onyx
    FémininAge : 24Messages : 3097

    le Mer 16 Mai 2018 - 20:04

    Salut!

    LA PA est terminée ici :
    http://forum-test-onyx4.forum-canada.com/h3-pour-la-pa

    Il manque encore la navigation.
    D'ailleurs, est-ce que je peux voir ton CSS pour pouvoir valider quelques petits trucs?



    Ma présence varie beaucoup ><

    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Mer 16 Mai 2018 - 21:20

    Merci beaucoup pour le rendu de la PA le rendu est génial *^*
    J'ai adoré les chouettes pour les partenariats.

    J'ai deux questions :
    -L'image de droite elle est un peu opacifié? Ou elle est normale?
    -pour le CSS tu le veux complet? Je te l'envoie par message privé?
    avatar
    Onyx
    FémininAge : 24Messages : 3097

    le Jeu 17 Mai 2018 - 19:29

    Salut!

    Quelle image? Celle à côté du contexte? Elle est normale.
    Le CSS, c'est au complet. J'aurais aussi besoin du template overhall_header.
    Tu peux me les envoyer par MP ou ici sous hide.

    Sinon, voilà le tout : http://forum-test-onyx4.forum-canada.com/



    Ma présence varie beaucoup ><

    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Jeu 17 Mai 2018 - 20:45

    Oui celle a coté du contexte. J'avais cru qui avait un effet. Normal c'est ce qu'il faut :')

    Alors je vais tout t'envoyer par message en espérant que ça passe et qui a pas de limite.
    Je te dirai si il y a un soucis avec l'envoie.
    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Jeu 17 Mai 2018 - 20:56

    avatar
    Onyx
    FémininAge : 24Messages : 3097

    le Ven 18 Mai 2018 - 19:25

    Salut!

    Alors voilà les codes \o/




    Ma présence varie beaucoup ><

    avatar
    Onyx
    FémininAge : 24Messages : 3097

    le Ven 18 Mai 2018 - 19:28

    Voilà le CSS (J'ai enlevé la barre de navigation en haut puisqu'elle ne servait plus à rien) :



    Ma présence varie beaucoup ><

    avatar
    Onyx
    FémininAge : 24Messages : 3097

    le Ven 18 Mai 2018 - 19:30

    Voilà le overhall header un peu manipulé :


    Normalement, tout devrait être centré à gauche...



    Ma présence varie beaucoup ><

    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Ven 18 Mai 2018 - 20:51

    Alors j'ai tout installé.
    Mais je sais pas si j'ai tout bien fait pour la PA.
    Car il y a comme un scroll, et les images ne sont pas comme sur le rendu que tu m'avais montré.
    D'ailleurs comment faire en sorte que la navigation soit bien en haut de la page?

    J'ai tout mis sur ce fo' test.
    http://forumdesignthemetest.forumactif.org/
    avatar
    Onyx
    FémininAge : 24Messages : 3097

    le Sam 19 Mai 2018 - 2:00

    Pour la PA, quand tu crée la page HTML, assures-toi de cliquer sur le triple engrenage, pas l'engrenage seul.

    Sinon, pour la navigation, tu veux que cela commence par-dessus/à droite de la bannière?



    Ma présence varie beaucoup ><

    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Sam 19 Mai 2018 - 20:18

    C'est bon la PA marche, j'ai fais comme tu as dis le triple engrenage.

    Pour la navigation, j'aimerai bien qu'elle commence par-dessus/à droite de la bannière. Comme ça je ferai une bannière adapté plus tard.
    Par contre l'avatar n’apparaît pas la barre de navigation. Faut-il remplir un paramètre?
    avatar
    Onyx
    FémininAge : 24Messages : 3097

    le Mar 22 Mai 2018 - 15:53

    Salut!

    Pour l'avatar, j'avais oublié ce petit javascript à mettre en mode "sur toutes les pages" :
    Code:
    $(function(){
      $.each(_userdata, function(key, value){
        $(".js-" + key).html(value);
      });
    });

    Sinon, voilà le template overhall_header modifié :



    Ma présence varie beaucoup ><

    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Mar 22 Mai 2018 - 17:05

    Salut !
    Je viens de tout installer.
    L'avatar est bien présent et le header est bien à gauche. Le rendu est génial! *^*

    J'aurai à présent quelques question d'ordre technique pour ne pas faire de bêtise.
    Pour remplir Informations, Prédéfinis, et Potins dans la barre comment il faut faire?
    L'image de séparation comment la changer? J'ai bientôt fini la version final.
    Le header il faudrait quel dimension à peu près?
    Pour la PA il faut que je passe par la page HTML pour toute modification?
    avatar
    Onyx
    FémininAge : 24Messages : 3097

    le Mar 22 Mai 2018 - 17:47

    Pour modifier la navigation, c'est dans le template overhall_footer_end.

    Les informations, c'est cette partie, tu modifie la date et le bla bla bla de chaque ligne par ce que tu veux :
    Code:
        <div class="navig_subtitle">Informations</div>
        <div class="navig_info">
          <div>17/02/2017 : Bla bla bla bla bla</div>
          <div>17/02/2017 : Bla bla bla bla bla</div>
          <div>17/02/2017 : Bla bla bla bla bla</div>
          <div>17/02/2017 : Bla bla bla bla bla</div>
          <div>17/02/2017 : Bla bla bla bla bla</div>
          <div>17/02/2017 : Bla bla bla bla bla</div>
        </div>

    Les prédéfinis, c'est cette partie, tu modifie le # du lien de chaque ligne par le lien vers la fiche de prédéfini et le lien de l'image par l'url de l'image du prédéfini :
    Code:
        <div class="navig_subtitle">Prédéfinis</div>
        <div class="navig_predef">
          <a href="#"><img alt="Prédéfini 1" src="https://storage.canalblog.com/10/54/459677/119154606.jpg" /></a>
          <a href="#"><img alt="Prédéfini 2" src="https://storage.canalblog.com/10/54/459677/119154606.jpg" /></a>
          <a href="#"><img alt="Prédéfini 3" src="https://storage.canalblog.com/10/54/459677/119154606.jpg" /></a>
          <a href="#"><img alt="Prédéfini 4" src="https://storage.canalblog.com/10/54/459677/119154606.jpg" /></a>
        </div>

    Les potins, c'est cette partie, tu modifie la date et le bla bla bla de chaque ligne par ce que tu veux :
    Code:
        <div class="navig_subtitle">Potins</div>
        <div class="navig_info">
          <div>17/02/2017 : Bla bla bla bla bla</div>
          <div>17/02/2017 : Bla bla bla bla bla</div>
          <div>17/02/2017 : Bla bla bla bla bla</div>
          <div>17/02/2017 : Bla bla bla bla bla</div>
          <div>17/02/2017 : Bla bla bla bla bla</div>
          <div>17/02/2017 : Bla bla bla bla bla</div>
        </div>

    Les images de séparation, c'est ça dans le template, tu peux juste remplacer l'url de l'image (attention, l'image est à plusieurs endroits):
    Code:
    <img src="http://image.noelshack.com/fichiers/2018/18/4/1525371846-separation.png" alt="Séparation" class="sep" />

    Pour le header, basé sur la largeur que tu avais mis pour ton forum, ce serait environ 1166px de largeur je crois.

    Oui, pour la PA, tu passe toujours par la page html.



    Ma présence varie beaucoup ><

    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Mar 22 Mai 2018 - 18:49

    Merci Onyx pour tout ce travail. Merci beaucoup.
    Je vais pouvoir tout mettre en marche!
    ^^
    Contenu sponsorisé


      La date/heure actuelle est Sam 26 Mai 2018 - 7:59