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.

-55%
Le deal à ne pas rater :
Friteuse sans huile – PHILIPS – Airfryer HD9200/90 Série 3000
49.99 € 109.99 €
Voir le deal

    (Onyx) Une barre de navigation, c'est possible ? :3

    Rowan
    Rowan
    FémininAge : 22Messages : 55

    Jeu 16 Mar 2017 - 18:36

    Ma demande



    Une p’tite barre de navigation si c’est possible ^^


    Schéma(s) et Eléments


    Schémas :
    Spoiler:
    Tailles des éléments : 45px de hauteur et que ça prenne toute la largeur de la page ^^
    Effets voulus : eeeeuh, peut-être un espacement des lettres du lien losrqu’on passe la souris dessus ?
    Version de votre forum : PHPBB2 !


    Ressources


    Pas d’image mais un background en #6f5999 et du white pour les écritures qui seront en Fjalla One (https://fonts.google.com/specimen/Fjalla+One) ?


    Autres précisions ?


    Bonjour-bonjour ! Alors, j'explique vite-fait ce que j'aimerai, mais je ne sais pas si c'est possible, faudra me dire XD :panic:
    Etant donné que nous avons installé une bannière de fond "rectangle" la démarcation entre le véritable fond et la bannière est très visible. Afin de masquer cela, nous voulions "implanter" une barre de navigation qui fasse toute toute toute la largeur du forum et qui s'adapte en fonction de la taille de l'écran de l'utilisateur (c'est-à-dire que même si on zoom/dézoom, les liens de bases -accueil, faq, ect...- resteront centrés et la barre de fond continuera sur tout le long de la page -voir schéma). Voili-voilou, j'espère que j'ai été assez claire, et que c'est possible à faire pour vous (que ce soit en tant que codage ou même en tant que demande xD) !

    Merci beaucoup à celui ou celle qui prendra en charge ma demande ! N'hésitez pas à me demander de plus amples explications si vous avez un doute, d'ailleurs ! :hug: :love: :friends: :hudada: :chomp: :yay:

    (Ah, et petit plus mais pas du tout obligatoire (surtout si vous avez la flemme ou même que c'est pas possible là-aussi :panic: ), si en touchant au codage on peut changer les textes écrits (par exemple, connexion par machintruc qui serait plus adapté au contexte), ça serait vraiment cool ! Encore merci ! :heart: :heart: :heart:


    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Jeu 16 Mar 2017 - 22:06

    Coucou Rowan :)

    Est ce que tu as la liste de tous les textes que tu veux changer ?
    Pour l'affichage d'une information de Nouveau MP, tu as une demande particulière ou bien on est libre de faire comme on le sent ? :hudada:

    • Revenir en haut
    Rowan
    Rowan
    FémininAge : 22Messages : 55

    Ven 17 Mar 2017 - 18:50

    Hellow, Nihil flemmedécrirelasuite :hudada:

    Yup, la voici ! Oui, j'ai une petite demande particulière, mais si c'est trop complexe, c'est évidemment simplifiable ^^

    Alors, au possible toujours évidemment, il faudrait :

    Invité
    Accueil = ACCUEIL
    Calendrier = rien en fait, j'aimerai que ce soit supprimé, mais si c'est impossible, le laisser tel quel ^^
    FAQ = FAQ
    Rechercher = RECHERCHER
    Membres = NOS P'TITS FANTÔMES ♥
    Groupes = pareil que pour le calendrier ^^
    S'enregistrer = SE SPECTRALISER
    Connexion = MOURIR

    Membre
    Accueil = ACCUEIL
    Calendrier = comme plus haut xD
    FAQ = FAQ
    Rechercher = RECHERCHER
    Membres = NOS P'TITS FANTÔMES ♥
    Groupes = comme plus haut aussi xD
    Profil = PROFIL
    Messagerie = TÉLÉPATHIE
    (Si 1 Nouveau Message = 1 NOUVELLE PENSÉE
    Si X Nouveau Message = X NOUVELLES PENSÉES)
    Déconnexion = RESSUCITER [USERNAME]

    Voili-voilou, comme toujours, pas d'hésitation à me dire ce qui n'est pas possible hein xD
    :batte: :obelix: :chomp: :yay:
    Merci encore une fois ! :joie: :joie: :joie:
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Sam 18 Mar 2017 - 15:09

    Pour enlever le calendrier, tu peux le désactiver sur le panneau d'administration (PA > Modules > Calendrier > Configuration)

    Si tu veux activer le calendrier mais ne peux avoir le lien affiché, voici le CSS à rajouter :
    Code:
    /* Masquer le lien vers le calendrier dans la navigation */
    .mainmenu[href="/calendar"] { display: none; }

    De la même manière, pour masquer un groupe on peut faire ça :
    Code:
    /* Masquer le lien vers les groupes dans la navigation */
    .mainmenu[href="/groups"] { display: none; }

    Un petit tuto pour comprendre : Enlever des liens de la navigation

    Pour les membres qui passent par ici et voudraient prendre la demande : n'hésitez pas, même si vous ne savez pas tout faire ! On vous aidera pour les points qui sont plus difficiles :hug:

    • Revenir en haut
    Rowan
    Rowan
    FémininAge : 22Messages : 55

    Dim 19 Mar 2017 - 18:16

    J'ai enlevé tout ce qui était indésirable, merci beaucoup pour l'info, Nihil ! :friends:
    • Revenir en haut
    Rowan
    Rowan
    FémininAge : 22Messages : 55

    Mar 21 Mar 2017 - 18:44

    'Me semble que ça fait 48h, alors je fais un petit up Wink
    • Revenir en haut
    Rowan
    Rowan
    FémininAge : 22Messages : 55

    Dim 26 Mar 2017 - 20:10

    up !
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 26 Mar 2017 - 21:01

    Coucou !

    Je ne prends pas en charge la demande de LS, par contre pour te débloquer je te file déjà le début :hug:, n'importe quel membre est libre de prendre la suite !

    1 / Modification de template

    Dans ton template overall_header (je me base sur celui par défaut), la barre de navigation est ici, on va supprimer toute cette partie :
    Code:
    <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
        <tr>
            <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
        </tr>
    </table>

    Ensuite, on va rajouter notre nouvelle barre. Pour cela on va mettre ce code :
    Code:
    <div class="barre-navigation">{GENERATED_NAV_BAR}</div>

    avant :
    Code:
    <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">

    2 / Ajout CSS :
    Je pars du principe que la police Fjalla One est déjà ajoutée sur ton forum Wink
    Code:
    /* DEBUT BARRE DE NAVIGATION */
    .barre-navigation {
      margin: 0;
      padding-top: 10px;
      padding-bottom: 10px;
      background: #6f5999;

      text-align: center;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #fff;

      font-family: "Fjalla One", sans-serif;
      font-size: 20px;
    }

    /* efface le style de base des liens */
    .barre-navigation a { color: inherit; font-size: inherit; }

    /* masque les images de la barre de navigation */
    .barre-navigation img { display: none; }

    /* FIN BARRE DE NAVIGATION */

    Il manque :
    - prévenir d'un nouveau MP
    - changer les textes

    Bonne soirée !

    • Revenir en haut
    Rowan
    Rowan
    FémininAge : 22Messages : 55

    Lun 27 Mar 2017 - 20:42

    Oh, merci c'est super ! **
    Effectivement, il manque ce que tu as dis, en espérant qu'un âme charitable viendra m'aider Wink
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 28 Mar 2017 - 17:16

    Salut!

    J'ai du temps libre au boulot (plus que j'en avais avant que je ne commence à bosser, ce qui est ridicule) alors je prends ta demande Razz

    À noter que je pars du principe que tu as suivi les démarches de Nihil pour commencer.

    On va donc simplement remplacer ceci :
    Code:
    <div class="barre-navigation">{GENERATED_NAV_BAR}</div>

    Par cela :
    Code:
    <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
    <div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
    <div class="barre-navigation">
      <a href="/forum" title="Accueil">ACCUEIL</a>
      <a href="/faq" title="FAQ">FAQ</a>
      <a href="/search" title="Rechercher">RECHERCHER</a>
      <a href="/memberlist" title="Membres">NOS P'TITS FANTÔMES ♥</a>
      <!-- BEGIN switch_user_logged_in -->
      <a href="/profile?mode=editprofile" title="Profil">PROFIL</a>
      <a href="/privmsg?folder=inbox" title="Messagerie privée" id="mpon" >TÉLÉPATHIE</a>
      <a href="/login.forum?logout=true" title="Déconnexion">RESSUCITER <span class="USERNAME"></span></a>
      <!-- END switch_user_logged_in -->
      <!-- BEGIN switch_user_logged_out -->
      <a href="/register" title="S'inscrire">SE SPECTRALISER</a>
      <a href="/login" title="Connexion">MOURIR</a>
      <!-- END switch_user_logged_out -->
    </div>


    On va modifier un tantinet le CSS de Nihil pour celui-là :
    Code:
    /* DEBUT BARRE DE NAVIGATION */
    .barre-navigation {
      margin: 0;
      padding-top: 10px;
      padding-bottom: 10px;
      background: #6f5999;
      text-align: center;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #fff;
      font-family: "Fjalla One", sans-serif;
      font-size: 20px;
    }

    /* Liens de la barre de navigation */
    .barre-navigation a {
      color: inherit;
      display: inline-block;
      margin: 0px 5px 0px 5px;
    }

    /* Liens de la barre de navigation au survol*/
    .barre-navigation a:hover {
      color: inherit;
      letter-spacing: 5px;
    }

    /* Lien du Nouveau MP */
    #mpon_new {
      color: red;
    }

    /* Lien du Nouveau MP survolé */
    #mpon_new:hover {
      color: inherit;
    }

    /* FIN BARRE DE NAVIGATION */

    Note : Je te laisse personnaliser les liens/couleurs de la barre, il te suffit de changer les "inherit" par les couleurs que tu veux.


    Enfin, il faut ajouter ce javascript en placement "sur toutes les pages" :
    Code:
    $(function(){

      /* on prend l'élément du menu de base de nouveau message */
      var e= $("#i_icon_mini_new_message");

      /* si il y en a pas, c'est qu'il y a pas de nouveau message donc on termine là */
      if(!e.length){
        return;
      }

      /* sinon */
      else {

        /* on prend le nombre de nouveau message */
        var n= +e.attr("title").replace(/^([1-9][0-9]*) .*$/,"$1");

        /* on change l'identifiant en mpon_new et on remplace le texte */
        $("#mpon").attr("id","mpon_new").text(n+" NOUVELLE"+(n>1?"s":"")+" PENSÉE"+(n>1?"s":""));

      }
    });


    Sinon, juste parce que ce sont des vraiment bons tutoriels dont je me sers toujours pour la navigation, je te donne le lien des tutos :
    https://www.never-utopia.com/t40024-template-css-javascript-creer-sa-propre-barre-de-navigation
    http://www.school-of-progress.fr/t11850-fa-totalement-personnaliser-la-barre-de-nav



    • Revenir en haut
    Rowan
    Rowan
    FémininAge : 22Messages : 55

    Mer 29 Mar 2017 - 16:25

    C'est PARFAIT ! Merci beaucoup pour les liens, j'y jetterai un coup d’œil à l'occaz ^^

    MERCI ÉNORMÉMENT !!! :friends: :friends: :friends: :friends: :friends: :friends: :friends:
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Jeu 21 Nov 2024 - 22:24