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.



32 résultats trouvés pour jquery

Offrande

Des Paillettes derrière le curseurs - Sam 12 Aoû 2017 - 0:24



Bonjour tout le monde,
Comme cela fait un petit moment que je n'ai pas posté de LS, alors je me lance avec un JS beaucoup demandé sur le net que j'ai trouvé sur internet :heart:

Pour un aperçus en live je vous propose de regarder sur mon forum : Aperçus ou cette petite vidéo

Vous pouvez changer sur ce JS la couleurs des paillettes ainsi que le nombre de celle-ci seulement.

Un petit message de remerciement est toujours le bienvenue :heart:


Le Code :

Créer un Nouveau JS > Sur toutes les pages

Code:
var colour = "#FFFFFF";  // couleur des étoiles
var sparkles = 300;  // nombre d'étoiles
 
 
var x = ox = 400;
var y = oy = 300;
var swide = 800;
var shigh = 600;
var sleft = sdown = 0;
var tiny = new Array;
var star = new Array;
var starv = new Array;
var starx = new Array;
var stary = new Array;
var tinyx = new Array;
var tinyy = new Array;
var tinyv = new Array;
window.onload = function() {
  if (document.getElementById) {
    var i, rats, rlef, rdow;
    for (var i = 0;i < sparkles;i++) {
      var rats = createDiv(3, 3);
      rats.style.visibility = "hidden";
      document.body.appendChild(tiny[i] = rats);
      starv[i] = 0;
      tinyv[i] = 0;
      var rats = createDiv(5, 5);
      rats.style.backgroundColor = "transparent";
      rats.style.visibility = "hidden";
      var rlef = createDiv(1, 5);
      var rdow = createDiv(5, 1);
      rats.appendChild(rlef);
      rats.appendChild(rdow);
      rlef.style.top = "2px";
      rlef.style.left = "0px";
      rdow.style.top = "0px";
      rdow.style.left = "2px";
      document.body.appendChild(star[i] = rats);
    }
    set_width();
    sparkle();
  }
};
function sparkle() {
  var c;
  if (x != ox || y != oy) {
    ox = x;
    oy = y;
    for (c = 0;c < sparkles;c++) {
      if (!starv[c]) {
        star[c].style.left = (starx[c] = x) + "px";
        star[c].style.top = (stary[c] = y) + "px";
        star[c].style.clip = "rect(0px, 5px, 5px, 0px)";
        star[c].style.visibility = "visible";
        starv[c] = 50;
        break;
      }
    }
  }
  for (c = 0;c < sparkles;c++) {
    if (starv[c]) {
      update_star(c);
    }
    if (tinyv[c]) {
      update_tiny(c);
    }
  }
  setTimeout("sparkle()", 40);
}
function update_star(i) {
  if (--starv[i] == 25) {
    star[i].style.clip = "rect(1px, 4px, 4px, 1px)";
  }
  if (starv[i]) {
    stary[i] += 1 + Math.random() * 3;
    if (stary[i] < shigh + sdown) {
      star[i].style.top = stary[i] + "px";
      starx[i] += (i % 5 - 2) / 5;
      star[i].style.left = starx[i] + "px";
    } else {
      star[i].style.visibility = "hidden";
      starv[i] = 0;
      return;
    }
  } else {
    tinyv[i] = 50;
    tiny[i].style.top = (tinyy[i] = stary[i]) + "px";
    tiny[i].style.left = (tinyx[i] = starx[i]) + "px";
    tiny[i].style.width = "2px";
    tiny[i].style.height = "2px";
    star[i].style.visibility = "hidden";
    tiny[i].style.visibility = "visible";
  }
}
function update_tiny(i) {
  if (--tinyv[i] == 25) {
    tiny[i].style.width = "1px";
    tiny[i].style.height = "1px";
  }
  if (tinyv[i]) {
    tinyy[i] += 1 + Math.random() * 3;
    if (tinyy[i] < shigh + sdown) {
      tiny[i].style.top = tinyy[i] + "px";
      tinyx[i] += (i % 5 - 2) / 5;
      tiny[i].style.left = tinyx[i] + "px";
    } else {
      tiny[i].style.visibility = "hidden";
      tinyv[i] = 0;
      return;
    }
  } else {
    tiny[i].style.visibility = "hidden";
  }
}
document.onmousemove = mouse;
function mouse(e) {
  set_scroll();
  y = e ? e.pageY : event.y + sdown;
  x = e ? e.pageX : event.x + sleft;
}
function set_scroll() {
  if (typeof self.pageYOffset == "number") {
    sdown = self.pageYOffset;
    sleft = self.pageXOffset;
  } else {
    if (document.body.scrollTop || document.body.scrollLeft) {
      sdown = document.body.scrollTop;
      sleft = document.body.scrollLeft;
    } else {
      if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
        sleft = document.documentElement.scrollLeft;
        sdown = document.documentElement.scrollTop;
      } else {
        sdown = 0;
        sleft = 0;
      }
    }
  }
}
window.onresize = set_width;
function set_width() {
  if (typeof self.innerWidth == "number") {
    swide = self.innerWidth;
    shigh = self.innerHeight;
  } else {
    if (document.documentElement && document.documentElement.clientWidth) {
      swide = document.documentElement.clientWidth;
      shigh = document.documentElement.clientHeight;
    } else {
      if (document.body.clientWidth) {
        swide = document.body.clientWidth;
        shigh = document.body.clientHeight;
      }
    }
  }
}
function createDiv(height, width) {
  var div = document.createElement("div");
  div.style.position = "absolute";
  div.style.height = height + "px";
  div.style.width = width + "px";
  div.style.overflow = "hidden";
  div.style.backgroundColor = colour;
  return div;
}
;

Onyx

Lecteur audio personnalisable - Lun 3 Avr 2017 - 1:14




Lecteur audio personnalisable


Salut !

Voici un LS d'un lecteur audio qui a été fait pour la demande de Mimio.

Le lecteur a un bouton Play/Pause ainsi qu'un bouton Repeat pour écouter une chanson en boucle.
Vous pouvez modifier le volume du lecteur (survolez l'icône du volume).
Le lecteur indique la progression de la chanson sous forme numérique (0:00) et sous forme barre de progression.
La barre de progression de la musique peut être déplacée pour avancer/reculer la chanson.
Il est possible de naviguer entre les chansons de la liste en cliquant sur le titre des chansons.
Le lecteur passe automatiquement à la prochaine chanson lorsqu'une chanson est terminée.
Lorsque la liste des chansons est terminée, cela recommence automatiquement au début.

Voilà l'aperçu :


Voilà l'aperçu de la version claire :


Voilà l'aperçu de la version sombre :


À noter que le rendu peut être différent selon les différents navigateurs.


Ce code est en trois parties.
  • Tout d'abord, nous allons mettre le lecteur audio dans une page html.
  • Ensuite, nous allons voir comment mettre des chansons dans le lecteur audio.
  • Enfin, nous allons mettre placer le lecteur audio dans un iframe pour pouvoir le placer où on veut.


Mettre un crédit vers Never-Utopia est obligatoire si vous utilisez ce LS.



1. Lecteur audio (Page HTML)


Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre lecteur audio.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML

Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)".
On choisit un titre quelconque.
On coche "Non" aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?".

On met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
  <head>
    <base target="_blank" />
    <meta name="author" content="Onyx" />
    <meta charset="UTF-8" />
    <title>Lecteur de musique</title>
    <style>
      body {
      margin: 0px;
      }
     
      /*Bloc qui contient tout*/
      #audiobloc {
      width: 300px;
      margin: auto;
      position: relative;
      background: #a3a3a3;
      border: 1px solid #858585;
      font-size: 14px;
      font-family: 'Times New Roman';
      }

      /*Bloc des commandes du lecteur*/
      #audiocommands {
      padding: 10px 0px 10px 10px;
      text-align: left;
      height: 14px;
      color: #656565;
      }
      /*Quand on passe sur les images de commandes*/
      #audiocommands img {
      cursor: pointer;
      }
      /*Bouton repeat*/
      #audiocommand_loopstart {
      opacity: 0.5;
      margin-left: 5px;
      }
      /*Bouton repeat survolé*/
      #audiocommand_loopstart:hover {
      opacity: 1;
      margin-left: 5px;
      }
      /*Bouton arrêter le repeat*/
      #audiocommand_loopstop {
      margin-left: 5px;
      }
     
     
      /*Bloc du temps en chiffres*/
      #audio_time {
      display: inline-block;
      margin-left: 5px;
      width: 31px;
      margin-top: 1px;
      text-align: left;
      height: 13px;
      line-height: 13px;
      vertical-align: top;
      font-size: 13px;
      font-family: 'Times New Roman';
      }
      /*Espace à gauche de la barre de temps*/
      #audiocommand_time {
      margin-left: 0px;
      }
     

      /*Liste des chansons*/
      #musiclist {
      max-height: 100px; /*Hauteur maximale de la liste des chansons*/
      overflow: auto;
      border-bottom: 1px solid #858585;
      }
      /*Ligne de chaque chanson*/
      .music_line {
      text-align: left;
      padding: 1px 5px 1px 5px;
      border-bottom: 1px dotted #858585;
      background: #c4c4c4;
      color: #757575;
      }
      .music_line:nth-last-of-type(1) {
      border: none;
      }
      /*Ligne survolée des chansons*/
      .music_line:hover {
      background: #dfdfdf;
      }
      /*Titre des chansons*/
      .music_song {
      cursor: pointer;
      }
      /*La ligne de la chanson active*/
      #current_songline {
      background: #dfdfdf;
      color: #656565;
      }


      /*Enlever le style de base de la barre de temps pour mettre notre propre style*/
      input[type=range] {
      display: inline-block;
      vertical-align: top;
      -webkit-appearance: none;
      width: 175px;
      height: 12px;
      background: transparent;
      padding: 0px;
      margin-top: 1px;
      }
      input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      }
      input[type=range]:focus {
      outline: none;
      }
      input[type=range]::-ms-track {
      width: 175px;
      vertical-align: top;
      display: inline-block;
      cursor: pointer;
      background: transparent;
      border-color: transparent;
      color: transparent;
      padding: 0px;
      }


      /*Bouton de la barre de temps*/
      /*Pour Chrome*/
      input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      border: none;
      height: 12px;
      width: 12px;
      margin: -4px;
      border-radius: 50%;
      background: #757575;
      cursor: pointer;
      }
      /*Pour Firefox*/
      input[type=range]::-moz-range-thumb {
      -webkit-appearance: none;
      border: none;
      height: 12px;
      width: 12px;
      border-radius: 50%;
      background: #757575;
      font-size: 0px;
      cursor: pointer;
      }
      /*Pour Internet Explorer*/
      input[type=range]::-ms-thumb {
      -webkit-appearance: none;
      border: none;
      height: 12px;
      width: 12px;
      border-radius: 50%;
      background: #757575;
      cursor: pointer;
      }

      /*Barre de temps*/
      /*Pour Chrome*/
      input[type=range]::-webkit-slider-runnable-track {
      width: 175px;
      height: 4px;
      cursor: pointer;
      background: #c1c1c1;
      border-radius: 2px;
      margin: 1px;
      }
      /*Pour Firefox*/
      input[type=range]::-moz-range-track {
      width: 175px;
      height: 4px;
      cursor: pointer;
      background: #c1c1c1;
      border-radius: 2px;
      }
      /*Pour Internet Explorer - Toutes la ligne de temps*/
      input[type=range]::-ms-track {
      width: 175px;
      height: 12px;
      cursor: pointer;
      border-radius: 2px;
      border: none;
      cursor: pointer;
      }
      /*Pour Internet Explorer - Partie avant le bouton de la ligne de temps*/
      input[type=range]::-ms-fill-lower {
      width: 175px;
      height: 4px;
      cursor: pointer;
      background: #c1c1c1;
      border-radius: 2px 0px 0px 2px;
      border: none;
      }
      /*Pour Internet Explorer - Partie après le bouton de la ligne de temps*/
      input[type=range]::-ms-fill-upper {
      width: 175px;
      height: 4px;
      cursor: pointer;
      background: #c1c1c1;
      border-radius: 0px 2px 2px 0px;
      border: none;
      }
     
     
      /*Bloc volume*/
      #audiocommand_volume_bloc {
      display: inline-bloc;
      margin-left: 5px;
      width: 14px;
      height: 14px;
      position: relative;
      }
      /*Image volume*/
      #audiocommand_volume_bloc img {
      width: 14px;
      height: 14px;
      }
      /*Bloc barre volume*/
      #audiocommand_volume_rangebloc {
      position: absolute;
      display: none;
      bottom: 51px;
      left: -37px;
      background: #a3a3a3;
      border: 1px solid #858585;
      width: 80px;
      padding: 3px;
      height: 12px;
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
      }
      /*Apparition barre volume*/
      #audiocommand_volume_bloc:hover #audiocommand_volume_rangebloc {
      display: block;
      }
 
     
      /*Barre de volume*/
      /*Pour Chrome*/
      #audiocommand_volume {
      width: 80px;
      margin: 0px;
      }
      #audiocommand_volume[type=range]::-webkit-slider-runnable-track {
      width: 80px;
      }
      /*Pour Firefox*/
      #audiocommand_volume[type=range]::-moz-range-track {
      width: 80px;
      }
      /*Pour Internet Explorer*/
      #audiocommand_volume[type=range]::-ms-track {
      width: 80px;
      }
      /*Pour Internet Explorer - Partie avant le bouton*/
      #audiocommand_volume[type=range]::-ms-fill-lower {
      width: 80px;
      }
      /*Pour Internet Explorer - Partie après le bouton*/
      #audiocommand_volume[type=range]::-ms-fill-upper {
      width: 80px;
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script type="text/javascript">
      //<!--
        /*Faire fonctionner le lecteur audio*/
        function playsong() {
          $('#lecteuraudio').trigger('play');
          $('#audiocommand_play').css('display', 'none');
          $('#audiocommand_pause').css('display', 'inline-block');
        }

        /*Mettre le lecteur audio sur pause*/
        function pausesong() {
          $('#lecteuraudio').trigger('pause');
          $('#audiocommand_pause').css('display', 'none');
          $('#audiocommand_play').css('display', 'inline-block');
        }
     
        /*Mettre la chanson du lecteur audio en repeat*/
        function loopsongstart() {
          $('#lecteuraudio').attr('loop', 'loop');
          $('#audiocommand_loopstart').css('display', 'none');
          $('#audiocommand_loopstop').css('display', 'inline-block');
        }
     
      /*Enlever le repeat de la chanson du lecteur*/
        function loopsongstop() {
          $('#lecteuraudio').removeAttr('loop');
          $('#audiocommand_loopstop').css('display', 'none');
          $('#audiocommand_loopstart').css('display', 'inline-block');
        }

        /*Passer à la chanson suivante*/
        function nextsong() {
          var src_music;
          var name_music;
          var next_song;
          var lecteur = $('#lecteuraudio');
          next_song = $('#current_song').parent().next().find('.music_song:first');
          if (next_song.length != 1) {
            next_song = $('.music_song:eq(0)');
          }
          $('#current_song').removeAttr('id');
          $('#current_songline').removeAttr('id');
          next_song.attr('id', 'current_song');
          next_song.parent().attr('id', 'current_songline');
          src_music = next_song.attr('data-music-src');
          lecteur.attr('src', src_music);
          lecteur.attr('autoplay', 'autoplay');
          lecteur.load();
          $('#audiocommand_time').attr('max', $('#lecteuraudio')[0].duration);
        }

        /*Changer de musique au click + Barre de temps*/
        $(function(){
          var lecteur = $('#lecteuraudio');
          var src_music;
          var next_song;
     
          /*Changer de musique au click*/
          $('.music_song').click(function(){
            src_music = $(this).attr('data-music-src');
            $('#current_song').removeAttr('id');
            $('#current_songline').removeAttr('id');
            $(this).attr('id', 'current_song');
            $(this).parent().attr('id', 'current_songline');
            lecteur.attr('src', src_music);
            lecteur.attr('autoplay', 'autoplay');
            $('#audiocommand_play').css('display', 'none');
            $('#audiocommand_pause').css('display', 'inline-block');
            lecteur.load();
            $('#audiocommand_time').attr('max', $('#lecteuraudio')[0].duration);
          });
     
     
          /*Mettre le volume à la valeur choisie*/
          $('#lecteuraudio')[0].volume = $('#audiocommand_volume').val()/10;
     
          /*Changer le volume*/
          $('#audiocommand_volume').on('change', function() {
            $('#lecteuraudio')[0].volume = $('#audiocommand_volume').val()/10;
          });
     
          /*Au changement de volume - changement icône*/
          $('#lecteuraudio').on('volumechange', function(){
            if ($('#lecteuraudio')[0].volume*10 > 7) {
              $('#audiocommand_volume_full').css('display', 'inline-block');
              $('#audiocommand_volume_middle').css('display', 'none');
              $('#audiocommand_volume_low').css('display', 'none');
              $('#audiocommand_volume_off').css('display', 'none');
            }
            else if ($('#lecteuraudio')[0].volume*10 > 3) {
              $('#audiocommand_volume_full').css('display', 'none');
              $('#audiocommand_volume_middle').css('display', 'inline-block');
              $('#audiocommand_volume_low').css('display', 'none');
              $('#audiocommand_volume_off').css('display', 'none');
            }
            else if ($('#lecteuraudio')[0].volume*10 > 0) {
              $('#audiocommand_volume_full').css('display', 'none');
              $('#audiocommand_volume_middle').css('display', 'none');
              $('#audiocommand_volume_low').css('display', 'inline-block');
              $('#audiocommand_volume_off').css('display', 'none');
            }
            else  {
              $('#audiocommand_volume_full').css('display', 'none');
              $('#audiocommand_volume_middle').css('display', 'none');
              $('#audiocommand_volume_low').css('display', 'none');
              $('#audiocommand_volume_off').css('display', 'inline-block');
            }
          });
     
     
          /*Mettre la durée totale de la chanson sur la barre de temps*/
          $('#lecteuraudio').on('loadedmetadata', function() {
            $('#audiocommand_time').attr('max', $('#lecteuraudio')[0].duration);
          });
 
          /*Changer la position de la chanson quand on bouge le pointeur de la ligne de temps*/
          $('#audiocommand_time').on('change', function() {
            $('#lecteuraudio')[0].currentTime = $('#audiocommand_time').val();
            $('#audiocommand_time').attr('max', $('#lecteuraudio')[0].duration);
          });
 
          /*Faire avancer la barre de temps*/
          $('#lecteuraudio').on('timeupdate', function(){
            var curtime = parseInt($('#lecteuraudio')[0].currentTime, 10);
            $('#audiocommand_time').val(curtime);
            $('#audio_time').html(formatTime(curtime));
            function formatTime(seconds) {
              minutes = Math.floor(seconds / 60);
              seconds = Math.floor(seconds % 60);
              seconds = (seconds >= 10) ? seconds : "0" + seconds;
              return minutes + ":" + seconds;
            }
          });
     
        });
      //-->
    </script>
  </head>
  <body>
    <div id="audiobloc">
      <div id="musiclist">
   
        <!-- DÉBUT DE TOUTES LES CHANSONS -->
   
        <!-- CHANSON 1 -->
        <div class="music_line" id="current_songline">
          <span data-music-src="URL DE LA CHANSON (EN FORMAT MP3)" class="music_song" id="current_song">
            0:00 - TITRE DE LA CHANSON
          </span>
        </div>
        <!-- FIN CHANSON 1 -->

        <!-- CHANSON XXX -->
        <div class="music_line">
          <span data-music-src="URL DE LA CHANSON (EN FORMAT MP3)" class="music_song">
            0:00 - TITRE DE LA CHANSON
          </span>
        </div>
        <!-- FIN CHANSON XXX -->
   
        <!-- FIN DE TOUTES LES CHANSONS -->
      </div>
 
     
      <!-- COMMANDES DU LECTEUR AUDIO -->
      <div id="audiocommands">
               
        <!-- COMMANDE PLAY -->
        <span onclick="playsong()" id="audiocommand_play"><img src="http://www.aht.li/3055457/Play_Gris.png" alt="Play" /></span>
       
        <!-- COMMANDE PAUSE -->
        <span onclick="pausesong()" id="audiocommand_pause" style="display: none;"><img src="http://www.aht.li/3055456/Pause_gris.png" alt="Pause" /></span>
               
        <!-- TEMPS DE LA CHANSON -->
        <span id="audio_time">0:00</span>
       
        <!-- BARRE DE PROGRESSION DE LA CHANSON -->
        <input type="range" id="audiocommand_time" value="0" max=""></input>
       
        <!-- COMMANDE VOLUME -->
        <span id="audiocommand_volume_bloc">
          <img id="audiocommand_volume_full" src="http://www.aht.li/3055459/Volume_Max_Gris.png" alt="Volume Maxumum" />
          <img id="audiocommand_volume_middle" src="http://www.aht.li/3055460/Volume_Middle_Gris.png" alt="Volume Middle" style="display: none;" />
          <img id="audiocommand_volume_low" src="http://www.aht.li/3055458/Volume_Low_Gris.png" alt="Volume Minimum" style="display: none;" />
          <img id="audiocommand_volume_off" src="http://www.aht.li/3055461/Volume_No_gris.png" alt="Volume Off" style="display: none;" />
          <span id="audiocommand_volume_rangebloc">
            <input type="range" id="audiocommand_volume" value="10" max="10"></input>
          </span>
        </span>
       
        <!-- COMMANDE RÉPÉTER LA CHANSON -->
        <span onclick="loopsongstart()" id="audiocommand_loopstart"><img src="http://www.aht.li/3055455/Loop_gris.png" alt="Repeat" /></span>
       
        <!-- COMMANDE ARRÊTER DE RÉPÉTER LA CHANSON -->
        <span onclick="loopsongstop()" id="audiocommand_loopstop" style="display: none;"><img src="http://www.aht.li/3055455/Loop_gris.png" alt="No Repeat" /></span>

      </div>
      <!-- FIN COMMANDES DU LECTEUR AUDIO -->
 

      <!-- LECTEUR AUDIO -->
      <audio id="lecteuraudio" preload="none" onended="nextsong()" src="URL DE LA PREMIÈRE CHANSON">
        Votre navigateur ne supporte pas ce lecteur audio.
      </audio>
      <!-- FIN LECTEUR AUDIO -->
 
    </div>
  </body>
</html>


Lorsque vous modifiez votre lecteur audio, il faut cliquer sur le triple engrenage (), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.


Si vous le souhaitez, vous pouvez modifier l'apparence de toutes les parties du lecteur. J'ai annoté le CSS, alors je vais vous laissez travailler dessus pour essayer d'arriver à un résultat qui vous convient ^^

Sinon, vous pouvez également utiliser une des deux autres versions déjà faites (version claire et version sombre) qui sont dans le 2e post.



2. Comment mettre des chansons dans le lecteur audio


Un lecteur audio sans musique ne sert pas à grand chose, vous serez sûrement d'accord. Du coup, nous allons voir comment ajouter des chansons.

Important : Les chansons ajoutées doivent absolument être au format MP3, donc elles doivent avoir l'extention ".mp3" à la fin.

La première étape est d'héberger les chansons sur le web. Pour cela, vous pouvez utiliser un hébergeur quelconque. Personnellement, j'utilise Archive-Host qui a une option gratuite pour les particuliers.

Bref, vous vous rendez sur l'hébergeur de votre choix et vous hébergez votre chanson. Puis, vous prenez le lien direct et vous allez le mettre dans le lecteur audio.


Pour cela, il vous suffit de retrouver ce bout de code :
Code:
        <!-- CHANSON XXX -->
        <div class="music_line">
          <span data-music-src="URL DE LA CHANSON (EN FORMAT MP3)" class="music_song">
            0:00 - TITRE DE LA CHANSON
          </span>
        </div>
        <!-- FIN CHANSON XXX -->


Et de mettre le lien de votre chanson à la place de "URL DE LA CHANSON (EN FORMAT MP3)".
Vous pouvez en profiter pour mettre la durée totale de la chanson à la place de "0:00".
Enfin, vous pouvez mettre le titre de la chanson à la place de "TITRE DE LA CHANSON".

Pour chaque nouvelle chanson dans votre liste, vous copiez/collez le code ci-haut et le mettez à la suite de la chanson précédente.


Évidemment, il y a une exception (parce que sinon c'est trop simple, non?)

Pour la première chanson de la liste, il faut que vous la mettiez dans ce bout de code :
Code:
        <!-- CHANSON 1 -->
        <div class="music_line" id="current_songline">
          <span data-music-src="URL DE LA CHANSON (EN FORMAT MP3)" class="music_song" id="current_song">
            0:00 - TITRE DE LA CHANSON
          </span>
        </div>
        <!-- FIN CHANSON 1 -->


Et il faut également mettre le lien de la chanson directement dans le lecteur audio de départ à cet endroit :
Code:
      <!-- LECTEUR AUDIO -->
      <audio id="lecteuraudio" preload="none" onended="nextsong()" src="URL DE LA PREMIÈRE CHANSON">
        Votre navigateur ne supporte pas ce lecteur audio.
      </audio>
      <!-- FIN LECTEUR AUDIO -->


C'est tout pour cette partie ~



3. Mettre le lecteur audio dans un iframe


Maintenant que la page HTML est créée avec le lecteur audio, il faut la mettre accessible aux membres.

Pour cela, vous devez vous rendre là où vous voulez que le lecteur soit soit et y mettre le code suivant :
Code:
<iframe style="display: block; height: 150px; width: 302px; margin: auto; border: none;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>


Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre lecteur audio), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink





C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous avez besoin d'aide pour personnaliser le code.

À plus !



Un petit oubli - Rappel sur le droit d'auteur


Bien qu'il n'y ait aucun problème à avoir un lecteur audio sur un site (dieu sait qu'on trouve 72 codes juste en tapant sur google), le contenu qu'on y met est une autre histoire. Si les musiques que vous mettez dans le lecteur ne sont pas libres de droit ou ne vous appartiennent pas, c'est contre le droit d'auteur. Voir le message de TiGraou ci-bas qui résume tout :

TiGraou a écrit:Je trouve que c'est une bonne idée un lecteur musique mais il faut faire attention: La musique (MP3, radio…), les archives, les logiciels, sont protégés par le droit d’auteur. Il n’est donc pas possible de les reproduire ou de les diffuser sans autorisation de l’auteur.
Vous avez le risque de voir votre forum clôturé, je dis ça je dis rien. ^^ (voici le lien en question: http://forum.forumactif.com/t221386-mettre-de-la-musique-sur-votre-forum-vos-droits-a-connaitre

Pour ceux qui cherchent des musiques à télécharger et en toute légalité: Taper juste sur google "musique gratuite et libre de droit" ( quoi? ce n'est pas ce que vous voulez? \o/ )



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

Message spécial au dessus du formulaire MP en fonction du destinataire - Mer 8 Fév 2017 - 23:31


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Hello <3

Parfois un (ou plusieurs) membres de votre staff sont absents, mais les membres leur envoient quand même des MP plein de détresse.
Les mises en garde en gras et rouge "Je suis absente, je vous conseille de vous adresser à un autre membre du staff" dans la signature ne suffisent pas toujours pour stopper les membres. (:face:)

Pour rajouter encore une petite couche, voici un système ajoutant un petit message au-dessus du formulaire, si l'un des destinataire est dans une liste d'absents que vous avez défini.

Exemple avec un petit message en bleu en haut

(on notera le message d'avertissement bien pourri. S'il vous plait, écrivez un joli message pour vos membres)

Le code est fait pour fonctionner quand le pseudo du destinataire est déjà écrit, pas quand le membre l'écrit lui-même. Cela peut se modifier, mais il s'agit là d'une version plus légère.


Vous pouvez bien entendu adapter ce code pour écrire un autre message que pour les absents, à vous de voir :)
De même, le code n'est pas figé. Il pourrait être personnalisé et aller chercher la liste des absents dans un sujet par exemple (ainsi plus de gens pourraient éditer la liste des absents)


Le code à rajouter



Pour apprendre comment gérer les codes Javascript sur forumactif : Gestion des codes Javascript

Panneau d'administration > Modules > HTML & Javascript > Gestion des codes javascript
Ajoutez un nouveau JS en cochant "Sur toutes les pages"
Code:
/*
 * Message prévenant de l'absence d'un membre lors de l'envoie d'un MP
 * version 1 (fevrier 2017)
 * Never Utopia
 */
$(function(){
    if (document.location.pathname !== "/privmsg") return;

    // phrase à modifier
    var message = "Membre du staff absent, n'hésitez pas à contacter un autre membre du staff";

    // Pseudos des absents, séparés par un point virgule, exemple "Pseudo;Pseuuudo"
    var pseudos = "Pseudo";

    /* NE PAS MODIFIER EN DESSOUS */
    var arrPseudo = pseudos.toLowerCase().split(";");
    // On regarde s'il y a l'un des pseudos des absents dans les destinaires
    if ($('input[name="username[]"]').filter(function() { return arrPseudo.indexOf(this.value.toLowerCase()) > -1 }).length) {
        /* On ajoute le message*/
        $('form[action="/privmsg"]').before('<div class="avertissement-mp">' + message +'</div>');
    }
});


Pour styliser le bloc, il faudra rajouter du CSS.
Voici celui que j'utilise pour ma boite bleue :

Panneau d'administration > Affichage > Couleurs > Onglet "Feuille de Style CSS"
Code:
/* Message prévenant absence si MP */
.avertissement-mp {
  padding: 10px 15px;
  font-size: 14px;
  margin-bottom: 10px;
  background-color: #1b7cad;
  color: white;
  border-radius: 3px;
}


Personnaliser



Pour changer la phrase, il vous faudra modifier cette ligne là :
Code:
var message = "Membre du staff absent, n'hésitez pas à contacter un autre membre du staff";


Et le plus important, la liste des membres absents, se modifie ici :
Code:
var pseudos = "Pseudo";


S'il y a plusieurs pseudos, il faut les séparer avec un point virgule, exemple :
Code:
var pseudos = "Pseudo 1;Pseudo 2";

Note : attention à ne pas mettre des espaces en trop :)

Probablement personne ne va utiliser ça, mais j'avais envie de le sortir :siffle:

Vous pouvez demandez de l'aide dans "Personnalisation" pour faire une adaptation de ce code ou bien mettre un message dans "Problème avec mon code" pour recevoir de l'aide

Système de profil à 2 personnages qui change selon la catégorie - Mer 21 Déc 2016 - 22:12




Système de profil à 2 personnages qui change selon la catégorie


Salut !

Suite à la demande de 24nono38, j'ai conçu un code qui permet l'affichage de 2 personnages différent selon la catégorie où un message est posté.

Je m'explique :
Disons que vous avez un forum rpg avec section "monde des rêves" et "monde réel" et que vos joueurs incarnent un personnage différent selon le monde où ils sont. Vous voulez que le profil de vos joueurs affichent les données du personnage qu'ils jouent selon la catégorie où ils jouent.
Il vous suffira de créer des champs de profil où les joueurs mettront les informations du 2e personnage, soit les champs généraux comme âge, humeur, métier ainsi que des champs plus spéciaux comme rang, url de l'avatar, nom du 2e personnage.
Ensuite, le javascript s'occupera de faire apparaître les bons champs et les bonnes informations selon la catégorie où ils postent.
Utile, non?

Pour voir l'aperçu du premier profil : cliquez ici.
Pour voir l'aperçu du 2e profil : cliquez ici.

Ce LS est en quatre parties.
  • Tout d'abord, nous allons installer le profil dans le template.
  • Puis, nous allons mettre en forme le profil à l'aide du CSS.
  • Ensuite, nous allons créer les champs du 2e personnage dans le profil.
  • Enfin, nous allons installer et modifier le javascript qui fera fonctionner le tout.


- La version du forum est PhpBB2.

Mettre un crédit vers Never-Utopia est obligatoire.


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



1. Le profil (Template Viewtopic_Body)


Nous allons commencer par aller dans les templates, plus précisément dans le template "Viewtopic_Body" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > VIEWTOPIC_BODY

Vous devez trouver ce bout de code (lignes 61 à 67) :
Code:
      <td class="nav" valign="middle" width="100%">
         <span class="nav">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                {NAV_CAT_DESC_SECOND}
            </span>
      </td>   


Et le remplacer par ceci :
Code:
      <td class="nav" valign="middle" width="100%">
         <span class="nav">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                <span class="profil_navig">{NAV_CAT_DESC_SECOND}</span>
            </span>
      </td>   



Puis, vous devez trouver ceci (lignes 139 à 150) :
Code:
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}
         </span><br />
         <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>


Et le remplacer par ceci :
Code:
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
            <div class="postdetails poster-profile">
              <div class="profil_utilisateur">
                <div class="name">
                  <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
                  <div class="profil_pseudo">
                    <strong>{postrow.displayed.POSTER_NAME}</strong>
                  </div>
                </div>
                <div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div>
                <div class="profil_rang">{postrow.displayed.POSTER_RANK}</div>
                <div class="profil_contact">
                  <!-- BEGIN contact_field -->
                  {postrow.displayed.contact_field.CONTENT}
                  <!-- END contact_field -->
                  {postrow.displayed.PROFILE_IMG}
                  {postrow.displayed.PM_IMG}
                  {postrow.displayed.EMAIL_IMG}
                  {postrow.displayed.ONLINE_IMG}
                </div>
                <div class="profil_infos">
                  <div class="profil_champs">
                    <!-- BEGIN profile_field -->
                    <span class="profil_champ">
                      {postrow.displayed.profile_field.LABEL} <span>{postrow.displayed.profile_field.CONTENT}</span>
                    </span>
                    <!-- END profile_field -->
                  </div>
                </div>
              </div>
        </div>
      </td>



Enfin, vous devez trouvez ceci (lignes 253 à 261) :
Code:
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="middle">
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
               </td>
            </tr>
         </table>
      </td>


Et le remplacer par cela :
Code:
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="middle">
               </td>
            </tr>
         </table>
      </td>




2. Mise en forme (CSS)


Si vous regardez votre profil, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons le mettre en forme à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:

/*Bloc profil*/
.profil_utilisateur {
  width: 200px;
  margin: auto;
  position: relative;
}

/*Pseudo*/
.profil_pseudo {
  border-bottom: 1px solid #635f5f;
  padding: 5px 2px 5px 2px;
  font-size: 20px;
  margin: auto;
  text-align: center;
}

/*Bloc avatar*/
.profil_avatar {
  margin: 5px auto;
  box-shadow: 0px 0px 5px #635f5f;
  width: 200px;
  height: 320px;
  background: #ffffff;
}
/*Image avatar*/
.profil_avatar img {
  width: 200px;
  height: 320px;
}

/*Rang*/
.profil_rang {
  border-bottom: 1px solid #635f5f;
  border-top: 1px solid #635f5f;
  padding: 3px;
  font-size: 20px;
  margin: 5px auto;
  text-align: center;
  color: #41506f;
  font-family: 'Verdana';
  font-size: 14px;
  font-style: italic;
}

/*Liens sous le rang*/
.profil_contact {
  text-align: center;
}

/*Bloc qui contient les infos*/
.profil_infos {
  margin: 10px auto 5px auto;
  width: 190px;
  padding: 5px;
  background: #ffffff;
  border-bottom: 1px solid #635f5f;
  border-top: 1px solid #635f5f;
}
.profil_champ {
  color: #6f6f6f;
  font-size: 11px;
  display: none;
}
.profil_champ .label {
  color: #000000!important;
}




3. Créer les champs du 2e personnage (profil)


Maintenant, il faut créer les champs qui vont correspondrent aux informations du 2e personnage.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > UTILISATEURS & GROUPES
> > > UTILISATEURS
> > > > PROFILS

Puis vous créez les champs. Je suppose que je n'ai pas besoin de vous expliquer comment faire? La seule chose que je vous conseille, c'est de les mettre en ordre. À l'exception du rang, de l'image de l'avatar et du pseudo du 2e personnage, les informations s'affichent dans l'ordre où vous les mettez.

Voilà mon résultat si cela peut vous aider :
Spoiler:




4. Faire fonctionner le système de double profil (Javascript)


Enfin, on passe au javascript.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Système de double profil".
On choisit le placement "Sur les sujets".

Enfin, on met le javascript suivant et on enregistre :
Code:
$(function(){
   
      /*Noms des champs du profil NORMAL*/
      var champnamenormal = [
        "Je suis né(e) le : ",
        "Age du personnage : ",
        "Coté coeur : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Dans l'animus je suis : ",
        "Métier : ",
        "Avatar : ",
        "Crédit kit : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation : ",
        "Emploi : ",
        "Humeur : ",
        "Let's rock : "
      ];
   
      /*Nom des champs du profil SPÉCIAL tels qu'ils sont créés*/
      var champnamespecial = [
        "Je suis né(e) le (2e perso) : ",
        "Age du personnage (2e perso) : ",
        "Coté coeur (2e perso) : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Hors de l'animus je suis (2e perso) : ",
        "Métier (2e perso) : ",
        "Avatar (2e perso) : ",
        "Crédit kit (2e perso) : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation (2e perso) : ",
        "Emploi : ",
        "Humeur (2e perso) : ",
        "Let's rock (2e perso) : "
      ];
   
      /*Nom des champs du profil SPÉCIAL tels qu'ils doivent apparaîtrent*/
      var champnamespecialvrai = [
        "Je suis né(e) le : ",
        "Age du personnage : ",
        "Coté coeur : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Hors de l'animus je suis : ",
        "Métier : ",
        "Avatar : ",
        "Crédit kit : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation : ",
        "Emploi : ",
        "Humeur : ",
        "Let's rock : "
      ];
   
      /*Variables*/
      var champs;
      var champ;
      var champnormal;
      var champspecial;
      var champtext;
      var nouvellevaleur;
      var principal;
      var pseudomachin;
      var cate = $('.profil_navig:first').find('a:first').attr('href');

      /*Catégorie où le profil spécial doit être affiché*/
      var catespecial = "URL DE LA CATÉGORIE SPÉCIALE";
   
      /*Nom du champ du l'image de l'avatar du profil spécial*/
      var avatar2 = "Image avatar (2e perso) : ";
   
      /*Nom du champ du Nom du personnage du profil spécial*/
      var pseudo2 = "Prénom et Nom (2e perso) : ";
   
      /*Nom du champ du rang du personnage du profil spécial*/
      var rang2 = "Rang (2e perso) : ";
   
   
      /*Code à ne pas toucher qui affiche les bonnes données dans le profil SPÉCIAL*/
      if (cate == catespecial) {
        $('.profil_utilisateur').each(function(){
          principal = $(this);
          champs = principal.find('.profil_champ');
          for (y = 0; y < champs.length; y++) {
            champ = champs.eq(y);
            if (champ.find('span.label:first').text() == avatar2) {
              nouvellevaleur = champ.find('img:first').attr('src');
              if (principal.find('.profil_avatar').find('img:first').length > 0) {
                principal.find('.profil_avatar').find('img:first').attr('src', nouvellevaleur);
              }
              else {
                pseudomachin = principal.find('.profil_pseudo a:first').attr('href');
                principal.find('.profil_avatar').append('<a href="' + pseudomachin + '"><img src="' + nouvellevaleur + '" /></a>');
              }
            }
            else if (champ.find('span.label:first').text() == pseudo2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              if ($(this).find('.profil_pseudo:first').find('a strong:first').length > 0) {
                $(this).find('.profil_pseudo:first').find('a strong:first').text(nouvellevaleur);
              }
              else {
                $(this).find('.profil_pseudo:first').find('a:first').text(nouvellevaleur);
              }
            }
            else if (champ.find('span.label:first').text() == rang2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              $(this).find('.profil_rang:first').text(nouvellevaleur);
            }
            else {
              for (z = 0; z < champnamespecial.length; z++) {
                champspecial = champnamespecial[z];
                if (champ.find('span.label:first').text() == champspecial) {
                  champ.css('display', 'block');
                  champtext = champnamespecialvrai[z];
                  champ.find('span.label:first').text(champtext);
                }
              }
            }
          }
        });
      }
   
      /*Code à ne pas toucher qui affiche les bonnes données dans le profil NORMAL*/
      else {
        $('.profil_utilisateur').each(function(){
          champs = $(this).find('.profil_champ');
          for (y = 0; y < champs.length; y++) {
            champ = champs.eq(y);
            for (z = 1; z < champnamenormal.length; z++) {
              champnormal = champnamenormal[z];
              if (champ.find('span.label:first').text() == champnormal) {
                champ.css('display', 'block');
              }
            }
          }
        });
      }
    });


Il y a 4 choses à modifier dans ce javascript.

La première section correspond aux champs du profil normal qui apparaît dans presque toutes les catégories. Il s'agit de cette section :
Code:
      /*Noms des champs du profil NORMAL*/
      var champnamenormal = [
        "Je suis né(e) le : ",
        "Age du personnage : ",
        "Coté coeur : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Dans l'animus je suis : ",
        "Métier : ",
        "Avatar : ",
        "Crédit kit : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation : ",
        "Emploi : ",
        "Humeur : ",
        "Let's rock : "
      ];



Même chose pour la section /*Nom des champs du profil SPÉCIAL tels qu'ils sont créés*/ qui contient les champs du profil spécial tels que vous les avez créés dans le profil.


La section /*Nom des champs du profil SPÉCIAL tels qu'ils doivent apparaîtrent*/ contient les noms des champs du profil spécial tels que vous voulez qu'ils apparaîssent dans le profil. Les champs doivent être dans le même ordre que la section précédente.


Enfin, vous devez remplacer le URL DE LA CATÉGORIE SPÉCIALE de ce bout de code par l'url de votre propre catégorie.
Code:
      /*Catégorie où le profil spécial doit être affiché*/
      var catespecial = "URL DE LA CATÉGORIE SPÉCIALE";


Pour cela, allez sur la catégorie où le profil spécial doit s'afficher et regarder l'url de la page. Cela vous donnera quelque chose comme "http://www.never-utopia.com/c31-les-ateliers". Vous gardez seulement le / et ce qu'il y après, comme "/c31-les-ateliers" et c'est ce que vous utilisez pour remplacer le URL DE LA CATÉGORIE SPÉCIALE.




Si jamais vous voulez que le profil spécial s'affiche dans plus qu'une catégorie spécifique, vous ajoutez ce bout de code pour chaque forum/catégorie supplémentaire juste avant le "/*Code à ne pas toucher qui affiche les bonnes données dans le profil NORMAL*/" :
Code:
/*Code à ne pas toucher qui affiche les bonnes données dans le profil SPÉCIAL*/
      else if (cate == "URL DE CATÉGORIE") {
        $('.profil_utilisateur').each(function(){
          principal = $(this);
          champs = principal.find('.profil_champ');
          for (y = 0; y < champs.length; y++) {
            champ = champs.eq(y);
            if (champ.find('span.label:first').text() == avatar2) {
              nouvellevaleur = champ.find('img:first').attr('src');
              if (principal.find('.profil_avatar').find('img:first').length > 0) {
                principal.find('.profil_avatar').find('img:first').attr('src', nouvellevaleur);
              }
              else {
                pseudomachin = principal.find('.profil_pseudo a:first').attr('href');
                principal.find('.profil_avatar').append('<a href="' + pseudomachin + '"><img src="' + nouvellevaleur + '" /></a>');
              }
            }
            else if (champ.find('span.label:first').text() == pseudo2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              if ($(this).find('.profil_pseudo:first').find('a strong:first').length > 0) {
                $(this).find('.profil_pseudo:first').find('a strong:first').text(nouvellevaleur);
              }
              else {
                $(this).find('.profil_pseudo:first').find('a:first').text(nouvellevaleur);
              }
            }
            else if (champ.find('span.label:first').text() == rang2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              $(this).find('.profil_rang:first').text(nouvellevaleur);
            }
            else {
              for (z = 0; z < champnamespecial.length; z++) {
                champspecial = champnamespecial[z];
                if (champ.find('span.label:first').text() == champspecial) {
                  champ.css('display', 'block');
                  champtext = champnamespecialvrai[z];
                  champ.find('span.label:first').text(champtext);
                }
              }
            }
          }
        });
      }


Il vous suffira de modifier le "URL DE CATÉGORIE" par l'url de la catégorie où vous voulez que le profil spécial s'affiche.




C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !

Onyx

Fiche de Prédéfini avec onglets - Ven 30 Sep 2016 - 0:48




Fiche de Prédéfini avec onglets


Salut !

Voici un petit LS d'une fiche de prédéfini à onglets que j'ai faite suite à la demande de MPGuenette.

Pour voir l'aperçu : cliquez ici.
Pour voir l'aperçu, onglet Histoire : cliquez ici.
Pour voir l'aperçu, onglet Autres : cliquez ici.

Ce LS est en trois parties.
  • Tout d'abord, nous allons ajouter le javascript qui permet de faire fonctionner les onglets.
  • Puis, nous allons mettre en forme la fiche avec du CSS.
  • Enfin, nous allons poster la fiche.


Laisser le crédit vers Never-Utopia est obligatoire.


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



1. Ajouter le javascript


Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Système d'onglets des prédéfinis".
On choisit le placement "Sur les sujets".

Enfin, on met le javascript suivant et on enregistre :
Code:
$(function() {
  var index_onglet;
  $('.predef_onglet').click(function(){
    $(this).parent().find('.predef_actif').removeClass('predef_actif');
    $(this).parent().find('.predef_contenu_actif').removeClass('predef_contenu_actif');
    index_onglet = $(this).index();
    $(this).parent().find('.predef_contenu').eq(index_onglet).addClass('predef_contenu_actif');
    $(this).addClass('predef_actif');
  });
});




2. Mise en forme (CSS)


Il est maintenant temps de mettre en forme notre fiche à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/*Bloc de predef*/
.predef_bloc {
  width: 500px;
  margin: auto;
  background: url('http://www.zupimages.net/up/16/36/ss1h.jpg') center top;
  font-family: 'Playfair Display SC', serif;
  padding-bottom: 25px;
  font-size: 14px;
  position: relative;
}
/*Titre de predef*/
.predef_title {
  background: #101010;
  padding: 10px 5px 5px 5px;
  font-family: 'UnifrakturCook', cursive;
  margin-bottom: 25px;
  font-size: 32px;
  color: #656565;
  text-align: center;
}
/*Citation de predef*/
.predef_cite {
  padding-top: 5px;
  font-size: 20px;
  color: #454545;
}
/*Bloc milieu*/
.predef_bloc_middle {
  padding-top: 5px;
  margin: auto;
  width: 450px;
  background-color: rgb(53, 53, 53);
  background-color: rgba(53, 53, 53, 0.75);
  text-align: center;
}
/*Onglet predef*/
.predef_onglet {
  display: inline-block;
  width: 120px;
  margin: 10px;
  text-align: center;
  font-size: 24px;
  color: #959595;
  cursor: pointer;
}
.predef_onglet:hover {
  color: #a3a3a3;
}
/*Onglet predef actif*/
.predef_actif {
  color: #b5b5b5!important;
  cursor: default;
}
/*Contenu de onglet*/
.predef_contenu {
  display: none;
  margin: auto;
  padding: 5px 15px 15px 15px;
  width: 420px;
  text-align: justify;
}
.predef_contenu_actif {
  display: block;
}
/*Image*/
.predef_img {
  float: left;
  height: 320px;
  width: 200px;
}
/*Bloc de texte*/
.predef_text {
  border: 2px solid #b5b5b5;
  color: #b5b5b5;
  float: left;
  width: 196px;
  margin-left: 10px;
  height: 306px;
  padding: 5px;
  overflow: auto;
}
.predef_contenu:nth-of-type(2) .predef_text {
  margin-left: 0px;
  width: 406px;
}
.predef_contenu:nth-of-type(3) .predef_text {
  margin-left: 0px;
  margin-right: 10px;
}
/*Crédits*/
.predef_credit {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 1px;
  left: 0px;
  font-size: 10px;
  color: #000000;
}
.predef_credit a {
  color: #c4c4c4;
}
.predef_credit a:hover {
  color: #ffffff;
}




3. Poster la fiche (html)


Il suffit de vous rendre là où vous voulez poster la fiche et d'y mettre ce code :
Code:
<link href="https://fonts.googleapis.com/css?family=Playfair+Display+SC|UnifrakturCook:700" rel="stylesheet" /><div class="predef_bloc"><div class="predef_title">TITRE OU NOM DU PRÉDÉFINI<div class="predef_cite">SOUS-TITRE OU CITATION</div></div><div class="predef_bloc_middle"><span class="predef_onglet predef_actif">Général</span><span class="predef_onglet">Histoire</span><span class="predef_onglet">Autres</span><div class="predef_contenu predef_contenu_actif"><img class="predef_img" src="URL IMAGE 1ER ONGLET" alt="avatar1" /><div class="predef_text">TEXTE DU 1ER ONGLET</div><div style="clear: both;"></div></div><div class="predef_contenu"><div class="predef_text">TEXTE DU 2E ONGLET</div><div style="clear: both;"></div></div><div class="predef_contenu"><div class="predef_text">TEXTE DU 3E ONGLET</div><img class="predef_img" src="URL IMAGE 3E ONGLET" alt="avatar2" /><div style="clear: both;"></div></div></div><div class="predef_credit">Par Onyx de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a></div></div>


Les majuscules servent à indiquer où mettre le contenu.




C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !

Cacher/révéler certains forums de différentes catégories (onglets) - Mar 20 Sep 2016 - 6:38




Cacher/révéler certains forums de différentes catégories (onglets)


Salut !

Sur le thème actuel (septembre 2016), il est possible de cocher/décocher les différents types de forums sur le menu afin de cacher/révéler les forums qui parlent uniquement de RPG, codage ou graphisme, même s'ils font partie de plusieurs catégories. Ce tutoriel vous permettra de faire la même chose avec l'option de garder vos choix en mémoire pour que vous n'ayez pas besoin cacher/révéler les forums que vous voulez à chaque fois que vous rechargez la page.

Exemple d'application :
Disons que vous avez un forum pirate et que vous avez séparé les catégories selon les parties du monde (Asie, Europe, Amérique, etc.). Seulement, certains forums sont principalement utilisés par pirates, d'autres par la marine, d'autres par les civils et d'autres par tout le monde. Histoire de faciliter la vie à tout le monde, vous décidez d'installer le système pour que les membres aient le choix de cocher/décocher les forums qu'ils veulent voir ou non.

Ce LS est en quatre parties.
  • Tout d'abord, nous allons modifier un peu les catégories pour ajouter le système d'onglets.
  • Puis, nous allons ajouter le javascript qui permet de faire fonctionner cette astuce.
  • ensuite, nous allons voir comment personnaliser le javascript avec vos onglets.
  • Enfin, nous allons styliser un peu les onglets avec du CSS.


Vos catégories doivent avoir la hiérarchie "Séparer sur l'index : Moyen".
Mettre un crédit vers Never-Utopia est obligatoire.


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



1. Ajout du système d'onglet (Template Index_Box)


Nous allons commencer par aller dans les templates, plus précisément dans le template "index_box".

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > INDEX_BOX

Puis, tout en haut du template, on va ajouter ceci :
Code:
<table id="selector">
  <tr>
    <td class="selectoroption">Nom onglet 1</td>
    <td class="selectoroption">Nom onglet 2</td>
    <td class="selectoroption">Nom onglet 3</td>
  </tr>
</table>


Je pense que je n'ai pas besoin de vous expliquer comment ajouter/modifier/enlever des onglets, c'est pas mal explicite u_u




Maintenant, on va entourer chaque forum d'une div pour bien les sélectionner et on va mettre un lien pour les identifier.

ATTENTION : Si vous utilisez PunBB ou phpBB2 et que vous n'avez jamais modifié vos templates ou que vos catégories sont encore codées avec des tableaux (balises table), allez dans le spoiler plus bas.

Ensuite, trouvez ceci :
Code:
<!-- BEGIN forumrow -->


Et ajoutez ceci juste après :
Code:
<a class="forum_distribution" href="{catrow.forumrow.U_VIEWFORUM}" style="display: none;"></a><div>


Enfin, trouvez ceci :
Code:
<!-- END forumrow -->


Et ajoutez ceci juste avant :
Code:
</div>


Spoiler pour PunBB et phpBB2:


Salut!

Si vous avez ces versions de forum, le fonctionnement sera un peu différent.

Tout d'abord, dans le template, retrouvez cette balise :
Code:
<!-- BEGIN forumrow -->


Si la première balise directement après n'est pas une balise "tr", ignorez ce spoiler et suivez les instructions normales pour cette partie.

Si c'est une balise "tr", ajoutez ceci directement avant la balise "tr" :
Code:
<tr style="display: none;"><td><a class="forum_distribution" href="{catrow.forumrow.U_VIEWFORUM}"></a></td></tr>




2. Ajouter le javascript


Maintenant que les onglets ont été créés, on va aller ajouter le javascript.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Système d'onglets de forum".
On choisit le placement "Sur toutes les pages".

ATTENTION : Si vous utilisez PunBB ou phpBB2 et que vous n'avez jamais modifié vos templates ou que vos catégories sont encore codées avec des tableaux (balises table), allez dans le spoiler plus bas.

Enfin, on met le javascript suivant et on enregistre :
Code:
$(function(){

  var nbselectoroption = $('#selector').find('.selectoroption').length;
  var tableauop = [];
  var localname;
  var optionindex;
  var queloptionquel;

  function nomsforum() {
    if (optionindex == 0) { /*Onglet 1*/
      tableauop = [
        "/f2-", /*1er forum à enlever ou rajouter dans onglet 1*/
        "/f6-", /*2e forum à enlever ou rajouter dans onglet 1*/
      ];
    }
    else if (optionindex == 1) { /*Onglet 2*/
      tableauop = [
        "/f1-", /*1er forum à enlever ou rajouter dans onglet 2*/
        "/f10-", /*2e forum à enlever ou rajouter dans onglet 2*/
      ];
    }
  }

  function rendreinvisible() {
    for (z = 0; z < tableauop.length; z++) {
      if ($('a.forum_distribution[href^="'+tableauop[z]+'"]').length > 0) {
        $('a.forum_distribution[href^="'+tableauop[z]+'"]').next().css('display', 'none');
      }
    }
  }

  function rendrevisible() {
    for (z = 0; z < tableauop.length; z++) {
      if ($('a.forum_distribution[href^="'+tableauop[z]+'"]').length > 0) {
        $('a.forum_distribution[href^="'+tableauop[z]+'"]').next().css('display', 'block');
      }
    }
  }

 if (nbselectoroption > 0) {
    for (i = 0; i < nbselectoroption; i++) {
      optionindex = i;
      var forlocalname = 'option' + i;
      var visibleounon = localStorage.getItem(forlocalname);
      if (visibleounon == "Invisible") {
        var queloption = $('.selectoroption').eq(i);
        queloption.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  }

  $('.selectoroption').click(function(){
    if (nbselectoroption > 0) {
      queloptionquel = $(this);
      optionindex = queloptionquel.index();
      localname = 'option' + optionindex;
      if (queloptionquel.hasClass('selectoroption_hidden')) {
        localStorage.setItem(localname, "Visible");
        queloptionquel.removeClass('selectoroption_hidden');
        nomsforum();
        rendrevisible();
      }
      else {
        localStorage.setItem(localname, "Invisible");
        queloptionquel.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  });

});


Spoiler pour PunBB et phpBB2:


Salut!

Si vous n'avez pas utilisé la technique du spoiler dans la section d'avant, parfait, ne lisez pas ce spoiler et utilisez la méthode normale.


Sinon, utilisez ce javascript :
Code:
$(function(){

  var nbselectoroption = $('#selector').find('.selectoroption').length;
  var tableauop = [];
  var localname;
  var optionindex;
  var queloptionquel;

  function nomsforum() {
    if (optionindex == 0) { /*Onglet 1*/
      tableauop = [
        "/f1-", /*1er forum à enlever ou rajouter dans onglet 1*/
      ];
    }
    else if (optionindex == 1) { /*Onglet 2*/
      tableauop = [
        "/f2-", /*1er forum à enlever ou rajouter dans onglet 2*/
      ];
    }
    else if (optionindex == 2) { /*Onglet 3*/
      tableauop = [
        "/f3-", /*1er forum à enlever ou rajouter dans onglet 3*/
      ];
    }
  }

  function rendreinvisible() {
    for (z = 0; z < tableauop.length; z++) {
      if ($('a.forum_distribution[href^="'+tableauop[z]+'"]').length > 0) {
        $('a.forum_distribution[href^="'+tableauop[z]+'"]').closest('tr').next().css('display', 'none');
      }
    }
  }

  function rendrevisible() {
    for (z = 0; z < tableauop.length; z++) {
      if ($('a.forum_distribution[href^="'+tableauop[z]+'"]').length > 0) {
        $('a.forum_distribution[href^="'+tableauop[z]+'"]').closest('tr').next().css('display', 'table-row');
      }
    }
  }

 if (nbselectoroption > 0) {
    for (i = 0; i < nbselectoroption; i++) {
      optionindex = i;
      var forlocalname = 'option' + i;
      var visibleounon = localStorage.getItem(forlocalname);
      if (visibleounon == "Invisible") {
        var queloption = $('.selectoroption').eq(i);
        queloption.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  }

  $('.selectoroption').click(function(){
    if (nbselectoroption > 0) {
      queloptionquel = $(this);
      optionindex = queloptionquel.index();
      localname = 'option' + optionindex;
      if (queloptionquel.hasClass('selectoroption_hidden')) {
        localStorage.setItem(localname, "Visible");
        queloptionquel.removeClass('selectoroption_hidden');
        nomsforum();
        rendrevisible();
      }
      else {
        localStorage.setItem(localname, "Invisible");
        queloptionquel.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  });

});




3. Personnaliser le javascript selon votre situation


La première étape est d'aller regarder ce bout de code :
Code:
  function nomsforum() {
    if (optionindex == 0) { /*Onglet 1*/
      tableauop = [
        "/f2-", /*1er forum à enlever ou rajouter dans onglet 1*/
        "/f6-", /*2e forum à enlever ou rajouter dans onglet 1*/
      ];
    }
    else if (optionindex == 1) { /*Onglet 2*/
      tableauop = [
        "/f1-", /*1er forum à enlever ou rajouter dans onglet 2*/
        "/f10-", /*2e forum à enlever ou rajouter dans onglet 2*/
      ];
    }
  }


En gros, cette fonction associe les onglets à certains forums pour que le reste du javascript sache quel forum cacher/révéler et quand.

Pour rajouter un onglet, vous rajoutez cette partie avant le dernier } de la function :
Code:
    else if (optionindex == W) { /*Onglet Y*/
      tableauop = [
        "/fZ-", /*1er forum à enlever ou rajouter dans onglet Y*/
        "/fZ-", /*2e forum à enlever ou rajouter dans onglet Y*/
      ];
    }


Pour personnaliser le truc :
Le "W" est le numéro de l'onglet moins 1, donc si vous êtes au 3e onglet, vous remplacez le "W" par "2".
Le "Y" est le numéro de l'onglet.
Le "Z" est le numéro du forum à cacher/révéler. Pour savoir quel nombre mettre, allez sur le forum en question et regardez l'adresse url. Elle sera sous cette forme "http://nomduforum.com/f14-trucquelconque". Juste après le /f vous avez un nombre. C'est ce nombre là que vous devez mettre à la place du "Z".

Je pense que vous comprenez le principe ^^




Pour ceux qui ne veulent pas que la décision de cacher/révéler des forums reste en mémoire dans leur navigateur, vous pouvez enlever cette option en supprimant ce bout de code :
Code:
  if (nbselectoroption > 0) {
    for (i = 0; i < nbselectoroption; i++) {
      optionindex = i;
      var forlocalname = 'option' + i;
      var visibleounon = localStorage.getItem(forlocalname);
      if (visibleounon == "Invisible") {
        var queloption = $('.selectoroption').eq(i);
        queloption.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  }



3. Mettre en forme les onglets (CSS)


Vous remarquez, sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme les onglets à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/*Bloc qui entoure les onglets*/
#selector {
  margin: 10px auto 10px auto;
  width: 100%;
  border-spacing: 5px;
  background: #353535; /*Couleur de fond*/
  border: none;
}
/*Onglets actifs*/
.selectoroption {
  padding: 5px;
  background: #656565; /*Couleur de fond*/
  color: #dfdfdf; /*Couleur de la police*/
  font-family: 'Cambria';
  font-size: 14px;
  opacity: 1;
  text-align: center;
  cursor: pointer;
}
/*Onglets non-actifs*/
.selectoroption_hidden {
  opacity: 0.5;
}





C'est tout! Si jamais vous avez des problèmes avec cette astuce, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez modifier le fonctionnement de l'astuce et que vous avez besoin d'aide.

À plus !

Sacha73

Galerie d'image en onclick - Ven 26 Aoû 2016 - 17:31


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Hello,

Voici une proposition de LS, je vous laisse le découvrir.

   
   
     
Galerie d'image avec effet onclick
Voici un moyen de rendre les galeries de vos membres beaucoup plus esthétiques, cette galerie est réalisée avec un effet onclick possédant 42 emplacements et réalisé de manière a évité un effet d'overflow.
Voir
Statique :: www
En action :: www




     Voici le code HTML à placer sur un sujet ::
Code:
<div id="Amispub-galerie">
    <div id="Amispub-galerietitre">Galerie de PSEUDO</div>
    <div id="Amispub-originale">
    <span>Titre de la photo 1</span>
    <div id="Amispub-miniimage"><ul id="Amispub-minigalerie"><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 1"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 1" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 2"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 2" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 3"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 3" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 4"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 4" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 5"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 5" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 6"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 6" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 7"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 7" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 8"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 8" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 9"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 9" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 10"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 10" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 11"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 11" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 12"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 12" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 13"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 13" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 14"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 14" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 15"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 15" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 16"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 16" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 17"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 17" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 18"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 18" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 19"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 19" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 20"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 20" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 21"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 21" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 22"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 22" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 23"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 23" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 24"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 24" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 25"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 25" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 26"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 26" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 27"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 27" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 28"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 28" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 29"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 29" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 30"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 30" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 31"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 31" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 32"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 32" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 33"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 33" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 34"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 34" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 35"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 35" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 36"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 36" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 37"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 37" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 38"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 38" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 39"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 39" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 40"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 40" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 41"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 41" /></a></li><li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 42"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 42" /></a></li>
    </ul></div>
    <div id="Amispub-cadrage"><img id="Amispub-cadre" src="http://i35.servimg.com/u/f35/19/02/80/43/psd-ga10.jpg" alt="Image par défaut" /></div></div>
    <div style="float: right; color: #990033; font-weight: bold; margin-right: 10px; margin-top: -10px;">Codage galerie image by Sacha <a TARGET="_blank" href="http://www.never-utopia.com/" style="background-color: #4682B4; color: #DAE6F0; font-weight: bold; text-decoration:none;">Never Utopia</a></div></div>


   Remarque :: Le code présenté ne se poste qu'une seule fois par page, si le code est posté une nouvelle fois sur la même page ou si vos sujets sont paramétrés avec un rappel de la première publication du sujet sur la page suivante, le code ne fonctionnera pas, il ne prendra qu'en compte le premier code de la page, le suivant code aura pour effet au clic d'afficher l'image sur l'onglet actif de votre navigateur plutôt que dans le cadre alloué à cet effet.

Il est donc, nécessaire de faire un espace galerie des membres avec une demande d'ouverture d'un sous-forum de la part de vos membres et ainsi pouvoir ouvrir des nouveaux sujets sur leur galerie. 


   Fonctionnement :: Chaque emplacement est réaliser de cette manière ::
Code:
<li><a href="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" title="Contenu de l'infobulle 1"><img src="http://i35.servimg.com/u/f35/19/02/80/43/design10.png" alt="Nom de l'image 1" /></a></li>


   Comme vous le remarquerez, il y a donc sur chaque emplacement 2 URL, il vous faudra remplacer cette URL par la vôtre et ces deux fois par emplacement.

   Votre image se redimensionnera pour la miniature à 32X32PX quelle qu'en soit sa taille d'origine, ensuite, au clic, votre image se redimensionnera avec un max width et height de 500X300PX, pourquoi max, simplement que votre image gardera des proportions d'affichages correctes lors de son redimensionnement.

   Vous remarquerez également sur chaque emplacement, qu'il y a un title, celui-ci vous servira à mettre une description de votre image qui s'affichera sur l'emplacement au-dessous du titre de votre galerie, de même il y également alt qui vous permet de mettre un titre à votre image qui sert au passage de votre souris à afficher une infobulle contenant le titre de votre image.


   Vous avez également la possibilité de mettre une image par défaut, elle peut être la première image de votre galerie.
 Il s'agit de ceci :
Code:
<div id="Amispub-cadrage"><img id="Amispub-cadre" src="http://i35.servimg.com/u/f35/19/02/80/43/psd-ga10.jpg" alt="Image par défaut" /></div>


   Il suffit juste de remplacer l'URL par l'URL de votre première image de votre galerie où une autre qui servira d'image par défaut à l'arrivée d'un membre sur votre galerie.


   Il est déconseillé de faire des sauts de ligne dans la structure HTML, sans quoi, vous risquez de fausser son paramétrage, n'oubliez pas, le code HTML est installé sur un sujet et non sur une page HTML !


   Le code CSS a placer :: Affichage -> Images et couleurs -> Couleurs -> Feuille de style ::

Code:
/* *********************Debut galerie image onclick by Sacha******************** */
    #Amispub-galerie {
    background: #dcdcdc;
    border: 6px solid #666;
    border-radius: 50px;
    padding: 15px;
    margin: 15px 30px;
    text-align: center;
    }
    #Amispub-galerietitre {
    background-color: #ccc;
    width: 450px;
    color: #404040;
    font-weight: bold;
    font-size: 40px;
    border-radius: 100px 30px/30px 100px;
    border: 6px solid #666;
    padding: 20px;
    margin: auto;
    }
    ul#Amispub-minigalerie {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    ul#Amispub-minigalerie li {
    float: left ;
    }
    ul#Amispub-minigalerie li a img {
    height: 32px;
    width: 32px;
    padding: 1.5px 1.5px 3px;
    font-size:0px
    }
    #Amispub-cadre {
    max-width: 500px;
    max-height: 300px;
    }
    #Amispub-originale {
    clear: both;
    margin: 0 auto;
    }
    #Amispub-originale span {
    color: #404040;
    font-family: Georgia,serif;
    font-size: 12px;
    font-weight: bold;
    display: block;
    background: #ccc;
    border: 6px solid #666;
    text-align: left;
    padding: 4px;
    min-height: 40px;
    }
    #Amispub-cadrage {
    background-color: #ccc;
    height: 300px;
    margin-left: 230px;
    padding: 5px;
    width: 500px;
    margin-top: -18px;
    border: 4px solid #666;
    }
    #Amispub-miniimage {
    background-color: #ccc;
    height: 300px;
    width: 210px;
    padding: 5px;
    border: 4px solid #666;
    float: left;
    overflow: auto;
    }
    #Amispub-originale img {
    margin: auto;
    }
    /* *********************Fin galerie image onclick by Sacha******************** */



   Le code JS a placer dans :: Module -> Codes Javascript -> Créer un nouveau Javascript -> Mettre un titre explicite -> Placer sur les sujets ::

Code:
function displayPics(){var photos=document.getElementById("Amispub-minigalerie");var liens=photos.getElementsByTagName("a");var big_photo=document.getElementById("Amispub-cadre");var titre_photo=document.getElementById("Amispub-originale").getElementsByTagName("span")[0];for(var i=0;i< liens.length;i++){liens[i].onclick= function(){big_photo.src= this.href;big_photo.alt= this.title;titre_photo.firstChild.nodeValue= this.title;return false}}}window.onload= displayPics;


     
Les codes ont été proposée par Sacha (Co Fondateur des Amis de la pub).
     Aucune reproduction possible sans accord, conformément à l’article L122-1 du CPI.

   


Sacha.

[Astuce] Ajouter des numéros de lignes aux balises code - Mer 24 Aoû 2016 - 3:45




Ajouter des numéros de lignes aux balises code


Salut !

Voici une astuce qui vous permettra de rajouter des numéros de lignes à vos balises codes que j'ai créée suite à la demande de Whitemoon.

Pour voir l'aperçu du résultat  : cliquez ici.

L'aperçu a été pris sur phpBB2. Ce LS fonctionne sous toutes les versions, mais le rendu sera différent selon la version de votre forum.

Ce LS est en deux parties.
  • Tout d'abord, nous allons ajouter le javascript qui calcule et ajoute les lignes.
  • Puis, nous allons ajouter un peu de CSS pour que cela s'affiche correctement.


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



1. Le javascript


Vous devez aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Numérotation des codes".
On choisit le placement "Sur les sujets".

Enfin, on met le javascript suivant et on enregistre :
Version phpBB2:
Code:
$(function() {
  var bloccode = $('.cont_code');
  if (bloccode.length > 0) {
    $(bloccode).each(function() {
      var divincode = $(this).wrapInner('<div>').children();
      var blochauteur = divincode.height();
      divincode.replaceWith(divincode.html());
      var lignehauteur = parseInt($(this).css('line-height'));
      var nblignes = blochauteur / lignehauteur;
      var bloclignes = '<span class="bloclignes"></span>';
      $(this).prepend(bloclignes);
      for (i = 1; i <= nblignes; i++) {
        if (i < 2) {
          $(this).find('.bloclignes').append(i);
        }
        else {
          $(this).find('.bloclignes').append('<br />'+i);
        }
      }
      var thispadtop = $(this).css('padding-top');
      var thispadbottom = $(this).css('padding-bottom');
      $(this).find('.bloclignes').css('padding-top', thispadtop).css('padding-bottom', thispadbottom);
    });
  }
});


Version phpBB3:
Code:
$(function() {
  var bloccode = $('code');
  if (bloccode.length > 0) {
    $(bloccode).each(function() {
      var divincode = $(this).wrapInner('<div>').children();
      var blochauteur = divincode.height();
      divincode.replaceWith(divincode.html());
      var lignehauteur = parseInt($(this).css('line-height'));
      var nblignes = blochauteur / lignehauteur;
      var bloclignes = '<span class="bloclignes"></span>';
      $(this).prepend(bloclignes);
      for (i = 1; i <= nblignes; i++) {
        if (i < 2) {
          $(this).find('.bloclignes').append(i);
        }
        else {
          $(this).find('.bloclignes').append('<br />'+i);
        }
      }
      var thispadtop = $(this).css('padding-top');
      var thispadbottom = $(this).css('padding-bottom');
      $(this).find('.bloclignes').css('padding-top', thispadtop).css('padding-bottom', thispadbottom);
    });
  }
});


Version PunBB:
Code:
$(function() {
  var bloccode = $('.cont_code');
  if (bloccode.length > 0) {
    $(bloccode).each(function() {
      var divincode = $(this).wrapInner('<div>').children();
      var blochauteur = divincode.height();
      divincode.replaceWith(divincode.html());
      var lignehauteur = parseInt($(this).css('line-height'));
      var nblignes = blochauteur / lignehauteur;
      var bloclignes = '<span class="bloclignes"></span>';
      $(this).prepend(bloclignes);
      for (i = 1; i <= nblignes; i++) {
        if (i < 2) {
          $(this).find('.bloclignes').append(i);
        }
        else {
          $(this).find('.bloclignes').append('<br />'+i);
        }
      }
      var thispadtop = $(this).css('padding-top');
      var thispadbottom = $(this).css('padding-bottom');
      $(this).find('.bloclignes').css('padding-top', thispadtop).css('padding-bottom', thispadbottom);
    });
  }
});


Version Invision:
Code:
$(function() {
  var bloccode = $('code');
  if (bloccode.length > 0) {
    $(bloccode).each(function() {
      var divincode = $(this).wrapInner('<div>').children();
      var blochauteur = divincode.height();
      divincode.replaceWith(divincode.html());
      var lignehauteur = parseInt($(this).css('line-height'));
      var nblignes = blochauteur / lignehauteur;
      var bloclignes = '<span class="bloclignes"></span>';
      $(this).prepend(bloclignes);
      for (i = 1; i <= nblignes; i++) {
        if (i < 2) {
          $(this).find('.bloclignes').append(i);
        }
        else {
          $(this).find('.bloclignes').append('<br />'+i);
        }
      }
      var thispadtop = $(this).css('padding-top');
      var thispadbottom = $(this).css('padding-bottom');
      $(this).find('.bloclignes').css('padding-top', thispadtop).css('padding-bottom', thispadbottom);
    });
  }
});




2. Positionnement (CSS)


Pour arranger le positionnement des lignes, on doit ensuite rajouter du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :

Version phpBB2:
Code:
.cont_code {
  display: block;
  position: relative;
  padding-left: 28px;
}
.bloclignes {
  position: absolute;
  width: 24px;
  top: 0px;
  left: 0px;
  padding-right: 2px;
  background-color: #dfdfdf;
  color: #757575;
  text-align: right;
}


Version phpBB3:
Code:
code {
  display: block;
  position: relative;
  padding-left: 29px;
}
.bloclignes {
  position: absolute;
  width: 24px;
  top: 0px;
  left: 0px;
  padding-right: 2px;
  background-color: transparent;
  border-right: 1px solid #cccccc;
  color: #757575;
  text-align: right;
}


Version PunBB:
Code:
.cont_code {
  display: block;
  position: relative;
  padding-left: 29px!important;
}
.bloclignes {
  position: absolute;
  width: 24px;
  top: 0px;
  left: 0px;
  padding-right: 2px;
  background-color: transparent;
  border-right: 1px dotted #dddddd;
  color: #757575;
  text-align: right;
}


Version Invision:
Code:
code {
  display: block;
  position: relative;
  padding-left: 28px;
}
.bloclignes {
  position: absolute;
  width: 24px;
  top: 0px;
  left: 0px;
  padding-right: 2px;
  background-color: #dfdfdf;
  color: #757575;
  text-align: right;
}





C'est tout! Si jamais vous avez des problèmes avec cette astuce, n'hésitez pas à passer dans Un problème avec mon code.

À plus ^^

Onyx

Système de Boutique avec triage automatique - Lun 4 Juil 2016 - 6:56




Système de Boutique avec triage automatique


Salut !

Alors, ce LS vous offrira un système de boutique. Il est composé d'une partie "menu", d'une partie "sélection des items" et d'une partie "panier".

Le menu permet à l'utilisateur de trier les articles pour avoir la sélection d'items qui l'intéresse (toutes les armes qui coûtent moins de 500$ par exemple).

La sélection d'items est la liste des items disponibles où vous pouvez indiquer le nombre d'items à acheter et cliquer sur acheter pour que les items s'ajoutent à votre panier.

Le panier comporte la liste des items que vous avez choisis ainsi que le total que cela vous coûte. Vous avez l'option de rénitialiser le panier.

Le système de boutique, une fois le panier rempli, vous permet de cliquer sur "soumettre votre panier", ce qui va poster un message contenant votre commande directement dans le sujet concerné.

Pour voir la Boutique en direct : cliquez ici.
Pour voir l'aperçu de la Boutique en image : cliquez ici.


Ce LS est en quatre parties.
  • Tout d'abord, nous allons créer la boutique dans une page HTML.
  • Ensuite, nous allons voir comment la personnaliser.
  • Puis, nous allons activer l'autorisation de recevoir des formulaires externes pour que le formulaire fonctionne.
  • Enfin, nous allons mettre la boutique dans un iframe pour la rendre accessible.


Mettre un crédit vers Never-Utopia est obligatoire.


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



1. Créer la boutique (Page HTML)


Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre boutique.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML

Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)".
On choisit un titre quelconque.
On coche "Non" aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?".

On met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="author" content="Onyx" />
  <title>Boutique</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
  <link href='https://fonts.googleapis.com/css?family=Dancing+Script|Libre+Baskerville' rel='stylesheet' type='text/css' />
  <style type="text/css">
    /*Corps*/
    body {
    margin: 0px;
    }
    /*Le bloc entier de la boutique*/
    #boutique {
    position: relative;
    padding-bottom: 10px;
    margin: auto;
    max-width: 850px;
    background-color: #efefef;
    border: 8px double #747474;
    border-left: 1px solid #747474;
    border-right: 1px solid #747474;
    font-size: 14px;
    font-family: 'Times New Roman';
    color: #707070;
    text-align: center;
    }
    /*Le bloc du titre de la boutique*/
    #boutique_top {
    padding: 10px;
    font-size: 26px;
    font-family: 'Dancing Script', script;
    text-align: center;
    border-bottom: 1px solid #747474;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    }
    /*Menu de gauche*/
    #menu {
    float: left;
    text-align: left;
    padding-top: 5px;
    width: 150px;
    height: 825px;
    margin-right: 10px;
    padding-left: 5px;
    border-right: 1px solid #747474;
    }
    /*Les boutons de tri*/
    #trier, #trier2 {
    display: block;
    margin: auto;
    }
    /*Titres des catégories*/
    .menu_title {
    display: inline-block;
    margin-left: 20px;
    border-bottom: 1px solid #707070;
    color: #707070;
    font-size: 16px;
    }
    /*Liste des options des catégories*/
    #menu ul {
    margin-top: 5px;
    margin-bottom: 10px;
    list-style-type:none;
    }
    /*Option des catégories*/
    #menu ul li {
    margin-left: -30px;
    }
    /*Partie de droite*/
    #middle {
    overflow: auto;
    height: 650px;
    text-align: center;
    }
    /*Div de un seul item*/
    .contenu_shoponglet > div {
    display: inline-block;
    text-align: center;
    margin-bottom: 10px;
    padding: 10px;
    }
    /*Bloc qui contient l'item*/
    .item_bloc {
    display: inline-block;
    vertical-align: top;
    background-color: #cfcfcf;
    box-shadow: 0px 0px 10px #353535;
    width: 130px;
    padding: 5px;
    color: #565656;
    }
    /*Image de l'item*/
    .item_bloc > img:first-child {
    display: inline-block;
    width: 100px;
    height: 100px;
    }
    /*Nom de l'item*/
    .item_name {
    padding: 5px;
    font-size: 16px;
    font-family: 'Cambria';
    font-weight: bold;
    text-transform: uppercase;
    }
    /*Input du nombre d'item à acheter*/
    input[type="number"] {
    display: inline-block;
    max-width: 50px;
    border: 1px solid #a3a3a3;
    background-color: #efefef;
    text-align: center;
    margin-bottom: 2px;
    }
    /*Partie du panier*/
    #bottom {
    position: relative;
    display: inline-block;
    margin: auto;
    width: 510px;
    background-color: #efefef;
    box-shadow: 0px 0px 10px #353535;
    color: #565656;
    text-align: center;
    overflow: hidden;
    }
    /*Titre du panier*/
    #bottom_top {
    position: relative;
    z-index: 2;
    font-size: 24px;
    font-family: 'Dancing Script', script;
    text-align: center;
    border-bottom: 1px solid #747474;
    width: 500px;
    padding: 5px;
    background-color: #dfdfdf;
    box-shadow: 0px 0px 10px #353535;
    color: #565656;
    }
    /*Panier visible*/
    #vuepanier {
    position: relative;
    z-index: 1;
    margin: 10px;
    margin-right: 0px;
    margin-left: 0px;
    width: 500px;
    height: 100px;
    background-color: #efefef;
    padding: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: #565656;
    text-align: justify;
    overflow: auto;
    }
    /*Panier invisible*/
    #panier {
    display: none;
    border: none;
    }
    /*Bouton effacer et soumettre le panier*/
    #soumettrepanier, #effacerpanier {
    display: inline-block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 5px;
    }
    /*Bouton soumettre le panier*/
    #effacerpanier {
    margin-right: 15px;
    }
    /*Credit*/
    .credits {
    font-size: 12px;
    position: absolute;
    width: 200px;
    bottom: 2px;
    left: 2px;
    text-align: left;
    }
    a {
    text-decoration: none;
    color: #454545;
    }
    a:hover {
    color: #000000;
    }
  </style>
</head>
<body>
  <form enctype="multipart/form-data" name="post" method="post" action="/post" id="boutique" onsubmit="CompleteMessage()" target="_blank">
    <div class="credits">Par Onyx de <a href="http://www.never-utopia.com/forum" target="_blank" >Never-Utopia</a>.</div>
    <div id="boutique_top"><div id="badam"></div>
      La boutique de <span class="FORUMNAME"></span>
    </div>

    <!-- DÉBUT DU MENU POUR TRIER -->
    <div id="menu">
      <button id="trier2" type="button" onclick="notriage()">Rénitialiser le Tri</button><br />
      <button id="trier" type="button" onclick="triage()">Trier les Items</button><br />

      <!-- DÉBUT CATÉGORIE TYPE -->
      <span class="menu_title">Type</span>
      <ul id="Type">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Arme" />
          Armes
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Armure" />
          Armures
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Accessoire" />
          Accessoires
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Objet" />
          Objets
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="Magie" />
          Magie
        </li>
      </ul>
      <!-- FIN CATÉGORIE TYPE -->

      <!-- DÉBUT CATÉGORIE NIVEAU -->
      <span class="menu_title">Niveau</span>
      <ul id="Niveau">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Niv1" />
          Niveau 1
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Niv2" />
          Niveau 2
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Niv3" />
          Niveau 3
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Niv4" />
          Niveau 4
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="Niv5" />
          Niveau 5
        </li>
      </ul>
      <!-- FIN CATÉGORIE NIVEAU -->

      <!-- DÉBUT CATÉGORIE PRIX -->
      <span class="menu_title">Prix</span>
      <ul id="Prix">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Max99" />
          Moins que 100
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="100_499" />
          [100 et 499]
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="500_999" />
          [500 et 999]
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="1000_4999" />
          [1000 et 4999]
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="5000_10000" />
          [5000 et 10000]
        </li>
        <!-- OPTION #6 -->
        <li><input type="checkbox" name="Min10000" />
          Plus de 10000
        </li>
      </ul>
      <!-- FIN CATÉGORIE PRIX -->

      <!-- DÉBUT CATÉGORIE RARETÉ -->
      <span class="menu_title">Rareté</span>
      <ul id="Rarete">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Commun" />
          Commun
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Rare" />
          Rare
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Tresrare" />
          Très rare
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Unique" />
          Unique
        </li>
      </ul>
      <!-- FIN CATÉGORIE RARETÉ -->

    </div>
    <!-- FIN DU MENU POUR TRIER -->

    <div id="middle">
      <div class="contenu_shoponglet" id="contenu_shoponglet_Tout">

        <!-- DÉBUT ITEM -->
      <div class="Arme Max99 Commun Niv1">
          <div class="item_bloc">
            <img src="URL DE ITEM" /><br />
            <span class="item_name">Nom de l'item</span><br />
            Type Niveau<br />
            Rareté<br />
            Prix : <span class="nbprix">XXX</span>$<br /><br />
            <input type="number" value="1" min="1" /><br />
            <button class="ajoutprix" type="button">Acheter</button>
          </div>
        </div>
        <!-- FIN ITEM -->

      </div>
      <div class="contenu_shoponglet" id="contenu_shoponglet_Autre">
      </div>
    </div>
    <div id="bottom">
      <div id="bottom_top">Mon Panier - <span id="total2">0</span>$</div>
      <div id="vuepanier">Mon panier est vide.</div>
      <textarea id="panier"></textarea>
    </div>
    <br />
    <button id="effacerpanier" type="button" onclick="effacer()">Effacer mon panier</button><input type="submit" id="soumettrepanier" value="Soumettre mon panier" name="post" />
    <textarea name="total" id="total" style="display:none"></textarea>
    <textarea name="message" id="message" style="display:none"></textarea>
    <input type="hidden" value="reply" name="mode" />
    <input type="hidden" value="70" name="t" />
    <div style="clear: both;"></div>
  </form>
<script type="text/javascript">
  //<!--
  var totalbase = 0;
  $('#total2').html(totalbase);
  $('#total').val(totalbase);
  var totaltotal = [];
  $('.ajoutprix').click(function() {
    var prix = parseInt($(this).parent().find('.nbprix').eq(0).html());
    var qt = parseInt($(this).parent().find('input').eq(0).val());
    var total = qt*prix;
    var nomitem = $(this).parent().find('.item_name').eq(0).html();
    var phrase = qt+" "+nomitem+" à "+prix+"$ pour un total de "+total+"$<br />";
    totaltotal.push(total);
    var nbtotal = totaltotal.length;
    var vraitotal = 0;
    for (i = 0; i < nbtotal; i++) {
      vraitotal = vraitotal+totaltotal[i];
    }
    $('#total').val(vraitotal);
    $('#total2').html(vraitotal);
    if ($('#panier').val().length < 1) {
      $('#panier').val(phrase);
    }
    else {
      var ajoutphrase = $('#panier').val();
      ajoutphrase = ajoutphrase+phrase;
      $('#panier').val(ajoutphrase);
    }
    var machinchose = $('#panier').val();
    $('#vuepanier').html(machinchose);
  });
  function effacer() {
    $('#vuepanier').html("Votre panier est vide.");
    $('#panier').val("");
    var nbtotal = totaltotal.length;
    for (i = 0; i < nbtotal; i++) {
    totaltotal[i] = 0;
    $('#total').val(totalbase);
    $('#total2').html(totalbase);
    }
  }
  function CompleteMessage() {
      document.getElementById('message').value = "Bonjour,<br /><br /> J'aimerais acheter les articles suivants s'il vous plaît :<br /><br />" +
      document.getElementById('panier').value +
      "<br />Le coût total de ma commande est de : " +
      document.getElementById('total').value +
      "$.";
  }
  //-->
</script>
<script type="text/javascript">
  //<!--
  function notriage(){
    $('#menu').find('input:checked').prop( "checked", false );
    $('#contenu_shoponglet_Tout').css("display", "block");
    $('#contenu_shoponglet_Autre').html("");
  }
  
  /*Nombre de catégories*/
  var nbtype = $("#menu").find("ul").length;
  
  /*Fonction triage*/
  function triage() {
  
    /*On trouve le nombre de cases cochées*/
    var totalcheck = $('#menu').find('input:checked').length;
    /*On se débarasse des items déjà triés*/
    $('#contenu_shoponglet_Autre').html("");
  
    /*Si aucune case est cochée*/
    if (totalcheck < 1) {
      /*On garde tous les items*/
      $('#contenu_shoponglet_Tout').css("display", "block");
    }
    /*Sinon*/
    else {
      /*On fait disparaître la liste complète*/
      $('#contenu_shoponglet_Tout').css("display", "none");
      /*Tableau qui va contenir toutes les catégories qui ont au moins une case cochée*/
      var nomtypech = [];
      /*Pour chaque catégorie on regarde si il y a une case cochée et si oui on met son id dans le tableau nomtypech*/
      for (i = 0; i < nbtype; i++) {
        var nbcatcheckcal = $('#menu').find('ul:eq(' + i + ')').find('input:checked').length;
        if (nbcatcheckcal > 0) {
          var nomtype = $('#menu').find('ul:eq(' + i + ')').attr('id');
          nomtypech.push(nomtype);
        }
      }
      /*Nombre de catégories qui ont une case cochée*/
      var qunomtypech = nomtypech.length;
      /*Tableau qui contient le nombre de cases cochées par catégories où il y a des cases cochées*/
      var nbnomcatch = [];
      /*Tableau qui contient le name de chaque case cochée*/
      var nomcatch = [];
      for (i = 0; i < qunomtypech; i++) {
        /*On ajoute le nombre de case cochée de chaque catégories où il y en a au moins une dans le tableau nbnomcatch*/
        nbnomcatch[i] = $('#menu').find('#' + nomtypech[i]).find('input:checked').length;
        for (y = 0; y < nbnomcatch[i]; y++) {
          /*On ajoute le name de chaque case cochée de chaque catégories où il y en a au moins une dans le tableau nomcatch*/
          var truc1 = $('#menu').find('#' + nomtypech[i]).find('input:checked:eq(' + y + ')').attr('name');
          nomcatch.push(truc1);
        }
      }
      /*Cela va indiquer à case cochée on est rendue. Il commence à 0*/
      var banane = 0;
  
      /*Pour chaque catégorie où il y a une case cochée...*/
      for (i = 0; i < qunomtypech; i++) {
        /*Si on est à la 1ère catégorie*/
        if (i < 1) {
          /*Pour chaque case cochée de la 1ère catégorie...*/
          for (y = 0; y < nbnomcatch[i]; y++) {
            /*Si on est la première case cochée de la 1ère catégorie*/
            if (banane < 1) {
              /*On regarde le nombre de items qui ont le name de la 1ère case de la 1ère catégorie comme classe*/
              var machin = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).length;
              /*Pour chacun de ses items on le met dans la partie de droite*/
              for (z = 0; z < machin; z++) {
                $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).eq(z).clone(true).appendTo('#contenu_shoponglet_Autre');
              }
              /*On passe à la case suivante*/
              banane = banane + 1;
            }
            /*Si on est la xème case cochée de la 1ère catégorie*/
            else {
              /*On regarde le nombre de items qui ont le name de la xème case cochée comme classe*/
              var machin = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).length;
              /*Pour chacun de ces items...*/
              for (z = 0; z < machin; z++) {
                /*Item que on est en train de regarder*/
                var bamibam = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).eq(z);
                /*On créer la variable qui va regarder si le item que on regarde a une classe de un name qui a déjà été vérifié*/
                var autretruc = 0;
                /*Pour chaque name qui est avant le name que on regarde présentement...*/
                for (w = 0; w < banane; w++) {
                  /*Name où on est rendu à vérifier*/
                  var pamplemousse = nomcatch[w];
                  /*Si le item que on regarde a comme classe un name que on a déjà regardé...*/
                  if (bamibam.hasClass(pamplemousse)) {
                    /*on ajoute 1 à la variable autretruc*/
                    autretruc = autretruc + 1;
                  }
                }
                /*Si autretruc est inférieur a 0 donc si le item que on regarde a pas un name que on a déjà vérifié...*/
                if (autretruc < 1) {
                /*On ajoute le item à la zone de droite*/
                  bamibam.clone(true).appendTo('#contenu_shoponglet_Autre');
                }
              }
              /*On passe à la case suivante*/
              banane = banane + 1;
            }
          }
        }
        /*Si on est pas la 1ère catégorie qui a une case cochée...*/
        else {
          /*On regarde le nombre de item dans la partie de droite*/
          var chose12 = $('#contenu_shoponglet_Autre').children().length;
          /*on crée un tableau qui va contenir les items à enlever de la liste de droite*/
          var calculenlever = [];
          /*Pour chaque item de la liste de droite on met 0 dans le tableau*/
          for (z = 0; z < chose12; z++) {
            calculenlever[z] = 0;
          }
          /*Pour chaque case cochée de la catégorie où on est rendue...*/
          for (y = 0; y < nbnomcatch[i]; y++) {
            /*Pour chaque item qui est dans la liste de droite...*/
            for (z = 0; z < chose12; z++) {
              /*On regarde le xème item de droite*/
              var fraise = $('#contenu_shoponglet_Autre').children().eq(z);
              /*Name de la case où on est rendu*/
              var tomate = nomcatch[banane];
              /*Si le item où on est rendu a cette case on ajoute 1 à sa place dans le tableau calculenlever*/
              if (fraise.hasClass(tomate)) {
                calculenlever[z] = calculenlever[z] + 1;
              }
            }
            /*On passe à la case suivante*/
            banane = banane + 1;
          }
          /*Si les items de droite on aucune classe de aucune des cases de cette catégorie on leur ajoute la classe Detruire*/
          for (y = 0; y < chose12; y++) {
            if (calculenlever[y] < 1) {
              $('#contenu_shoponglet_Autre').children().eq(y).addClass('Detruire');
            }
          }
          /*On détruit les items à droite qui ont la classe Detruire*/
          $('#contenu_shoponglet_Autre').children('.Detruire').remove();
        }
      }
      /*Si il y a 0 item à droite après le tri on dit que il y a 0 résultat*/
      var kiwi = $('#contenu_shoponglet_Autre').children().length;
      if (kiwi < 1) {
        $('#contenu_shoponglet_Autre').html("Aucun résultat ne correspond à votre recherche.");
      }
    }
  }
  //-->
</script>
</body>
</html>


Lorsque vous modifiez votre formulaire, il faut cliquer sur le triple engrenage (), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.


Une fois le code mis et enregistré, vouz aurez une petite modification à faire.

Vous devrez créer un sujet, sur votre forum, où les gens pourront passer leurs commandes. Puis, vous regardez l'adresse de la page. Juste après le nom de votre forum, il y aura ceci : "/t" avec un nombre qui suit. Le nombre correspond à l'id spécifique de ce sujet.

Vous devez copier ce nombre et venir remplace le 70 à cet endroit :
Code:
   <input type="hidden" value="70" name="t" />


Cela va permettre que le message des utilisateurs de la boutique soit posté dans le bon sujet.




2e version de la Boutique:
Suite à un commentaire de Roz comme quoi ce serait bien de pouvoir modifier un peu plus les objets une fois qu'ils sont dans le panier, j'ai fait une nouvelle version qui donne cet aperçu juste ici.

Le code reste très semblable à l’exception du javascript alors la personnalisation sera la même avec les deux versions.

Voilà le code à mettre de la même façon que celui de la première version :
Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="author" content="Onyx" />
  <title>Boutique</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
  <link href='https://fonts.googleapis.com/css?family=Dancing+Script|Libre+Baskerville' rel='stylesheet' type='text/css' />
  <style type="text/css">
    /*Corps*/
    body {
    margin: 0px;
    }
    /*Le bloc entier de la boutique*/
    #boutique {
    position: relative;
    padding-bottom: 10px;
    margin: auto;
    max-width: 850px;
    background-color: #efefef;
    border: 8px double #747474;
    border-left: 1px solid #747474;
    border-right: 1px solid #747474;
    font-size: 14px;
    font-family: 'Times New Roman';
    color: #707070;
    text-align: center;
    }
    /*Le bloc du titre de la boutique*/
    #boutique_top {
    padding: 10px;
    font-size: 26px;
    font-family: 'Dancing Script', script;
    text-align: center;
    border-bottom: 1px solid #747474;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    }
    /*Menu de gauche*/
    #menu {
    float: left;
    text-align: left;
    padding-top: 5px;
    width: 150px;
    height: 825px;
    margin-right: 10px;
    padding-left: 5px;
    border-right: 1px solid #747474;
    }
    /*Les boutons de tri*/
    #trier, #trier2 {
    display: block;
    margin: auto;
    }
    /*Titres des catégories*/
    .menu_title {
    display: inline-block;
    margin-left: 20px;
    border-bottom: 1px solid #707070;
    color: #707070;
    font-size: 16px;
    }
    /*Liste des options des catégories*/
    #menu ul {
    margin-top: 5px;
    margin-bottom: 10px;
    list-style-type:none;
    }
    /*Option des catégories*/
    #menu ul li {
    margin-left: -30px;
    }
    /*Partie de droite*/
    #middle {
    overflow: auto;
    height: 650px;
    text-align: center;
    }
    /*Div de un seul item*/
    .contenu_shoponglet > div {
    display: inline-block;
    text-align: center;
    margin-bottom: 10px;
    padding: 10px;
    }
    /*Bloc qui contient l'item*/
    .item_bloc {
    display: inline-block;
    vertical-align: top;
    background-color: #cfcfcf;
    box-shadow: 0px 0px 10px #353535;
    width: 130px;
    padding: 5px;
    color: #565656;
    }
    /*Image de l'item*/
    .item_bloc > img:first-child {
    display: inline-block;
    width: 100px;
    height: 100px;
    }
    /*Nom de l'item*/
    .item_name {
    padding: 5px;
    font-size: 16px;
    font-family: 'Cambria';
    font-weight: bold;
    text-transform: uppercase;
    }
    /*Input du nombre d'item à acheter*/
    input[type="number"] {
    display: inline-block;
    max-width: 50px;
    border: 1px solid #a3a3a3;
    background-color: #efefef;
    text-align: center;
    margin-bottom: 2px;
    }
    /*Partie du panier*/
    #bottom {
    position: relative;
    display: inline-block;
    margin: auto;
    width: 510px;
    background-color: #efefef;
    box-shadow: 0px 0px 10px #353535;
    color: #565656;
    text-align: center;
    overflow: hidden;
    }
    /*Titre du panier*/
    #bottom_top {
    position: relative;
    z-index: 2;
    font-size: 24px;
    font-family: 'Dancing Script', script;
    text-align: center;
    border-bottom: 1px solid #747474;
    width: 500px;
    padding: 5px;
    background-color: #dfdfdf;
    box-shadow: 0px 0px 10px #353535;
    color: #565656;
    }
    /*Panier visible*/
    #vuepanier {
    position: relative;
    z-index: 1;
    margin: 10px;
    margin-right: 0px;
    margin-left: 0px;
    width: 500px;
    height: 100px;
    background-color: #efefef;
    padding: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: #565656;
    text-align: justify;
    overflow: auto;
    }
    /*Bouton effacer et soumettre le panier*/
    #soumettrepanier, #effacerpanier {
    display: inline-block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 5px;
    }
    /*Bouton soumettre le panier*/
    #effacerpanier {
    margin-right: 15px;
    }
    /*Credit*/
    .credits {
    font-size: 12px;
    position: absolute;
    width: 200px;
    bottom: 2px;
    left: 2px;
    text-align: left;
    }
   
    /*Liens*/
    a {
    text-decoration: none;
    color: #454545;
    }
    a:hover {
    color: #000000;
    }
   
    /*Bloc objet dans le panier*/
    .item_input {
    display: inline-block;
    margin-bottom: 5px;
    background-color: #cfcfcf;
    padding: 2px;
    width: 475px;
    text-align: left;
    }
    /*Le bloc du nom et prix de l'objet dans le panier*/
    .iteminsidepanier {
    margin-left: 5px;
    display: inline-block;
    text-align: left;
    }
    /*Les boutons dans le panier*/
    .item_input button {
    }
    /*Le bouton supprimer de l'objet dans le panier*/
    .button_delete {
    margin-right: 2px;
    display: inline-block;
    }
    /*La quantité de l'objet dans le panier*/
    .input_nb_object {
    margin: 0px 2px 0px 2px;
    display: inline-block;
    padding: 2px;
    border: 1px solid #a3a3a3;
    background: #efefef;
    width: 45px;
    text-align: center;
    }
  </style>
</head>
<body>
  <form enctype="multipart/form-data" name="post" method="post" action="/post" id="boutique" onsubmit="CompleteMessage()" target="_blank">
    <div class="credits">Par Onyx de <a href="http://www.never-utopia.com/forum" target="_blank" >Never-Utopia</a>.</div>
    <div id="boutique_top"><div id="badam"></div>
      La boutique de <span class="FORUMNAME"></span>
    </div>

    <!-- DÉBUT DU MENU POUR TRIER -->
    <div id="menu">
      <button id="trier2" type="button" onclick="notriage()">Rénitialiser le Tri</button><br />
      <button id="trier" type="button" onclick="triage()">Trier les Items</button><br />

      <!-- DÉBUT CATÉGORIE TYPE -->
      <span class="menu_title">Type</span>
      <ul id="Type">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Arme" />
          Armes
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Armure" />
          Armures
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Accessoire" />
          Accessoires
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Objet" />
          Objets
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="Magie" />
          Magie
        </li>
      </ul>
      <!-- FIN CATÉGORIE TYPE -->

      <!-- DÉBUT CATÉGORIE NIVEAU -->
      <span class="menu_title">Niveau</span>
      <ul id="Niveau">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Niv1" />
          Niveau 1
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Niv2" />
          Niveau 2
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Niv3" />
          Niveau 3
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Niv4" />
          Niveau 4
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="Niv5" />
          Niveau 5
        </li>
      </ul>
      <!-- FIN CATÉGORIE NIVEAU -->

      <!-- DÉBUT CATÉGORIE PRIX -->
      <span class="menu_title">Prix</span>
      <ul id="Prix">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Max99" />
          Moins que 100
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="100_499" />
          [100 et 499]
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="500_999" />
          [500 et 999]
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="1000_4999" />
          [1000 et 4999]
        </li>
        <!-- OPTION #5 -->
        <li><input type="checkbox" name="5000_10000" />
          [5000 et 10000]
        </li>
        <!-- OPTION #6 -->
        <li><input type="checkbox" name="Min10000" />
          Plus de 10000
        </li>
      </ul>
      <!-- FIN CATÉGORIE PRIX -->

      <!-- DÉBUT CATÉGORIE RARETÉ -->
      <span class="menu_title">Rareté</span>
      <ul id="Rarete">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Commun" />
          Commun
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Rare" />
          Rare
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Tresrare" />
          Très rare
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Unique" />
          Unique
        </li>
      </ul>
      <!-- FIN CATÉGORIE RARETÉ -->

    </div>
    <!-- FIN DU MENU POUR TRIER -->

    <div id="middle">
      <div class="contenu_shoponglet" id="contenu_shoponglet_Tout">

        <!-- DÉBUT ITEM -->
      <div class="Arme Max99 Commun Niv1">
          <div class="item_bloc">
            <img src="URL DE ITEM" /><br />
            <span class="item_name">Nom de l'item</span><br />
            Type Niveau<br />
            Rareté<br />
            Prix : <span class="nbprix">XXX</span>$<br /><br />
            <input type="number" value="1" min="1" /><br />
            <button class="ajoutprix" type="button">Acheter</button>
          </div>
        </div>
        <!-- FIN ITEM -->

      </div>
      <div class="contenu_shoponglet" id="contenu_shoponglet_Autre">
      </div>
    </div>
    <div id="bottom">
      <div id="bottom_top">Mon Panier - <span id="total2">0</span>$</div>
      <div id="vuepanier">Mon panier est vide.</div>
    </div>
    <br />
    <button id="effacerpanier" type="button" onclick="effacer()">Effacer mon panier</button>
    <input type="submit" id="soumettrepanier" value="Soumettre mon panier" name="post" />
    <textarea name="message" id="message" style="display:none"></textarea>
    <input type="hidden" value="reply" name="mode" />
    <input type="hidden" value="70" name="t" />
    <div style="clear: both;"></div>
  </form>
<script type="text/javascript">
  //<!--
  var totalbase = 0;
  $('#total2').html(totalbase);
  var totaltotal = 0;
 
  /*Quand on ajoute un item au panier*/
  $('.ajoutprix').click(function() {
    var prix = parseInt($(this).parent().find('.nbprix').eq(0).html());
    var qt = parseInt($(this).parent().find('input').eq(0).val());
    var qtprixcalculation = qt * prix;
    var nomitem = $(this).parent().find('.item_name').eq(0).html();
    var phrase = "<span class='item_input'>" +
      "<button type='button' class='button_delete' onclick='deleteqtitem(this)'>x</button>" +
      "<button type='button' class='button_moins' onclick='removeqtitem(this)'>-</button>" +
      "<input type='text' class='input_nb_object' value='"+qt+"' data-prix='"+prix+"' onchange='calcultotal()'></input>" +
      "<button type='button' class='button_plus' onclick='addqtitem(this)'>+</button>" +
      "<span class='iteminsidepanier'><span class='thename'>"+nomitem+"</span>" +
      " à <span class='thepriceinside'>"+prix+"</span>$ pour un total de" +
      " <span class='thetotalinside'>"+qtprixcalculation+"</span>$.</span>";
    if ($('#vuepanier').html() == "Mon panier est vide.") {
      $('#vuepanier').html(phrase);
    }
    else {
      var ajoutphrase = $('#vuepanier').html();
      ajoutphrase = ajoutphrase+phrase;
      $('#vuepanier').html(ajoutphrase);
    }
    calcultotal();
  });
 
  /*Ajouter un item déjà dans le panier*/
  function addqtitem(bihihi) {
    var curritem = parseInt($(bihihi).prev().val());
    var curritemafter = curritem + 1;
    $(bihihi).prev().val(curritemafter);
    calcultotal();
  }
 
  /*Enlever un item déjà dans le panier*/
  function removeqtitem(bohoho) {
    var curratem = parseInt($(bohoho).next().val());
    var curratemafter = curratem - 1;
    $(bohoho).next().val(curratemafter);
    calcultotal();
  }
 
  /*Supprimer un item déjà dans le panier*/
  function deleteqtitem(bahaha) {
    $(bahaha).parent().remove();
    calcultotal();
  }
 
  /*Fonction pour calculer*/
  function calcultotal() {
    totaltotal = 0;
    $('.item_input').each(function(){
      if (parseInt($(this).find('.input_nb_object:first').val()) < 1) {
        $(this).remove();
      }
      var otherprix = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
      var otherquant = parseInt($(this).find('.input_nb_object:first').val());
      $(this).find('.thetotalinside:first').html((otherprix*otherquant));
      totaltotal = totaltotal + (otherprix*otherquant);
    });
    if ($('#vuepanier').html().length < 1) {
      $('#vuepanier').html("Mon panier est vide.");
      $('#total2').html(totalbase);
    }
    else {
      $('#total2').html(totaltotal);
    }
  }
 
  /*Fonction pour effacer le panier*/
  function effacer() {
    $('#vuepanier').html("Mon panier est vide.");
    $('#total2').html(totalbase);
  }
 
  /*Fonction pour poster le message*/
  function CompleteMessage() {
    var thetotalprice = totaltotal;
    var lemessage = "Bonjour,<br /><br />J'aimerais acheter les articles suivants s'il vous plaît :<br />";
    $('.item_input').each(function(){
      var theprice = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
      var thesupername = $(this).find('.thename:first').html();
      var thequant = parseInt($(this).find('.input_nb_object:first').val());
      var thequantpricetotal = thequant * theprice;
      lemessage = lemessage + "<br /> - "+thequant+" "+thesupername+" à "+theprice+"$ pour un total de "+thequantpricetotal+"$";
    });
    lemessage = lemessage + "<br /><br />Le coût total de ma commande est de : "+thetotalprice+"$.";
    $('#message').val(lemessage);
  }
  //-->
</script>
<script type="text/javascript">
  //<!--
  function notriage(){
    $('#menu').find('input:checked').prop( "checked", false );
    $('#contenu_shoponglet_Tout').css("display", "block");
    $('#contenu_shoponglet_Autre').html("");
  }
 
  /*Nombre de catégories*/
  var nbtype = $("#menu").find("ul").length;
 
  /*Fonction triage*/
  function triage() {
 
    /*On trouve le nombre de cases cochées*/
    var totalcheck = $('#menu').find('input:checked').length;
    /*On se débarasse des items déjà triés*/
    $('#contenu_shoponglet_Autre').html("");
 
    /*Si aucune case est cochée*/
    if (totalcheck < 1) {
      /*On garde tous les items*/
      $('#contenu_shoponglet_Tout').css("display", "block");
    }
    /*Sinon*/
    else {
      /*On fait disparaître la liste complète*/
      $('#contenu_shoponglet_Tout').css("display", "none");
      /*Tableau qui va contenir toutes les catégories qui ont au moins une case cochée*/
      var nomtypech = [];
      /*Pour chaque catégorie on regarde si il y a une case cochée et si oui on met son id dans le tableau nomtypech*/
      for (i = 0; i < nbtype; i++) {
        var nbcatcheckcal = $('#menu').find('ul:eq(' + i + ')').find('input:checked').length;
        if (nbcatcheckcal > 0) {
          var nomtype = $('#menu').find('ul:eq(' + i + ')').attr('id');
          nomtypech.push(nomtype);
        }
      }
      /*Nombre de catégories qui ont une case cochée*/
      var qunomtypech = nomtypech.length;
      /*Tableau qui contient le nombre de cases cochées par catégories où il y a des cases cochées*/
      var nbnomcatch = [];
      /*Tableau qui contient le name de chaque case cochée*/
      var nomcatch = [];
      for (i = 0; i < qunomtypech; i++) {
        /*On ajoute le nombre de case cochée de chaque catégories où il y en a au moins une dans le tableau nbnomcatch*/
        nbnomcatch[i] = $('#menu').find('#' + nomtypech[i]).find('input:checked').length;
        for (y = 0; y < nbnomcatch[i]; y++) {
          /*On ajoute le name de chaque case cochée de chaque catégories où il y en a au moins une dans le tableau nomcatch*/
          var truc1 = $('#menu').find('#' + nomtypech[i]).find('input:checked:eq(' + y + ')').attr('name');
          nomcatch.push(truc1);
        }
      }
      /*Cela va indiquer à case cochée on est rendue. Il commence à 0*/
      var banane = 0;
 
      /*Pour chaque catégorie où il y a une case cochée...*/
      for (i = 0; i < qunomtypech; i++) {
        /*Si on est à la 1ère catégorie*/
        if (i < 1) {
          /*Pour chaque case cochée de la 1ère catégorie...*/
          for (y = 0; y < nbnomcatch[i]; y++) {
            /*Si on est la première case cochée de la 1ère catégorie*/
            if (banane < 1) {
              /*On regarde le nombre de items qui ont le name de la 1ère case de la 1ère catégorie comme classe*/
              var machin = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).length;
              /*Pour chacun de ses items on le met dans la partie de droite*/
              for (z = 0; z < machin; z++) {
                $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).eq(z).clone(true).appendTo('#contenu_shoponglet_Autre');
              }
              /*On passe à la case suivante*/
              banane = banane + 1;
            }
            /*Si on est la xème case cochée de la 1ère catégorie*/
            else {
              /*On regarde le nombre de items qui ont le name de la xème case cochée comme classe*/
              var machin = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).length;
              /*Pour chacun de ces items...*/
              for (z = 0; z < machin; z++) {
                /*Item que on est en train de regarder*/
                var bamibam = $('#contenu_shoponglet_Tout').find('.' + nomcatch[banane]).eq(z);
                /*On créer la variable qui va regarder si le item que on regarde a une classe de un name qui a déjà été vérifié*/
                var autretruc = 0;
                /*Pour chaque name qui est avant le name que on regarde présentement...*/
                for (w = 0; w < banane; w++) {
                  /*Name où on est rendu à vérifier*/
                  var pamplemousse = nomcatch[w];
                  /*Si le item que on regarde a comme classe un name que on a déjà regardé...*/
                  if (bamibam.hasClass(pamplemousse)) {
                    /*on ajoute 1 à la variable autretruc*/
                    autretruc = autretruc + 1;
                  }
                }
                /*Si autretruc est inférieur a 0 donc si le item que on regarde a pas un name que on a déjà vérifié...*/
                if (autretruc < 1) {
                /*On ajoute le item à la zone de droite*/
                  bamibam.clone(true).appendTo('#contenu_shoponglet_Autre');
                }
              }
              /*On passe à la case suivante*/
              banane = banane + 1;
            }
          }
        }
        /*Si on est pas la 1ère catégorie qui a une case cochée...*/
        else {
          /*On regarde le nombre de item dans la partie de droite*/
          var chose12 = $('#contenu_shoponglet_Autre').children().length;
          /*on crée un tableau qui va contenir les items à enlever de la liste de droite*/
          var calculenlever = [];
          /*Pour chaque item de la liste de droite on met 0 dans le tableau*/
          for (z = 0; z < chose12; z++) {
            calculenlever[z] = 0;
          }
          /*Pour chaque case cochée de la catégorie où on est rendue...*/
          for (y = 0; y < nbnomcatch[i]; y++) {
            /*Pour chaque item qui est dans la liste de droite...*/
            for (z = 0; z < chose12; z++) {
              /*On regarde le xème item de droite*/
              var fraise = $('#contenu_shoponglet_Autre').children().eq(z);
              /*Name de la case où on est rendu*/
              var tomate = nomcatch[banane];
              /*Si le item où on est rendu a cette case on ajoute 1 à sa place dans le tableau calculenlever*/
              if (fraise.hasClass(tomate)) {
                calculenlever[z] = calculenlever[z] + 1;
              }
            }
            /*On passe à la case suivante*/
            banane = banane + 1;
          }
          /*Si les items de droite on aucune classe de aucune des cases de cette catégorie on leur ajoute la classe Detruire*/
          for (y = 0; y < chose12; y++) {
            if (calculenlever[y] < 1) {
              $('#contenu_shoponglet_Autre').children().eq(y).addClass('Detruire');
            }
          }
          /*On détruit les items à droite qui ont la classe Detruire*/
          $('#contenu_shoponglet_Autre').children('.Detruire').remove();
        }
      }
      /*Si il y a 0 item à droite après le tri on dit que il y a 0 résultat*/
      var kiwi = $('#contenu_shoponglet_Autre').children().length;
      if (kiwi < 1) {
        $('#contenu_shoponglet_Autre').html("Aucun résultat ne correspond à votre recherche.");
      }
    }
  }
  //-->
</script>
</body>
</html>




2. Personnaliser la boutique


Alors, si on résume, la boutique est composé d'une partie "menu", d'une partie "sélection des items" et d'une partie "panier".

Le menu permet à l'utilisateur de trier les articles pour avoir la sélection d'items qui l'intéresse (toutes les armes qui coûtes moins de 500$ par exemple). La sélection d'items est la liste des items disponibles où vous pouvez indiquer le nombre d'items à acheter et cliquer sur acheter pour que les items s'ajoutent à votre panier. Le panier comporte la liste des items que vous avez choisis ainsi que le total que cela vous coûte. Vous avez l'option de rénitialiser le panier.

Dans le menu, il y a plusieurs catégories et chaque catégorie a un certain nombre d'options.


Voilà un exemple de 1 catégorie avec 4 options :
Code:
      <!-- DÉBUT CATÉGORIE RARETÉ -->
      <span class="menu_title">Rareté</span>
      <ul id="Rarete">
        <!-- OPTION #1 -->
        <li><input type="checkbox" name="Commun" />
          Commun
        </li>
        <!-- OPTION #2 -->
        <li><input type="checkbox" name="Rare" />
          Rare
        </li>
        <!-- OPTION #3 -->
        <li><input type="checkbox" name="Tresrare" />
          Très rare
        </li>
        <!-- OPTION #4 -->
        <li><input type="checkbox" name="Unique" />
          Unique
        </li>
      </ul>
      <!-- FIN CATÉGORIE RARETÉ -->


Le premier span est le nom de la catégorie. Ensuite, on a une liste qui contient les options. La liste (le ul) a un id qui sert à indiquer quel est la catégorie. Chaque catégorie doit avoir un id différent des autres catégories.

Ensuite, chaque option est sous cette forme :
Code:
        <!-- OPTION # -->
        <li><input type="checkbox" name="Unique" />
          Unique
        </li>


Dans le "name" du champ à cocher (le "input"), vous avez le mot "Unique".

Ce mot, "Unique", permet d'identifier cette option et permettra aussi d'identifier l'item qui y appartiendra alors il est important de prendre en note comment c'est écrit et de s'assurer que c'est la seule option qui a ce nom.

Donc si je résume rapidement, chaque catégorie à son propre "id" qui est unique à cette catégorie et qui ne doit pas se répéter ailleurs.
Ensuite, chaque option à son propre "name" qui appartient uniquement à cette option et qui ne doit pas se répéter ailleurs.




Ensuie, on passe à la section où il y a tous les items (contenu d'onlglet "Tout"). Vous y trouverez des items sous cette forme :
Code:
        <!-- DÉBUT ITEM -->
       <div class="Arme Max99 Commun Niv1">
          <div class="item_bloc">
            <img src="URL DE ITEM" /><br />
            <span class="item_name">Nom de l'item</span><br />
            Type Niveau<br />
            Rareté<br />
            Prix : <span class="nbprix">XXX</span>$<br /><br />
            <input type="number" value="1" min="1" /><br />
            <button class="ajoutprix" type="button">Acheter</button>
          </div>
        </div>
        <!-- FIN ITEM -->


Vous voyez que la classe de la première div contient plusieurs classes :
Code:
<div class="Arme Max99 Commun Niv1">


Ces classes correspondent aux options auxquelles l'item appartient. Du coup, quand vous créez votre item, vous devez vous rendre dans les options et regarder quel "name" vous avez mis pour identifier les options auxquelles l'item appartient et vous le mettez dans la classe de l'item.

Un item peut appartenir à plusieurs options de catégories différentes et même d'une même catégorie.

Ici, j'ai 4 classes parce que l'item appartient à 4 options, soit Arme, Max99, Commun et Niv1. Cela fait que l'item appartient à ces options : Arme, Niveau 1, Moins de 100$ et Commun.

Vous pouvez changez l'image de l'item en mettant le lien de votre image dans "URL DE ITEM".
Vous pouvez également changer le nom de l'item et ses attibuts (Type, niveau, rareté).
Vous devez remplacer le XXX par le prix individuel (en chiffres, tous collés) de l'item.




Avec ces informations, vous devriez être capable de personnaliser le reste par vous-même, soit optimiser le menu avec les catégories et options que vous voulez ainsi qu'ajouter les items Wink



3. Activer les formulaires externes


Il y a une vérification par Forumactif qui a pour but d'éviter le spam et qui bloque les messages créés dans des formulaires qui ne sont pas ceux de base de Forumactif. Du coup, si vous ne suivez pas cette étape, le formulaire rempli vous retournera sur une page qui dira "erreur technique n°230" à la place d'envoyer directement le message.

Pour éviter cela, vous devez vous rendre sur :
> Panneau d'administration
> > Général
> > > Forum
> > > > Sécurité

Et vous devez cocher "Non" à la question "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum". Vous enregistrez et c'est fait !

L'erreur n°230 ne devrait maintenant plus vous causer problème ~



4. Mettre la boutique dans un iframe


Maintenant que la page HTML est créée avec la boutique, il faut la mettre accessible aux membres.

Pour cela, vous devez vous rendre là où vous voulez que la boutique soit et y mettre le code suivant :
Code:
<iframe style="display: block; height: 1000px; width: 700px; margin: auto;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>


Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre boutique), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink

Il se peut que vous ayez à modifier la largeur (width) ou la hauteur (height) pour éviter qu'il y ait des barres de défilement (scroll)





C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous avez besoin d'aide pour personnaliser le code.

À plus !

Onyx

Bestiaire et Herbier avec triage - Lun 4 Juil 2016 - 6:55




Bestiaire et Herbier avec triage


Salut !

Suite à la demande de Myosotis (qui s'était inspiré de ce bestiaire et cet herbier faits par Kamuy Sinen), j'ai fait un bestiaire et un herbier. Pour ceux qui ne le savent pas, un herbier est un recueil des végétaux d'un certain territoire. Quant au bestiaire, il s'agit d'un recueil des animaux/créatures d'un territoire.

Pour voir l'aperçu du Bestiaire : cliquez ici.
Pour voir l'aperçu de l'Herbier : cliquez ici.

Effet spécial 1
Quand on clique sur une catégorie, les animaux/végétaux sont triés et seuls ceux de la catégorie que vous avez sélectionnée apparaîssent. Vous pouvez personnaliser le code pour mettre les catégories que vous souhaitez.

Effet spécial 2
Si vous avez trop d'options dans le menu, vous pouvez rajouter un petit script qui vous permettra de réduire les menus et de les ouvrir en cliquant dessus pour qu'ils prennent moins de place.


Ce LS est en quatre parties.
  • Tout d'abord, nous allons créer le bestiaire/herbier dans une page HTML.
  • Ensuite, nous allons voir comment le personnaliser.
  • Puis, nous allons voir comment ajouter l'option pour que les menus soient réduits.
  • Enfin, nous allons mettre le bestiaire/herbier dans un iframe pour le rendre accessible.


Laisser le crédit vers Never-Utopia est obligatoire.


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



1. Créer le bestiaire/herbier (Page HTML)


Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre bestiaire/herbier.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML

Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)".
On choisit un titre quelconque.
On coche "Non" aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?".

Pour le bestiaire, on met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="author" content="Onyx" />
  <title>Bestiaire</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
  <link href="https://fonts.googleapis.com/css?family=Homemade+Apple|Architects+Daughter" rel="stylesheet" />
  <style type="text/css">
    /*Corps*/
    body {
    margin: 0px;
    background: #553723 url('https://wallpaperlayer.com/img/2015/5/simple-brown-background-8083-8397-hd-wallpapers.jpg');
    background-size: cover;
    }
    /*Le bloc entier du bestiaire*/
    #bestiaire {
    position: relative;
    padding-bottom: 10px;
    height: 590px;
    margin: 10px auto;
    width: 885px;
    overflow: hidden;
    background: url('https://img11.hostingpics.net/pics/405891bla.png');
    font-size: 13px;
    font-family: 'Homemade Apple', cursive;
    color: #705733;
    }
    /*Menu de gauche*/
    #menu {
    float: left;
    margin: 30px 0px 0px 80px;
    width: 350px;
    }
    .one_menu {
    float: left;
    margin: 0px 5px 5px 5px;
    width: 165px;
    }
    /*Titres des catégories*/
    .menu_title {
    display: inline-block;
    margin-left: 20px;
    border-bottom: 1px solid #705733;
    color: #705733;
    font-weight: bold;
    font-size: 14px;
    }
    #menu ul {
    margin-top: 5px;
    margin-bottom: 10px;
    }
    .menus + ul {
    overflow: hidden;
    transition: 0.8s;
    -webkit-transition: 0.5s;
    }
    /*Images pour les menus rétrécis*/
    .menus img {
    display: none;
    position: relative;
    bottom: -10px;
    opacity: 0.8;
    }
    /*Catégories*/
    .bestonglet {
    margin-left: -20px;
    color: #705733;
    list-style-type: circle;
    }
    /*Catégories non-actives*/
    .bestonglet_0 {
    cursor: pointer;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    }
    /*Catégories non-actives survolées*/
    .bestonglet_0:hover {
    margin-left: -10px;
    }
    /*Catégorie active*/
    .bestonglet_1 {
    margin-left: -10px;
    color: #2b2010;
    font-weight: bold;
    }
    /*Partie de droite*/
    #middle {
    float: right;
    width: 330px;
    margin: 30px 85px 0px 0px;
    height: 465px;
    text-align: center;
    }
    /*Cache le contenu des catégories non-actives*/
    .contenu_bestonglet {
    display: none;
    height: 465px;
    padding-right: 5px;
    overflow: auto;
    }
    /*Center les créatures*/
    .contenu_bestonglet > div {
    margin: 0px auto;
    padding: 10px 0px;
    font-family: 'Architects Daughter', cursive;
    font-size: 14px;
    border-top: 5px double #705733;
    }
    /*Center les créatures*/
    .contenu_bestonglet > div:nth-child(1) {
    padding: 0px 0px 10px 0px;
    border-top: none;
    }
    /*Nom de créature*/
    .creature_name {
    margin: auto;
    color: #a68e68;
    text-shadow: -1px -1px 1px #000000;
    font-size: 24px;
    font-family: cambria;
    text-transform: uppercase;
    }
    /*Bloc de créacture sous le nom*/
    .creature_bloc {
    margin: auto;
    }
    /*Image de créature*/
    .creature_bloc > img:first-child {
    margin: auto;
    width: 300px;
    border: 2px solid #705733;
    height: 150px;
    }
    /*Bloc de description de créature*/
    .creature_in {
    margin: auto;
    text-align: center;
    width: 300px;
    }
    /*Caractéristiques de la créature*/
    .creature_caract {
    font-weight: bold;
    }
    /*Partie de droite de la description de créature*/
    .creature_desc {
    text-align: justify;
    }
    /*Credit*/
    .credits {
    font-size: 12px;
    position: absolute;
    width: 200px;
    bottom: 30px;
    left: 150px;
    font-family: verdana;
    color: #503713;
    }
    a {
    text-decoration: none;
    color: #503713;
    }
    a:hover {
    color: darkred;
    }
  </style>
  <script type="text/javascript">
    //<!--
      $(function() {
        /*Tableau qui va contenir tous les noms de catégories*/
        var nom = [];
        /*Total de noms de catégories*/
        var nbnoms = $('#menu').find('li span').length;
        /*On met les noms de catégories dans le tableau*/
        for (i = 0; i < nbnoms; i++) {
          nom[i] = $('#menu').find('li span').eq(i).attr('class');
        }
        /*Nombre de bêtes*/
        var nbbetes = $('#contenu_bestonglet_Tout').children('div').length;
        /*Pour chaque catégories, on va regarder chaque bête pour les trier dans les bonnes catégories*/
        for (i = 0; i < nbnoms; i++) {
          var nom2 = nom[i];
          for (y = 0; y < nbbetes; y++) {
            var nom3 = $('#contenu_bestonglet_Tout').children('div').eq(y);
            if (nom3.hasClass(nom2)) {
              var copiecrea = nom3.clone(true);
              var oucoller = $('#contenu_bestonglet_'+nom2);
              $(copiecrea).appendTo(oucoller);
            }
          }
        }
      });
    //-->
  </script>
  <script type="text/javascript">
    //<!--
    function change_bestonglet(name) {
        document.getElementById('bestonglet_'+anc_bestonglet).className = 'bestonglet_0 bestonglet';
        document.getElementById('bestonglet_'+name).className = 'bestonglet_1 bestonglet';
        document.getElementById('contenu_bestonglet_'+anc_bestonglet).style.display = 'none';
        document.getElementById('contenu_bestonglet_'+name).style.display = 'block';
        anc_bestonglet = name;
      }
    //-->
  </script>
</head>
<body>
  <div id="bestiaire">
    <div class="credits">Par Onyx de <a href="http://www.never-utopia.com/forum" target="_blank" >Never-Utopia</a></div>
    <div id="menu">

      <!-- DÉBUT 1ERE LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Type<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_1 bestonglet" id="bestonglet_Tout" onclick="javascript:change_bestonglet('Tout');">
            <span class="Tout">Tous les types</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Mammi" onclick="javascript:change_bestonglet('Mammi');">
            <span class="Mammi">Mammifères</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Oiseaux" onclick="javascript:change_bestonglet('Oiseaux');">
            <span class="Oiseaux">Oiseaux</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Poissons" onclick="javascript:change_bestonglet('Poissons');">
            <span class="Poissons">Poissons</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Reptiles" onclick="javascript:change_bestonglet('Reptiles');">
            <span class="Reptiles">Reptiles</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Amphibiens" onclick="javascript:change_bestonglet('Amphibiens');">
            <span class="Amphibiens">Amphibiens</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Insectes" onclick="javascript:change_bestonglet('Insectes');">
            <span class="Insectes">Insectes et Arachnides</span>
          </li>
        </ul>
      </div>
      <!-- FIN 1ERE LISTE -->

      <!-- DÉBUT 2E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Habitat<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Jungle" onclick="javascript:change_bestonglet('Jungle');">
            <span class="Jungle">Jungle</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Plaines" onclick="javascript:change_bestonglet('Plaines');">
            <span class="Plaines">Plaines</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Foret" onclick="javascript:change_bestonglet('Foret');">
            <span class="Foret">Forêt</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Montagne" onclick="javascript:change_bestonglet('Montagne');">
            <span class="Montagne">Montagne</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Glace" onclick="javascript:change_bestonglet('Glace');">
            <span class="Glace">Glaciers</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Desert" onclick="javascript:change_bestonglet('Desert');">
            <span class="Desert">Désert</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Volcan" onclick="javascript:change_bestonglet('Volcan');">
            <span class="Volcan">Volcan</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Ocean" onclick="javascript:change_bestonglet('Ocean');">
            <span class="Ocean">Océans et Mers</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Lac" onclick="javascript:change_bestonglet('Lac');">
            <span class="Lac">Lacs et Rivières</span>
          </li>
        </ul>
      </div>
      <!-- FIN 2E LISTE -->
      <div style="clear: both;"></div>

      <!-- DÉBUT 3E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Rareté<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Commun" onclick="javascript:change_bestonglet('Commun');">
            <span class="Commun">Commun</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Rare" onclick="javascript:change_bestonglet('Rare');">
            <span class="Rare">Rare</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Tresrare" onclick="javascript:change_bestonglet('Tresrare');">
            <span class="Tresrare">Très rare</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Myth" onclick="javascript:change_bestonglet('Myth');">
            <span class="Myth">Mythique</span>
          </li>
        </ul>
      </div>
      <!-- FIN 3E LISTE -->

      <!-- DÉBUT 4E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Dangerosité<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Ino" onclick="javascript:change_bestonglet('Ino');">
            <span class="Ino">Inoffensif</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Faible" onclick="javascript:change_bestonglet('Faible');">
            <span class="Faible">Faible</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Danger" onclick="javascript:change_bestonglet('Danger');">
            <span class="Danger">Dangereux</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Mortel" onclick="javascript:change_bestonglet('Mortel');">
            <span class="Mortel">Mortel</span>
          </li>
        </ul>
      </div>
      <!-- FIN 4E LISTE -->

      <div style="clear: both;"></div>
    </div>
    <div id="middle">
      <div class="contenu_bestonglet" id="contenu_bestonglet_Tout">
       
      <!-- DÉBUT 1ER ANIMAL -->
        <div class="Mammi Jungle Commun Ino">
          <div class="creature_name">Nom de l'animal</div>
          <div class="creature_bloc">
            <img src="http://img15.hostingpics.net/pics/923631761.png" />
            <div class="creature_in">
              <div class="creature_caract">
                Mammifère - Jungle - Commun - Inoffensif
              </div>
              <div class="creature_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 1ER ANIMAL -->
       
        <!-- DÉBUT 2E ANIMAL -->
        <div class="Mammi Plaines Rare Faible">
          <div class="creature_name">Nom de l'animal</div>
          <div class="creature_bloc">
            <img src="http://img15.hostingpics.net/pics/169146302.png" />
            <div class="creature_in">
              <div class="creature_caract">
                Mammifère - Plaines - Rare - Faible
              </div>
              <div class="creature_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 2E ANIMAL -->

        <!-- DÉBUT 3E ANIMAL -->
        <div class="Oiseaux Foret Tresrare Danger">
          <div class="creature_name">Nom de l'animal</div>
          <div class="creature_bloc">
            <img src="http://img15.hostingpics.net/pics/380578583.png" />
            <div class="creature_in">
              <div class="creature_caract">
                Oiseau - Forêt - Très rare - Dangereux
              </div>
              <div class="creature_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 3E ANIMAL -->

      </div>

      <div class="contenu_bestonglet" id="contenu_bestonglet_Mammi"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Oiseaux"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Poissons"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Reptiles"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Amphibiens"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Insectes"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Jungle"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Plaines"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Foret"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Montagne"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Glace"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Desert"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Volcan"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Ocean"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Lac"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Commun"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Rare"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Tresrare"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Myth"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Ino"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Faible"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Danger"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Mortel"></div>

    </div>
    <div style="clear: both;"></div>
  </div>
<script type="text/javascript">
  //<!--
    var anc_bestonglet = 'Tout';
    change_bestonglet(anc_bestonglet);
  //-->
</script>
</body>
</html>


Pour l'herbier, on met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="author" content="Onyx" />
  <title>Herbier</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
  <link href="https://fonts.googleapis.com/css?family=Homemade+Apple|Architects+Daughter" rel="stylesheet" />
  <style type="text/css">
    /*Corps*/
    body {
    margin: 0px;
    background: #553723 url('https://img11.hostingpics.net/pics/782158bla.jpg');
    background-size: cover;
    }
    /*Le bloc entier du herbier*/
    #herbier {
    position: relative;
    padding-bottom: 10px;
    height: 590px;
    margin: 10px auto;
    width: 885px;
    overflow: hidden;
    background: url('https://img11.hostingpics.net/pics/740116bla.png');
    font-size: 13px;
    font-family: 'Homemade Apple', cursive;
    color: #0f5228;
    }
    /*Menu de gauche*/
    #menu {
    float: left;
    margin: 30px 0px 0px 80px;
    width: 350px;
    }
    .one_menu {
    float: left;
    margin: 0px 5px 5px 5px;
    width: 165px;
    }
    /*Titres des catégories*/
    .menu_title {
    display: inline-block;
    margin-left: 20px;
    border-bottom: 1px solid #0f5228;
    color: #0f5228;
    font-weight: bold;
    font-size: 14px;
    }
    #menu ul {
    margin-top: 5px;
    margin-bottom: 10px;
    }
    .menus + ul {
    overflow: hidden;
    transition: 0.8s;
    -webkit-transition: 0.5s;
    }
    /*Images pour les menus rétrécis*/
    .menus img {
    display: none;
    position: relative;
    bottom: -10px;
    opacity: 0.8;
    }
    /*Catégories*/
    .herbonglet {
    margin-left: -20px;
    color: #0f5228;
    list-style-type: circle;
    }
    /*Catégories non-actives*/
    .herbonglet_0 {
    cursor: pointer;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    }
    /*Catégories non-actives survolées*/
    .herbonglet_0:hover {
    margin-left: -10px;
    }
    /*Catégorie active*/
    .herbonglet_1 {
    margin-left: -10px;
    color: #093319;
    font-weight: bold;
    }
    /*Partie de droite*/
    #middle {
    float: right;
    width: 330px;
    margin: 30px 85px 0px 0px;
    height: 465px;
    text-align: center;
    }
    /*Cache le contenu des catégories non-actives*/
    .contenu_herbonglet {
    display: none;
    height: 465px;
    padding-right: 5px;
    overflow: auto;
    }
    /*Center les plantes*/
    .contenu_herbonglet > div {
    margin: 0px auto;
    padding: 10px 0px;
    font-family: 'Architects Daughter', cursive;
    font-size: 14px;
    border-top: 5px double #0f5228;
    }
    /*Center les plantes*/
    .contenu_herbonglet > div:nth-child(1) {
    padding: 0px 0px 10px 0px;
    border-top: none;
    }
    /*Nom de la plante*/
    .plante_name {
    margin: auto;
    color: #4e9f4c;
    text-shadow: -1px -1px 1px #000000;
    font-size: 24px;
    font-family: cambria;
    text-transform: uppercase;
    }
    /*Bloc de la plante sous le nom*/
    .plante_bloc {
    margin: auto;
    }
    /*Image de plante*/
    .plante_bloc > img:first-child {
    margin: auto;
    width: 300px;
    border: 2px solid #0f5228;
    height: 150px;
    }
    /*Bloc de description de la plante*/
    .plante_in {
    margin: auto;
    text-align: center;
    width: 300px;
    }
    /*Caractéristiques de la plante*/
    .plante_caract {
    font-weight: bold;
    }
    /*Partie de droite de la description de la plante*/
    .plante_desc {
    text-align: justify;
    }
    /*Credit*/
    .credits {
    font-size: 12px;
    position: absolute;
    width: 200px;
    bottom: 30px;
    left: 150px;
    font-family: verdana;
    color: #0f5228;
    }
    a {
    text-decoration: none;
    color: #0f5228;
    }
    a:hover {
    color: #198842;
    }
  </style>
  <script type="text/javascript">
    //<!--
      $(function() {
        /*Tableau qui va contenir tous les noms de catégories*/
        var nom = [];
        /*Total de noms de catégories*/
        var nbnoms = $('#menu').find('li span').length;
        /*On met les noms de catégories dans le tableau*/
        for (i = 0; i < nbnoms; i++) {
          nom[i] = $('#menu').find('li span').eq(i).attr('class');
        }
        /*Nombre de bêtes*/
        var nbbetes = $('#contenu_herbonglet_Tout').children('div').length;
        /*Pour chaque catégories, on va regarder chaque bête pour les trier dans les bonnes catégories*/
        for (i = 0; i < nbnoms; i++) {
          var nom2 = nom[i];
          for (y = 0; y < nbbetes; y++) {
            var nom3 = $('#contenu_herbonglet_Tout').children('div').eq(y);
            if (nom3.hasClass(nom2)) {
              var copiecrea = nom3.clone(true);
              var oucoller = $('#contenu_herbonglet_'+nom2);
              $(copiecrea).appendTo(oucoller);
            }
          }
        }
      });
    //-->
  </script>
  <script type="text/javascript">
    //<!--
    function change_herbonglet(name) {
        document.getElementById('herbonglet_'+anc_herbonglet).className = 'herbonglet_0 herbonglet';
        document.getElementById('herbonglet_'+name).className = 'herbonglet_1 herbonglet';
        document.getElementById('contenu_herbonglet_'+anc_herbonglet).style.display = 'none';
        document.getElementById('contenu_herbonglet_'+name).style.display = 'block';
        anc_herbonglet = name;
      }
    //-->
  </script>
</head>
<body>
  <div id="herbier">
    <div class="credits">Par Onyx de <a href="http://www.never-utopia.com/forum" target="_blank" >Never-Utopia</a></div>
    <div id="menu">

      <!-- DÉBUT 1ERE LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Usage<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="herbonglet_1 herbonglet" id="herbonglet_Tout" onclick="javascript:change_herbonglet('Tout');">
            <span class="Tout">Tous</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Alimentaire" onclick="javascript:change_herbonglet('Alimentaire');">
            <span class="Alimentaire">Pour nourrir</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Medecine" onclick="javascript:change_herbonglet('Medecine');">
            <span class="Medecine">Pour soigner</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Poison" onclick="javascript:change_herbonglet('Poison');">
            <span class="Poison">Pour empoisonner</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Outil" onclick="javascript:change_herbonglet('Outil');">
            <span class="Outil">Pour fabriquer</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Joli" onclick="javascript:change_herbonglet('Joli');">
            <span class="Joli">Pour décorer</span>
          </li>
        </ul>
      </div>
      <!-- FIN 1ERE LISTE -->

      <!-- DÉBUT 2E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Floraison<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Printemps" onclick="javascript:change_herbonglet('Printemps');">
            <span class="Printemps">Printemps</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Ete" onclick="javascript:change_herbonglet('Ete');">
            <span class="Ete">Été</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Automne" onclick="javascript:change_herbonglet('Automne');">
            <span class="Automne">Automne</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Hiver" onclick="javascript:change_herbonglet('Hiver');">
            <span class="Hiver">Hiver</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Annuel" onclick="javascript:change_herbonglet('Annuel');">
            <span class="Annuel">Toute l'année</span>
          </li>
        </ul>
      </div>
      <!-- FIN 2E LISTE -->
      <div style="clear: both;"></div>
     
      <!-- DÉBUT 3E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Habitat<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Sub" onclick="javascript:change_herbonglet('Sub');">
            <span class="Sub">Sub-Tropical</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Tropical" onclick="javascript:change_herbonglet('Tropical');">
            <span class="Tropical">Tropical</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Foret" onclick="javascript:change_herbonglet('Foret');">
            <span class="Foret">Forêt</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Montagne" onclick="javascript:change_herbonglet('Montagne');">
            <span class="Montagne">Montagne</span>
          </li>
        </ul>
      </div>
      <!-- FIN 3E LISTE -->

      <!-- DÉBUT 4E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Rareté<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Commun" onclick="javascript:change_herbonglet('Commun');">
            <span class="Commun">Commun</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Rare" onclick="javascript:change_herbonglet('Rare');">
            <span class="Rare">Rare</span>
          </li>
          <li class="herbonglet_0 herbonglet" id="herbonglet_Tresrare" onclick="javascript:change_herbonglet('Tresrare');">
            <span class="Tresrare">Très rare</span>
          </li>
        </ul>
      </div>
      <!-- FIN 4E LISTE -->
      <div style="clear: both;"></div>
    </div>
    <div id="middle">
      <div class="contenu_herbonglet" id="contenu_herbonglet_Tout">
       
      <!-- DÉBUT 1ERE PLANTE -->
        <div class="Alimentaire Ete Foret Commun">
          <div class="plante_name">Nom de la plante</div>
          <div class="plante_bloc">
            <img src="http://www.onlinetransilvania.ro/wp-content/uploads/2014/03/IMG_9857-1300x866-450x150-croped.jpg" />
            <div class="plante_in">
              <div class="plante_caract">
                Pour nourrir - Éte - Forêt - Commun
              </div>
              <div class="plante_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 1ERE PLANTE -->
       
        <!-- DÉBUT 2E PLANTE -->
        <div class="Poison Printemps Foret Tresrare">
          <div class="plante_name">Nom de la plante</div>
          <div class="plante_bloc">
            <img src="http://www.sylvie-tribut-astrologue.com/wp-content/uploads/2015/09/12-LE-PISSENLIT.jpg" />
            <div class="plante_in">
              <div class="plante_caract">
                Pour empoisonner - Printemps<br />Forêt - Très rare
              </div>
              <div class="plante_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 2E PLANTE -->

        <!-- DÉBUT 3E PLANTE -->
        <div class="Medecine Hiver Montagne Rare">
          <div class="plante_name">Nom de la plante</div>
          <div class="plante_bloc">
            <img src="http://victorianviolas.co.uk/wp-content/uploads/2015/10/parade-closeup-450x150.jpg" />
            <div class="plante_in">
              <div class="plante_caract">
                Pour soigner - Hiver - Montagne - Rare
              </div>
              <div class="plante_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 3E PLANTE -->

      </div>
     
      <div class="contenu_herbonglet" id="contenu_herbonglet_Alimentaire"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Medecine"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Poison"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Outil"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Joli"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Printemps"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Ete"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Automne"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Hiver"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Annuel"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Sub"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Tropical"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Foret"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Montagne"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Commun"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Rare"></div>
      <div class="contenu_herbonglet" id="contenu_herbonglet_Tresrare"></div>
     
    </div>
    <div style="clear: both;"></div>
  </div>
<script type="text/javascript">
  //<!--
    var anc_herbonglet = 'Tout';
    change_herbonglet(anc_herbonglet);
  //-->
</script>
</body>
</html>


Lorsque vous modifiez votre formulaire, il faut cliquer sur le triple engrenage (), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.



2. Personnaliser le bestiaire/herbier


Il y a plusieurs parties au code. Il y a la section "menu" avec des catégories et des onglets où il y a des sous-catégories. Puis, il y a la section "contenu d'onglet" de "Tout" où il y a tous les végétaux/animaux. Enfin, il y a la section "contenu d'onglets" des sous-catégories dans lesquels les végétaux/animaux sont triés.

Le menu et divisé en plusieurs carégories et sous-catégories.

Voici un exemple du bestiaire de 1 catégorie qui a 4 sous-catégories :
Code:
      <!-- DÉBUT 3E LISTE -->
      <div class="one_menu">
        <span class="menu_title menus">Rareté<img src="http://img4.hostingpics.net/pics/606073iconarrowdownb128.png" alt="Image à remplacer" /></span>
        <ul>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Commun" onclick="javascript:change_bestonglet('Commun');">
            <span class="Commun">Commun</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Rare" onclick="javascript:change_bestonglet('Rare');">
            <span class="Rare">Rare</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Tresrare" onclick="javascript:change_bestonglet('Tresrare');">
            <span class="Tresrare">Très rare</span>
          </li>
          <li class="bestonglet_0 bestonglet" id="bestonglet_Myth" onclick="javascript:change_bestonglet('Myth');">
            <span class="Myth">Mythique</span>
          </li>
        </ul>
      </div>
      <!-- FIN 3E LISTE -->


Le premier span est le nom de la catégorie. Ensuite, on a une liste qui contient les sous-catégories.

Chaque sous-catégorie est sous cette forme :
Code:
        <li class="bestonglet_0 bestonglet" id="bestonglet_Myth" onclick="javascript:change_bestonglet('Myth');">
          <span class="Myth">Mythique</span>
        </li>


À noter qu'il y a 3 endroits dans cette sous-catégorie où vous trouvez le mot "Myth", soit dans le "id" du "li", dans les parenthèses du "onclick" du "li"dans dans la "class" du "span" qui entoure le nom de la catégorie.

Ce mot, "Myth", permet d'identifier cette sous-catégorie et permettra aussi d'identifier l'animal qui y appartiendra alors c'est important qu'il soit pareil aux 3 endroits.




Ensuie, on passe à la section où il y a tous les animaux (contenu d'onlglet "Tout"). Vous y trouverez des animaux sous cette forme :
Code:
        <!-- DÉBUT 3E ANIMAL -->
        <div class="Oiseaux Foret Tresrare Danger">
          <div class="creature_name">Nom de l'animal</div>
          <div class="creature_bloc">
            <img src="http://img15.hostingpics.net/pics/380578583.png" />
            <div class="creature_in">
              <div class="creature_caract">
                Oiseau - Forêt - Très rare - Dangereux
              </div>
              <div class="creature_desc">
                Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
              </div>
            </div>
          </div>
        </div>
        <!-- FIN 3E ANIMAL -->


Vous voyez que la classe de la première div contient plusieurs classes :
Code:
        <div class="Oiseaux Foret Tresrare Danger">


Ces classes correspondent aux sous-catégories auxquelles l'animal appartient. Du coup, quand vous créez votre animal, vous devez vous rendre dans les sous-catégories et regarder quel "mot" vous avez mis pour identifier les sous-catégories auxquelles l'animal contient et vous le mettez dans la classe de l'animal.

Ici, j'ai 4 classes parce que l'animal appartient à 4 sous-catégories, soit Oiseaux, Forêt, Très rare et Dangereux.




Enfin, vous avez les contenus d'onglets vides où les animaux seront distribués selon les sous-catégories auxquelles ils appartiennent :
Code:
      <div class="contenu_bestonglet" id="contenu_bestonglet_Mammi"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Oiseaux"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Poissons"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Reptiles"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Amphibiens"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Insectes"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Jungle"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Plaines"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Foret"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Montagne"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Glace"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Desert"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Volcan"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Ocean"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Lac"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Commun"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Rare"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Tresrare"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Myth"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Ino"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Faible"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Danger"></div>
      <div class="contenu_bestonglet" id="contenu_bestonglet_Mortel"></div>


Encore une fois, à la fin du "id" de chaque contenu d'onglet, vous avez le "nom" propre à chaque sous-catégorie.

Donc si je résume, vous devez choisir un certain "nom" (qui ne doit pas avoir d'espaces ou d'accents idéalement) qui doit être à 3 fois dans l'onglet de la sous-catégorie, 1 fois dans la classe des animaux qui appartiennent à la sous-catégorie et 1 fois dans l'id dans un contenu d'onglet où seront triés les animaux.

Avec ces informations, vous devriez être capable de personnaliser le reste par vous-même Wink

Note : J'ai pris des exemples avec le bestiaire, sauf que l'herbier est identique à l'exception du nom de certaines classes. Du coup, vous devriez être capable de vous débrouiller ^^



3. Option pour réduire les menus


Il suffit simplement d'aller juste avant la fermeture de la balise "body", soit juste avant cela :
Code:
</body>
</html>


Et d'y rajouter ce bout de code :
Code:
<script text="javascript">
  //<!--
    $('.menus').find('img').css("display", "inline-block");
    $('.menus').find('img').css("margin-left", "5px");
    $('.menus').css("cursor", "pointer");
    $('.menus').next().css("max-height", "0px");
    $('.menus').click(function(){
      $('.menus').css("cursor", "pointer");
      $('.menus').next().css("max-height", "0px");
      var bam = $(this).next().find('li').length;
      var boum = (bam * 28) * 45;
      $(this).next().css("max-height", boum+"px");
      $(this).css("cursor", "default");
     });
  //-->
</script>




4. Mettre le bestiaire/herbier dans un iframe


Maintenant que la page HTML est créée avec le bestiaire/herbier, il faut le mettre accessible aux membres.

Pour cela, vous devez vous rendre là où vous voulez que le bestiaire/herbier soit et y mettre le code suivant :
Code:
<iframe style="display: block; height: 600px; width: 885px; margin: auto;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>


Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre bestiaire/herbier), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink

Vous aurez peut-être besoin de modifier le height (la hauteur) et le width (la largeur) pour qu'il n'y a pas de barre de défilement (scroll).





C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous avez besoin d'aide pour personnaliser le code.

À plus !

Navigation - Enlever la recherche rapide au clic sur Rechercher - Ven 20 Mai 2016 - 13:07



Supprimer la boite de Recherche rapide de la navigation



Hello :)

Bien qu'étant pratique, on veut parfois enlever la petite boite de recherche qui s'ouvre quand on clique sur "Rechercher", et ainsi arriver directement à la page de Recherche avancée ^-^

Exemple


Il s'agit de retirer cette petite box au clic sur "Rechercher" :

Comment ça marche ?



On va d'abord regarder comment Forumactif fait notre lien "Rechercher" actuel.
J'ai récupéré le code grâce à l'inspecteur d'élément. Je vous conseille de jeter un coup d'oeil au tuto sur les Outils de débug par valtena_ethan.

Le HTML ressemble à ça :
Code:
<a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;">
  <img id="i_icon_mini_search" src="URL-IMAGE" alt="Rechercher" title="Rechercher">Rechercher
</a>


La partie qui ouvre la boite de recherche rapide est celle ci :
Code:
onclick="showhide(document.getElementById('search_menu')); return false;"


Notre lien a un attribut "onclick" avec une valeur qui lui dit de montrer / masquer la boite de recherche.

Du coup, si vous avez bien suivi, il suffit d'enlever cet attribut onclick, et voilà, soucis réglé !

Code


PA > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript.

Il faut vérifier que "Activer la gestion des codes Javascript" a bien "Oui" coché.

Ensuite, on va créer un nouveau JS, avec un nom clair, par exemple "Barre de navigation - enlever boite de recherche" et cocher "Sur toutes les pages" car on veut que cela fonctionne partout. :ange:

Code:
/* NAVIGATION - ENLEVER LA BOX DE RECHERCHE RAPIDE */
$(function(){
  $(".mainmenu[href='/search']").removeAttr("onclick");
});


Explications


KESS-KI-FÉ-CE-CODE ?
D'abord, on a ce petit bout de code qui dit au navigateur "Hey, pour ce qu'il y a dans ce bloc, attends que ma page soit prête pour que je la manipule"
Code:
$(function(){
  /* MON CODE QUI ATTEND ICI */
});


Ensuite on sélectionne les éléments avec la classe "mainmenu" avec le lien vers "/search" :
Code:
$(".mainmenu[href='/search']")


Et on enlève l'attribut "onclick"
Code:
.removeAttr("onclick");


Par simplicité, j'utilise jQuery, mais on pourrait le faire tout aussi simplement en js "simple". :toto: Vous pouvez lire le tuto de Yui à ce sujet :  ForumActif, JavaScript et jQuery : les bases générales

En cas de soucis, je vous invite à aller poster dans "Problème avec mon code"

Onyx

Changement automatique du rang selon le groupe - Lun 18 Avr 2016 - 2:12




Changement automatique du rang selon le groupe


Salut !

Pour certains administrateurs, il y a beaucoup de changements de groupes et de rangs. Déjà que changer le groupe de 15 personnes par jour prend du temps, devoir en plus changer leur rang à chaque fois ne rend pas les choses très faciles.

Du coup, j'ai créé une petite astuce pour tricher et lier les rangs au groupe de la personne à la demande de Darkius.

Plus précisément, cette astuce remplace le rang et l'image de rang par un "faux titre de rang" et une "fausse image de rang" et un javascript va "regarder la couleur du pseudo de la personne", trouvera le rang et l'image de rang associés à ce groupe (à cette couleur) et le mettra dans l'espace du "faux titre de rang" et de la "fausse image de rang".

Attention :
- Si une personne fait partie de plusieurs groupes, le groupe qui apparaîtra sera celui dont elle a la couleur, pas les autres.
- Cela agit seulement dans les messages, pas pour le rang dans les profils. Je recommande de tout simplement supprimer les rangs pour qu'ils ne s'affichent nul part. Comme ça, les seuls rangs qui s'afficheront seront les faux.


Ce LS est en trois parties.
  • Tout d'abord, nous allons créer l'espace pour les faux rangs dans le template des messages.
  • Puis, nous allons ajouter le javascript qui permet de faire fonctionner cette astuce.
  • Enfin, nous allons voir comment mettre vos propres rangs et groupes dans le javascript.


- La version du forum est PhpBB2.
- Il est possible (mais pas toujours) que l'astuce ne fonctionne pas si votre template a déjà été modifié. Si c'est le cas, vous pouvez aller dans "personnalisations" ou "problème avec mon code" pour recevoir de l'aide
Mettre un crédit vers Never-Utopia est obligatoire.


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



1. Ajouter l'espace des "faux rangs" (Template Viewtopic_Body)


Nous allons commencer par aller dans les templates, plus précisément dans le template "viewtopic_body".

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > VIEWTOPIC_BODY

Puis, on chercher cette variable :
Code:
{postrow.displayed.POSTER_RANK}


Qu'on va remplacer par ceci :
Code:
<span class="rangtitre"></span>



Et on va trouver cette variable :
Code:
{postrow.displayed.RANK_IMAGE}


Qu'on va remplacer par ceci :
Code:
<span class="rangimg"></span>




2. Ajouter le javascript


Maintenant que les rangs normaux ont été remplacés par les faux rangs, on va aller ajouter le javascript.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Système de faux rangs".
On choisit le placement "Sur les sujets" (c'est super important).

Enfin, on met le javascript suivant et on enregistre :
Code:
$(function () {
  var groupcouleur = [
  "rgb(144, 55, 199)",
  "rgb(162, 176, 102)",
  "rgb(133, 199, 194)",
  "rgb(67, 145, 181)",
  "rgb(10, 163, 97)",
  ];

  var group1 = [
  "Élèves",
  "Professeurs",
  "Personnel",
  "Habitants",
  "PNJ",
  ];

  var group2 = [
  "http://img11.hostingpics.net/pics/215624jaime.png",
  "http://illiweb.com/fa/subsilver/icon_pm.gif",
  "http://illiweb.com/fa/subsilver/icon_email.gif",
  "http://illiweb.com/fa/subsilver/icon_www.gif",
  "http://illiweb.com/fa/subsilver/icon_online_fr.gif",
  ];

  var nbgroup = groupcouleur.length;
  $('tr.post > td span.name > strong > a > span > strong').each(function () {
    var rang1 = $(this).closest('tr.post').find('td:first').find('.rangtitre');
    var rang2 = $(this).closest('tr.post').find('td:first').find('.rangimg');
    var uncolor = $(this).css('color');
    for (i=0; i < nbgroup; i++) {
      if (uncolor == groupcouleur[i]) {
        $(rang1).html(group1[i]);
        $(rang1).css('color', groupcouleur[i]);
        $(rang2).html('<img src="'+group2[i]+'" alt="Image à remplacer" />');
      }
    }
  });
});




3. Adapter le javascript à vos propres groupes et rangs


Voici le fonctionnement du javascript :
Il va aller "regarder la couleur du pseudo". Ensuite, il consulte une liste des couleurs des groupes (que vous allez devoir mettre vous-même) pour savoir le groupe auquel la couleur du nom correspond. Puis, il regarde la liste de rang (que vous devrez faire vous-même) et il ajoute le titre du rang et l'image du rang qui correspond au groupe.

On va décortiquer le javascript pour savoir où on doit modifier quoi Wink





Partie des couleurs des groupes qui ont des rangs

Si on décortique le javascript, la première partie, "groupcouleur", comporte la couleur de chacun des groupes en mode "rgb":
Code:
$(function () {
  var groupcouleur = [
  "rgb(144, 55, 199)", /*Couleur du 1er groupe*/
  "rgb(162, 176, 102)", /*Couleur du 2e groupe*/
  "rgb(133, 199, 194)", /*Couleur du 3e groupe*/
  "rgb(67, 145, 181)", /*Couleur du 4e groupe*/
  "rgb(10, 163, 97)", /*Couleur du 5e groupe*/
  ];


Vous devez aller dans chacun de vos groupes et copier/coller exactement la couleur qui appartient à chaque groupe. Vous verrez que la couleur est en mode "hex", soit quelque chose comme "#AD8H46". Or, le javascript utilise uniquement les codes en mode "rgb", tel que "rgb(173, 8, 70)", ce qui donne la même couleur.

Pour transférer vos codes de couleur "hex" en codes de couleur "rgb", vous pouvez utiliser ce site : http://www.javascripter.net/faq/hextorgb.htm . Bref, une fois que vous avez la couleur en "rgb", vous la mettez dans la partie "groupcouleur" pour chacun de vos groupes.





Partie des "faux titres de rang"

Ensuite, la deuxième partie, "group1", sert à mettre le titre de chacun des rangs : :
Code:
 var group1 = [
  "Élèves", /*Titre du 1er groupe*/
  "Professeurs", /*Titre du 2e groupe*/
  "Personnel", /*Titre du 3e groupe*/
  "Habitants", /*Titre du 4e groupe*/
  "PNJ", /*Titre du 5e groupe*/
  ];


À noter que le premier rang doit correspondre à la couleur du premier groupe que vous avez mis dans la section précédente et ainsi de suite.

D'ailleurs, si vous voulez personnaliser chacun des rangs, vous pouvez facilement mettre quelque chose comme :
Code:
 var group1 = [
  "<span style='color: red;'>Élèves</span>",
  "<span style='color: blue;'>Professeurs</span>",
  "<span style='color: orange;'>Personnel</span>",
  "<span style='color: purple;'>Habitants</span>",
  "<span style='color: green;'>PNJ</span>",
  ];


Ou encore :
Code:
 var group1 = [
  "<span class='nom_de_class1'>Élèves</span>",
  "<span class='nom_de_class2'>Professeurs</span>",
  "<span class='nom_de_class3'>Personnel</span>",
  "<span class='nom_de_class4'>Habitants</span>",
  "<span class='nom_de_class5'>PNJ</span>",
  ];






Partie des "fausses images de rang"

La troisième partie, "group2", sert à mettre l'url des images de rang pour chacun des groupes :
Code:
 var group2 = [
  "http://img11.hostingpics.net/pics/215624jaime.png", /*Image du 1er groupe*/
  "http://illiweb.com/fa/subsilver/icon_pm.gif", /*Image du 2e groupe*/
  "http://illiweb.com/fa/subsilver/icon_email.gif", /*Image du 3e groupe*/
  "http://illiweb.com/fa/subsilver/icon_www.gif", /*Image du 4e groupe*/
  "http://illiweb.com/fa/subsilver/icon_online_fr.gif", /*Image du 5e groupe*/
  ];


À noter que la première url d'image doit correspondre au premier titre du rang de la section précédente et à la couleur du premier groupe que tu as mis dans la section d'avant et ainsi de suite.





La partie où le javascript fait actuellement quelque chose

La dernière partie du javascript, soit le reste, sert à repérer la couleur du nom de l'utilisateur, de la comparer avec le groupcouleur et d'appliquer le titre de rang et l'image de rang qui correspond :
Code:
 /*On calcule le nombre de couleurs au total*/
  var nbgroup = groupcouleur.length;

  /*On va chercher chaque nom pour chaque message posté pour appliquer le reste du javascript. On répète le processus à chaque fois qu'on trouve un nom*/
  $('tr.post > td span.name > strong > a > span > strong').each(function ()

    /*On sélectionne le l'espance du "faux titre de rang" dans le template*/
    var rang1 = $(this).closest('tr.post').find('td:first').find('.rangtitre');

    /*On sélectionne l'espace de "fausse image de rang" dans le template*/
    var rang2 = $(this).closest('tr.post').find('td:first').find('.rangimg');

    /*On prend la couleur du pseudo*/
    var uncolor = $(this).css('color');

    /*On va aller comparer la couleur de pseudo à chaque couleur de groupe*/
    for (i=0; i < nbgroup; i++) {

      /*Si la couleur du pseudo = la couleur du groupe, on va faire les modifications*/
      if (uncolor == groupcouleur[i]) {

        /*On ajoute le titre de rang qui correspond à la couleur du groupe dans l'espace du "faux titre de rang"*/
        $(rang1).html(group1[i]);

        /*On donne la même couleur au titre de rang que la couleur du groupe*/
        $(rang1).css('color', groupcouleur[i]);

        /*On ajoute l'image de rang qui correspond à la couleur du groupe dans l'espace de la "fausse image de rang"*/
        $(rang2).html('<img src="'+group2[i]+'" alt="Image à remplacer" />');
      }
    }
  });
});


Ce bout n'a absolument pas à être modifié pour fonctionner. Sérieux, pas touche, à moins d'être sûr de savoir ce que vous faites, ok?





Personnaliser le titre de rang et l'image de rang

On a déjà vu précédemment qu'on pouvait entourer d'un span avec une classe différente chaque titre de rang, donc vous pouvez vous servir de ces classes pour personnaliser chaque rang.

Pour personnaliser tous les titres de rang à la fois, vous pouvez mettre ceci dans votre CSS :
Code:
/*Titres des rangs*/
.rangtitre {
  propriété: valeur;
}


Pour personnaliser tous les images de rang à la fois, vous pouvez mettre ceci dans votre CSS :
Code:
/*Images des rangs*/
.rangimg img {
  propriété: valeur;
}


Quant à personnaliser les images de rang individuellement, vous pouvez mettre ceci dans votre CSS et remplacer le URL par le lien de l'image de rang à modifier :
Code:
.rangimg img[src="URL"] {
  propriété: valeur;
}






Partie des rangs dans le reste du forum

À ma connaissance, les rangs apparaîssent à un seul autre endroit dans le forum, soit le profil.

Le hic, c'est que puisque le profil (à moins que vous ayez la version simplifié du profil) ne peut pas être modifié entièrement dans un template, on peut difficilement remplacer le rang par le faux rang.

Donc, si la personne change de groupe, le rang se changera automatiquement dans les messages (grace aux "faux rang"), mais restera pareil dans le profil. Alors si quelqu'un va voir, il sera genre "WTF?". Pas trop joyeux ><

Ce que je vous conseille, une fois que vous avez installé le javascript comme il faut et vérifié qu'il fonctionne bien, c'est d'aller carrément supprimer les rangs qui ne sont plus nécessaire (dans le panneau d'administrateur, dans les utilisateurs, dans les rangs, vous les supprimez tous).

Comme ça, les rangs ne seront simplement pas affichés sur le profil (ce qui n'est vraiment pas un drame, on s'entend) et ne contraseront donc plus avec le faux rang des messages. Perfect!





C'est tout! Si jamais vous avez des problèmes avec cette astuce, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez modifier le fonctionnement de l'astuce et que vous avez besoin d'aide.

À plus !

NyoTheNeko

Les margin et les padding - Sam 2 Jan 2016 - 14:03



Margin & Padding


Bonjour à vous les loulous! :hug:
Aujourd'hui, je vous propose un petit tuto tout simple pour vous expliquer un petit concept qui, pour les débutants, peut parfois être difficile à comprendre: les margin et les padding. En soi, une fois qu'on a compris de quoi il en retourne, il est facile de manier les blocs sans trop de problème avec les tailles.

À quoi ça correspond?


Bon, je vous lance des termes, comme ça, en pleine figure: mais à quoi est-ce que ça correspond exactement? Alors tout simplement, le "margin" représente la marge, c'est à dire, la distance entre votre bloc et un autre.
Commençons par un petit exemple. Voici deux blocs, un rouge et un noir:

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black;"></div>


Ce n'est pas le sujet principal mais je vous explique rapidement le code plus haut.
Tout d'abord, je donne à mes deux div un display: inline-block, qui me permettra de les mettre côte à côté. Je fais cela surtout pour qu'il soit plus aisé de voir l'effet qu'ont les marges pour la suite de l'exemple. Le vertical-align: top me permet également de dire, que si je les veux côte à côte, je veux aussi que le haut de chaque bloc soit aligné. J'aurai pu également mettre "middle" ou "bottom", si je voulais que les deux blocks soient centrés en hauteur l'un par rapport à l'autre, ou alors que le bas de chaque bloc soit aligné.
Ensuite, à l'aide de height et width je donne une hauteur puis une largeur à mes blocs.
Enfin background me permet de donner une couleur de fond à mes blocs, respectivement rouge (red) et noir (black).


Vous remarquez donc que ces deux blocs sont collés l'un contre l'autre. À présent, si je rajoute une marge avec l'aide de margin au premier, ils ne le seront plus:

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; margin: 10px;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black;"></div>


Nous remarquons ici deux choses. Premièrement: margin crée une marge autour de l'ensemble du bloc, ce qui veut dire qu'il y a une marge en bas, mais aussi en haut. Pour que vous puissiez le voir, voici une représentation visuelle de la marge (en jaune):
Une autre chose que vous aurez remarqué également, c'est que le bloc de droite s'est aligné, non pas avec le haut du bloc, mais le haut du bloc avec sa marge, et donc il ne semble plus que les deux blocs soient alignés.
Dans la prochaine section, je vous expliquerais pourquoi.

Passons à présent au padding. En français, le padding peut au mieux se traduire par du rembourrage, mais en soi, ce mot peut ne pas vous dire grand chose, et c'est normal.
Reprenons nos deux carrés, mais rajoutons cette fois-ci du texte dans le premier:
Je suis un carré rouge.

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black;"></div>


Le code ici est fondamentalement le même qu'avant, si ce n'est qu'on a rajouté le color: white; qui permet de donner la couleur au texte. Ainsi, tout texte dans le premier carré aura une couleur blanche.


Vu que je n'ai pas de marge, les deux carrés sont collés, mais également le texte à l'intérieur est collé aux bords du carré. À présent, rajoutons un peu de rembourrage avec l'aide de padding:
Je suis un carré rouge.

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; padding: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black;"></div>


Là on remarque à nouveau deux choses: le fait que le texte n'est plus collé aux bords du bloc, donc qu'il y a une sorte de "marge intérieure" (ce fameux rembourrage justement). On remarque que le rembourrage fait également tout le tour interne du bloc.
Voici une image pour vous représenter visuellement le padding, ici en violet:

Vous pouvez voir aussi que le bloc rouge est à présent plus haut (mais aussi plus large bien que ce soit moins marquant) que le noir. Pourtant, les valeurs indiqués dans height et width dont les même, ainsi, ils devraient avoir la même taille, non?
Eh bien je réponds dans la prochaine section! Wink

Notez que j'aurai très bien pu mettre aussi une autre div ou tout autre élément, comme une image par exemple, dans le bloc. J'ai simplement choisi d'utiliser du texte, mais le padding aura un effet sur tout ce qui se trouve à l'intérieur du bloc.


Comment utiliser ces propriétés?


Avant d'aller vous expliquer plus en profondeur les effets exact de margin et padding sur votre bloc, je vais vous expliquer comment utiliser ces propriétés. Avec les codes plus haut, vous avez probablement deviné comment mettre une marge autour de l'ensemble de vote bloc, mais il y a plusieurs façons pour ne mettre des marge qu'à des endroits spécifiques, ou encore, des marges différentes à chaque côté. Il en va bien sûr de même pour le rembourrage.

Dans la suite du texte, je n’écrirais que "marges", mais c'est en réalité pour éviter de mettre à chaque phrase margin/padding, ou marge/rembourrage à chaque fois, vu que les propriétés sont très largement les même.

Notez également que le code de base pour chaque exemple est ceci:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>



Donc comme vous l'avez vu plus haut, pour mettre une marge tout autour d'un élément, il suffit d'utiliser la propriété seule avec une seule et unique valeur. Voici un exemple avec des marges de 10 pixels:
Code:
margin: 10px;
padding: 10px;


En l'utilisant sur le carré rouge:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin: 10px; padding: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>


Maintenant, imaginez que je ne veuille des marges qu'à gauche. Il me suffit en réalité de rajouter le suffixe "left" le mot pour gauche en anglais. Voici un exemple avec des marges de 10 pixels:
Code:
margin-left: 10px;
padding-left: 10px;


Voilà ce que cela donne si je mets les marges au carré noir:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white; margin-left: 10px; padding-left: 10px;">Je suis un carré noir</div>


Il en va de même pour chacun des côtés. Il suffit de rajouter le suffixe correspondant. Donc "top" pour le haut, "bottom" pour le bas, et enfin, "right" pour la droite.
Code:
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;


Voici un exemple pour chaque.
Marges à droite pour le rouge:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin-right: 10px; padding-right: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>


Marges en haut sur le rouge:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin-top: 10px; padding-top: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>


Marges en bas sur le rouge:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin-bottom: 10px; padding-bottom: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white;">Je suis un carré noir</div>


Visuellement parlant, le dernier ne semble pas faire grand chose, mis à part allonger le bloc rouge. Cependant, on peut voir qu'il y a bien une marge en bas. Preuve en image, avec le padding en violet et le margin en jaune:


Vous pouvez bien évidemment combiner les quatre côtés pour avoir des marges différentes à chaque côté. Ainsi, prenons cet exemple:
Code:
margin-left: 10px;
margin-right: 5px;
margin-top: 20px;
margin-bottom: 10px;
padding-left: 10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom: 10px;


Je vais donc appliquer les margin au rouge et appliquer les padding au noir:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin-left: 10px; margin-right: 5px; margin-top: 20px; margin-bottom: 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white; padding-left: 10px; padding-right: 5px; padding-top: 20px; padding-bottom: 10px;">Je suis un carré noir</div>


Visuellement, avec les padding en violet et les margin en jaune:

Vous avez cependant aussi la possibilité, plutôt que d'utiliser chaque propriété de top, bottom, left et right à chaque fois, de tout mettre en une ligne. Pour ceci, c'est très simple: il suffit de mettre les quatre valeurs, l'une après l'autre, en suivant ce sens: top, right, bottom et enfin left (donc haut, droite, bas et gauche). Pour vous en rappeler, vous pouvez imaginer faire un cercle en suivant les aiguilles d'une montre dans votre tête en commençant par en haut.
Ainsi, l'exemple précédent devient:
Code:
margin: 20px 5px 10px 10px;
padding: 20px 5px 10px 10px;


Et si comme plus tôt j'applique les margin au rouge et les padding au noir, on a bien:
Je suis un carré rouge.
Je suis un carré noir

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; color: white; margin: 20px 5px 10px 10px;">Je suis un carré rouge.</div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; color: white; padding: 20px 5px 10px 10px;">Je suis un carré noir</div>


Notez qu'on peut également réduire le nombre de valeurs que l'on met, et ainsi "fusionner" plusieurs valeurs, mais cela suit des règles.

Par exemple, si les marges n'ont que trois valeurs:
Code:
margin: 20px 5px 10px;
padding: 20px 5px 10px;

Ici donc, top aura 20 px, left et right en auront 5px et bottom aura 10px. Ce sont donc les valeurs de droite et gauche qui seront les même.

Si les marges n'ont que deux valeurs:
Code:
margin: 20px 5px;
padding: 20px 5px;

Ici donc, top et bottom auront 20 px; left et right en auront 5px. Ce sont donc les valeurs haut et bas, ainsi que de droite et gauche qui seront les même. La valeur de top & bottom arrive en premier, celle de left & right en second.

Et comme nous l'avons vu tout au début, une seule et unique valeur donne les marge des quatre côtés:
Code:
margin: 20px;
padding: 20px;


Effets de margin et padding


Comme nous avons pu le voir un peu plus tôt, il est temps de voir les effets qu'ont les margin et padding sur les blocs, et leur interaction avec les autres éléments d'une page.

En réalité, le padding et le margin agissent sur la taille d'un élément, et plus particulièrement sur la place que ce dernier prend sur une page. En effet, en temps normal, la taille d'un élément, est pour sa hauteur height + border et pour sa largeur width + border.

Faites tout de même attention, car le border (= la bordure) fait, en général, tout le tour du bloc. Il faut donc compter autant la bordure de gauche que celle de droite en largeur (celle du haut + celle du bas en hauteur) dans votre calcul. Ainsi, si votre bordure est partout de 5 px, vous avez en tout 10 px de bordure en hauteur qui s'ajoute à la hauteur donnée de l'élément, idem pour la largeur.
Cependant, si vous n'avez qu'une bordure en haut de 5 px et nulle part ailleurs, vous n'avez que 5 pixels qui se rajoute à la hauteur de votre élément.


Ainsi, si on prend un bloc de 200 de haut et 200 de large, avec une bordure de 50 pixels, on a en tout un bloc de 300 de large et 300 de haut. Donc quelque chose comme ça:

Code:
<div style="height: 200px; width: 200px; border: 50px solid black; background: white; margin: auto;"></div>


Hey! C'est quoi ce margin: auto; me direz-vous, et c'est normal parce que j'en n'ai pas parlé. Le margin: auto vous permet en réalité de centrer sur la page ou dans l'élément contenant tout élément à largeur spécifiée et de type bloc. Cela correspond donc à mettre un margin-left: auto; margin-right: auto;. Vous pouvez rajouter des autres marges (de haut et de bas) en les rajoutant à la suite dans le CSS. Si vous les mettez avant, le margin: auto va les "annuler".
Pour savoir pourquoi, je vous conseille le tuto sur l'ordre et l'héritage de Manumanu.


Maintenant, si je venais à ajouter un padding, la taille de l'élément se modifierait en conséquence. Ainsi, au lieu d'avoir le calcul de plus haut, j'ai à présent: pour sa hauteur height + border + padding et pour sa largeur width + border + padding.

Notez que la réflexion sur combien est ajouté est le même que pour le border, vu que le padding fait aussi tout le tour de l'élément, selon les valeurs indiqués.


Donc reprenons notre bloc de 200 de haut et 200 de large, avec une bordure de 50 pixels, mais rajoutons un padding de 100px. On a donc en tout un bloc de 500 de large et 500 de haut. En effet, on avait les 300 d'origine (bordure + taille), mais on rajoute encore 200 de padding, vu qu'on a en haut et en bas (respectivement à gauche et à droite) 100 de padding, ce qui font 200 en tout.

Cela donne donc:

Code:
<div style="height: 200px; width: 200px; border: 50px solid black; background: white; margin: auto; padding: 100px;"></div>


Voici une image pour vous le représenter:

Les margin, quant à elles, ne vont pas visuellement agrandir l'élément, mais va influencer la place que va prendre notre bloc sur la page. Par exemple, je vais à présent ajouter deux blocs à mon exemple. Un qui va venir à sa droite, et un qui sera juste en-dessous. N.B. : je vais retirer le margin: auto au bloc et mettre un display: inline-block; vertical-align: top;.


Code:
<div style="display: inline-block; vertical-align: top; height: 200px; width: 200px; border: 50px solid black; background: white; padding: 100px;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red;"></div><div style="height: 100px; width: 100px; background: blue;"></div>


On remarque donc actuellement que la "place" que prend mon élément n'est nulle autre que sa taille, c'est à dire: taille + bordure + padding. Cependant, avec une marge, la place que prendra mon élément sera: taille + bordure + padding + margin.

Donc reprenons notre bloc de 200 de haut et 200 de large, avec une bordure de 50 pixels et padding de 100px. Si on rajoute une marge de 100 px, mon bloc prendra 700 de large et 700 de haut. En effet, on avait les 500 d'origine (bordure + taille + padding), mais on rajoute encore 200 de marge, vu qu'on a en haut et en bas (respectivement à gauche et à droite) 100 de margin, ce qui font 200 en tout.

Dans notre exemple, cela donne ceci:

Code:
<div style="display: inline-block; vertical-align: top; height: 200px; width: 200px; border: 50px solid black; background: white; padding: 100px;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red;"></div><div style="height: 100px; width: 100px; background: blue;"></div>


Le carré rouge est passé sous notre bloc principal!

En effet, parce que la place que prend le grand bloc est trop "grande", le petit bloc rouge n'a plus la place de se mettre à côté de lui, et de ce fait, va passer à la ligne suivant. Ligne suivant, qui se retrouve donc sous la marge du grand bloc. Ainsi, quand vous utilisez les margin et padding, vous devez faire attention à leur valeur, car c'est avec des valeurs trop grandes que les différents éléments passent "à la ligne" car ils n'ont pas la place.

C'est aussi la raison du pourquoi le vertical-align: top ne semblait pas s'aligner avec le bloc correctement, parce que l'alignement se fait en réalité avec toute la place que prend le bloc, margin comprise. Donc si on aurait voulu que les blocs soient alignés en haut, on aurait du rajouter une margin-top au bloc noir comme ceci:

Code:
<div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: red; margin: 10px;"></div><div style="display: inline-block; vertical-align: top; height: 100px; width: 100px; background: black; margin-top: 10px;"></div>


Je ne rajoute qu'un margin-top, car je veux simplement l'aligner avec le début du bloc, et non pas avoir plus de marge.

Pour fini, foici visuellement, voici la place que prend notre bloc:

On a donc:

Taille d'un élément = taille donnée + border + padding
Place que prend un élément = taille donnée + border + padding + margin


Cependant, on peut encore se poser une question légitime: qu'est-ce que je fais si je ne veux pas faire des maths dans ma tête pour toujours avoir la bonne taille de bloc? Donc:

Est-ce qu'il y a un moyen d'empêcher le changement de taille?


La réponse est oui, mais seulement depuis l'apparition du CSS3, grâce à la propriété box-sizing. Notez cependant que je ne vais pas vous l'expliquer en profondeur: je laisse le soin au cursus de le faire, notamment l'étape "Un peu de CSS3 et ses exigences". Je vais cependant vous donner un exemple et voir superficiellement cette propriété, simplement pour que vous la connaissiez et puisiez l'utiliser si le cœur vous en dit.

Cependant, la propriété box-sizing ne va influencer que la taille et non pas la place que prend l'élément. Donc le margin aura toujours le même effet.

Prenons donc notre élément, puis le même élément avec un padding, comme normalement:
Je suis une superbe boîte, je suis jolie!
Et moi je suis cette même boîte avec un padding!

Code:
<div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5;">Je suis une superbe boîte, je suis jolie!</div><div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5; padding: 20px;">Et moi je suis cette même boîte avec un padding!</div>


On voit donc, comme on l'a appris, que la taille va changer. Mais à présent, rajoutons à la boîte avec padding un box-sizing avec comme valeur border-box, qui va donc dire que la largeur de la boite est le contenu et le padding, et non pas juste le contenu.
Je suis une superbe boîte, je suis jolie!
Et moi je suis cette même boîte avec un padding!

Code:
<div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5;">Je suis une superbe boîte, je suis jolie!</div><div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5; padding: 20px; box-sizing: border-box;">Et moi je suis cette même boîte avec un padding!</div>


Les boîtes ne sont pas de la même taille?

Effectivement, la seconde est plus petite! Cela vient du fait que le box-sizing va également influencer sur la bordure, et ainsi, au lieu d'avoir taille totale = taille de base + bordure on a simplement taille totale = taille de base, et donc, la bordure et la padding, au lieu de se rajouter, resterons dans la boîte.

Donc pour avoir la même taille, on devrait rajouter 2 px partout au second bloc pour la bordure, comme ceci:
Je suis une superbe boîte, je suis jolie!
Et moi je suis cette même boîte avec un padding!

Code:
<div style="width: 200px; height: 100px; background: white; border: 1px solid black; color: #24A8E5;">Je suis une superbe boîte, je suis jolie!</div><div style="width: 202px; height: 102px; background: white; border: 1px solid black; color: #24A8E5; padding: 20px; box-sizing: border-box;">Et moi je suis cette même boîte avec un padding!</div>


Donc de toute façon c'est embêtant?

Oui et non, dans le sens où vous êtes alors certain que votre élément fait bien X de large comme vous l'avez indiqué, quelque soit le padding ou la bordure que vous lui avez donné, et n'aurez alors plus qu'à calculer la marge en plus. donc au lieu de faire une somme de quatre chose, on en a plus que deux.  :star:

Quoiqu'il en soit, il vous est recommandé d'utiliser box-sizing: border-box partout si vous le pouvez, parce que ça facilite la vie de tout le monde! ♥

Et sur les éléments inline?


Mais oui, qu'en est-il du padding et margin des éléments inline? Parce que comme on le sait, les éléments inline se fichent pas mal de leur taille.

Par exemple:
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Code:
Je suis une jolie phrase avec du <span style="color: blue;">bleu</span> dedans, parce que c'est joli.


Si je rajoute une taille au span, un élément inline, eh bien... ça ne fait rien.
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Code:
Je suis une jolie phrase avec du <span style="width: 400px; height: 100px; color: blue;">bleu</span> dedans, parce que c'est joli.


Cependant, quand on rajoute une margin, la margin du haut et du bas n'ont aucune influence, mais les margin de gauche et droite, elle oui.
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Je suis une jolie phrase avec du <span style="color: blue; margin: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Donc si je n'avais qu'une margin-top, ça ne ferait rien:
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Je suis une jolie phrase avec du <span style="color: blue; margin-top: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Le padding réagit exactement comme le margin:
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Je suis une jolie phrase avec du <span style="color: blue; padding: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Cependant, ils se visualisent tout comme pour un bloc:

Seulement, le haut et le bas n'ont aucun effet. Ou vraiment? Car en effet, s'ils ne "poussent" pas les autres lignes pour faire de la place, mais l'élément s'agrandit bien! Et ceci peut se voir avec un background:

Ici une phrase avant, parce que j'ai un background solide.
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Ici une phrase avant, parce que j'ai un background solide.
Je suis une jolie phrase avec du <span style="color: blue; background: orange; padding: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Pour le margin par contre? Toujours rien.

Ici une phrase avant, parce que j'ai un background solide.
Je suis une jolie phrase avec du bleu dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.
Code:
Ici une phrase avant, parce que j'ai un background solide.
Je suis une jolie phrase avec du <span style="color: blue; background: orange; margin: 20px;">bleu</span> dedans, parce que c'est joli.
Et une autre phrase pour illustrer mon exemple parce que prout hein.


Et voilà, vous savez à présent tout sur les margin et les padding! Utilisez cette connaissance à bon escient! :hug:

Astuce Forumactif Javascript - Informations membres - Sam 28 Nov 2015 - 23:44



Hello :)

Nous allons parler d'informations sur le membre qui regarde la page mises à disposition par Forumactif.

Vous connaissez peut-être déjà USERNAME et ses copines (vous pouvez voir la liste officielle ici → http://www.never-utopia.com/popup_help.forum?l=miscvars ). On écrit {USERNAME} et ceci est remplacé par le pseudo du membre qui lit (ou bien par "Invité").

Nous pourrons afficher des informations supplémentaires telles que :
  • si la personnes est connectée
  • son avatar
  • son pseudo
  • son nombre de MP
  • le nombre de message sur le forum
  • ses point de réputation
  • d'autres à voir un peu plus bas Wink


Ces informations peuvent être affichées sur le forum directement, par exemple avec l'avatar dans la barre de navigation :


Mais on peut aussi les utiliser pour élaborer d'autres codes, par exemple afficher certaines choses seulement si le membre est connecté / déconnecté, s'il a plus de X messages, etc ^^
Exemples possibles :
- Si on a un guide du nouveau, il sera mis en avant sur toutes les pages pour ceux qui ont peu de messages.
- Mettre en avant un message seulement pour les invités (message, ou bien le contexte "court"/"résumé", ou d'autres choses comme ça qui "prennent de la place" pour les membres)
- Faire une PA différente pour connecté / non connecté

Les données



Au moment où je commence ce tutoriel, voici les données que je peux récupérer :

  • session_logged_in : si le membre connecté ou non
  • username :  pseudo du membre
  • user_id : identifiant de membre
  • user_level : si je suis membre simple (0) / droit de modération quelque part (2) / admin (3)
  • user_lang :  langue
  • activate_toolbar : si la toolbar est activée (1) ou non (0)
  • fix_toolbar : la toolbar fixée ou non
  • notifications : notifications activées ou non
  • avatar :  html de l'image de l'avatar
  • user_posts :   nombre de messages du membre sur le forum
  • user_nb_privmsg : nombre de MP
  • point_reputation : nombre de points de réputation


Si la toolbar est activée, on peut également récupérer d'autres d'infos, dont le rang de la personne.

Comment trouver ces données ?



Ces données sont dans un objet javascript (ne partez paaaas !), si vous voulez connaitre leur valeur vous pouvez les trouver comme ceci :

- Avec la console du navigateur. Pour en savoir plus, lisez ce topic => Outils de débug par Valtena, surtout la section "la console".
On fait clic droit, inspecter l'élément. On va aller à l'onglet "Console" et écrire dedans _userdata (puis touche entrée ou cliquer sur Executer)


Cela vous donnera quelque chose comme ça :
Code:
_userdata["session_logged_in"] = 1; // connecté ou non
_userdata["username"] = "Nihil Scar Winspeare"; // mon pseudo
_userdata["user_id"] = 7734; // mon identifiant de membre (pour accéder au profil par exemple)
_userdata["user_level"] = 0; // si je suis membre simple (0) / admin (1) / droit de modération quelque part (2)
_userdata["user_lang"] = "fr"; // ma langue
_userdata["activate_toolbar"] = 1; // si la toolbar est activée (1) ou non (0)
_userdata["fix_toolbar"] = 0; // si j'ai fixée la toolbar ou non
_userdata["notifications"] = 1; // si j'ai les notifications activées
_userdata["avatar"] = '<img src="http://nihil.alwaysdata.net" alt="avatar" />'; // le html de l'image de mon avatar
_userdata["user_posts"] = 1986; // le nombre de messages sur le forum
_userdata["user_nb_privmsg"] = 506; // le nombre de MP
_userdata["point_reputation"] = 236; // le nombre de points de réputation


- Sinon, on peut voir tout ça directement dans le code source. On fait un  clic droit, "afficher le code source", et dedans on cherche "_userdata"


Si ces données n'apparaissent pas, il se peut qu'une modification de votre template overall_header soit la cause. Vérifiez que la variable {HOSTING_JS} est bien présente.


Détail & exemples d'utilisation



J'ai essayé de détailler les variables que j'utilise le plus souvent, ou bien où il y a des petites subtilités à connaitre.

Connecté ou non ?


Code:
_userdata["session_logged_in"] = 1;

Si le membre est connecté la valeur sera 1, sinon cela sera 0.
Exemples d'utilisation :
- masquer un élément si le membre est déconnecté / afficher une zone seulement s'il est connecté, etc...
- pour les générateurs de présentation / commandes sur une page HTML, re-diriger ailleurs si le membre est déconnecté

Pseudo


Code:
_userdata["username"] = "Nihil Scar Winspeare";

Connecté : Pseudo du membre.
Déconnecté : Anonymous

Code:
_userdata["user_id"] = 7734;

Connecté : Identifiant de l'utilisateur. L'id (identifiant) permet par exemple d'accéder au profil de l'utilisateur. Je suis 7734, donc le lien es celui ci → http://www.never-utopia.com/u7734
Déconnecté : la valeur est -1

Autorisations


Code:
_userdata["user_level"] = 0;

0 = simple membre ou déconnecté
1 = admin
2 = droits de modération quelque part
/!\ Pour ce point là, on lit tout et son contraire, je vous conseille donc de faire quelques tests pour être absolument sûrs. Surtout qu'il existe d'autres façons de vérifier si une personne est modo / admin ^^

Avatar


Code:
_userdata["avatar"] = '<img src="http://nihil.alwaysdata.net" alt="avatar" />';

Dans tous les cas cela sera une balise image html.
Si connecté : avatar du membre
Si connecté et pas d'avatar : avatar par défaut dans le Panneau d'Admin
Si déconnecté : avatar par défaut dans le Panneau d'Admin
Exemple utilisation : - http://www.never-utopia.com/t56172-rajouter-l-avatar-de-l-utilisateur

Réputation


Code:
_userdata["point_reputation"] = 236;

Les points de réputation (Le système de réputation (Evaluation des posts + le bouton Merci))

Rang


/!\ Il faut que la toolbar soit activée
Code:
_lang["rank_title"] = "V.I.P.";

Si connecté : le rang de la personne (Les rangs)
Si déconnecté : vide
Exemple :
- Beaucoup de forum de RP utilisent les rangs pour les groupes. On pourrait par exemple changer le thème (ou juste certains petits éléments), ou encore rajouter un lien rapide vers le quartier général d'un groupe, etc)


Comment les utiliser ?


Certaines variables peuvent s'utiliser telle quelle en mettant leurs valeurs, d'autres permettent de faire des tests afin de faire un code différent en fonction de leur valeur.

Par exemple :
Code:
if (_userdata.session_logged_in == 1) {
    /* code si connecté */
}


Spoiler:
Le code peut se simplifier comme ça car 1 = vrai :
Code:
if (_userdata.session_logged_in) {
    /* code si connecté */
}



Pouvoir les utiliser comme on utilise {USERNAME}



On peut rajouter ce javascript sur toutes les pages :
PA > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript.
Code:
$(function(){
    $.each(_userdata, function(key, value){
        $(".js-" + key).html(value);
    });
});


Si je veux afficher seulement les MP, dans mon HTML je peux faire comme ceci par exemple :
Code:
Mes MP : <span class="js-user_nb_privmsg"></span>


Le code va insérer la valeur à l'intérieur de la balise span, pour insérer la bonne valeur :
Code:
Mes MP : <span class="js-user_nb_privmsg">155</span>


Voici un exemple avec plus de html :
Code:
Utilisateur connecté ? <span class="js-session_logged_in"></span><br/>
Pseudo : <span class="js-username"></span><br/>
Id : <span class="js-user_id"></span><br/>
Image de l'avatar : <span class="js-avatar"></span><br/>
Nombre de messages : <span class="js-user_posts"></span><br/>
Nombre de messages privés <span class="js-user_nb_privmsg"></span><br/>
Nombre de points de réputation <span class="js-point_reputation"></span><br/>


Et grâce au javascript, le contenu des span sera changé comme ceci :
Code:
Utilisateur connecté ? <span class="js-session_logged_in">1</span><br>
Pseudo : <span class="js-username">Nihil Scar Winspeare</span><br>
Image de l'avatar : <span class="js-avatar"><img src="http://img15.hostingpics.net/pics/602962nihiloffline.png" alt=""></span><br>
Nombre de messages : <span class="js-user_posts">1991</span><br>
Nombre de messages privés <span class="js-user_nb_privmsg">506</span><br>
Nombre de points de réputation <span class="js-point_reputation">237</span><br>


Un exemple avec toutes les variables :

Précicison → si vous utilisiez précédemment ce tuto, vous pouvez l'enlever. En effet, le code fourni ici est plus complet. :)

Merci ♥

Youp

Un livre animé à glisser où vous le voulez - Sam 7 Nov 2015 - 15:57



Bonjour bonjour, après un looooong oubli, je viens enfin vous proposer ce petit livre animé où vous pourrez mettre votre contexte ou tout autre texte. Il s'agit d'un livre où vous pouvez tourner les pages.

Voilà l'aperçu (si vous ne le voyez pas, actualisez simplement la page) :


Je tiens à préciser que je me suis appuyée sur un tutoriel en anglais pour le réaliser.

Ce livre nécessite une page html, une page qui sera hébergée sur un forum donc.


Il faut donc créer une page html pour héberger notre livre. Si vous voulez que celui ci soit visible dans un message, il faudra l'herberger via une iframe. Vous êtes perdus ? Allons y petit à petit.

PS: N'oubliez pas de créditer Never Utopia dans vos crédits ou sur la page où vous mettez ce code, avec un petit lien s'il vous plaît. Vous n'êtes pas obligés de mettre mon nom, juste un petit lien pour N-U suffira ^^
De plus si vous l'utiliser, penser à indiquez que si rien ne s'affiche, il suffit d'actualiser.


Créer une page html

Allez dans : Modules -> Gestion des pages html -> Création en mode avancé

Le code correspondant au livre est celui-ci :
Code:
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Titre de la Page</title>
    <base target="_blank" />
    <style type="text/css">
      #myBook {
      display:none;
     position:absolute;
      left : 0px;
      top:0px;
      width: 328px;
      height:533px;
      }
      .imBookPage {
      position:absolute;
      left:0px;
      top:0px;
      width: 328px;
      height:533px;
      overflow:hidden;
      }
    </style>
  <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jquery-142.js"></script>
    <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jqueryimBookFlip-06.js"></script>
    <script type="text/javascript">$(document).ready( function() {  $("#myBook").imBookFlip({      page_class: 'imBookPage'  });});</script>  
  </head>
  <body>                                            
<div id="myBook" style="display:none;">
                                          
 <div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/585593couv.png)">
              
 <div style="height: 533px; color: peru; display:table-cell; vertical-align: middle; font-size: 40px; font-family: Times New Roman ; text-align: center; width : 328px;">
       Memory      
 </div>
                  
 </div>
                                          
 <div class="imBookPage" style="background: url(http://img15.hostingpics.net/pics/486457couvdos.png)">
      <br /> <img src="http://img11.hostingpics.net/pics/431017vieillephoto2.png" />                      
 </div>
                                          
 <div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/234920livre2.png)">
      <br />          
 <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
          
 <div style="  font-size:300%; float:left; margin: 2px; color: peru;">
      Q      
 </div>
     uod si rectum statuerimus vel concedere amicis, quidquid velint, vel impetrare ab iis, quidquid velimus, perfecta quidem sapientia si simus, nihil habeat res vitii; sed loquimur de iis amicis qui ante oculos sunt, quos vidimus aut de quibus memoriam accepimus, quos novit vita communis. Ex hoc numero nobis exempla sumenda sunt, et eorum quidem maxime qui ad sapientiam proxime accedunt.<br /><br />Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit. <br /><br />Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.      
 </div>
                          
 </div>
                                          
 <div class="imBookPage" style="background: url(http://img15.hostingpics.net/pics/548825livre2dos.png)">
            
 <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
  Contenu   
 </div>
                        
 </div>
                                          
 <div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/234920livre2.png)">
                
 <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
  Contenu   
 </div>
                        
 </div>
                                        
 <div class="imBookPage" style="background: url(http://img15.hostingpics.net/pics/548825livre2dos.png)">
                  
  <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
  Contenu   
 </div>
            
 </div>
                                          
 <div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/234920livre2.png)">
                
  <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
  Contenu   
 </div>
                  
 </div>
                      
</div>
</body>
</html>


Explication du code  

Code:

    <style type="text/css">
      #myBook {
      display:none;
     position:absolute;
      left : 0px;
      top:0px;
      width: 328px;
      height:533px;
      }
      .imBookPage {
      position:absolute;
      left:0px;
      top:0px;
      width: 328px;
      height:533px;
      overflow:hidden;
      }
    </style>
  <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jquery-142.js"></script>
    <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jqueryimBookFlip-06.js"></script>
    <script type="text/javascript">$(document).ready( function() {  $("#myBook").imBookFlip({      page_class: 'imBookPage'  });});</script>  

Ce passage correspond au javascript utilisé pour faire tourner les pages, on y associe un style permettant de modifier la position du livre dans la page html (ici simplement en haut à gauche, ce qui permet de faire une jolie iframe. Si jamais vous voulez mettre un lien qui amène à votre page html, avec un fond en dessous du livre imaginons, modifier les valeurs de positionnement rendra le tout plus joli. En centrant le livre par exemple.) et de modifier la taille (très important si vous voulez changer d'image, en prendre une plus petite par exemple). Mybook c'est votre livre en entier, imbookpage ce sont vos pages.

Code:
<div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/585593couv.png)">
Blabla
</div>

Ceci correspond à une page, ici la couverture. Elle a une image différente des autres. Si vous souhaitez changer d'image, modifiez simplement l'url ici présente.

Code:
<div style="height: 533px; color: peru; display:table-cell; vertical-align: middle; font-size: 40px; font-family: Times New Roman ; text-align: center; width : 328px;">
       Memory      
 </div>

Le titre de mon livre, je vous laisse le soin d'analyser les valeurs et de les modifier si vous voulez un autre résultat. Juste une chose: le "display table-cell et vertical-align middle" permet d'aligner verticalement le titre.

Code:
<img src="http://img11.hostingpics.net/pics/431017vieillephoto2.png" />  

Une image sur la page du livre.  

Code:
<div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;"> mise en forme du texte contenu dans la page </div>

La mise en forme que j'ai choisi pour mon texte contenu dans la page. Il faut l'ajouter dans chaque imbookpage choisie en prenant grand soin de la fermer avant de fermer l'imbookpage.

Code:
<div style="  font-size:300%; float:left; margin: 2px; color: peru;">
      Q      
 </div>

Une lettrine, je vous renvoie au tutoriel de Kazuya

Faire une iframe
Vous voulez insérer ce livre dans un message ? Je vous renvoie au très bon tutoriel de Cheshire cat

Allez y pour regarder les explications ! En somme ça nous donne avec mon exemple:
Code:
<iframe src="LIEN DE VOTRE PAGE HTML" frameborder="0" scrolling="no" style="width: 660px; height: 533px; display: block; margin: auto;"></iframe>

valtena_ethan

Angular / webcomponent et forum actif - Sam 17 Oct 2015 - 19:40


Bonjour,

Je me demandais ce soir, en écumant le forum, pourquoi aussi peu d'alternative à jquery ? notament du côté de javascript pur ou de technologie permettant les web componante comme angularjs.

Seconde question : Avez-vous tenté l'aventure avec angular ? Quelle retour pouvez-vous donner dessus ?

Rajouter une Google Font sur les chatbox en iframe - Dim 2 Aoû 2015 - 16:14



Rajouter une Google Font sur les chatbox en iframe - phpbb2



On ne peut pour l'instant pas ajouter du javascript sur la page de la chatbox, vous n'aurez donc pas la modificaton sur cette page là.


Ce code ne fonctionne que sur une page où la chatbox est en iframe Wink

La première étape est de vous munir du code fourni par Google Fonts, par exemple pour la police Quicksand :
Code:
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css' />


Ensuite, on ajoute un nouveau javascript
Panneau d'administration >> Modules >> Html & JavaScript >> Gestion des codes JavaScript >> Créer un nouveau javascript

On coche "sur l'index" si la CB est seulement sur l'index, sinon "sur toutes les pages" si elle est présente sur toutes les pages (merci Captain Obvious).

Le code Javascript :
Code:
$(function(){
    /* on attends que l'iframe de la CB soit chargée */
    $("iframe[src*='/chatbox']").load(function(){
        $(this).contents().find("head").append("<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>");
    });
});


Vous pouvez ensuite utiliser la police en question normalement, comme aux autres endroits de votre forum. Wink

Si vous rencontrez des problèmes, n'hésitez pas à poster dans le forum Problème avec mon code ou Personnalisations.

Rajouter l'avatar de l'utilisateur - Sam 27 Juin 2015 - 15:30



Rajouter sur la page l'avatar du membre connecté



Ce code permet d'ajouter l'avatar du membre où on le souhaite sur une page du forum.
Exemple d'utilisation :
- Ajouter l'avatar du membre à côté de la réponse rapide

Note : il y a des tas de manière de faire, ce tutoriel n'est qu'un exemple Wink
Pour faciliter le tutoriel, j'utilise jQuery qui est mis par défaut sur les forumactifs et qui va nous faciliter le code.

Utilisation



Partout où vous voulez mettre l'avatar de l'utilisateur, il suffit de rajouter la classe ".js-useravatar" à votre conteneur. La balise image avec l'avatar sera rajoutée ensuite en javascript à l'intérieur de votre élément.

Je dois donc par exemple mettre le code :
Code:
<div class="js-useravatar"></div>


Et le contenu de la div sera remplacé par l'image à l'intérieur de ma div.

   
Je peux aussi utiliser une balise span, une balise p, etc... Il faut juste que cela ne soit pas une balise orpheline (une balise auto-fermante, comme par exemple br, img, input etc).


Il est possible de mettre un contenu par défaut, qui sera ensuite remplacé par l'image de l'avatar, ou qui s'affichera si le javascript ne fonctionne pas. Par exemple :
Code:
<div class="js-useravatar">Contenu temporaire</div>


Styliser



Comment styliser l'image de l'avatar ?
Je vous conseille de rajouter une classe supplémentaire à votre balise.
Ainsi par exemple si mon avatar se trouvera dans un panneau coulissant sur le côté, je peux mettre une seconde classe comme ceci :
Code:
<div class="js-useravatar panneau_avatar"></div>


Et ensuite je met mon CSS comme ceci :
Code:
.panneau_avatar {
    /* style du bloc autour de l.image*/
}

.panneau_avatar img {
    /* style de l.image */
}


Pourquoi mettre une seconde classe, et ne pas styliser directement .js-useravatar ?
→ A priori, vous allez peut-être utiliser cet ajout de l'avatar à plusieurs endroits sur le forum. Si vous stylisez directement .js-useravatar, vous risquez de vous retrouver avec le même style à plusieurs endroits.
En rajoutant une seconde classe, vous êtes sûrs de bien séparer d'un côté le style (avec la classe supplémentaire ajoutée) et le javascript qui ajoute l'avatar (avec la classe .js-useravatar).


Javascript



Le JS, on le met dans PA > Modules > Gestion des codes Javascript.
Ensuite, on rajoute un nouveau script qu'on peut appeler par exemple "Ajouter avatar du membre", qu'on active sur les pages où on en a besoin :)

Code :
Code:
/* On attend le chargement */
$(function(){
    /* on récupère les endroits où on doit ajouter l'avatar */
    var $loadAvatar = $('.js-useravatar');
    
    /* s'il y a des endroits où on doit ajouter l'avatar */
    if ($loadAvatar.length > 0) {
        
        /* on remplace le contenu de .js-useravatar en mettant l'avatar */
        $loadAvatar.html(_userdata.avatar);
        
    }
});


Fonctionnement


Avant d'écrire le javascript, on va d'abord se demander "qu'est ce que je veux faire" ? On ne se jette pas d'un coup sur le code sans réfléchir :)

Je veux remplacer l'avatar de l'utilisateur à l'intérieur des éléments avec la classe js-useravatar.


A partir de cela, je vais me poser quelques questions :

- Comment sélectionner les éléments avec la class js-useravatar ?
En jQuery, on va mettre ceci, à l'intérieur de $(' '), je met mon sélecteur, ça fonctionne comme le CSS.
En CSS mon sélecteur est .js-useravatar, je fais donc
Code:
$('.js-useravatar');


- Comment je fais pour obtenir l'avatar de l'utilisateur  ?
Forumactif nous met gentiment à disposition une liste d'informations ♥. Il s'agit d'un objet javascript _userdata, qui contient diverses informations sur l'utilisateur sur le site. A ma connaissance, il n'y a pas de sujet officiel de ForumActif qui les recense. Pour en savoir plus, vous pouvez lire ce sujet
Celle qui nous intéresse est celle de l'avatar. Pour y accéder, il nous suffit d'écrire _userdata.avatar. Elle contient un code HTML avec l'image du membre.

Exemple du HTML qu'elle peut contenir :
Code:
<img src="http://r26.imgfast.net/users/2613/44/65/70/avatars/1-23.jpg" alt="" />


Si l'utilisateur est déconnecté ou bien qu'il n'a pas d'avatar, la valeur par défaut sera :
Code:
<img src="http://illiweb.com/fa/invision/pp-blank-thumb.png" alt="" />


Vous pouvez personnaliser ces avatars par défaut via le panneau d'administration.
PA > Affichage > Avatars > Gestion des avatars > Administration de vos avatars
On peut ainsi définir un avatar par défaut ainsi qu'un avatar pour les invités.

Si le membre est déconnecté et que vous n'avez pas défini d'avatar pour les invités, c'est l'avatar par défaut qui d'affichera. Sinon, cela sera l’avatar pour les invités :)


- Une fois que j'ai ces 2 informations... Comment je fais pour rajouter mon avatar à l'intérieur de .js-useravatar :toto: ?
On va utiliser une petite méthode de jQuery qui permet de remplacer le contenu d'un élément. Par exemple :
Code:
$('.js-useravatar').html("coucou");

Ce code là permet de remplacer le html de .js-useravatar par coucou :)


Code Javascript, un peu plus en détail


On peut voir que tout le contenu de notre code se trouve à l'intérieur de ceci :
Code:
$(function(){
    /* code à l'intérieur */
});

On ne peut pas manipuler de manière sûre une page tant que la page n'est pas "prête". Si vous tentez de sélectionner quelque chose sur une page qui n'est pas chargée, l'élément ne sera pas trouvable, et vous allez vous retrouver avec rien qui ne se passe ou de jolies erreurs :)

Avec ce code, on attend que le DOM (la structure de la page) soit chargé, comme ça on peut faire nos modifications, nos sélections, sans problème.

Précision:
Il s'agit d'un équivalent de ce code là que vous verrez aussi parfois.
Code:
$(document).ready(function() {
    /* code à l'intérieur */
});

Cette version là est juste un peu plus longue.


Code:
var $loadAvatar = $('.js-useravatar');

Cette ligne permet de sélectionner les éléments avec la classe "js-useravatar", et on va les stocker dans une variable nommée $loadAvatar.

Code:
if ($loadAvatar.length > 0) {
    /* code à l'intérieur */
}

Cette partie là n'est pas obligatoire, mais elle permet d'être sûrs qu'on a bien un avatar à ajouter sur la page.
$loadAvatar.length va me donner le nombre d'éléments sélectionnés. Je regarde donc s'il y a plus de 0 (donc au minimum 1) élément sélectionné.
Cela signifie "s'il y a un élément dans $loadAvatar, fait ..."

Et enfin, la dernière ligne :
Code:
$loadAvatar.html(_userdata.avatar);

Elle dit → remplace le html de $loadAvatar par _userdata.avatar
Tout le contenu à l'intérieur de chaque $loadAvatar sera remplacé par notre image de profil.

En cas de problème, n'hésitez pas à poster dans la section Problème avec mon code.

Afficher la zone Lancés de dés dans une catégorie précise - Lun 16 Mar 2015 - 13:01



Afficher la zone "Lancés de dés" seulement dans un forum en particulier



Ce code permet d'afficher la zone "lancer de dés" seulement dans certaines catégories / forums ! (version phpBB2)

Note : le code n'est pas sous hide, je tenterai de vérifier les commentaires donc si vous avez la moindre question pour une amélioration / une précision, n'hésitez pas. ♥

Ce code a été créé pour un forum en phphbb2, mais il fonctionne aussi sur PunBB et Invision :)


Rendu



Pour en savoir plus sur le lancé de dés, je vous invite à lire le Tutoriel officiel de ForumActif ainsi que le Tutoriel par Halloween sur Never Utopia


Par défaut, le lancé de dés est disponible dans tous les sujets de votre forum.
Mais, parfois on ne l'utilise que dans une zone précise du forum, et on n'en a pas besoin partout.
Cette option permet de masquer la zone "Lancé de dés" par défaut puis l'afficher seulement dans un forum / catégorie :)
/!\ Attention, je parle ici de l'ensemble de zone lancé de dé, pas d'afficher seulement un dé en particulier Wink

Ce code peut-il totalement empêcher le lancé de dés dans les forums non autorisés ? Non. Dans les catégories où on ne souhaite pas avoir le lancé de dés, la zone est seulement masquée visuellement, les membres peuvent toujours y accéder dans le code source.


Attention, il ne faut pas accepter l'option "Activer le bbcode [ roll ] pour le lancé de dé"
En effet, cette option permet d'éditer un message pour changer le lancé de dé.


Connaissances



Avant de se lancer dans le code, on commence par réfléchir à ce qu'on sait :)

Où se trouvent la zone lancé de dé ? → dans les pages "Répondre" et quand on prévisualise un message de réponse.
On va donc commencer par regarder si on est bien sur une page pour poster un message. Quand on envoie un message, notre URL ressemble à ceci : http://www.never-utopia.com/post

Comment savoir dans quelle catégorie / forum on est ? → le fil d’Ariane
Quand on répond à un sujet, on a le fil d'Ariane en haut.

Ce fil d’Ariane est constitué de liens qui permettent de naviguer sur le forum, et on peut donc regarder si les liens sont dans notre liste des forums "autorisés" ou non.

Fonctionnement



Donc, si on suit la logique, voici ce qu'on peut faire :
(il y a souvent 100 manières de faire la même chose. Ici j'ai fait un choix d'appréhender le problème comme ça, mais on aurait pu s'y prendre autrement Very Happy)


  1. On établit une liste de forums et catégories où le lancé de dés est autorisé.
  2. On va vérifier si le chemin de la page sur laquelle on se trouve est bien /post.
  3. On regarde une zone de lancé de dé sur la page (si la zone n'est pas là, ça ne sert à rien de continuer le reste du code) et si elle est là, on la cache.
    Pourquoi ne pas cacher l'élément par défaut tout simplement (en CSS), puis l'afficher à certains moments ? Par ce que si la personne a le javascript désactivé ou bien qu'il y a une erreur de JS dans la page... Notre JS pour afficher la zone de lancé de dé juste aux bons endroits ne fonctionnera pas.

  4. On récupère les liens du fil d’Ariane.
  5. On regarde si l'un de ces liens est présent dans notre liste "Fora / catégories autorisés".
    → si oui : on affiche la zone lancé de dés



Template posting_body


PA > Affichages > Templates > Poster & Messages privés

On va commencer par entourer toute la zone dans une div, pour pouvoir la sélectionner ensuite en javascript.

On va repérer toute la zone qui correspond au lancé de dé, elle commence ici :
Code:
<!-- BEGIN switch_roll_dice -->


Et se finit ici
Code:
<!-- END switch_roll_dice -->


Tout le code au milieu ne s'affiche que si le lancé de dé est activé :)

On va donc remplacer
Code:
<!-- BEGIN switch_roll_dice -->

Par :
Code:
<!-- BEGIN switch_roll_dice -->
    <div class="js-roll-dice">
    <!-- modification pour le javascript "afficher le lancer de dés seulement sur certaines pages" -->


Et ensuite
Code:
<!-- END switch_roll_dice -->


Par
Code:
 </div> <!-- fermeture de .js-roll-dice -->
<!-- END switch_roll_dice -->


On valide, on publie, et normalement, il n'y a aucun changement visuel.

Javascript


PA > Modules > Html & Javascript
On crée un nouveau javascript activé sur toutes les pages avec un nom clair.

Je vous mets l'ensemble du code :
Code:
/*
 * Tuto lancé de dés
 * Masquer la zone lancé de dés partout sauf dans certains forums
 *
 * version : phpbb2
 * Never Utopia
 */
$(function () {
    if (document.location.pathname === "/post") {

        /* url des parties autorisées
         * MODIFIER ICI
         * */
        /* url des parties autorisées */
        var exceptions = [
            "/f6-banniere-concours-ga",
            "/f3-presentations",
            "/c5-arene"
        ];
        
        var $dices = $(".js-roll-dice").hide();

        if ($dices.length < 1) return;

        $("a.nav").each(function () {
            if (exceptions.indexOf($(this).attr("href")) > -1) {
                $dices.show();
                return false;
            }
        });
    }
});


La version avec plus de commentaires :
Spoiler:

Code:
/*
 * Tuto lancé de dés
 * Masquer la zone lancé de dés partout sauf dans certains forums
 *
 * version : phpbb2
 * Never Utopia
 */
$(function () {
    /* on vérifie si on est dans une page pour poster */
    if (document.location.pathname === "/post") {

        /* url des parties autorisées */
        var exceptions = [
            "/f6-banniere-concours-ga",
            "/f3-presentations",
            "/c5-arene"
        ];
        
        /* on sélectionne la zone lancé de dé et on la masque */
        var $dices = $(".js-roll-dice").hide();

        /* on vérifie s'il y a bien le lancé de dés sur la page */
        if ($dices.length < 1) return;

        /* On regarde chaque liens sur le fil d'Arianne */
        $("a.nav").each(function () {
            /*On regarde s'il est présent dans les exceptions  */
            if (exceptions.indexOf($(this).attr("href")) > -1) {
                /* si on est dans un forum autorisé */
                $dices.show(); /* on affiche le lancé de dé */
                return false; /* on sort du each */
            }
        });
    }
});



Rajouter les lien des catégories autoriseés


On modifie cette partie là :
Code:
/* url des parties autorisées */
var exceptions = [
    "/f6-banniere-concours-ga",
    "/f3-presentations",
    "/c5-arene"
];


Prenez l'url de votre catégorie exemple, et gardez juste la partie après le nom de domaine.
Ainsi si vous avez : http://www.never-utopia.com/f3-presentations
Il faut mettre "/f3-presentations".

De la même manière, si on a http://www.never-utopia.com/c21-communaute
On va mettre : "/c21-communaute".

Attention, il y a des virgules entre chaque lien, mais pas de virgule à la fin Wink

Exemples:
Exemple avec seulement 2 liens :
Code:
/* url des parties autorisées */
var exceptions = [
    "/f3-presentations",
    "/c5-arene"
];


Vous pouvez très bien les mettre sur la même ligne :
Code:
/* url des parties autorisées */
var exceptions = ["/f3-presentations","/c5-arene"];


Exemple avec seulement 1 lien :
Code:
/* url des parties autorisées */
var exceptions = ["/f3-presentations"];



Toutes les sous catégories et sous forums à l'intérieur des liens que vous mettrez seront pris en compte. Ainsi si je mets "Communauté" dans les exceptions, tous les sous forums de cette catégorie auront la zone "Lancé de dés" affichée.


Conclusion



A partir de ce principe là, on pourrait aussi autoriser le lancé de dés partout, sauf sur certains forums (^-^).

Pour tout problème, je vous invite à vous rendre dans la section "Problème en codage".

Manumanu

Restriction d'adresses emails à l'inscription - Mer 24 Sep 2014 - 3:09


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Si vous avez l'envie étrange de restreindre des adresses email par domaines à l'inscription de vos membres (par exemple, interdire les adresses en @gmail.com), alors ce plugin est fait pour vous.

Comment l'installer
  1. Il suffit d'aller dans votre espace d'administration, Modules → HTML & Javascript → Gestion des codes Javascript.
  2. Assurez-vous que "Activer la gestion des codes Javascript" est bien actif, puis cliquez sur "Créer un nouveau javascript".
  3. Dans la nouvelle fenêtre, copiez-collez simplement ce code, tel quel :

    Code:
    var emailrestrict=function(e,t){"use strict";var n=function(e,t){var n=e.split("@");for(var r in t){if(n[1]===t[r]){alert('Les adresses de type "'+t[r]+'" ne sont pas autorisées.');return true}}return false};var r=function(t){var r=e("#form_register"),i=r.find("#email");r.on("submit",function(e){if(n(i.val(),t)){e.preventDefault()}})};return{init:r}}(jQuery);

    $(document).ready(function() {
        emailrestrict.init([
            // La liste
            'gmail.com',
            'mail.com',
            'voila.fr',
            'yahoo.com'
        ]);
    });



Attention : C'est à vous de remplacer / ajouter / supprimer des domaines dans la liste prévue à cet effet ; mettez chaque domaine entre guillemets et en séparant chaque domaine par une virgule.

Pensez bien à cocher "Toutes les pages", validez, et c'est tout !

Désormais, les utilisateurs qui tenteront d'utiliser un domaine mail restreint verront un message d'erreur au moment de l'inscription :



Une note sur la fiabilité
Le javascript peut être désactivé par un utilisateur, et donc rendre cette vérification totalement inopérante. Il s'agit plus d'une indication restrictive que d'une véritable interdiction.

Une note sur la compatibilité
Ce script ne fonctionne pour l'instant que sur un forum phpBB2.

Évolutions
Si vous avez d'autres fonctionnalités en tête, faites-le moi savoir.

Si vous êtes développeur JS et que vous souhaitez voir le code pour l'adapter à vos besoin ou travailler dessus et proposer des ajouts ou autres améliorations, vous pouvez forker.

Enjoy !

Pour les devs, vous pouvez voir le script sur GitHub : https://github.com/RhooManu/forumactif-emailrestrict

Scavenger

Le javascript ! (au sens large) - Lun 8 Sep 2014 - 17:37



Hello tout le monde,
Je voulais baptiser ce nouveau sous-forum avec un sujet qui me tient à cœur.

Le javascript

Et oui, le javascript, mais la question est, qu'est ce que le javascript pour vous ? Un langage obscur qui ne sert qu'à faire bouger des onglets ? Un langage formidable pour faire tout un tas d'application web / de LS ?

Venez ici parler de votre expérience avec le javascript, ce qu'il vous inspire, est-ce qu'il vous faire peur ? Est-ce aussi compliqué qu'il n'y parait ?

Le débat est lancée ! Very Happy

Manumanu

Choix de background pour vos utilisateurs - Dim 17 Aoû 2014 - 3:34


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Salut à tous,

Je viens de me fendre d'un petit plugin permettant de proposer à vos membres le choix d'une image de fond, sur l'élément que vous voulez (que ça soit votre en-tête, le fond de votre chatbox, le fond du forum, etc.). Le choix est ensuite sauvegardé, et l'utilisateur retrouvera ce fond à chaque page visitée, y compris après fermeture du navigateur.


1. Préparer le html
La première chose, c'est de créer un sélecteur. Si vous n'êtes pas familier avec les éléments de formulaire en html, vous pouvez vous référer au chapitre "les listes déroulantes" sur OpenClassrooms.

Il va donc falloir ajouter un bout de code dans votre template. À vous de voir où vous souhaitez le mettre. Par défaut, je vous suggère de lui trouver une place dans le template overall_header, après <body>. Pour cela, allez dans votre interface d'administration, puis "Affichage" → "Templates" → "Général". Après toute modification, pensez à appliquer celles-ci (bouton "+" vert une fois que vous aurez sauvegardé, dans la liste des templates).

Voilà un exemple du code à mettre :
Code:
<select id="change-background" class="select">
   <option value="image1" data-image="http://adresseimage1.jpg">Image 1</option>
   <option value="image2" data-image="http://adresseimage1.jpg">Image 2</option>
   <option value="image3" data-image="http://adresseimage1.jpg">Image 3</option>
   <option value="image4" data-image="http://adresseimage1.jpg">Image 4</option>
</select>



  • value="" est un identifiant pour l'élément sélectionné dans la liste. Veillez à ce que chaque valeur soit unique !
  • data-image="" doit contenir l'url (adresse) de votre image. Elle peut être hébergée n'importe où.


Sur la balise <select>, l'ID peut être modifié selon votre envie, mais attention à bien reporter la modification dans le Javascript par la suite. La classe ne sert qu'à styliser votre élément en CSS, vous pouvez choisir ce que vous voulez.


À vous, par la suite, d'appliquer du CSS pour améliorer le rendu du sélecteur, modifier sa position, etc.

2. Préparer le JS
Vient ensuite le moment d'ajouter le plugin à vos scripts. Pour ça, vous avez deux solutions :

La première, c'est d'ajouter un nouveau script directement dans l'administration de votre forum. Pour ça, rendez-vous sur "Modules" → "HTML & Javascript" → "Gestion des codes Javascript". Enfin, cliquez sur "Créer un nouveau Javascript".

Là, vous allez devoir remplir quelques champs. Indiquez un titre, cochez "toutes les pages", et dans le dernier champ, on écrira le code indiqué plus loin.


La seconde méthode, c'est d'ajouter le script directement dans votre html ; vous pouvez faire ça dans votre template overall_header, JUSTE AVANT la ligne </head> (et non <head> !), ou bien dans overall_footer_end, JUSTE AVANT la ligne </body>.

Dans un cas comme dans l'autre, voici comment ajouter le code :

Code:
<script type="text/javascript">
   /* ici le contenu du script que l'on verra plus loin */
</script>


Maintenant que tout ceci est prêt, voilà le code en question (en deux parties distinctes). D'abord, le plugin en lui-même (minifié et compressé pour un gain de place / poids) :

Code:
(function(e,t){e.fn.changeBackground=function(t){t=e.extend({target:"body"},t);this.each(function(){function a(e){r.css({"background-image":'url("'+e+'")'})}function f(){n.val(localStorage[s])}var n=e(this),r=e(t.target),i="fondForum:"+window.location.host+"Img",s="fondForum:"+window.location.host+"Select",o,u;if(localStorage[i]){a(localStorage[i]);f()}n.on("change",function(){u=n.find(":selected").data("image");o=n.val();a(u);localStorage.setItem(i,u);localStorage.setItem(s,o)})});return this}})(jQuery);


Vous pouvez le copier-coller directement aux emplacements présentés plus tôt.

Ensuite, il faut instancier le plugin sur le sélecteur html. Pour ça, on ajoute ceci juste après le code qu'on vient de copier :

Code:
$(document).ready(function() {
   $('#change-background').changeBackground();
});


La première ligne sert à attendre que jQuery (et la page en elle-même) ait fini de charger. La seconde, c'est celle qui nous intéresse.

On y appelle le plugin sur notre élément (le sélecteur). Remarquez (si vous n'êtes pas familier avec le jQuery) que la syntaxe est la même que pour le CSS. Ainsi, on avait défini un attribut id="change-background" sur notre élément html, on l'appelle donc avec le croisillon (non, ce n'est pas une dièse). Si vous changez votre ID dans le html, vous devez le changer ici aussi.


Ensuite, enregistrez votre code. Le voici fonctionnel.

3. Les options
En l'état, le plugin fonctionne par défaut sur l'élément body (le fond de la page). Vous pouvez ajuster ce point en modifiant l'instanciation du plugin (voir juste au-dessus).

Code:

$(document).ready(function() {
   $('#change-background').changeBackground({
      target: '.monElement'
   });
});


La syntaxe change légèrement : On passe une option au plugin. Ici, l'élément important est '.monElement'. C'est une syntaxe CSS classique, à vous d'écrire le sélecteur CSS qui convient pour cibler l'élément sur lequel vous souhaitez agir, en lieu et place du body.


4. Multiple
Vous pouvez avoir plusieurs sélecteurs. Il faut que ceux-ci aient un ID différent dans le html. Ensuite, il suffit de les instancier chacun à leur tour :

Code:
$(document).ready(function() {
   $('#change-background').changeBackground();
   $('#autre-element').changeBackground();
});


Conclusion
Je ne cache rien, vous pouvez prendre tout ça en l'état. N'hésitez pas à poser des questions si besoin. Il est possible que le plugin évolue avec le temps et propose de nouvelles options et d'autres fonctionnalités, ou bien qu'il soit simplement amélioré ; auquel cas, ce sera signalé ici. Il vous suffira de copier/coller le nouveau code pour le remplacer.

Onyx

Navigation en forme d'horloge - Lun 23 Juin 2014 - 20:25




Navigation en forme d'horloge


Salut !

Voici un petit LS d'une barre de navigation en forme d'horloge dont l'aiguille pointe sur les liens survolés qui a été fait pour la demande de Dastan.

Pour l'aperçu, cliquez juste ici.

Ce code est en trois parties.
  • Tout d'abord, nous allons supprimer l'ancienne navigation et la remplacer par la notre dans le template "Overhall Header".
  • Ensuite, nous allons mettre notre navigation en forme en allant ajouter certains éléments dans le CSS.
  • Enfin, nous allons ajouter un petit javascript pour savoir qu'un nouveau message privé est arrivé dans notre messagerie. D'ailleurs, pour cette partie, je me suis servie de ce tuto : http://www.school-of-pub.net/t11850-fa-totalement-personnaliser-la-barre-de-nav.


Mettre un crédit vers Never-Utopia est obligatoire si vous utilisez ce LS.



1. Corps de la navigation (Template Overhall_Header)


Pour commencer, nous allons devoir nous débarrasser de la navigation normale afin qu'elle arrête de nous traîner dans les jambes.
Comment?
Nous allons carrément la supprimer.

Elle devrait normalement se trouver entre les lignes 273 et 277. Voici à quoi elle ressemble :
Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
 </table>



Une fois que c'est fait, il est temps d'ajouter notre propre navigation. Du coup, au même endroit où était positionné l'ancienne barre de navigation, nous allons venir mettre le code suivant :
Code:
<table cellspacing="0" cellpadding="0" border="0" align="left">
 <tr>
                                          <td align="left">
   <div class="nav_bloc" align="center">
    <div class="navv" id="accueil"><a href="/forum"><img src="http://img11.hostingpics.net/pics/578802accueil.png" alt="Accueil" /></a></div>
    <div class="navv" id="rechercher"><a href="/search"><img src="http://img11.hostingpics.net/pics/896295rechercher.png" alt="Rechercher" /></a></div>
    <div class="navv" id="membres"><a href="/memberlist"><img src="http://img11.hostingpics.net/pics/618481membres.png" alt="Membres" /></a></div>
    <div class="navv" id="groupes"><a href="/groups"><img src="http://img11.hostingpics.net/pics/826427groupes.png" alt="Groupes" /></a></div>
                                                    <div class="navv" id="profil"><a href="/profile?mode=editprofile"><img src="http://img11.hostingpics.net/pics/446898profil.png" alt="Profil" /></a></div>
      <!-- BEGIN switch_user_logged_in -->
    <div class="navv" id="mp"><a href="/privmsg?folder=inbox"><img src="http://img11.hostingpics.net/pics/860693messagerie1.png" alt="MP" id="mpO" /></a></div>
                                                    <div class="navv" id="off"><a href="/login?logout"><img src="http://img11.hostingpics.net/pics/225491onoff.png" alt="Déconnexion" /></a></div>
      <!-- END switch_user_logged_in -->
      <!-- BEGIN switch_user_logged_out -->
                                                    <div class="navv" id="s_inscrire"><a href="/register"><img src="http://img11.hostingpics.net/pics/693663sinscrire.png" alt="S'inscrire" /></a></div>
                                                    <div class="navv" id="on"><a href="/login"><img src="http://img11.hostingpics.net/pics/225491onoff.png" alt="Connexion" /></a></div>
      <!-- END switch_user_logged_out -->
                                                    <div class="navv" id="nav_aiguille"></div>
                                                    <div style="visibility: hidden;">{GENERATED_NAV_BAR}</div>
      </div></td>
 </tr>
 </table>


Donc, histoire de comprendre un peu ce qu'on a fait, nous allons regarder un peu le code que nous venons de rajouter :

  • Au tout début, il y a une table qui nous permet de positionner notre navigation, de la même façon qu'avec la navigation normale.
  • Ensuite, nous avons une "div" avec la class "nav_bloc". C'est le bloc avec l'image de l'horloge en background qui contient tous les liens de la navigation.
  • Puis, nous avons diverses "div" avec les liens de notre navigation. C'est séparé en trois parties :
    • Les liens que tout le monde peut voir.
    • Les liens entre le "BEGIN switch_user_logged_in" et "END switch_user_logged_in" que seuls les membres connectés peuvent voir.
    • Les liens entre "BEGIN switch_user_logged_out" et le "END switch_user_logged_out" que seuls les invités peuvent voir.
  • En avant dernier, nous avons l'aiguille qui tourne selon le lien sur lequel notre curseur est placé.
  • Enfin, nous avons l'ancienne navigation "GENERATED_NAV_BAR" qui est invisible mais qui nous sera utile pour récupérer le code des nouveaux MPs.

À l'exeption des images de l'aiguille et de l'horloge, toutes les images des liens peuvent être modifiées à cette étape.



2. Mise en forme (CSS)


Si vous avez installé le code dans le template, vous voyez sans doute tout de suite que ce n'est pas super du tout pour le moment.

Du coup, nous allons mettre en forme notre navigation à l'aide du code suivant que j'expliquerai ensuite :
Code:
              /*NAVIGATION*/

/*Bloc de l'horloge*/
.nav_bloc {
  background-image: url('http://img15.hostingpics.net/pics/909229montre2.png');
  width: 300px;
  height: 300px;
  position: relative;
  display: block;
  margin-top: -190px;
  margin-left: 30px;
}

/*Trucs pour les liens*/
.navv {
  position: absolute;
  display: block;
  z-index: 2;
}

/*Aiguille*/
#nav_aiguille {
  background-image: url('http://img15.hostingpics.net/pics/418642aiguille.png');
  width: 14px;
  height: 244px;
  bottom: 32px;
  left: 140px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  z-index: 1;
}

/*Positionnement des liens*/
#accueil {
  width: 100px;
  height: 27px;
  bottom: 260px;
  left: 101px;
  -webkit-transform:rotate(1deg);
  transform:rotate(1deg);
}
#rechercher {
  width: 131px;
  height: 35px;
  bottom: 200px;
  left: 184px;
  -webkit-transform:rotate(57deg);
  transform:rotate(57deg);
}
#membres {
  width: 94px;
  height: 28px;
  bottom: 100px;
  left: 218px;
  -webkit-transform:rotate(109deg);
  transform:rotate(109deg);
}
#groupes {
  width: 99px;
  height: 32px;
  bottom: 21px;
  left: 144px;
  -webkit-transform:rotate(157deg);
  transform:rotate(157deg);
}
#profil {
  width: 79px;
  height: 28px;
  bottom: 25px;
  left: 55px;
  -webkit-transform:rotate(205deg);
  transform:rotate(205deg);
}
#mp {
  width: 115px;
  height: 39px;
  bottom: 120px;
  left: -31px;
  -webkit-transform:rotate(265deg);
  transform:rotate(265deg);
}
#off, #on {
  width: 80px;
  height: 31px;
  bottom: 225px;
  left: 26px;
  -webkit-transform:rotate(315deg);
  transform:rotate(315deg);
}
#s_inscrire {
  width: 107px;
  height: 37px;
  bottom: 120px;
  left: -27px;
  -webkit-transform:rotate(263deg);
  transform:rotate(263deg);
}

/*Mouvement de l'aiguille selon le lien survolé*/
#accueil:hover ~ #nav_aiguille {
  -webkit-transform:rotate(2deg);
  transform:rotate(2deg);
}
#rechercher:hover ~ #nav_aiguille {
  -webkit-transform:rotate(57deg);
  transform:rotate(57deg);
}
#membres:hover ~ #nav_aiguille {
  -webkit-transform:rotate(109deg);
  transform:rotate(109deg);
}
#groupes:hover ~ #nav_aiguille {
  -webkit-transform:rotate(157deg);
  transform:rotate(157deg);
}
#profil:hover ~ #nav_aiguille {
  -webkit-transform:rotate(205deg);
  transform:rotate(205deg);
}
#mp:hover ~ #nav_aiguille {
  -webkit-transform:rotate(265deg);
  transform:rotate(265deg);
}
#s_inscrire:hover ~ #nav_aiguille {
  -webkit-transform:rotate(263deg);
  transform:rotate(263deg);
}
#on:hover ~ #nav_aiguille, #off:hover ~ #nav_aiguille {
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}

               /*FIN NAVIGATION*/



Maintenant, pour ceux qui veulent comprendre ce qu'ils font à la place de faire du copier/coller, nous allons découper certaines parties de ce CSS afin de comprendre comment cela fonctionne.

Premièrement, le bloc de l'horloge :
Code:
/*Bloc de l'horloge*/
.nav_bloc {
  background-image: url('http://img15.hostingpics.net/pics/909229montre2.png');
  width: 300px;
  height: 300px;
  position: relative;
  display: block;
  margin-top: -190px;
  margin-left: 30px;
}


  • Le "background-image" est image de l'horloge.
  • Le "width" est la largeur de l'image de l'horloge et est importante puisque cela délimite la largeur du bloc également.
  • Le "height" est la hauteur de l'image de l'horloge et est importante puisque cela délimite la hauteur du bloc également.
  • La "position: relative" indique que s'il y a d'autres div à l'intérieur du bloc, leur position sera définie par rapport à la largeur et à la hauteur du bloc de l'horloge.
  • Le "display: block;" indique que le bloc de l'horloge est un bloc.
  • Le "margin-top: -190px" permet de déplacer le bloc de 190px vers le haut, à savoir sur la bannière.
  • Le "margin-left: 30px" permet de déplacer le bloc de 30px vers la droite.



Deuxièmement, certaines caractéristiques des liens :
Code:
/*Trucs pour les liens*/
.navv {
  position: absolute;
  display: block;
  z-index: 2;
}


  • La "position: absolute" veut dire que la position des liens sont automatiquement liés aux bordures du bloc de l'horloge.
  • Le "display: block" indique que les liens sont des blocs.
  • Le " z-index: 2" indique que les liens sont au-dessus des éléments qui ont un "z-index" inférieur à 2 et en-dessous des éléments qui ont un "z-index" supérieurs à 2.



Troisièmement, l'aiguille comme elle est initialement :
Code:
/*Aiguille*/
#nav_aiguille {
  background-image: url('http://img15.hostingpics.net/pics/418642aiguille.png');
  width: 14px;
  height: 244px;
  bottom: 32px;
  left: 140px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  z-index: 1;
}


  • Le "background-image" est image de l'aiguille.
  • Le "width" est la largeur de l'image de l'aiguille et est importante puisque cela délimite la largeur du bloc également.
  • Le "height" est la hauteur de l'image de l'aiguille et est importante puisque cela délimite la hauteur du bloc également.
  • Le "bottom" indique que le bloc de l'aiguille est à 32px du bas du bloc de l'horloge.
  • Le "left" indique que le bloc de l'aiguille est à 140px du côté gauche du bloc de l'horloge.
  • Le "transform: rotate(0deg);" indique que le bloc de l'aiguille reste droit.
  • Le "transition: 0.5s;" indique que les mouvements de l'aiguille seront d'une durée de 0,5 seconde.
  • Le " z-index: 1" indique que les liens sont au-dessus des éléments qui ont un "z-index" inférieur à 1 et en-dessous des éléments qui ont un "z-index" supérieurs à 1.



Quatrièmement, le positionnement des liens de la navigation. Comme ils sont tous basés sur le même principe, je prendrai le lien de "rechercher" comme exemple :
Code:
#rechercher {
  width: 131px;
  height: 35px;
  bottom: 200px;
  left: 184px;
  -webkit-transform:rotate(57deg);
  transform:rotate(57deg);
}


  • Le "width" est la largeur de l'image de rechercher et est importante puisque cela délimite la largeur du bloc également.
  • Le "height" est la hauteur de l'image de rechercher et est importante puisque cela délimite la hauteur du bloc également.
  • Le "bottom" indique que le bloc de rechercher est à 200px du bas du bloc de l'horloge.
  • Le "left" indique que le bloc de rechercher est à 184px du côté gauche du bloc de l'horloge.
  • Le "transform: rotate(57deg);" indique que le bloc de rechercher est tourné de 57 degrés vers la droite.



Dernièrement, le déplacement de l'aiguille en fonction du lien survolé. Comme ils sont tous basés sur le même principe, je prendrai le lien de "rechercher" comme exemple :
Code:
#rechercher:hover ~ #nav_aiguille {
  -webkit-transform:rotate(57deg);
  transform:rotate(57deg);
}


  • Le "#rechercher:hover ~ #nav_aiguille" veut dire que quand le bloc "#rechercher" (bloc de rechercher) est survolé, il y a l'effet suivant sur le bloc "#nav_aiguille" (bloc de l'aiguille).
  • Le "transform: rotate(57deg);" indique que le bloc de l'aiguille tourne de 57 degrés vers la droite. Normalement, la rotation devrait être la même que celle qui a été appliquée sur le bloc rechercher.


J'ai modifié tous les liens des images et tout est décalé! Qu'est-ce que je fais maintenant?
Premièrement, va lire les explications du CSS si tu ne l'as pas fait.
Ensuite, il va falloir repositionner chaque lien modifié avec leurs attributs "bottom", "left" et "rotate".
N'oublie pas d'aller ajuster la rotation de l'aiguille avec la nouvelle rotation de tes liens !
Enfin... bonne chance pour ce casse-tête Twisted Evil 



3. Nouveau MP (Javascript)


Avec la navigation de base, il y a une image différente que celle de la messagerie normale lorsqu'il y a un nouveau message. Seulement, ce n'est pas une fonction automatique si on fait sa propre barre de navigation. Du coup, nous allons reproduire cet effet !

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT

À ce même endroit, si vous n'avez pas activé la gestion des javascripts, il faut le faire avant de faire tout autre chose.

Ensuite, nous allons "créer un nouveau javascript".
Il va falloir lui choisir un nom. Ex: "Nouveau MP"
Ensuite, il va falloir cocher le Placement "Sur toutes les pages".

Puis, on va y coller le code suivant :
Code:
jQuery().ready(function(){
        
        /* On prend l'élément du menu de base pour savoir s'il y a un nouveau message */
        var e= $("#i_icon_mini_new_message");
        
        /* Si il y en a pas, on s'arrête là */
        if(!e.length) return;
        
        /* S'il y en a, l'image changera pour l'image de nouveau message*/
        $("#mpO").attr('src','http://img15.hostingpics.net/pics/795760messagerie2.png');
      
      
        });


Cette partie de code est expliquée directement dans le code alors on va en rester là ^^




C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !


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

Onyx

Bloc flottant latéral ouvrant "onclick" (javascript) - Sam 11 Jan 2014 - 5:11



Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Bouh!

Autant j'aime bien le bloc flottant latéral ouvrant "onclick" (CSS avec target) d'Okhmhaka, autant je préfère passer par le javascript pour éviter d'avoir les "#target_onglet" dans ma barre d'adresse.

Du coup, j'ai laissé tombé l'idée d'utiliser le CSS3 pour ça et me voilà avec du javascript qui vous donnera le même résultat avec une méthode différente.

Sachant que tout le monde n'adore pas nécessairement faire du graphisme, vous avez l'option d'avoir un bouton pour ouvrir/fermer l'onglet fait avec des images ou avec du texte ^^

Je vous montre un petit exemple juste ici avec la méthode qui ne demande pas d'images.



Si le bouton est une image



Dans votre template "Overhall Header", vous devez trouver l'ouverture de la balise "body". Sous phpBB2, elle ressemble à ceci :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


Voici le code du bloc flottant que vous pouvez installer suite à cette balise :
Code:
  <div id="ongleton">
    <div class="ongleton_contenu">
      Contenu du bloc
    </div>
    <img id="ongleton_ouvrir" src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" />
    <img id="ongleton_fermer" src="http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png" style="display: none;" />
  </div>
  <script type="text/javascript">
  //<!--
    $('#ongleton_ouvrir').click(function(){
      $('#ongleton_ouvrir').css("display", "none");
      $('#ongleton_fermer').css("display", "block");
      $('#ongleton').css("left", "0px");
    });
    $('#ongleton_fermer').click(function(){
      $('#ongleton_ouvrir').css("display", "block");
      $('#ongleton_fermer').css("display", "none");
      $('#ongleton').css("left", "-212px");
    });
  //-->
  </script>


Si on décortique ceci, nous avons tout d'abord un bloc (id="ongleton") qui englobe le bloc flottant et le bouton servant à l'ouvrir et à le fermer.
Ensuite, nous avons le bloc flottant (class="ongleton_contenu").
Puis, nous avons deux div, soit deux boutons.
La première image est le bouton pour ouvrir (id="ongleton_ouvrir").
La deuxième image est le bouton pour fermer (id="ongleton_fermer").
Enfin, nous avons le javascript qui fait fonctionner le tout.

Attention, dans le javascript, il  faut indiquer la largeur du bloc flottant (bordures, padding et marges inclus) en remplaçant le 212px à cet endroit :
Code:
$('#ongleton').css("left", "-212px");



Enfin, vous pourrez modifier à votre sauce le bloc flottant dans le CSS en y mettant le code suivant:
Code:
/*Bloc qui contient le bloc flottant et les boutons*/
#ongleton {
  position: fixed;
  height: 90%; /*Hauteur du bloc flottant*/
  top: 5%; /*Espace du haut*/
  left: -212px;
  z-index: 999;
  transition: 1s;
  -webkit-transition: 1s;
}
/*Bloc flottant*/
.ongleton_contenu {
  width: 200px; /*Largeur*/
  height: 100%;
  padding: 5px;
  background-color: #1B2836;
  color: #9BB9D9;
  font-size: 13px;
  font-family: Time New Roman;
  border: 2px #6993BE solid;
  border-left: none;
  border-radius: 0 30px 30px 0;
}
/*Boutons Ouvrir et Fermer*/
#ongleton_ouvrir, #ongleton_fermer {
  position: absolute;
  top: 45%;
  left: 212px; /*Mettre le bouton à 212px du bord, donc pour qu'il dépasse*/
  z-index: 999;
  cursor: pointer;
}


Voilà, votre bloc flottant est installé ^^






Si le bouton est un texte



Dans votre template "Overhall Header", vous devez trouver l'ouverture de la balise "body". Sous phpBB2, elle ressemble à ceci :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


Voici le code du bloc flottant que vous pouvez installer suite à cette balise :
Code:
  <div id="ongleton">
    <div class="ongleton_contenu">
      Contenu du bloc
    </div>
    <div id="ongleton_ouvrir">
      Ouvrir
    </div>
    <div id="ongleton_fermer" style="display: none;">
      Fermer
    </div>
  </div>
  <script type="text/javascript">
  //<!--
    $('#ongleton_ouvrir').click(function(){
      $('#ongleton_ouvrir').css("display", "none");
      $('#ongleton_fermer').css("display", "block");
      $('#ongleton').css("left", "0px");
    });
    $('#ongleton_fermer').click(function(){
      $('#ongleton_ouvrir').css("display", "block");
      $('#ongleton_fermer').css("display", "none");
      $('#ongleton').css("left", "-212px");
    });
  //-->
  </script>


Si on décortique ceci, nous avons tout d'abord un bloc (id="ongleton") qui englobe le bloc flottant et le bouton servant à l'ouvrir et à le fermer.
Ensuite, nous avons le bloc flottant (class="ongleton_contenu").
Puis, nous avons deux div, soit deux boutons.
La première div est le bouton pour ouvrir (id="ongleton_ouvrir").
La deuxième div est le bouton pour fermer (id="ongleton_fermer").
Enfin, nous avons le javascript qui fait fonctionner le tout.

Attention, dans le javascript, il  faut indiquer la largeur du bloc flottant (bordures, padding et marges inclus) en remplaçant le 212px à cet endroit :
Code:
$('#ongleton').css("left", "-212px");



Enfin, vous pourrez modifier à votre sauce le bloc flottant et les boutons dans le CSS en y mettant le code suivant:
Code:
/*Bloc qui contient le bloc flottant et les boutons*/
#ongleton {
  position: fixed;
  height: 90%; /*Hauteur du bloc flottant*/
  top: 5%; /*Espace du haut*/
  left: -212px;
  z-index: 999;
  transition: 1s;
  -webkit-transition: 1s;
}
/*Bloc flottant*/
.ongleton_contenu {
  width: 200px; /*Largeur*/
  height: 100%;
  padding: 5px;
  background-color: #1B2836;
  color: #9BB9D9;
  font-size: 13px;
  font-family: Time New Roman;
  border: 2px #6993BE solid;
  border-left: none;
  border-radius: 0 30px 30px 0;
}
/*Boutons Ouvrir et Fermer*/
#ongleton_ouvrir, #ongleton_fermer {
  position: absolute;
  top: 45%;
  left: 212px; /*Mettre le bouton à 212px du bord, donc pour qu'il dépasse*/
  z-index: 999;
  cursor: pointer;
  width: 100px;
  height: 20px;
  background-color: #1B2836;
  border: 2px solid #6993BE;
  border-bottom: none;
  text-align: center;
  color: #9BB9D9;
  padding: 5px;
  padding-top: 10px;
  border-radius: 30px 30px 0 0;
  margin-left: -42px; /*Pour coller le bouton contre le bloc flottant*/
  -webkit-transform:rotate(90deg); /*Pour tourner le texte sur le côté (Chrome et Safari)*/
  transform:rotate(90deg); /*Pour tourner le texte sur le côté*/
}


Voilà, votre onglet flottant est installé ^^




N'oubliez pas de créditer N-U è_é

Neva

Design changeant selon l'heure (bannière, fond et autres) - Dim 22 Sep 2013 - 16:33


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


RAPPELS :
- Si vous avez un problème avec ce tutoriel, n'hésitez pas à poser vos questions mais faîtes-le ici : http://www.never-utopia.com/f177-probleme-avec-mon-code  (relisez le tutoriel en entier avant de le faire et, lorsque vous ouvrez votre sujet, fournissez l'adresse de ce tutoriel, le lien de votre forum ainsi que les codes CSS/Javascript/template posant problème)


Salut à tous !

Je vous propose un tutoriel permettant de modifier l’apparence de votre forum selon l’heure (que ce soit pour faire un effet jour/nuit, matin/après-midi, un changement pour seulement une heure ou deux dans la journée...). Les deux exemples proposés se concentreront sur la modification du fond du forum et la modification de la bannière mais je vous invite à tenter vos propres personnalisations =)

A SAVOIR :  
- Le code utilise l’heure de votre ordinateur donc, une fois le code installé, vous pouvez changer l’heure sur votre ordinateur et recharger la page pour tester les différentes périodes.  
- Les codes javascript sont à insérer dans panneau d'admin > modules > gestion des codes javascript
- Sur la page "Gestion des codes javascript", pensez à activer les codes en cochant "oui" après "Activer la gestion des codes Javascript" et en enregistrant.




MODIFIER LE FOND DU FORUM ENTRE LE JOUR ET LA NUIT


Tout d’abord, commencez par mettre votre image de fond pour la nuit à l’endroit habituel (panneau d’administration > affichage > gestion des images > mode avancé > Image du fond de page : collez l’adresse sur cette ligne et validez) et vérifiez qu’elle apparaît bien.

Ensuite, nous n’avons besoin que d’un peu de JavaScript.

Voici le code en question :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 7 && heure < 18){
          $("body").css("background-image", "url('ADRESSE FOND JOUR')");
        }
});


PERSONNALISATION :
Sur la troisième ligne, vous pouvez voir que j’ai défini le jour comme étant entre 7h et 18h. Vous pouvez modifier ces chiffres selon vos désirs (ne touchez qu’aux chiffres).
Attention, nous travaillons sur une base de 24h : 3h ne peut être que 3h du matin, on utilisera 15h pour 3h de l’après-midi.

Sur la quatrième ligne, pensez à remplacer ADRESSE FOND JOUR par l’adresse de ladite image (faites attention à ne pas supprimer les apostrophes, l’adresse doit être écrite entre).

Juste pour bien résumer, l'image que vous avez mise dans vos images est celle qui apparaît normalement et l'image mise dans le javascript est celle qui apparaît pendant la plage de temps inscrite dans le javascript.

INSTALLATION :
Une fois complété, le code est à mettre dans panneau d'admin > modules > gestion des javascript. Cochez bien la case Sur toutes les pages

Et voilà, c’est tout ce qu’il y a à faire ! =)




MODIFIER LA BANNIERE


Tout d’abord, commencez par mettre votre bannière pour la nuit à l’endroit habituel (panneau d’administration > affichage > gestion des images > mode avancé > logo : collez l’adresse sur cette ligne et validez) et vérifiez qu’elle apparaît bien.

Ensuite, il nous faut nos quelques lignes de JavaScript :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
        }
});



PERSONNALISATION :
Sur la troisième ligne, vous pouvez voir que j’ai défini le jour comme étant entre 7h et 18h. Vous pouvez modifier ces chiffres selon vos désirs (ne touchez qu’aux chiffres).
Attention, nous travaillons sur une base de 24h : 3h ne peut être que 3h du matin, on utilisera 15h pour 3h de l’après-midi.

Sur la quatrième ligne, pensez à remplacer ADRESSE FOND JOUR par l’adresse de ladite image (faites attention à ne pas supprimer les apostrophes, l’adresse doit être écrite entre).



Si la taille de la bannière de jour diffère de celle de nuit, il vous faut compléter et utiliser ce code :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
          $("#pun-logo img,#i_logo,#logo img").css("width", "LARGEUR EN PX");
          $("#pun-logo img,#i_logo,#logo img").css("height", "HAUTEUR EN PX");
        }
});


INSTALLATION :
Une fois complété, le code est à mettre dans panneau d'admin > modules > gestion des javascript. Cochez bien la case Sur toutes les pages




COMBINER LES DEUX CODES


Si vous souhaitez modifier votre bannière ET votre fond, lisez les deux explications plus haut et suivez la démarche pour le template et le CSS de la bannière mais utilisez ce JavaScript :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
          $("body").css("background-image", "url('ADRESSE FOND JOUR')");
        }
});





RAJOUTER DES TRANCHES HORAIRES


Pour rajouter des tranches horaires, il suffit de reproduire la partie de code qui suit (il s'agit du code pour changer le fond, je vous donne plus bas les parties pour les deux autres codes) en en changeant les infos et en collant  après le } de la précédente et avant le " }); " de fin :

Code:
       if(heure >= 7 && heure < 18){
          $("body").css("background-image", "url('ADRESSE FOND JOUR')");
        }


Voilà ce que ça donnerait en ajoutant un 19-23h :
Code:
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 7 && heure < 18){
          $("body").css("background-image", "url('ADRESSE FOND 7-18h')");
        }
        if(heure >= 19 && heure < 23){
          $("body").css("background-image", "url('ADRESSE FOND 19-23h')");
        }
});


Pour la bannière, c'est cette partie que vous devez copier/coller/remplir avec les nouvelles infos de la même façon :
Code:
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
        }


Et cette partie pour le code combinant les deux effets :
Code:
        if(heure >= 8 && heure < 19){
          $("#pun-logo img,#i_logo,#logo img").attr("src", "ADRESSE FOND JOUR");
          $("body").css("background-image", "url('ADRESSE FOND JOUR')");
        }





AUTRES :


Bien que cette astuce ait été fait avec la bannière et le fond en tête, il faut comprendre que cela peut fonctionner pour n'importe quoi.

Petit exemple où je veux qu'un bloc avec l'id "bloc_bleu" devienne rouge de 8 à 19h :
Code:
/*Partie html*/
<div id="bloc_bleu">Je suis un bloc bleu qui devient rouge de 8 à 19h.</div>

/*Partie javascript*/
jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#bloc_bleu").css("background-color", "red");
        }
});


Petit exemple où je veux qu'une image avec l'id "image_quelconque" change d'images de 8 à 19h :
Code:
/*Partie html*/
<img id="image_quelconque" src="ADRESSE FOND NUIT" />

/*Partie javascript*/jQuery(document).ready(function(){var date = new Date();
        var heure = date.getHours();
        if(heure >= 8 && heure < 19){
          $("#image_quelconque").attr("src", "ADRESSE FOND JOUR");
        }
});


Bref, on sélectionne notre "id" avec le $("#JeSuisUnId") au début en changeant le "JeSuisUnId" par le nom de l'id de notre bloc/image.
Ensuite, on utilise .attr("src", "ADRESSE FOND JOUR"); pour changer l'adresse de l'image (seulement pour les images).
Ou, on utilise .css("propriété", "valeur"); pour changer une valeur dans le css, que cela soit le background-image, la couleur de l'écriture, etc.




CONSEILS SUPPLEMENTAIRES :
- En cas de problème, vérifiez bien tous les signes de ponctuation
- Pour faire apparaître/disparaître un élément, jouez sur la propriété display (je pense notamment à display: none; pour faire disparaître votre bannière)


Revenir en haut

La date/heure actuelle est Lun 23 Oct 2017 - 2:46