AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


34 résultats trouvés pour jquery

Onyx

Système de Badges - Jeu 2 Sep 2021 - 2:06


Système de Badges



Préambule



Vous avez vu le système de badge "Utopia Adventure" sur votre profil de Never-Utopia? Celui qui ressemble à ceci ?
Tag jquery sur Never Utopia - graphisme, codage et game design WLk1ZKe

Eh bien vous pouvez avoir la même chose.

Ce libre service a été créé suite à plusieurs demandes. Au départ, le système a été créé suite à la demande de Iguolta par Nihil Scar Winspeare qui l'a ensuite adapté aux profils simples suite à la demande de Crépuscule de Lune. Enfin, j'ai bricolé une version avec les badges qui s'affichaient dans les messages à la demande de Capuccino que j'ai beaucoup retouché pour ce LS.


IMPORTANT : Ce LS a été créé avant l'ajout du nouveau système de récompense par ForumActif. Maintenant qu'il existe, il serait peut-être mieux d'aller jeter un coup d’œil à ce système de récompense pour valider si cela correspond à vos besoins avant de vous intéresser à ce LS Wink


Étapes


Étape 1
Dans une page HTML, on met tous les badges qui peuvent être obtenus par les membres et on donne une classe (un nom) unique à chaque badge pour les identifier.

Étape 2
On va créer un champ de profil (comme le champ âge, date de naissance, etc. sur le profil). Dans ce champ, les membres (ou Modos ou Admins) mettront le nom des badges qu'ils ont obtenus.

Étape 3
Dans le profil des joueurs, un javascript ira prendre les badges dans la page HTML et les ajoutera au bas du profil (ou à un autre endroit de votre choix). Ce même javascript regardera le champ des badges pour identifier les badges obtenus et leur donnera la classe "obtenu" afin qu'on puisse les différencier des non-obtenus.
- Exemple de mon forum-test
- Exemple avec profil simple personnalisé par Star City Heroes

Étape 4
Dans le profil des joueurs sur les sujets/messages, un javascript ira comparer le champ des badges aux badges de la page HTML et copiera les badges obtenus pour les ajouter dans le profil (ou ailleurs dans la page, au choix).
- Exemple de mon forum-test
- Exemple (les badges sont appelés "sorts") par L'Île d'Arcane
- Exemple avec les badges dans la signature (badges avec infobulles) par L'Île d'Arcane

Étape 5
Enfin, on va mettre en forme les badges pour leur donner un peu de style et différencier les badges obtenus des non-obtenus.

Je tiens à préciser que les exemples qui ne sont pas de mon forum test sont là uniquement pour que vous ayez une idée de ce que vous pourriez obtenir, vous ne pouvez pas les recopier. Les membres de ces forums ont travailler dur pour adapter les codes à leur design, ils méritent qu'on les respecte et qu'on ne les plagie pas Wink

Vous êtes libre de faire l'étape 3 et/ou l'étape 4 selon ce que vous voulez avoir. Les deux javascripts sont indépendants, donc vous pouvez seulement en prendre un des deux ou les deux selon vos souhaits.


Critères de base pour utiliser le LS


- Le code fonctionne seulement avec la version de forum PhpBB2
- Il faut avoir accès au panneau d'administration (donc être Admin)
- Pour mettre les badges sur les sujets ou personnaliser avec le Profil Simple, il faut avoir accès aux templates (donc avoir accès au compte fondateur)

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 page des badges (Page HTML)



Nous allons maintenant créer une page HTML dans laquelle nous allons mettre tous les badges.

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 comme "Système de Badges".
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 lang="fr">
<head>
  <meta charset="utf-8" />
  <style>
  .badge {
    display: inline-block;
    margin: 5px;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
  }
  .obtenu {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
  }
  </style>
</head>
<body>
 
  <div id="badges-profil">
    <img src="https://2img.net/h/www.aht.li/2946903/morpheus.png" title="Badge 1" class="badge badge_1" />
    <img src="https://2img.net/h/www.aht.li/2946904/neo.png" title="Badge 2" class="badge badge_2" />
    <img src="https://2img.net/h/www.aht.li/2946905/architecte.png" title="Badge 3" class="badge badge_3" />
  </div>
 
</body>
</html>


Lorsque vous modifiez votre page, il faut cliquer sur le triple engrenage (Tag jquery sur Never Utopia - graphisme, codage et game design HAHlEmt), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.


Chaque badge correspond à ceci :
Code:
<img src="url_du_badge" title="Titre du badge" class="badge badge_3" />


Ici, il s'agit d'une image, mais vous pouvez tout autant faire une infobulle ou autre chose.

Ce qui nous intéresse ici est le badge_3. Pour chaque badge j'ai rajouté une classe unique. Ici, j'ai simplement mis un chiffre, mais on aurait pu mettre "halloween2" par exemple :)

Le but c'est d'avoir une classe supplémentaire et unique (^-^)

Il est important que ces noms ne comportent pas d'espace, ni d'apostrophe ( ' ), de guillement ( " ) ou de caractères spéciaux (point d'exclamation, signe de dollar, etc.), sinon cela ne fonctionnera pas.

Exemples de bonnes classes :
Code:
badge1
concours_2
Roi-du-Monde
Champion_de_l_Été
halloween


Exemples de mauvaises classes :
Code:
badge 1
concours!
Roi-du-Monde"
Champion_de_l'Été
hallo;ween


Voilà \o/




2. Créer le champ des badges



Afin d'afficher les badges obtenus par les membres, on va maintenant créer un champ de profil dans lequel on va mettre les classes uniques aux badges obtenus afin de les identifier.

Pour cela, nous allons aller dans :
> Panneau d'administration > Utilisateurs et Groupes > Utilisateurs > Profils

Comme ça : https://i.imgur.com/DneWS4I.png

On va devoir créer un nouveau champ de profil personnalisé.

Il faut s'assurer des éléments suivants :
- Le Type doit être : Zone de texte
- Le Nom doit être : Badges obtenus
- L'affichage doit être sur le profil et/ou sur les messages selon où vous voulez les badges.
- On doit afficher ce champ pour les Invités.

Le reste est libre.

Comme ça : https://i.imgur.com/59dkhEa.png

Chaque fois qu'un membre obtiendra un badge, il (ou le modo) devra aller l'ajouter dans ce champ sur leur profil.
Les différents badges doivent être séparés par des points virgules ( ; ).

Ainsi on peut avoir comme contenu pour un membre qui a les badge_2 et badge_3 :
Code:
badge_2; badge_3


Si j'avais personnalisé le nom de mes badges dans le HTML, je pourrais avoir par exemple :
Code:
badge1; badge2; concoursgagné; dernière-place; FouDuRoi; TCF_est_meilleur_que_LCF; badge5


Je mets simplement des noms qui sont plus parlants (^-^)




3. Javascript pour les badges sur le profil



Le javascript affiche en bas du profil les badges avec ceux qu'on a, ceux qu'on a pas :)
Le champ de profil qui contient le nom des badges est masqué, donc les membres ne voient même pas qu'il existe (^-^)

On va dans :
> Panneau d'affichage > Modules > HTML et Javascript > Gestion des codes javascript

Si ce n'est pas déjà fait, on va mettre "Oui" à "Activer la gestion des codes Javascript".

Puis, on crée un nouveau javascript. Il faudra mettre le placement "Sur toutes les pages".

Voilà le script :
Code:
/*
 * SYSTEME DE BADGE
 * LIBRE SERVICE NEVER UTOPIA
 */

/* on vérifie si on est bien sur la page de profil */
if (/^\/u\d+$/.test(document.location.pathname)) {
 
  var idPage = "2"; /* numéro de la page HTML */
 
  $.get("/h" + idPage + "-", function (data) {
    /* on récupère le bloc des badges */
    var $badges = $(data).filter("#badges-profil");
 
    /* on attend que notre page soit prête */
    $(function () {
      /* on récupère le champ des badges obtenus */
      var $profilBadges = $("span:contains('Badges obtenus')").closest("[id^=field_id]");
   
      if ($profilBadges.length > 0) {
        /* selection des badges obtenus du membre */
        var badgesUser = $profilBadges.find(".field_uneditable").text().split(";");
     
        if (badgesUser.length > 0) {
          /* pour chaque badge, on ajoute la classe si besoin */
          for (var i = 0, l = badgesUser.length; i < l; i++) {
            if (badgesUser[i].length > 0) {
              try {
                $badges.find("." + badgesUser[i].trim()).addClass("obtenu");
              } catch (e){
                console.log("Système de badge erreur => " + e);
              }
            }
          }
     
          /* si la personne ne peut pas éditer le champ,
          * on le retire la zone */
          if ($profilBadges.find(".field_editable").length < 1) {
            $profilBadges.remove();
          }
        }
      }
   
      /* on ajoute le bloc en fin de page */
      $("#page-body").after($badges);
 
    });
  })
}


N'oubliez pas de regarder le numéro de votre page HTML qu'on a créé plus tôt et de remplacer le 2 par ce numéro de page à cet endroit :
Code:
var idPage = "2"; /* numéro de la page HTML */


Pour trouver le numéro de votre page HTML, c'est par là :
Tag jquery sur Never Utopia - graphisme, codage et game design J0RCoJi

Petite précision, si le membre peut éditer le champ "Badges obtenus", le champ ne disparaîtra, pour qu'il puisse encore le changer directement en passant par la modification rapide. Par contre si c'est un simple membre qui n'a pas les autorisations pour cela, la ligne sera enlevée :)

Et voilà, vous avez des badges en bas de votre profil !

Le combat contre la publicité:





3.1 Mettre les badges ailleurs



Si vous utilisez un Profil Simple, vous avez l'option de modifier le template "profile_view_body" pour mettre les badges ailleurs dans la page. Cette option est impossible pour le Profil Avancé puisque le template n'y est pas accessible.

Pour savoir si vous avez le profil simple ou avancé, on va aller voir à cet endroit :
> Panneau d'administration > Utilisateurs et Groupes > Utilisateurs > Profils > Options générales
Tag jquery sur Never Utopia - graphisme, codage et game design N6QrjUy

Si le "Activer le profil avancé" est à "Oui", vous avez un Profil Avancé. S'il est à "Non", vous avez le Profil Simple.

Bref, continuons.

Pour mettre les badges ailleurs dans la page du profil, on va dans :
> Panneau d'affichage > Affichage > Templates > Profil > profile_view_body

Puis on va ajouter ce bout de code là où on veut que nos badges apparaissent dans le template :
Code:
<div class="js-badges-profil"></div>



Enfin, on va retourner dans le javascript, puis on va remplacer ce petit bout de code :
Code:
$("#page-body").after($badges);


Par cela :
Code:
$(".js-badges-profil").html($badges);


Voilà (^-^)




4. Javascript pour les badges dans les sujets



Le javascript se servira du champ des badges pour identifier les badges obtenus et le champ sera remplacé par ces badges. Les badges non-obtenus ne seront pas affichés.

C'est aussi possible de mettre les badges obtenus ailleurs, comme au bas du profil, en haut du message, dans la signature, etc.

Pour cela, on va dans :
> Panneau d'affichage > Modules > HTML et Javascript > Gestion des codes javascript

Si ce n'est pas déjà fait, on va mettre "Oui" à "Activer la gestion des codes Javascript".

Puis, on crée un nouveau javascript. Il faudra mettre le placement "Sur les sujets".

Voilà le script :
Code:
/*
 * SYSTEME DE BADGE SUR LES SUJETS
 * LIBRE SERVICE NEVER UTOPIA
 */

var idPage = "2"; /* numéro de la page HTML */

/* on va sur la page html */
$.get("/h" + idPage + "-", function (data) {
  /* on récupère le bloc des badges dans la page html*/
  var $badges = $(data).filter("#badges-profil");

  /* on attend que notre page soit prête */
  $(function() {
 
    /*pour chaque message*/
    $('tr.post').each(function(){
 
      /* on récupère la zone badge du profil */
      var $profilBadges = $(this).find(".profil-label:contains('Badges'):first");
 
      /*on regarde si la personne a des badges*/
      if ($profilBadges.length > 0) {
   
        /* selection des badges du membre */
        var badgesUser = $profilBadges.next().text().split(";");
   
        /* pour chaque badge dans le champ... */
        $profilBadges.next().html('');
        for (var i = 0, l = badgesUser.length; i < l; i++) {
          if (badgesUser[i].length > 0) {
            try {
             
              /* on copie le badge */
              var lebadge = $badges.find("." + badgesUser[i].trim()).clone(true);
              /* on donne la bonne classe et on l'ajoute sur la page */
              $profilBadges.next().append(lebadge.addClass("obtenu"));
       
            } catch (e){
              console.log("Système de badge erreur => " + e);
            }
          }
        }
      }
    }); 
  });
})


Encore une fois, n'oubliez pas de regarder le numéro de votre page HTML qu'on a créé plus tôt et de remplacer le 2 par ce numéro de page à cet endroit :
Code:
var idPage = "2"; /* numéro de la page HTML */



Pour faire fonctionner ce script, on doit modifier un peu le template "viewtopic_body". Pourquoi? Eh bien, pour que le javascript soit en mesure de trouver le bon champ, on doit leur donner une identité qui nous permettre de les retrouver facilement (^-^)

On va aller dans :
> Panneau d'affichage > Affichage > Templates > Général > viewtopic_body

On va trouver ceci :
Code:
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}


Qu'on va remplacer par cela :
Code:
<span class="profil-label">{postrow.displayed.profile_field.LABEL}</span> <span class="profil-champ">{postrow.displayed.profile_field.CONTENT}</span>


Voilà, vos badges obtenus s'afficheront dans le profil des messages !

PS : N'oubliez pas de valider le template Wink


4.1 Mettre les badges ailleurs dans la page



Si vous voulez que les badges soient ailleurs dans le profil ou dans la signature ou ailleurs, on va devoir faire quelques modifications.

Tout d'abord, on doit remplacer ceci dans le javascript :
Code:
/* on donne la bonne classe et on l'ajoute sur la page */
              $profilBadges.next().append(lebadge.addClass("obtenu"));
       
            } catch (e){
              console.log("Système de badge erreur => " + e);
            }
          }
        }
      }
    }); 
  });
})


Par cela :
Code:
/* on donne la bonne classe et on l'ajoute sur la page */
              $(this).find('.js-badges-profil').append(lebadge.addClass("obtenu"));
       
            } catch (e){
              console.log("Système de badge erreur => " + e);
            }
          }
        }
        /* une fois les badges triés, le champ ne sert plus à rien, donc on le supprime*/
        $profilBadges.next().andSelf().remove();
      }
    }); 
  });
})



Puis on va dans le template "viewtopic_body" et vous ajoutez ceci là où vous voulez que les badges apparaissent :
Code:
<div class="js-badges-profil"></div>


Et voilà le travail (^-^)




5. Mise en forme



Les badges ne sont pas nécessairement super jolis pour le moment. Il faut aussi distinguer les badges obtenus des non-obtenus. Alors on va les mettre en forme !

On va dans :
> Panneau d'affichage > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS

On va venir y mettre ce CSS :
Code:
/* BADGES DANS LE PROFIL */
/*Badges*/
#badges-profil .badge, .js-badges-profil .badge {
  display: inline-block;
  margin: 5px;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
/*Badges obtenus*/
#badges-profil .obtenu, .js-badges-profil .obtenu {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
}
/* Style bloc badges*/
#badges-profil, .js-badges-profil {
  border: 2px solid #eed02d;
  background: rgba(255,255,117,0.75);
  margin: 2px 2px 25px;
  text-align: center;
}
/*Titre bloc badges*/
#badges-profil:before, .js-badges-profil:before {
  content: "Badges obtenus";
  display: block;
  background: linear-gradient(#ffff75, #FFc400);
  border-bottom: 1px solid goldenrod;
  color: #20305e;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  padding: 5px;
}

/* BADGES DANS LES MESSAGES */
/*Badges*/
.post .badge {
  display: inline-block;
  margin: 2px;
  vertical-align: middle;
}


Je ne l'explique pas, les titres parlent déjà d'eux-mêmes (^-^)






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 !

Modifier les textes et nombres des variables du QEEL - Lun 18 Déc 2017 - 6:50

Modifier les textes et nombres des variables du QEEL




Bonjour,

Le code suivant fait suite à une demande d'un membre qui pourra sans doute servir à d'autres. :)
Aperçu:

HTML & Javascript
Modification de la template index_body : Affichage > Templates > General
Modification du Javascript : Modules > HTML & Javascript > Gestion des codes Javascript
Pour vérifier que le Javascript est bien activé sur votre forum, rendez-vous ici.

La première étape sera de checker que le Javascript soit activé sur votre forum.
Ensuite dans la gestion des codes Javascript, ajoutez un code avec le titre de votre choix et collez ce code :
Code:
jQuery(document).ready(function(){
  var nb = parseInt($('#member_nb strong').text());
  nb -= 5;
  $('#member_nb strong').text(nb);
});

Ce code prévoit actuellement d'enlever 5 membres au total, si vous souhaitez en ajouter 3 par exemple, il vous remplacer "nb -= 5;" par "nb += 3;".

Ensuite, dans le template index_body, remplace {TOTAL_USERS} par :
Code:
<span id="member_nb">{TOTAL_USERS}</span>


Explication :
Dans le template index_body, on sépare la variable des autres en lui donnant un id pour la retrouver après. Cette variable est composée de : "Nous avons " + X + " membres enregistrés".
Ainsi dans le JQuery, on va récupérer le nombre en stockant le contenu de la balise strong (en séléctionnant l'id "member_nb" ainsi que la balise strong qui encadre le nombre en question) qu'on transforme en chiffre (puisqu'il est actuellement reconnu comme du texte et non comme un chiffre) sur lequel on soustraira ou additionnera ce qu'on veut.

Si vous souhaitez modifier tout le contenu de la variable (incluant donc "Nous avons x membres enregistrés"), il faudra utiliser le code suivant :
Code:
jQuery(document).ready(function(){
  var nb = parseInt($('#member_nb strong').text());
  $('#member_nb').text("Nous avons " + nb + " inscrits au registre");
});


Ces codes peuvent être facilement réutilisés pour les autres variables du forum en utilisant toujours le même principe : Donner un id à la variable que l'on souhaite modifier en l'encadrant d'une balise span, regarder de quoi ce compose cette variable et remplacer les éléments dans le Javascript en indiquant l'identifiant de l'élément que l'on souhaite modifier, ici "#member_nb" pour la variable en entière et "#member_nb strong" pour isoler uniquement le chiffre.

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 : 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 (Tag jquery sur Never Utopia - graphisme, codage et game design HAHlEmt), 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
Tag jquery sur Never Utopia - graphisme, codage et game design EsiE7c4
(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://2img.net/i/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 "https://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:





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:




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 !

Invité

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

{#}html{/#} {#}css{/#} {#}onglets{/#} {#}javascript{/#} {#}jquery{/#} {#}auteur_Sacha73{/#}

Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Les Amis de la pub


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:


Version phpBB3:


Version PunBB:


Version Invision:





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:


Version phpBB3:


Version PunBB:


Version Invision:





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 filtrage automatique - Lun 4 Juil 2016 - 6:56




Système de Boutique avec filtrage 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 articles" et d'une partie "panier".

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

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

Le panier comporte la liste des articles que vous avez choisis ainsi que le total que cela vous coûte. Vous avez l'option d'effacer le contenu du panier ainsi que d'ajouter/retirer un article.

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é.

PS : Quand je parle d'articles, je parle des trucs à vendre dans la boutique Wink

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 lang="fr">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta charset="utf-8" />
  <meta name="author" content="Onyx" />
  <title>Boutique</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css' />
  <style type="text/css">
    :root {
   
    /*Couleur background principal*/
    --bg-main: #efefef;
   
    /*Couleur background du titre*/
    --bg-top: #808080;
   
    /*Couleur background des articles*/
    --bg-article: #d3d3d3;
   
    /*Couleur background du panier*/
    --bg-panier: #e3e3e3;
   
    /*Couleur du texte*/
    --color-text: #707070;
   
    /*Couleur du texte pale*/
    --color-text-light: #efefef;
    }
   
    /*Corps*/
    body {
    margin: 0px;
    }
    /*Le bloc entier de la boutique*/
    #boutique {
    position: relative;
    margin: auto;
    max-width: 850px;
    background: var(--bg-main);
    font-size: 1em;
    font-family: 'Times New Roman';
    color: var(--color-text);
    text-align: center;
    }
    /*Le bloc du titre de la boutique*/
    .boutique_top {
    width: 100%;
    background: var(--bg-top);
    padding: 10px;
    font-size: 2em;
    text-align: center;
    color: var(--color-text-light);
    font-family: 'Dancing Script';
    box-sizing: border-box;
    }
    .boutique_reste {
    display: flex;
    flex-wrap: wrap;
    }
    /*Menu de gauche*/
    #menu {
    text-align: left;
    padding: 5px;
    width: 150px;
    border-right: 1px solid #808080;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    box-sizing: border-box;
    }
    /*Les boutons de tri*/
    .mbutton button, .mbutton {
    display: block;
      margin: 10px auto 0px auto;
    }
    .mlist {
    margin: 15px 0px 0px 10px;
    }
    /*Titres des catégories*/
    .mlist > span {
    display: inline-block;
    margin-bottom: 5px;
    border-bottom: 1px solid #707070;
    font-size: 1.1em;
    }
    /*Liste des options des catégories*/
    #menu ul {
    margin: 0px;
    list-style-type: none;
    padding: 0px;
    }
    /*Option des catégories*/
    #menu ul li {
    }
    /*Partie de droite*/
    .middle {
    width: 700px;
    margin: 10px auto;
    text-align: center;
    }
    #contenu_shoponglet_Autre {display: none;}
    .contenu_shoponglet {
    min-height: 450px;
    max-height: 650px;
    overflow: auto;
    display: flex;
    margin-bottom: 15px;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    }
    .contenu_shoponglet > div {
    margin: 10px;
    }
    /*Bloc qui contient l'article*/
    .article_bloc {
    text-align: center;
    background: var(--bg-article);
    width: 130px;
    padding: 5px;
    color: #565656;
    }
    /*Image de l'article*/
    .article_bloc > img:first-child {
    width: 100px;
    height: 100px;
    }
    /*Nom de l'article*/
    .article_name {
    padding: 5px 0px;
    font-size: 1.02em;
    font-family: 'Cambria';
    font-weight: bold;
    text-transform: uppercase;
    }
    /*Input du nombre d'article à acheter*/
    input[type="number"] {
    display: inline-block;
    max-width: 50px;
    text-align: center;
    margin-bottom: 2px;
    }
    /*Partie du panier*/
    .bottom {
    margin: auto;
    background: var(--bg-panier);
    text-align: center;
    overflow: hidden;
    }
    /*Titre du panier*/
    .bottom_top {
    font-size: 1.8em;
    font-family: 'Dancing Script', script;
    text-align: center;
    padding: 10px;
    background: var(--bg-top);
    color: var(--color-text-light);
    }
    /*Panier visible*/
    #vuepanier {
    margin: 10px auto;
    height: 120px;
    padding: 0px 5px;
    overflow: auto;
    }
    /*Bloc objet dans le panier*/
    .article_input {
    margin-bottom: 5px;
    background: var(--bg-article);
    padding: 2px;
    text-align: left;
    }
    /*Le bloc du nom et prix de l'objet dans le panier*/
    .articleinsidepanier {
    padding-left: 5px;
    }
    /*Les boutons dans le panier*/
    .article_input button, .input_nb_object {
    display: inline-block;
    margin-right: 2px;
    }
    /*La quantité de l'objet dans le panier*/
    .input_nb_object {
    width: 40px;
    text-align: center;
    }
    /*Bouton effacer et soumettre le panier*/
    #soumettrepanier, #effacerpanier {
    display: inline-block;
    margin: 10px auto 5px auto;
    }
    /*Bouton soumettre le panier*/
    #effacerpanier {
    margin-right: 15px;
    }
    /*Credit*/
    .credits {
    display: inline-block;
    font-size: 12px;
    position: absolute;
    width: 200px;
    bottom: 2px;
    left: 5px;
    text-align: left;
    text-decoration: none;
    color: #454545;
    }
    .credits:hover {
    color: #000000;
    }
    /* Sur les écrans de moins de 700px (cellulaires) */
    @media (max-width: 700px) {
      #menu {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #808080;
      }
      .middle {
        width: 100%;
      }
      .contenu_shoponglet {
        max-height: none;
      }
    }
  </style>
</head>
<body>
  <form enctype="multipart/form-data" name="post" method="post" action="/post" id="boutique" onsubmit="CompleteMessage()" target="_blank">
    <div class="boutique_top">Boutique Alibaba</div>
    <div class="boutique_reste">

      <!-- DÉBUT DU MENU POUR FILTRER -->
      <div id="menu">
        <div class="mbutton">
          <button id="trier2" type="button" onclick="notriage()">Réinitialiser les filtres</button>
          <button id="trier" type="button" onclick="triage()">Filtrer les Articles</button>
        </div>

        <!-- DÉBUT CATÉGORIE TYPE -->
        <div class="mlist">
          <span>Type</span>
          <ul>
            <!-- 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>
        </div>
        <!-- FIN CATÉGORIE TYPE -->

        <!-- DÉBUT CATÉGORIE PRIX -->
        <div class="mlist">
          <span>Prix</span>
          <ul>
            <!-- 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_5000" />
              [1000 et 5000]
            </li>
            <!-- OPTION #5 -->
            <li>
              <input type="checkbox" name="Min5000" />
              Plus de 5000
            </li>
          </ul>
        </div>
        <!-- FIN CATÉGORIE PRIX -->
       
        <!-- DÉBUT CATÉGORIE RARETÉ -->
        <div class="mlist">
          <span>Prix</span>
          <ul>
            <!-- OPTION #1 -->
            <li>
              <input type="checkbox" name="Commun" />
              Commun
            </li>
            <!-- OPTION #2 -->
            <li>
              <input type="checkbox" name="Peucommun" />
              Peu commun
            </li>
            <!-- OPTION #3 -->
            <li>
              <input type="checkbox" name="Rare" />
              Rare
            </li>
            <!-- OPTION #4 -->
            <li>
              <input type="checkbox" name="Tresrare" />
              Très rare
            </li>
            <!-- OPTION #5 -->
            <li>
              <input type="checkbox" name="Unique" />
              Unique
            </li>
          </ul>
        </div>
        <!-- FIN CATÉGORIE RARETÉ -->

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

      <div class="middle">
        <div class="contenu_shoponglet" id="contenu_shoponglet_Tout">
         
          <!-- DÉBUT ARTICLE -->
          <div class="Arme Max99 Commun">
            <div class="article_bloc">
              <img src="URL_IMAGE" /><br />
              <span class="article_name">Nom de l'article</span><br />
              Type - Rareté<br />
              Prix : <span class="nbprix">400</span>$<br /><br />
              <input type="number" value="1" min="1" /><br />
              <button class="ajoutprix" type="button">Acheter</button>
            </div>
          </div>

          <div class="Arme Max99 Commun">
            <div class="article_bloc">
              <img src="URL_IMAGE" /><br />
              <span class="article_name">Nom de l'article</span><br />
              Type - Rareté<br />
              Prix : <span class="nbprix">400</span>$<br /><br />
              <input type="number" value="1" min="1" /><br />
              <button class="ajoutprix" type="button">Acheter</button>
            </div>
          </div>
          <!-- FIN ARTICLE -->

        </div>
        <div class="contenu_shoponglet" id="contenu_shoponglet_Autre">
        </div>
     
        <div class="bottom">
          <div class="bottom_top">Mon Panier - <span id="total2">0</span>$</div>
          <div id="vuepanier">Mon panier est vide.</div>
        </div>
        <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" />
        <a class="credits" href="https://www.never-utopia.com/forum" target="_blank">Never-Utopia</a>
      </div>
    </div>
  </form>
<script type="text/javascript">
  //<!--
  let totalbase = 0;
  $('#total2').html(totalbase);
  let totaltotal = 0;
 
  // Quand on ajoute un article au panier
  $('.ajoutprix').click(function() {
    let prix = parseInt($(this).parent().find('.nbprix:first').html());
    let qt = parseInt($(this).parent().find('input:first').val());
    let nomarticle = $(this).parent().find('.article_name:first').html();
    if ($('#vuepanier').find('.thename:contains("'+nomarticle+'")').length > 0) {
      $('#vuepanier').find('.thename:contains("'+nomarticle+'"):first').closest('.article_input').remove();
    }
    let phrase = "<div class='article_input'>" +
      "<button type='button' class='button_delete' onclick='deleteqtarticle(this)'>x</button>" +
      "<button type='button' class='button_moins' onclick='removeqtarticle(this)'>-</button>" +
      "<input type='text' class='input_nb_object' value='"+qt+"' data-prix='"+prix+"' onchange='calcultotal()'></input>" +
      "<button type='button' class='button_plus' onclick='addqtarticle(this)'>+</button>" +
      "<span class='articleinsidepanier'><span class='thename'>"+nomarticle+"</span>" +
      " à <span class='thepriceinside'>"+prix+"</span>$</div>";
    if ($('#vuepanier').html() != "Mon panier est vide.") {
      phrase = $('#vuepanier').html() + phrase;
    }
    $('#vuepanier').html(phrase);
    calcultotal();
  });
 
  // Ajouter un article déjà dans le panier
  function addqtarticle(learticle) {
    let articleval = parseInt($(learticle).prev().val());
    $(learticle).prev().val((articleval + 1));
    calcultotal();
  }
 
  // Enlever un article déjà dans le panier
  function removeqtarticle(learticle) {
    let articleval = parseInt($(learticle).next().val());
    $(learticle).next().val((articleval - 1));
    if (articleval == 1) {
      $(learticle).parent().remove();
    }
    calcultotal();
  }
 
  // Supprimer un article déjà dans le panier
  function deleteqtarticle(learticle) {
    $(learticle).parent().remove();
    calcultotal();
  }
 
  // Fonction pour calculer
  function calcultotal() {
    totaltotal = 0;
    $('.article_input').each(function(){
      let leprix = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
      let lenb = parseInt($(this).find('.input_nb_object:first').val());
      totaltotal = totaltotal + (leprix*lenb);
    });
    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() {
    let thetotalprice = totaltotal;
    let lemessage = "Bonjour,<br /><br />J'aimerais acheter les articles suivants s'il vous plaît :<br />";
    $('.article_input').each(function(){
      let theprice = parseInt($(this).find('.input_nb_object:first').attr('data-prix'));
      let thesupername = $(this).find('.thename:first').html();
      let thequant = parseInt($(this).find('.input_nb_object:first').val());
      lemessage = lemessage + "<br /> - "+thequant+" "+thesupername+" à "+theprice+"$";
    });
    lemessage = lemessage + "<br /><br />Le coût total de ma commande est de : "+thetotalprice+"$.";
    $('#message').val(lemessage);
  }
  //-->
</script>
<script type="text/javascript">
  //<!--
  // Nombre de catégories
  let nbtype = $('#menu').find('ul').length;
 
  // Fonction pour effacer le tri
  function notriage() {
    $('#menu').find('input:checked').prop('checked', false);
    $('#contenu_shoponglet_Tout').css('display', 'flex');
    $('#contenu_shoponglet_Autre').css('display', 'none');
  }
 
  // Fonction du tri
  function triage() {
    // On se débarrasse des articles déjà triés
    $('#contenu_shoponglet_Autre').html('');
    // Si aucune case est cochée, on a l'affichage de base
    if ($('#menu').find('input:checked').length < 1) {
      notriage();
    }
    else {
      // Tableau qui va contenir toutes les cases cochées
      let validation = [];
      /// Pour chaque catégorie on regarde s'il y a les cases cochée et on les met dans le tableau par catégorie
      for (i=0; i < nbtype; i++) {
        validation[i] = [];
        let lescases = $('#menu ul').eq(i).find('input:checked');
        for (y=0; y < lescases.length; y++) {
          validation[i][y] = lescases.eq(y).attr('name');
        }
      }
      // Pour chaque objet, on va faire la validation pour voir si on la prend
      let lesarticles = $('#contenu_shoponglet_Tout > div');
      // Pour chaque article
      for (i=0; i < lesarticles.length; i++) {
        let leok = 'No';
        let learticle = lesarticles.eq(i);
        // On regarde chaque catégorie
        for (y=0; y < nbtype; y++) {
          // Si la catégorie a des cases cochées, on autorise si l'article a la  d'une des class
          if (validation[y].length > 0) {
            let leok1 = 'No';
            for (x=0; x < validation[y].length; x++) {
              if (learticle.hasClass(validation[y][x])) {
                leok1 = "Oui";
                x = validation[y].length;
              }
            }
            if (leok1 == 'No') {
              y = nbtype;
              leok = 'No';
            }
            else {
              leok = 'Oui';
            }
          }
        }
        // L'objet fait partie des options, on l'ajoute dans la liste d'objets triés
        if (leok == 'Oui') {
          $('#contenu_shoponglet_Autre').append(learticle.clone(true));
        }
      }
      // On fait disparaître la liste des objets pour apparaître celle des objets triés
      $('#contenu_shoponglet_Tout').css('display', 'none');
      $('#contenu_shoponglet_Autre').css('display', 'flex');
      //S'il y a 0 article à droite après le tri, on dit qu'il y a 0 résultat
      let pasarticle = $('#contenu_shoponglet_Autre').children().length;
      if (pasarticle < 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 (Tag jquery sur Never Utopia - graphisme, codage et game design HAHlEmt), 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é, vous 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.




2. Personnaliser la boutique



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

Le menu permet à l'utilisateur de trier les articles pour avoir la sélection d'articles qui l'intéresse (toutes les armes qui coûtes moins de 500$ par exemple). La sélection d'articles est la liste des articles disponibles où vous pouvez indiquer le nombre d'articles à acheter et cliquer sur acheter pour que les articles s'ajoutent à votre panier. Le panier comporte la liste des articles que vous avez choisis ainsi que le total que cela vous coûte. Vous avez l'option de réinitialiser 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 5 options :
Code:
        <!-- DÉBUT CATÉGORIE RARETÉ -->
        <div class="mlist">
          <span>Prix</span>
          <ul>
            <!-- OPTION #1 -->
            <li>
              <input type="checkbox" name="Commun" />
              Commun
            </li>
            <!-- OPTION #2 -->
            <li>
              <input type="checkbox" name="Peucommun" />
              Peu commun
            </li>
            <!-- OPTION #3 -->
            <li>
              <input type="checkbox" name="Rare" />
              Rare
            </li>
            <!-- OPTION #4 -->
            <li>
              <input type="checkbox" name="Tresrare" />
              Très rare
            </li>
            <!-- OPTION #5 -->
            <li>
              <input type="checkbox" name="Unique" />
              Unique
            </li>
          </ul>
        </div>
        <!-- FIN CATÉGORIE RARETÉ -->


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

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'article 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.

Le "name" ne peut pas contenir d'espace, de guillemet, d'apostrophe, de ponctuation ou de caractères spéciaux.


Donc si je résume rapidement, 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 articles (contenu d'onlglet "Tout"). Vous y trouverez des articles sous cette forme :
Code:
          <div class="Arme Armure Max99 Commun">
            <div class="article_bloc">
              <img src="URL_IMAGE" /><br />
              <span class="article_name">Nom de l'article</span><br />
              Type - Rareté<br />
              Prix : <span class="nbprix">400</span>$<br /><br />
              <input type="number" value="1" min="1" /><br />
              <button class="ajoutprix" type="button">Acheter</button>
            </div>
          </div>


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


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

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

Ici, j'ai 3 classes parce que l'article appartient à 4 options, soit "Arme", "Armure", "Max99" et "Commun". Cela veut dire que l'article sera sélectionné si on coche une ou plusieurs des options : "Arme", "Armure", "Moins de 100$" et "Commun".

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




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 articles 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: 850px; 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://i.imgur.com/SqXjFPo.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://i.imgur.com/lGDeQnZ.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://i.imgur.com/7o3NfUu.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://i.imgur.com/ftCwlW2.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 (Tag jquery sur Never Utopia - graphisme, codage et game design 276545engrenages), 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" :
Tag jquery sur Never Utopia - graphisme, codage et game design 5EaEtOR

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 = [
  "https://2img.net/r/hpimg11/pics/215624jaime.png",
  "https://2img.net/i/fa/subsilver/icon_pm.gif",
  "https://2img.net/i/fa/subsilver/icon_email.gif",
  "https://illiweb.com/fa/subsilver/icon_www.gif",
  "https://2img.net/i/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 = [
  "https://2img.net/r/hpimg11/pics/215624jaime.png", /*Image du 1er groupe*/
  "https://2img.net/i/fa/subsilver/icon_pm.gif", /*Image du 2e groupe*/
  "https://2img.net/i/fa/subsilver/icon_email.gif", /*Image du 3e groupe*/
  "https://illiweb.com/fa/subsilver/icon_www.gif", /*Image du 4e groupe*/
  "https://2img.net/i/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):
Tag jquery sur Never Utopia - graphisme, codage et game design 1452862271-1
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:
Tag jquery sur Never Utopia - graphisme, codage et game design 1452862886-2

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:
Tag jquery sur Never Utopia - graphisme, codage et game design 1452863970-3


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:
Tag jquery sur Never Utopia - graphisme, codage et game design 1452864228-4Tag jquery sur Never Utopia - graphisme, codage et game design 1452864226-5

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:
Tag jquery sur Never Utopia - graphisme, codage et game design 1452866498-6

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:
Tag jquery sur Never Utopia - graphisme, codage et game design 1452867524-7

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:
Tag jquery sur Never Utopia - graphisme, codage et game design 1452869267-8Tag jquery sur Never Utopia - graphisme, codage et game design 1452869267-9

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 → https://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 :
Tag jquery sur Never Utopia - graphisme, codage et game design 7LLjg1y

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) / admin (1) / droit de modération quelque part (2)
  • 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)
Tag jquery sur Never Utopia - graphisme, codage et game design 3gbDDqK

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"
Tag jquery sur Never Utopia - graphisme, codage et game design 72sCy0S

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 est celui ci → https://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 : - https://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:


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 :
Tag jquery sur Never Utopia - graphisme, codage et game design FY6TFIP
Je précise que c'est Neva qui a fait mon avatar :ange:


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://2img.net/i/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:


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 : https://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.
Tag jquery sur Never Utopia - graphisme, codage et game design 66RzZUX
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:


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 : https://www.never-utopia.com/f3-presentations
Il faut mettre "/f3-presentations".

De la même manière, si on a https://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:


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 :

Tag jquery sur Never Utopia - graphisme, codage et game design Mails-49a2855


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.

Le projet sur GitHub - Exemple en live sur CodePen

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.

Tag jquery sur Never Utopia - graphisme, codage et game design Capture-d-cran-20...03.12.11-472ae0c

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="https://i.imgur.com/BleQNVF.png" alt="Accueil" /></a></div>
    <div class="navv" id="rechercher"><a href="/search"><img src="https://i.imgur.com/ILyNbqm.png" alt="Rechercher" /></a></div>
    <div class="navv" id="membres"><a href="/memberlist"><img src="https://i.imgur.com/smihrYB.png" alt="Membres" /></a></div>
    <div class="navv" id="groupes"><a href="/groups"><img src="https://i.imgur.com/0TCFuVf.png" alt="Groupes" /></a></div>
                                                    <div class="navv" id="profil"><a href="/profile?mode=editprofile"><img src="https://i.imgur.com/Fur3amR.png" alt="Profil" /></a></div>
      <!-- BEGIN switch_user_logged_in -->
    <div class="navv" id="mp"><a href="/privmsg?folder=inbox"><img src="https://i.imgur.com/AEQMua4.png" alt="MP" id="mpO" /></a></div>
                                                    <div class="navv" id="off"><a href="/login?logout"><img src="https://i.imgur.com/1WWhoBy.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="https://i.imgur.com/gFDkg6v.png" alt="S'inscrire" /></a></div>
                                                    <div class="navv" id="on"><a href="/login"><img src="https://i.imgur.com/1WWhoBy.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’exception 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('https://i.imgur.com/u2wxcxS.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('https://i.imgur.com/QpoF06N.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('https://i.imgur.com/u2wxcxS.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('https://i.imgur.com/QpoF06N.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','https://i.imgur.com/uTwYE10.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 ^^


Revenir en haut

La date/heure actuelle est Mar 19 Mar 2024 - 3:16