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 : -28%
-28% Machine à café avec broyeur ...
Voir le deal
229.99 €

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

    Ombinou
    Ombinou
    FémininAge : 29Messages : 157

    Mer 2 Mai - 9: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.



    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 2 Mai - 22: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?



    • Revenir en haut
    Ombinou
    Ombinou
    FémininAge : 29Messages : 157

    Jeu 3 Mai - 18: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 : https://2img.net/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.


    • Revenir en haut
    Ombinou
    Ombinou
    FémininAge : 29Messages : 157

    Dim 6 Mai - 15:55

    Up?
    • Revenir en haut
    Ombinou
    Ombinou
    FémininAge : 29Messages : 157

    Mar 8 Mai - 17:00

    Up?
    • Revenir en haut
    Ombinou
    Ombinou
    FémininAge : 29Messages : 157

    Jeu 10 Mai - 19:35

    Up?
    • Revenir en haut
    Ombinou
    Ombinou
    FémininAge : 29Messages : 157

    Lun 14 Mai - 15:23

    Up?
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 16 Mai - 18: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?



    • Revenir en haut
    Ombinou
    Ombinou
    FémininAge : 29Messages : 157

    Mer 16 Mai - 19: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é?
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 17 Mai - 17: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/



    • Revenir en haut
    Ombinou
    Ombinou
    FémininAge : 29Messages : 157

    Jeu 17 Mai - 18: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.
    • Revenir en haut
    Ombinou
    Ombinou
    FémininAge : 29Messages : 157

    Jeu 17 Mai - 18:56

    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 18 Mai - 17:25

    Salut!

    Alors voilà les codes \o/




    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 18 Mai - 17:28

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



    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 18 Mai - 17:30

    Voilà le overhall header un peu manipulé :


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



    • Revenir en haut
    Ombinou
    Ombinou
    FémininAge : 29Messages : 157

    Ven 18 Mai - 18: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/
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 19 Mai - 0: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?



    • Revenir en haut
    Ombinou
    Ombinou
    FémininAge : 29Messages : 157

    Sam 19 Mai - 18: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?
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 22 Mai - 13: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é :



    • Revenir en haut
    Ombinou
    Ombinou
    FémininAge : 29Messages : 157

    Mar 22 Mai - 15: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?
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 22 Mai - 15: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.



    • Revenir en haut
    Ombinou
    Ombinou
    FémininAge : 29Messages : 157

    Mar 22 Mai - 16:49

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

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Dim 24 Nov - 14:16