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.


    Menu latéral fixe [PhPBB2 - PhPBB3]

    Shoki
    Shoki
    FémininAge : 18Messages : 1310

    le Jeu 30 Juin 2016 - 9:44



    Hello !
    Pour mon premier LS ici (oui, j'en fait peu, je ne partage que trèèèès rarement mes codes oui je suis radine Cool), j'ai décidé de frapper fort en vous codant un panneau latéral gris fixe ! Je recommande plutôt Mozilla Firefox pour l'utiliser, mais il fonctionne sous Chrome et Internet Explorer/Microsoft Edge (même si il y a un pas élégant espace). Et pour me faire pardonner de ce petit imprévu, ce code est adapté pour 2 versions de forums (Je suis trop forte je sais huhu) Cool.

       
    Pour PhPBB2 et PhPBB3
    Aperçu sous Mozilla Firefox : www (le fond rouge correspond à mon forum-test)
    Aperçu sous Chrome & IE : www
    En action


    Les codes


    Le CSS est à mettre dans Affichage > Couleurs > Feuille de style CSS
    Vous devez avoir accès au compte fondateur pour pour accéder aux templates
    Votre forum doit faire grand maximum 800 pixels de largeur

    PhPBB2


    CSS
    Code:
    /******************************************************
    MENU LATERAL BY MV/SHOKI [BEGIN]
    ******************************************************/
    #panneau_lat {
     position: fixed;
     top: 0;
     left: 0;
     width: 185px;
     height: 100%;
     background: grey;
     z-index: 200;
     padding: 5px;
     font-family: 'Verdana', sans-serif;
    }
    #panneau_lat h2 {
     font-size: 19pt;
     font-family: 'Georgia', serif;
     text-align: center;
     color: #FFF;
     margin-bottom: 3px;
     margin-top: 1px;
     font-variant: small-caps;
    }
    #panneau_lat h3 {
     font-size: 15pt;
     text-align: center;
     color: #FFF;
     margin-bottom: 0px;
     margin-top: 10px;
     font-variant: small-caps;
     font-family: 'Georgia', serif;
    }
    #panneau_lat a { color: #ccc !important; }
    #panneau_lat a:hover { color: #999 !important; }
    .pres_rapide {
     text-align: center;
     font-variant: small-caps;
     font-family: 'Georgia', serif;
     font-size: 11px;
     color: #FFF;
    }
    .recherche {
     text-align: center;
     font-family: 'Georgia', serif;
     color: #FFF;
     font-size: 13px;
     font-variant: small-caps;
     margin-top: 3px;
    }
    .boite {
     width: 175px;
     height: 120px;
     background: #ccc;
     overflow: auto;
     margin: auto;
     padding: 5px;
     font-size: 12px;
     text-align: justify;
    }
    .membre_mois {
     display: inline-block;
     width: 85px;
     height: 60px;
     background: #ccc;
     border: 1px solid orange;
     margin-left: 4px;
     overflow: hidden;
    }
    .member_des {
     width: 85px;
     height: 60px;
     overflow: auto;
     text-align: center;
     font-family: 'Georgia', serif;
     background: rgba(250, 250, 250, 0.6);
    }
    .membre_mois img {
     width: 85px;
     height: 60px;
     overflow: hidden;
     margin-top: -60px;
     -webkit-transition: all 1s;
     transition: all 1s;
     opacity: 1;
     visibility: visible;
    }
    .membre_mois:hover img {
     opacity: 0;
     visibility: hidden;
    }
    .util_link {
     text-align: center;
     font-family: 'Georgia', serif;
     color: #FFF;
     font-variant: small-caps;
     font-size: 15px;
    }
    .util_link a {
     color: #ccc !important;
     text-decoration: none !important;
     letter-spacing: 0;
     -webkit-transition: all 800ms;
     transition: all 800ms;
    }
    .util_link a:hover {
     letter-spacing: 2px;
     text-decoration: none !important;
    }
    .credits_pann {
     font-size: 10px;
     color: #FFF;
     text-align: center;
     font-variant: small-caps;
     font-family: 'Georgia', serif;
     margin-top: 5px;
    }
    /******************************************************
    MENU LATERAL BY MV/SHOKI [END]
    ******************************************************/

    HTML
    Vous voulez que le menu s'affiche sur toutes les pages de votre forum

    Dans le template overall_header (Affichage > Templates > Général) repérez ceci :
    Code:
    </head>
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

    Après ces deux lignes, intégrez ce code :
    Code:
    <!-- Menu latéral by MV/Shoki [BEGIN] -->
    <div id="panneau_lat">
      <h2>Bienvenue</h2>
      <div class="pres_rapide">Intégrer ici une courte prez' du fofo (âge limite, type de forum...)</div>
        <h3>Liens utiles</h3>
        <div class="util_link">
          <a href="mon_lien">x Règlement</a><br />
          <a href="mon_lien">x Contexte</a><br />
          <a href="mon_lien">x Annexes</a><br />
          <a href="mon_lien">x FAQ</a><br />
          <a href="mon_lien">x Défis</a><br />
          <a href="mon_lien">x Annonces</a><br />
          <a href="mon_lien">x Partenariats</a>
        </div>
        <h3>Effectifs</h3>
        <div class="recherche">
          Groupe 1 x ... membre(s)<br />
          Groupe 2 x ... membre(s)<br />
          Groupe 3 x ... membre(s)<br />
          Groupe 4 x ... membre(s)</div>
        <h3>Rumeurs</h3>
        <div class="boite">Cette boîte peut servir à mettre des rumeurs, des nouvelles, expliquer une situation IRP...
          <br />La partie "membre du mois" peut être remplacée par "membres du staff" o/</div>
        <h3>Membres du mois</h3>
        <div class="membre_mois"><div class="member_des">NOM<br />
          <span style="font-size: 12px;"><a href="mon_lien">Profil</a></span><br />
          <span style="font-size: 12px;"><a href="mon_lien">Fiche</a></span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
        <div class="membre_mois"><div class="member_des">NOM²<br />
          <span style="font-size: 12px;"><a href="mon_lien">Profil²</a></span><br />
          <span style="font-size: 12px;"><a href="mon_lien">Fiche²</a></span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
        <div class="credits_pann">Code par MV/Shoki - <a href="http://www.never-utopia.com/" target="_blank">Never Utopia</a></div>
      </div>
    <!-- Menu latéral by MV/Shoki [END] -->


    Vous voulez que le menu ne s'affiche que sur l'index

    Dans ce cas, allez dans le template index_body (Affichage > Templates > Général) et juste après
    Code:
    {JAVASCRIPT}
    Mettez le code fourni un peu plus haut.

    PhPBB3


    CSS
    Code:
    /******************************************************
    MENU LATERAL BY MV/SHOKI [BEGIN]
    ******************************************************/
    #panneau_lat {
      position: fixed;
      top: 0;
      left: 0;
      width: 185px;
      height: 100%;
      background: grey;
      z-index: 200;
      padding: 5px;
      font-family: 'Verdana', sans-serif;
    }
    #panneau_lat h1 {
      font-size: 19pt;
      font-family: 'Georgia', serif;
      text-align: center;
      color: #FFF;
      margin-bottom: 3px;
      margin-top: 1px;
      font-variant: small-caps;
      border: 0 !important;
    }
    #panneau_lat h4 {
      font-size: 15pt;
      text-align: center;
      color: #FFF;
      margin-bottom: -1px;
      margin-top: 10px;
      font-variant: small-caps;
      font-family: 'Georgia', serif;
      border: 0 !important;
    }
    #panneau_lat a { color: #ccc !important; }
    #panneau_lat a:hover { color: #999 !important; }
    .pres_rapide {
      text-align: center;
      font-variant: small-caps;
      font-family: 'Georgia', serif;
      font-size: 11px;
      color: #FFF;
    }
    .recherche {
      text-align: center;
      font-family: 'Georgia', serif;
      color: #FFF;
      font-size: 13px;
      font-variant: small-caps;
      margin-top: 3px;
    }
    .boite {
      width: 175px;
      height: 120px;
      background: #ccc;
      overflow: auto;
      margin: auto;
      padding: 5px;
      font-size: 12px;
      text-align: justify;
    }
    .membre_mois {
      display: inline-block;
      width: 85px;
      height: 60px;
      background: #ccc;
      border: 1px solid orange;
      margin-left: 4px;
      overflow: hidden;
    }
    .member_des {
      width: 85px;
      height: 60px;
      overflow: auto;
      text-align: center;
      font-family: 'Georgia', serif;
      background: rgba(250, 250, 250, 0.6);
    }
    .membre_mois img {
      width: 85px;
      height: 60px;
      overflow: hidden;
      margin-top: -60px;
      -webkit-transition: all 1s;
      transition: all 1s;
      opacity: 1;
      visibility: visible;
    }
    .membre_mois:hover img {
      opacity: 0;
      visibility: hidden;
    }
    .util_link {
      text-align: center;
      font-family: 'Georgia', serif;
      color: #FFF;
      font-variant: small-caps;
      font-size: 15px;
    }
    .util_link a {
      color: #ccc !important;
      letter-spacing: 0;
      -webkit-transition: all 800ms;
      transition: all 800ms;
    }
    .util_link a:hover {
      letter-spacing: 2px;
    }
    .credits_pann {
      font-size: 10px;
      color: #FFF;
      text-align: center;
      font-variant: small-caps;
      font-family: 'Georgia', serif;
      margin-top: 5px;
    }
    /******************************************************
    MENU LATERAL BY MV/SHOKI [END]
    ******************************************************/

    HTML

    Vous voulez que le menu s'affiche sur toutes les pages de votre forum

    Dans le template overall_header (Affichage > Template > Général), repérez
    Code:
    </head>
    <body id="phpbb">

    Après ces deux lignes, intégrer le code qui suit
    Code:
    <!-- Menu latéral by MV/Shoki [BEGIN] -->
    <div id="panneau_lat">
      <h1>Bienvenue</h1>
      <div class="pres_rapide">Intégrer ici une courte prez' du fofo (âge limite, type de forum...)</div>
        <h4>Liens utiles</h4>
        <div class="util_link">
          <a href="mon_lien">x Règlement</a><br />
          <a href="mon_lien">x Contexte</a><br />
          <a href="mon_lien">x Annexes</a><br />
          <a href="mon_lien">x FAQ</a><br />
          <a href="mon_lien">x Défis</a><br />
          <a href="mon_lien">x Annonces</a><br />
          <a href="mon_lien">x Partenariats</a>
        </div>
        <h4>Effectifs</h4>
        <div class="recherche">
          Groupe 1 x ... membre(s)<br />
          Groupe 2 x ... membre(s)<br />
          Groupe 3 x ... membre(s)<br />
          Groupe 4 x ... membre(s)</div>
        <h4>Rumeurs</h4>
        <div class="boite">Cette boîte peut servir à mettre des rumeurs, des nouvelles, expliquer une situation IRP...
          <br />La partie "membre du mois" peut être remplacée par "membres du staff" o/</div>
        <h4>Membres du mois</h4>
        <div class="membre_mois"><div class="member_des">NOM<br />
          <span style="font-size: 12px;">Profil</span><br />
          <span style="font-size: 12px;">Fiche</span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
        <div class="membre_mois"><div class="member_des">NOM²<br />
          <span style="font-size: 12px;">Profil²</span><br />
          <span style="font-size: 12px;">Fiche²</span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
        <div class="credits_pann">Code par MV/Shoki - <a href="http://www.never-utopia.com/" target="_blank">Never Utopia</a></div>
      </div>
    <!-- Menu latéral by MV/Shoki [END] -->


    Vous voulez que le menu ne s'affiche que sur l'index

    Dans le template index_body (Affichage > Templates > Général), juste après
    Code:
    {JAVASCRIPT}
    Mettre le code fourni un peu plus haut

     
    En cas de soucis avec votre code, le section Problème avec mon Code est disponible. En cas de problème pour personnaliser le menu (changer les couleurs, la taille, la police et autres problèmes liés à la personnalisation), la section Personnalisations est à votre disposition.

    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^




    Menu latéral fixe [PhPBB2 - PhPBB3] 5qox
    Onyx
    Onyx
    FémininAge : 25Messages : 3289

    le Mer 21 Déc 2016 - 23:13

    Salut!

    Tout me semble bon, donc je valide ce LS qui sera bientôt déplacé dans la section appropriée Wink

    Merci de ton partage!



    Kelalin
    Kelalin
    FémininAge : 26Messages : 2080

    le Mer 21 Déc 2016 - 23:41

    Merci pour le partage !
    Flaura
    Flaura
    FémininAge : 16Messages : 152

    le Sam 21 Jan 2017 - 22:02

    Merci du partage !
    Cloudygirl
    Cloudygirl
    FémininAge : 35Messages : 66

    le Jeu 2 Fév 2017 - 22:24

    Merci beaucoup ! Ca va être très utile ♥
    Envola
    Envola
    FémininAge : 27Messages : 58

    le Lun 13 Fév 2017 - 21:53

    Merci pour ça !! :)
    Lyndia Dukos
    Lyndia Dukos
    MasculinAge : 30Messages : 7

    le Mer 15 Fév 2017 - 16:13

    Merci !
    ChupabracaRope
    ChupabracaRope
    FémininAge : 17Messages : 39

    le Jeu 23 Fév 2017 - 22:15

    merci
    Christtinne
    Christtinne
    FémininAge : 33Messages : 197

    le Dim 12 Mar 2017 - 3:52

    merci
    No'Oz
    No'Oz
    FémininAge : 17Messages : 88

    le Dim 12 Mar 2017 - 19:20

    merci !
    Zula
    Zula
    FémininAge : 24Messages : 9

    le Mar 30 Mai 2017 - 22:24

    Merci infiniment ♥
    CN.June
    CN.June
    FémininAge : 20Messages : 315

    le Jeu 6 Juil 2017 - 20:01

    Merci beaucoup pour ce tutoriel, il est juste parfait ! :love:
    Insane paper-plane
    Insane paper-plane
    FémininAge : 23Messages : 140

    le Mer 16 Aoû 2017 - 9:38

    merci !
    naah
    naah
    MasculinAge : 25Messages : 80

    le Jeu 15 Fév 2018 - 15:25

    J'aime beaucoup. Simple et efficace. Un grand merci à toi !
    RainboWolf
    RainboWolf
    FémininAge : 22Messages : 102

    le Lun 26 Fév 2018 - 14:06

    Merci, c'est vraiment super ! ♥
    Jixdu
    Jixdu
    FémininAge : 18Messages : 39

    le Sam 25 Aoû 2018 - 20:06

    Merci beaucoup, c'est exactement ce qu'il me fallait **
    Kaimie
    Kaimie
    FémininAge : 20Messages : 68

    le Ven 7 Déc 2018 - 20:31

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Sam 21 Sep 2019 - 19:45