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.


23 résultats trouvés pour page_html

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 page_html 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 page_html 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 page_html 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 page_html 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 !

Nasträlya

(Poké)Ball Signature - Mer 8 Avr 2020 - 10:47





(Poké)Ball Signature



Bonjour :friends:


Je vous propose une signature façon ball ! Elle a été testé sous chrome, donc elle fonctionne très bien avec celui-ci.

Voici à quoi elle ressemble:

Rendu:


Dans un premier temps, il faut une page HTML: Modules > Gestion des pages HTML > Création en mode avancé (HTML)

Vous y mettrez ceci:

Code:
<html>
     <head>
       <meta charset="utf-8" />
<style type="text/css"> .tritop{border-bottom:130px solid #3d3d3d; border-left:95px solid transparent; border-right:95px solid transparent; height :0; width:119px; margin:auto; margin-bottom:5px;} .postext{background:transparent; width:120px; padding-top:50px; margin:auto;} .postcitation{font-family:Vollkorn, serif; font-size:12px; color:#a5a5a5; text-align:center} .tribottom{background:transparent; width:310px; margin:auto;} .tri1{clip-path:polygon(50% 100%, 100% 0, 0 0); width:150px; height:150px; float:left;} .tri2{clip-path:polygon(50% 0, 0 100%, 100% 100%); width:150px; height:150px; float:left; margin-left:-70px;} .tri3{clip-path:polygon(50% 100%, 100% 0, 0 0); width:150px; height:150px; float:left; margin-left: 160px; margin-top:-151px;}
       </style>
    </head>
<body>
  <div class="tritop"><div class="postext"><div class="postcitation">"Si tu veux être un homme libre, laisse les autres te mépriser."</div></div></div>
<div class="tribottom"><div class="tri1"><img src ="https://zupimages.net/up/20/15/t88d.jpg" /></div><div class="tri2"><img src ="https://zupimages.net/up/20/15/2vn8.jpg"/></div><div class="tri3"><img src ="https://zupimages.net/up/20/15/5tcc.jpg"/></div> </div>
    </body>
</html>


Vous y mettez alors vos images en 150*150, votre citation et vous enregistrez!   :hehe:

Ensuite, il suffit de mettre l'iframe dans le profil, là où on met normalement la signature:

Code:
<center><iframe src="URL PAGE HTML" name="signa" scrolling="no" frameborder="no" align="center" height = "300px" width = "320px">
</iframe></center>


Le tour est joué, vous avez une (Poké)Ball Signature :pompom:

---

Dans le cas où vous n'auriez pas accès aux pages HTML et que vous voudriez essayer de la mettre directement dans votre profil, ce sera ce code-ci:

Code:
<style type="text/css"> .tritop{border-bottom:130px solid #3d3d3d; border-left:95px solid transparent; border-right:95px solid transparent; height :0; width:119px; margin:auto; margin-bottom:5px;} .postext{background:transparent; width:120px; padding-top:50px; margin:auto;} .postcitation{font-family:Vollkorn, serif; font-size:12px; color:#a5a5a5; text-align:center} .tribottom{background:transparent; width:310px; margin:auto;} .tri1{clip-path:polygon(50% 100%, 100% 0, 0 0); width:150px; height:150px; float:left;} .tri2{clip-path:polygon(50% 0, 0 100%, 100% 100%); width:150px; height:150px; float:left; margin-left:-70px;} .tri3{clip-path:polygon(50% 100%, 100% 0, 0 0); width:150px; height:150px; float:left; margin-left: 160px; margin-top:-151px;}</style>

 <div class="tritop"><div class="postext"><div class="postcitation">"Si tu veux être un homme libre, laisse les autres te mépriser."</div></div></div><div class="tribottom"><div class="tri1"><img src ="https://zupimages.net/up/20/15/t88d.jpg" /></div><div class="tri2"><img src ="https://zupimages.net/up/20/15/2vn8.jpg"/></div><div class="tri3"><img src ="https://zupimages.net/up/20/15/5tcc.jpg"/></div> </div>


Personnellement, elle m'apparaît trop longue pour être validée, mais ne connaissant pas les autres versions, voir même où vous souhaitez la mettre, cela peut, peut être, vous servir :bwaha:


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 page_html 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 ^^

Créer un coin sympathique pour converser (chatbox en page html) - Jeu 2 Fév 2017 - 12:15


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


Bien le bonjour à toutes et à tous.

Aujourd'hui, je viens vous proposer de coder une page HTML de votre forum pour y créer un coin sympathique pour votre CB. Pourquoi est-ce que je préfère passer par une page indépendante au lieu de mettre la CB directement sur mon forum ? Tout simplement par ce que les CB ne s'intègre pas forcément à la structure et au design réalisé.

Toutes versions ▬ CSS, HTML & Templates ▬ Aperçu (screen)

Si vous avez le moindre problème avec ce LS, n'oubliez pas que la section Problème avec mon code est à votre disposition.


Le code de la page HTML :


Pour commencer, il faut débuter une nouvelle page HTML :

Panneau d'administration (en avancée) => Modules => HTML & JAVASCRIPT => Gestion des pages HTML => Création en mode avancé.

Donnez un titre à votre page. J'ai fait au plus simple avec "tchatbox".

Maintenant insérez le code entier :

Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Titre de votre page.</title>
  <style type="text/css">
    body {
      margin: 0px;
      background-image: url('http://img15.hostingpics.net/pics/550548fondPA.png');
    }

    .reglement_CB {
      height: 610px;
      width: 470px;
      padding: 10px;
      text-align: justify;
      color: black;
      font-size: 14px;
    }

    .cb_page {
      box-shadow: 0px 0px 2px black;
      margin-top: 5px;
      margin-left: 5px;
      width: 850px;
      height: 630px;
    }

    .cb_page,
    .reglement_CB {
      display: inline-block;
      vertical-align: top;
    }
  </style>
</head>

<body>
  <iframe src="/chatbox/index.forum" class="cb_page" frameborder="0"></iframe>
  <div class="reglement_CB">
    <div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/392986titrereglecb.png" /></div><br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
    nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
  </div>
</body>
</html>


Détail du code :


Code:
<style type="text/css">
  body {
    margin: 0px;
    background-image: url('http://img15.hostingpics.net/pics/550548fondPA.png');
  }

  .reglement_CB {
    height: 610px;
    width: 470px;
    padding: 10px;
    text-align: justify;
    color: black;
    font-size: 14px;
  }

  .cb_page {
    box-shadow: 0px 0px 2px black;
    margin-top: 5px;
    margin-left: 5px;
    width: 850px;
    height: 630px;
  }

  .cb_page,
  .reglement_CB {
    display: inline-block;
    vertical-align: top;
  }
</style>

Ceci est le CSS de votre page HTML, il doit être impérativement entre les balises :
Code:
<style type="text/css"></style>

Si vous souhaitez personnaliser votre CB avec du CSS, vous devez passer par la feuille de CSS de votre forum et non dans la page HTML, sinon ça ne prendra pas en compte vos modifications.


Code:
<iframe src="/chatbox/index.forum" class="cb_page" frameborder="0" ></iframe>

Ceci est votre CB mise en iframe pour l'intégrer à la page. Elle a la classe "cb_page", donc dans le CSS vous pouvez lui donner les propriétés que vous souhaitez, notamment sa hauteur (height) et sa largeur (width). La hauteur et la largeur sont impératives sinon votre CB sera toute petite.


Code:
<div class="reglement_CB"><div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/392986titrereglecb.png" /></div><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</div>

J'ai mis en place cette partie pour incorporer le règlement de la CB. Vous pouvez y mettre ce qui vous chante, comme une image, des liens menant à divers sujets de votre forum, etc.


Faire venir les membres sur la page.


Votre salon privé est opérationnel, mais il faut faire venir les membres maintenant.

Il n'y aura rien de plus simple dans la pratique. Il suffit d'insérer le lien de votre page HTML où vous le souhaitez :

Spoiler:


Pour ma part, j'ai fait une image de présentation et l'ai inséré dans le template : "overall_footer_begin"

Code:
<div style="text-align: center;"><a href="Lien de votre page HTML" target="_blank"><img src="Lien de l'image de présentation" alt="Visiter la chatbox" /></a></div>


A vous de voir comment vous voulez rendre visible cette invitation à la papote.


Merci d'avoir suivi ce petit LS. N'oubliez pas de créditer Never-Utopia si vous l'utilisez.

Llunn

Fiche colorée - Mer 20 Juil 2016 - 14:38



Fiche colorée



Je vous propose une petite fiche de ma création !
Cette fiche peut servir pour des utilisation différentes donc, à vous de voir ce que vous en faites !

Aperçu en direct
Aperçu en image


Le codage est a mettre dans une page html et ensuite, pour l'utiliser, vous devrez utiliser une belle iframe !

Soyez gentils, laissez moi le petit crédit lorsque vous utiliser le code Wink



Le code HTML



Il s'agit du code complet que vous devez mettre dans une page html. (Module > Gestion des pages HTML).
Sélectionnez bien les "non" avant de poster.

C'est dans cette page que vous ajouterez votre contenu et les couleurs si vous le souhaitez.

Code:
<!DOCTYPE html><html>
<head>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css' />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Fiche colorée</title>
<style type="text/css">
body {
margin: 0px;
}
.banana {color: #2DB38F; font-family: Oswald;font-size: 11px;font-weight: bold;}
.peach {color: #B51F8C; font-family: Oswald;font-size: 11px;font-weight: bold;}
.b0 { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: bold; color: #d0d3d4;} 
.b1 { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: bold; color: #e07059;}
.b2 { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: bold; color: #99d5e4;}
 
 /*Tableau du mag */

.tab {width:504px !important;
 height: 600px :important!;
 box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
 background-color: #fff;
 border: 5px solid #fff;}

.tab0 {width:500px !important;
 margin:auto;}


 /*Colonnes colorées en haut du tableau*/

.tab1 {width: 25%, display:block;
  background-color: #ffc22c;}

.tab2 {width: 25%, display:block;
  background-color: #f79037;}

.tab3 {width: 25%, display:block;
  background-color: #13ada6;}

.tab4 {width: 25%, display:block;
  background-color: #b6d552;}

.tab5 {width: 25%, display:block;
  background-color: #ffc22c;
 height:25px;}

.tab6 {width: 25%, display:block;
  background-color: #f79037;}

.tab7 {width: 25%, display:block;
  background-color: #13ada6;}

.tab8 {width: 25%, display:block;
  background-color: #b6d552;}

 /*Titres*/

.headlight { width: 100%;
  background-color: #fff;
 height:100px;
 font-family: oswald;
 color: #414142 !important;
  text-align: center;
  text-transform: uppercase;
 font-size: 50px;
  font-weight: 700;}

.bottomlight { width: 100%;
  background-color: #fff;
 height:60px;
 font-family: oswald;
 color: #414142 !important;
  text-align: justify;
  text-transform: italic;
 font-size: 14px;
  font-weight: 500;
 line-height: 12px;
 font-style:italic;
 padding: 10px;}

.sub {color:#b6d552;
 display:block;
 font-family: 'Roboto', sans-serif;
 font-size:10px;
 margin-left: auto;
 margin-right: auto;
 text-align:center;
 width:90%;
 text-transform: uppercase;
 padding-top:-150px;
border-bottom:1px solid #13ada6;}

.cimg{
 opacity: 0.7;
 transition-duration: 0.7s;}

.cimg:hover{
 opacity: 1;
 transition-duration: 0.7s;}

 /*Tableau à onglets*/
 .linknav {
  display:block;
  background-color: #c9d852;
  margin:5px;
  padding:5px;
  color: #eeeeec !important;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
 font-family: 'Questrial', sans-serif;
  font-size: 14px;
  font-weight: bold;
}

.linknav:hover {
  display:block;
  background-color: #ededea;
  border-bottom: #e1755d 2px solid;
  margin:5px;
  padding:5px;
  color: #e1755d !important;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
 font-family: 'Questrial', sans-serif;
  font-size: 14px;
  font-weight: bold;
}


/* par défaut on masque le conenu de l.onglet */
.contenu-onglet, .radio-onglet {
  display: none;
}

/* on affiche l.onglet sélectionné */
.radio-onglet:checked + .contenu-onglet {
  display: block;
}
 
 .credit {color:#b6d552;
 display:block;
 font-family: 'Roboto', sans-serif;
 font-size:10px;
 margin-left: auto;
 margin-right: auto;
 text-align:center;
 width:90%;
 padding-top:-150px;
}
</style>
</head>
<body>



<center>
  <div class="tab">
    <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
      <tr>
        <td>
          <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
            <tr>
              <td class="tab5"></td>
              <td class="tab6"></td>
              <td class="tab7"></td>
              <td class="tab8"></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table style="border-spacing : 0px; border-collapse : collapse;" >
            <tr>
              <td class="headlight">Gros titre <br /> <span class="sub">petit slogan bien sympa  </span></td>
            </tr>
            <tr>
              <td>
                <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
                  <tr>
                    <td class="tab1"></td>
                    <td class="tab2"></td>
                    <td class="tab3"></td>
                    <td class="tab4"></td>
                  </tr>
                </table>
                <img src="http://img15.hostingpics.net/pics/750110melbournecityscape.png" class="cimg" width="500px"/>
                <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
                  <tr>
                    <td class="tab1"></td>
                    <td class="tab2"></td>
                    <td class="tab3"></td>
                    <td class="tab4"></td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td>
                <center>
                  <div style="vertical-align:top;background-color: #edefec; border-bottom: 2px solid #ee9507;width:500px">
                    <div style="display:block;padding:5px;color: #eeeeec;text-align:center;font-family: 'oswald', sans-serif;font-size: 16px;font-weight: bold;background-color:#13ada6;border-top: 2px solid #c0ea56;">
                      Edito
                    </div>
                    <div align="justify" style="display:block;height:175px;overflow:auto;background-color: #edefec;padding:2px;margin:2px;font-family: 'Questrial', sans-serif;font-size: 12px;color: #787878;text-align: justify;">
                      <table>
                        <tr>
                          <td>
                            <table>
                              <tr>
                                <td>
                                  <br />
                                  <img src="http://i21.servimg.com/u/f21/19/32/80/36/mytyo10.png" />
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <center>
                                    <span class="b0">AM</span> <span class="b1">∆ 12° </span><span class="b2"> ∇ 9°</span><br /><span class="b0">PM</span> <span class="b1">∆ 28°</span>  <span class="b2">∇ 21° </span>
                                  </center>
                                </td>
                              </tr>
                            </table>
                          </td>
                          <td style="font-size: 12px;color: #787878;">
                            <div style="text-align: justify;">
                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget urna condimentum, accumsan augue in, semper augue. Nam hendrerit ligula et posuere commodo. Sed sagittis odio justo, rutrum malesuada lectus convallis et. Fusce felis metus, hendrerit a facilisis ut, laoreet vel mi. Nulla luctus elit dictum, mollis est sed, pretium tortor. Aenean sit amet tincidunt libero. Curabitur tellus leo, fermentum eleifend mattis et, aliquam eget leo. Nullam urna velit, egestas molestie mollis at, efficitur in lorem. Vivamus placerat fringilla odio vel volutpat. Aenean vitae dapibus tellus, eget finibus libero. Sed ipsum quam, tincidunt ac mollis et, lacinia in augue. Mauris nec lacinia odio. Aliquam in aliquet tellus, vitae semper orci.
                            </div>
                          </td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </center>
                <table>
                  <tbody>
                    <tr>
                      <td align="justify" style="background-color: #fe8c21;border-bottom: 2px solid #50c6b6; width: 150px; height: 110px;overflow:auto;font-size: 12px;color: #787878;">
                        <label for="contenu1" class="linknav">Titre 1</label><label for="contenu2" class="linknav">Titre2</label><label for="contenu3" class="linknav">Titre 3</label><label for="contenu4" class="linknav">Titre 4</label><label for="contenu5" class="linknav">Titre 5</label>
                      </td>
                      <td align="justify" style="border-bottom: 2px solid #50c6b6; width: 300px; height: 150px;overflow:auto;font-size: 12px;color: #787878;">
                        <div style="display:block;padding:5px;color: #eeeeec;text-align:center;font-family: 'oswald', sans-serif;font-size: 16px;font-weight: bold;background-color:#13ada6;border-top: 2px solid #c0ea56;">
                          Infos
                        </div>
                        <div align="justify" style="display:block;height:150px;width: 350px;overflow:auto;background-color: #edefec;font-family: 'Questrial', sans-serif;font-size: 12px;color: #787878;">
                          <input type="radio" id="contenu1" checked class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget urna condimentum, accumsan augue in, semper augue. Nam hendrerit ligula et posuere commodo. Sed sagittis odio justo, rutrum malesuada lectus convallis et. Fusce felis metus, hendrerit a facilisis ut, laoreet vel mi. Nulla luctus elit dictum, mollis est sed, pretium tortor. Aenean sit amet tincidunt libero. Curabitur tellus leo, fermentum eleifend mattis et, aliquam eget leo. Nullam urna velit, egestas molestie mollis at, efficitur in lorem. Vivamus placerat fringilla odio vel volutpat. Aenean vitae dapibus tellus, eget finibus libero. Sed ipsum quam, tincidunt ac mollis et, lacinia in augue. Mauris nec lacinia odio. Aliquam in aliquet tellus, vitae semper orci.</div>
                          <input type="radio" id="contenu2" class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Contenu 2 -  Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
                          <input type="radio" id="contenu3" class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Contenu 3 -  Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
                          <input type="radio" id="contenu4" class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Contenu 4 -  Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
                          <input type="radio" id="contenu5" class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Contenu 5 -  Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <td>
                <table style="cborder-spacing : 0px; border-collapse : collapse;" >
                  <tr>
                    <td class="bottomlight">Maecenas vel libero quis arcu eleifend molestie accumsan eu neque. Suspendisse metus metus, imperdiet vitae turpis vel, semper efficitur velit </td>
                  </tr>
                </table>
                <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
                  <tr>
                    <td class="tab5"></td>
                    <td class="tab6"></td>
                    <td class="tab7"></td>
                    <td class="tab8"></td>
                  </tr>
                </table>
                <div class="credit" style="text-align: center;">©️Llunn</div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
</center>
</body>
</html>


L'iframe



Vous devez placer cette iframe dans un message ou ailleurs selon l'utilisation que vous en faites.

Pensez bien à ajuster la largeur et/ou la hauteur si vous avez fait ces modifications dans le le css qui se trouve dans votre page HTML.


Code:
<iframe frameborder="0" scrolling="no" src="LIEN DE LA PAGE" name="fiche colorée" style="width: 550px; height: 970px; margin: auto; display: block;"></iframe>

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 page_html 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 page_html 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 !

Onyx

Formulaire de présentation - Sam 2 Juil 2016 - 5:49




Formulaire de présentation


Salut !

Fournir une fiche de présentation aux membres pour qu'ils puissent poster une belle présentation est une excellente idée. Sauf que parfois, certains membres ont de la difficulté à remplir la fiche de présentation parce qu'ils ont de la difficulté avec le codage.

Du coup, ce formulaire permettra à vos membres de simplement remplir les champs du formulaire et les entrées se mettront automatiquement au bon endroit dans une fiche. Pas mal, n'est-ce pas ?

Pour voir l'aperçu du formulaire de présentation en direct : cliquez ici.
Pour voir l'aperçu du formulaire de présentation en image : cliquez ici.
Pour voir l'aperçu de la fiche de présentation en image : cliquez ici.


Attention :
Évidemment, vous aurez probablement plus de champs à faire remplir que moi ou peut-être s'appelleront-ils différemment. Du coup, vous voudrez sans doute personnaliser votre code. Pour savoir comment faire, je vous envoie sur ce tutoriel afin de comprendre les formulaires et les différentes étapes (la construction des champs et la récupération des données du formulaire).


Ce LS est en quatre parties.
  • Tout d'abord, nous allons créer le formulaire dans une page HTML.
  • Ensuite, nous allons activer l'autorisation de recevoir des formulaires externes pour que le formulaire fonctionne.
  • Puis, nous allons ajouter le CSS pour la fiche de présentation.
  • Enfin, nous allons ajouter une iframe pour que les membres puissent remplir le formulaire.


Laisser les crédits vers Never-Utopia est obligatoire.


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



1. Créer le formulaire (Page HTML)


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

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, comme "Formulaire de présentation".
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 ?".

Enfin, on met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <base target="_blank" />
    <meta name="author" content="Onyx" />
    <title>Formulaire de Présentation</title>
    <style type="text/css">
      /*Corps*/
      body {
      margin: 0px;
      color: #757575;
      font-family: 'Verdana';
      font-size: 13px;
      }
      /*Formulaire*/
      #monId {
      background-color: #dfdfdf;
      box-shadow: inset 0px 0px 15px #656565;
      margin: auto;
      border-radius: 10px;
      width: 500px;
      padding: 15px;
      }
      /*Titres*/
      h1, h2, h3 {
      color: #757575;
      text-align: center;
      font-family: 'Monotype Corsiva', cursive;
      font-size: 32px;
      font-weight: normal;
      }
      /*Petit titre*/
      h2 {
      font-size: 24px;
      }
      /*Champs text, number, password, textarea et select*/
      input[type="text"], input[type="number"], input[type="password"], textarea, select {
      display: inline-bloc;
      width: 97%;
      margin-top: 3px;
      background-color: #efefef;
      color: #858585;
      padding: 5px;
      border: none;
      border-radius: 5px;
      box-shadow: inset 2px 2px 2px #bfbfbf, inset -2px -2px 1px #bfbfbf;
      font-size: 13px;
      font-family: 'Arial';
      }
      /*Champs radio*/
      input[type="radio"] {
      display: inline-bloc;
      margin-top: 3px;
      vertical-align: bottom;
      }
      /*Champs submit et reset*/
      input[type="submit"], input[type="reset"] {
      margin-top: 10px;
      text-align: center;
      display: inline-block;
      font-weight: bold;
      background-color: #fdfdfd;
      border: 1px solid #c4c4c4;
      color: #757575;
      padding: 8px;
      padding-top: 8px;
      padding-bottom: 8px;
      border-radius: 5px;
      box-shadow: 2px 2px 2px #747474, inset 0px 0px 15px #a3a3a3;
      }
      /*Champs submit et reset au survol*/
      input[type="submit"]:hover, input[type="reset"]:hover {
      cursor: pointer;
      background-color: #ffffff;
      box-shadow: 4px 4px 4px #747474, inset 0px 0px 15px #a3a3a3;
      color: #656565;
      }
      /*Champs reset et prévisualiser*/
      input[type="reset"], input[name="preview"] {
      margin-top: 0px;
      margin-right: 10px;
      font-weight: normal;
      }
      /*Champs textarea*/
      textarea {
      min-width: 97%;
      max-width: 97%;
      min-height: 100px;
      }
      /*Astérisques rouges*/
      .redd {
      color: red;
      }
      /*Crédits*/
      .credits {
      margin: 10px auto -10px auto;
      font-size: 11px;
      text-align: center;
      }
      .credits a {
      color: darkgreen;
      text-decoration: none;
      }
      .credits a:hover {
      color: blue;
      }
    </style>
    <script type="text/javascript">
    //<!--
      /*Fonction pour créer le message*/
      function creationMessage(NomForm) {   
           
        /* On met le titre dans le champ "titre" */
        NomForm.titre.value =
          "Présentation de " + NomForm.prenom.value + " " + NomForm.nom.value;

        /* On met le message dans le champ "message" */
        NomForm.message.value =
          "<link href='https://fonts.googleapis.com/css?family=Lobster|Pacifico|Dancing+Script' rel='stylesheet' type='text/css' />" +
          "<div class='prez'>" +
          "<img src='" + NomForm.urlimghaut.value + "' class='prez_haut' />" +
          "<div class='prez_nom'>" + NomForm.prenom.value + " " + NomForm.nom.value + "</div>" +
          "<div class='prez_citation'>« " + NomForm.citation.value + " »</div>" +
          "<div class='prez_bloc'>" +
          "<img src='" + NomForm.urlimgava.value + "' class='prez_ava' />" +
          "<div class='prez_right'>" +
          "<span class='prez_champ'>Prénom :</span> " + NomForm.prenom.value + "<br />" +
          "<span class='prez_champ'>Nom :</span> " + NomForm.nom.value + "<br />" +
          "<span class='prez_champ'>Surnom :</span> " + NomForm.surnom.value + "<br />" +
          "<span class='prez_champ'>Âge :</span> " + NomForm.age.value + "<br />" +
          "<span class='prez_champ'>Groupe :</span> " + NomForm.group.value + "<br />" +
          "<span class='prez_champ'>Pouvoir :</span> " + NomForm.pouvoir.value + "<br />" +
          "<span class='prez_champ'>Aime :</span> " + NomForm.aime.value + "<br />" +
          "<span class='prez_champ'>Déteste :</span> " + NomForm.deteste.value + "<br />" + "</div><div style='clear: both;'></div></div><div class='prez_title'>" +
          "Description physique</div><div class='prez_bloc'>" + NomForm.descphy.value + "</div><div class='prez_title'>" +
          "Description psycologique</div><div class='prez_bloc'>" + NomForm.descpsy.value + "</div><div class='prez_title'>" +
          "Histoire</div><div class='prez_bloc'>" + NomForm.hist.value + "</div><div class='prez_title'>" +
          "Informations sur le joueur</div><div class='prez_bloc'>" +
          "<img src='" + NomForm.urlimgbas.value + "' class='prez_bas' />" +
          "<div class='prez_right2'>" +
          "<span class='prez_champ'>Prénom :</span> " + NomForm.nomhrp.value + "<br />" +
          "<span class='prez_champ'>Âge :</span> " + NomForm.agehrp.value + "<br />" +
          "<span class='prez_champ'>Comment j'ai connu le forum :</span> " + NomForm.connu.value + "<br />" +
          "<span class='prez_champ'>Mon avis sur le forum :</span> " + NomForm.avis.value + "<br />" +
          "<span class='prez_champ'>Le code secret :</span> [hide]" + NomForm.secret.value + "[/hide]</div><div style='clear: both;'></div></div>" +
          "<div class='prez_credit'>Par <a href='http://www.never-utopia.com/u27' target='_blank'>Onyx</a> de <a href='http://www.never-utopia.com' target='_blank'>Never-Utopia</a>, inspiré de <a href='http://www.never-utopia.com/t43339-fiche-bois-sombre' target='_blank'>cette fiche</a> de Pastomaniac.</div></div></div>";

        /*On vérifie si on peut ou non envoyer le message*/
        var champsobligatoires = document.getElementsByClassName("obligatoire");
        var totalchampsobligatoires = 0;
        for (i = 0; i < champsobligatoires.length; i++) {
          var champvaleur = champsobligatoires[i].value;
          if (champvaleur.length > 0) {
            totalchampsobligatoires = totalchampsobligatoires + 1;
          }
        }
        if (totalchampsobligatoires < champsobligatoires.length) {
          alert("Tous les champs obligatoires (ceux avec un astérisque rouge) doivent être remplis.");
          return false;
        }
        else {
          return true;
        }
      }
    //-->
    </script>
  </head>
  <body>
    <form id="monId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" target="_blank" onSubmit="return creationMessage(this)">
      <input type="hidden" name="mode" value="newtopic" />
      <input type="hidden" name="topictype" value="0" checked="checked" />
      <input type="hidden" name="message" value="" />
      <input type="hidden" name="f" value="10" />
      <input type="hidden" name="subject" id="titre" value="" />
      <h1>Formulaire de Présentation</h1>
      <h2>Informations sur le personnage</h2>
      <label for="prenom">Prénom<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="prenom" id="prenom" /><br />
      <br />
      <label for="nom">Nom<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="nom" id="nom" /><br />
      <br />
      <label for="surnom">Surnom :</label><br />
      <input type="text" name="surnom" id="surnom" /><br />
      <br />
      <label for="age">Âge<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="age" id="age" /><br />
      <br />
      <label for="group">Groupe<span class="redd">*</span> :</label><br />
      <select name="group" id="group">
        <option>Premier</option>
        <option>Deuxième</option>
        <option>Troisième</option>
        <option>Quatrième</option>
        <option>Etc.</option>
      </select><br />
      <br />
      <label for="pouvoir">Pouvoir<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="pouvoir" id="pouvoir" /><br />
      <br />
      <label for="aime">Aime<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="aime" id="aime" /><br />
      <br />
      <label for="deteste">Déteste<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="deteste" id="deteste" /><br />
      <br />
      <h2>Descriptions du personnage</h2>
      <label for="descphy">Description Physique<span class="redd">*</span> :</label><br />
      <textarea class="obligatoire" name="descphy" id="descphy"></textarea><br />
      <br />
      <br />
      <label for="descpsy">Description Psychologique<span class="redd">*</span> :</label><br />
      <textarea class="obligatoire" name="descpsy" id="descpsy"></textarea><br />
      <br />
      <br />
      <label for="hist">Histoire<span class="redd">*</span> :</label><br />
      <textarea class="obligatoire" name="hist" id="hist"></textarea><br />
      <br />
      <br />
      <h2>Informations sur le joueur</h2>
      <label for="nomhrp">Prénom :</label><br />
      <input type="text" name="nomhrp" id="nomhrp" /><br />
      <br />
      <label for="agehrp">Âge :</label><br />
      <input type="text" name="agehrp" id="agehrp" /><br />
      <br />
      <label for="connu">Comment avez-vous connu le forum<span class="redd">*</span> ?</label><br />
      <input class="obligatoire" type="text" name="connu" id="connu" /><br />
      <br />
      <label for="avis">Votre avis sur le forum ?</label><br />
      <textarea name="avis" id="avis"></textarea><br />
      <br />
      <label for="secret">Le code secret<span class="redd">*</span> ?</label><br />
      <input class="obligatoire" type="text" name="secret" id="secret" /><br />
      <br />
      <h2>Personnaliser la mise en page</h2>
      <label for="urlimghaut">URL de l'image du haut (500px par 200px) :</label><br />
      <input type="text" name="urlimghaut" id="urlimghaut" value="http://img15.hostingpics.net/pics/959085haut.jpg" /><br />
      <br />
      <label for="citation">Petite citation :</label><br />
      <input type="text" name="citation" id="citation" value="Petite citation" /><br />
      <br />
      <label for="urlimgava">URL de l'image du personnage (200px par 320px) :</label><br />
      <input type="text" name="urlimgava" id="urlimgava" value="http://img15.hostingpics.net/pics/485538middle.jpg" /><br />
      <br />
      <label for="urlimgbas">URL de l'image du joueur (100px par 100px) :</label><br />
      <input type="text" name="urlimgbas" id="urlimgbas" value="http://img15.hostingpics.net/pics/858946bas.jpg" /><br />
      <br />
      <br />
      <div style="text-align: center;">
        <input type="reset" name="reseta" value="Rénitialiser le formulaire" />
        <input type="submit" name="preview" value="Prévisualiser le formulaire" />
        <input type="submit" name="post" value="Envoyer le formulaire" />
      </div>
      <br />
      <div class="credits">Par <a href="http://www.never-utopia.com/u27" target="_blank">Onyx</a> de <a href="http://www.never-utopia.com" target="_blank">Never-Utopia</a>.</div>
    </form>
  </body>
</html>


Lorsque vous modifiez votre formulaire, il faut cliquer sur le triple engrenage (Tag page_html 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.


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

Vous devez vous rendre, sur votre forum, dans le forum ou sous-forum où les gens pourront passer poster leur présentation. Puis, vous regardez l'adresse de la page. Juste après le nom de votre forum, il y aura ceci : "/f" avec un nombre qui suit. Le nombre correspond à l'id spécifique de ce forum.

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


Cela va permettre que la présentation des utilisateurs du formulaire soit postée au bon endroit.



2. 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 ~



3. Mise en forme de la fiche de présentation (CSS)


Si quelqu'un postait une fiche avec le formulaire, vous verriez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme la fiche de présentation à 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 la présentation*/
.prez {
  background-color: #202020;
  box-shadow: 5px 5px 3px #555555;
  margin: auto;
  margin-top: 5px;
  margin-bottom: 8px;
  width: 500px;
  color: #959595;
  padding-bottom: 10px;
  font-family: 'Verdana';
  font-size: 12px;
}
/*Image du haut de la présentation*/
.prez_haut {
  display: inline-block;
  width: 500px;
  height: 200px;
  border-bottom: 40px solid #050505;
}
/*Nom de la présentation*/
.prez_nom {
  font-family: 'Pacifico', cursive;
  font-size: 30px;
  color: #202020;
  text-shadow: -2px -2px 1px white;
  width: 100%;
  text-align: center;
  margin-top: -60px;
  margin-bottom: 15px;
}
/*Petite citation de la présentation*/
.prez_citation {
  width: 100%;
  text-align: center;
  color: #747474;
  font-family: 'Dancing Script', cursive;
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 25px;
}
/*Blocs de la présentation*/
.prez_bloc {
  background-color: #353535;
  border: 3px solid #101010;
  padding: 10px;
  margin: 0px 10px 0px 10px;
}
/*Autres images de la présentation*/
.prez_ava, .prez_bas {
  display: inline-block;
  width: 200px;
  height: 320px;
  float: left;
  border: #000000 1px dotted;
}
/*Partie de droite du premier bloc de la présentation*/
.prez_right, .prez_right2 {
  display: inline-block;
  margin-left: 5px;
  float: left;
  width: 240px;
}
/*Champs de la présentation*/
.prez_champ {
  color: #dfdfdf;
}
/*Sous-titres de la présentation*/
.prez_title {
  text-align: center;
  font-family: 'Lobster', cursive;
  padding: 5px;
  font-size: 16px;
  background: #000000;
  color: #959595;
  border-top: 2px solid #353535;
  
  margin: 15px 0px 5px 0px;
}
/*Images du bas de la présentation*/
.prez_bas {
  width: 100px;
  height: 100px;
}
/*Partie de droite du dernier bloc de la présentation*/
.prez_right2 {
  width: 340px;
}
/*Crédits*/
.prez_credit {
  margin: 5px auto -10px auto;
  font-size: 10px;
  text-align: center;
}




4. Ajouter l'iframe du formulaire


Maintenant que la page HTML est créée avec le formulaire, que les formulaires ont été autorisé et que le CSS pour la fiche de présentation est installé, il faut mettre le formulaire accessible aux membres.

Pour cela, vous pouvez, soit mettre le lien vers le formulaire à quelque part sur votre forum, soit le poster dans une iframe dans un message et les membres vont le remplir directement là.

Pour la 2e option, vous devez vous rendre là où vous voulez que le formulaire soit et y mettre le code suivant :
Code:
<iframe style="display: block; height: 2100px; width: 550px; 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 formulaire), 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

Sinon, vous devez aussi changer le width (largeur) et le height (hauteur) pour que cela corresponde à votre formulaire ^^





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 de l'aide pour personnaliser le formulaire ou la fiche de présentation.

À plus !

Comment faire un formulaire (de présentation, de partenariat, etc.) - Mar 14 Juin 2016 - 5:13



Comment faire un formulaire 1/2



Bonjour !

Alors une des demandes fréquentes dans la section des demandes de codes est celle du fameux "formulaire". Un formulaire pour passer une commande, un formulaire pour poster une présentation, un formulaire pour les demandes de partenariats, etc.

Ce tutorial vous montrera comment créer le formulaire de votre choix par vous-même. On y verra aussi comment mettre des champs obligatoires, comment gérer les différents types de champs à remplir et comment personnaliser le résultat du formulaire.

Voici un petit exemple du type de résultat qu'on peut obtenir :
http://libertia.forumsrpg.com/h25-formulaire-de-bouffe

Et un autre exemple d'un formulaire de présentation :
https://www.never-utopia.com/t60709-formulaire-de-presentation

Durant ce tutoriel, je ferai référence à quelques reprises au premier exemple.

À noter que puisque la majorité des membres s'intéressent plus à l'application d'un formulaire dans le cadre de forumactif, le tutoriel fera de même.
Vous pouvez quand même utiliser la plupart des notions apprises ici à l'extérieur de forumactif. Cependant, ce tutoriel ne traite pas du traitement PHP qui est nécessaire dans la majorité des cas si vous avez votre propre.


Étape 1 - Squelette du formulaire



Étape 1.1 - Juste le formulaire


La première étape, afin de créer un formulaire, c'est de se créer une page HTML dans lequel nous allons mettre le squelette du formulaire.

Pour ceux qui n'ont jamais utlisé une page HTML, voici un petit tuto sur les pages HTML fait par Nyo :
https://www.never-utopia.com/t50282-creer-une-page-html-pour-fiche-de-pub-formulaires-etc


Bref, vous créez une page HTML (en mode avancé, pas le mode simple) et vous y mettez la base de toute page HTML :
Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="Auteur" />
    <title>Titre de la Page</title>

    <style type="text/css">
      /* Ici le CSS! */
    </style>

    <script type="text/javascript">
    //<!--
      /* Ici le Javascript */
    //-->
    </script>

  </head>
  <body>
    <!-- Ici le HTML! -->
  </body>
</html>


C'est le temps d'enregistrez votre page html pour la première fois.




Nous allons maintenant créer le squelette du formulaire entre les balises "body". Pour cela, il va falloir modifier la page HTML que vous avez enregistrée.

Lorsque vous modifiez votre formulaire, il faut cliquer sur l'engrenage où c'est inscrit "HTML", pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.

Bref, on va commencer le squelette du formulaire par ceci :
Code:
   <form id="nomId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" target="_blank">
      Contenu du formulaire
    </form>


Hé, minute papillon! De késsé?

J'imagine que vous l'avez deviné, mais la balise "form" est une balise de formulaire. Dans cette balise, il y a plusieurs attributs.

Le "id" permet de donne un id unique au formulaire pour le sélectionner plus tard.

Le "action" permet d'indiquer au formulaire où on va envoyer les données du formulaire pour qu'elles soient traitées. Dans notre cas, on met "/posting.forum" parce qu'on c'est la page de forumactif qui permet de poster un nouveau message/sujet).
Si vous avez créé une page de traitement php parce que vous avez votre propre site, ce serait cette adresse qu'il faudrait mettre. Si vous vouliez envoyer un mail, vous pourriez utiliser l'adresse de traitement du logiciel de messagerie de votre choix, ce qui ferait "mailto:nomdudestinataire@hotmail.fr" par exemple.

Le "method" indique la façon dont le formulaire est envoyé, soit selon la méthode "get" qui met les données dans la barre d'URL (dans la plupart des cas, très peu utile) ou selon la méthode "post" qui met les données dans le contenu html de la page de réception. Nous, c'est la méthode "post" qu'on veut.

Le "name" est simplement un nom quelconque qu'on donne à ce formulaire. On va s'en servir plus tard dans le javascript.

Le "enctype" précise la façon dont les données sont cryptées. C'est assez compliqué à expliquer alors disons simplement que dans la majorité des situations, on utilise le enctype "multipart/form-data".

Le "target", dans cette situation, nous dit d'ouvrir un nouvel onglet pour poster le formulaire. Si vous mettez le formulaire dans un iframe plus tard, cela vous évitera de poster un message dans un message.

Note : Si ce n'est pas déjà fait, enregistrez votre page html avant de la perdre !


Étape 1.2 - Comprendre les différents types de champs à remplir


On a maintenant un formulaire, sauf qu'il est vide. Tout formulaire qui se respecte doit avoir des champs à remplir pour que l'utilisateur puisse fournir des informations.

Ok, et à quoi ressemble un champ à remplir?

À ceci :
Code:
<label for="question1">Question 1</label><br />
<input id="question1" name="question1" value="" type="text" size="50"></input>


Vous voyez qu'il y a 2 nouvelles types de balises, "label" et "input".

Balise Label

La balise "label" est une "étiquette", elle sert à "étiquetter" un champ à remplir. En soi, cette balise n'a rien de spécial, à l'exception que lorsqu'on clique dessus, cela met le focus sur le champs à remplir qui y est lié.

D'ailleurs, c'est à cela que sert l'attribut "for", à associer un label à un input. La valeur de l'attribut "for" doit absolument être le même que le "id" du champ à remplir qui y est associé.

-----------

Balise Input

La balise "input" est un champ à remplir.

Le "id" permet de lier le champ au label (ne pas oublier qu'un id est "unique", alors ne mettez pas le même id à plusieurs champ).

Le "name" sert à donner un nom au champ à remplir. Ce nom servira, plus tard, à sélectionner la valeur du champ dans un javascript pour transformer les données en un message. Il doit être unique pour chaque champ à remplir. Les seules exceptions sont celles du champ "radio" et du champ "checkbox" (on les verra plus tard).

Le "value" permet d'ajouter une valeur de base au champ. De base, il y a souvent rien du tout. Si on aurait mis "Machin", il y aurait déjà eu "Machin" d'écrit dans le champ dès le début. Par contre, il y a des situations où il faut toujours mettre une valeur, soit quand le type de champ est "checkbox" ou "radio". On verra les détails plus loin.

Le "size" contrôle la longueur du champ (en nombre de caractères). Cela fonctionne avec les champ text, mais pas tous les types de champ.

Enfin, le "type" permet d'indiquer quel est le type de champ. Voici une petite liste des "type" de champ possibles :

Hidden : C'est un champ caché et invisible

Text : Pour du texte court.


Radio : Pour des choix de réponse où il peut y avoir une seule option choisie.
Oui ou Non

Checkbox : Pour des choix de réponse où il peut y avoir plusieurs options choisies.
Option1 et Option2

Button : Pour un bouton.


Number : Pour un nombre.


Password : Pour un mot de passe.


Reset : Pour rénitialiser le formulaire (vider les champs)


Submit : Pour soumettre le formulaire.



Cette liste n'est pas complète parce qu'il y a des "type" moins utilisés et qui ne sont pas acceptés sur tous les navigateurs. Pour une liste complète, on va à cet endroit.

Aussi, je vous mets sous spoiler ce tutoriel de Riku qui démontre un peu plus les différents champs et certaines options à mettre dans les champs (readonly, disabled, selected, checked, etc.) :

Tutoriel de Riku:






J'ai parlé d'une exception du "name" pour le type "radio" et le type "checkbox", n'est-ce pas? Le "name" nous sert dans le javascript à sélectionner la valeur d'un champ, donc il est important que tous les champs aient un "name" différent.

Pour le type "radio" et le type "checkbox", il y a un petit pépin. En effet, pour une même question (un même label), il y a plusieurs champs (plusieurs input).

Histoire de pouvoir démêler cela un peu, on va se servir du "checked" pour vérifier si un champ est coché ou non (on va voir le checked plus tard). Du coup, il n'y a plus besoin de mettre un "name" différent pour chaque input. Plutôt le contraire en fait.

Il est important que, dans les cas de champs "radio" et "checkbox", tous les champs qui font partie d'une même question aient le même "name".

Pourquoi? Parce que le "name" va permettre aux différents champs de rester associés entre eux. Dans le cas d'un champ de type "radio", on peut seulement cocher un champ parmi ceux qui ont le même "name" et si on coche un autre champ qui a le même "name", celui qui était coché précédemment se décoche.

Perdu? Voilà un petit exemple pour vous montrer comme cela fonctionne quand on clique sur un champ radio :




Et l'exemple en code :
Code:
<label for="question_quelconque">Question quelconque</label><br />

<label for="option1">Option 1</label> <input id="option1" name="question_quelconque" value="Mon option 1" type="radio"></input><br />

<label for="option2">Option 2</label> <input id="option2" name="question_quelconque" value="Mon option 2" type="radio"></input>





Outre les balises "input" et "label", il y en a 3 autres qui peuvent être utile dans un formulaire.

Il s'agit des balises "textarea", "select" et "option".

Voilà à quoi elles ressemblent (en code) :
Code:
<textarea name="arara" id="blablabla">Bla bla bla.</textarea>

<select name="restaurants" id="restaurants">
  <option>McDo</option>
  <option>PFK</option>
  <option>Mike</option>
  <option>Subway</option>
  <option>A&W</option>
  <option>Les frites de Suzanne</option>
</select>



Et voilà leur utilité/apparence :
Textarea : C'est une balise utilisée pour du texte long.


Select et Option : Pour des listes déroulantes. La balise "select" correspond à la liste en elle-même et les balises "option" sont les différentes options de la liste.



Étape 1.3 - Créer les champs de notre formulaire


J'ai vraiment besoin de l'expliquer?

Maintenant que vous savez comment fonctionnent les champs, à vous de d'essayer de construire vos questions et vos champs pour votre formulaire ^^

Voici  les questions et les champs pour l'exemple que je vous avais montré tout à l'heure :
Code:
   <form id="monId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" target="_blank">
      <input type="hidden" name="mode" value="newtopic" />
      <input type="hidden" name="topictype" value="0" checked="checked" />
      <input type="hidden" name="message" value="" />
      <input type="hidden" name="f" value="10" />
      <input type="hidden" name="subject" id="titre" value="" />
      <h1>Formulaire de commande de Bouffe, miam miam !</h1>
      <h2>Mes informations</h2>
      <label for="nom">Nom<span class="redd">*</span> :</label><br />
      <input type="text" size="50" name="nom" id="nom" /><br />
      <br />
      <label for="adresse">Adresse<span class="redd">*</span> :</label><br />
      <input type="text" size="70" name="adresse" id="adresse" /><br />
      <br />
      <label for="phone">Numéro de téléphone<span class="redd">*</span> :</label><br />
      <input type="text" size="20" name="phone" id="phone" /><br />
      <br />
      <h2>Commande</h2>
      <label for="resto">Nom du restaurant<span class="redd">*</span> :</label><br />
      <select name="resto" id="resto">
        <option>McDo</option>
        <option>PFK</option>
        <option>Buffet Chinois Hans</option>
        <option>Mike</option>
        <option>Subway</option>
        <option>Sushi Shop</option>
        <option>Chez Angelo l'Italien</option>
        <option>Les frites de Suzanne</option>
      </select><br />
      <br />
      <label for="livraison">À faire livrer ou non?<span class="redd">*</span></label><br />
      <label for="livrer">Oui</label> <input type="radio" name="livraison" id="livrer" checked="checked" value="Oui" /><br />
      <label for="nonlivrer">Non</label> <input type="radio" name="livraison" id="nonlivrer" value="Non" /><br />
      <br />
      <h3>Commande avec menu prédéfini</h3>
      <label for="nmenu">N° de menu :</label><br />
      <input type="number" style="width: 50px;" name="nmenu" id="nmenu" max="20" min="1" value="1" /><br />
      <br />
      <label for="nperso">Nombre de personnes qui commandent :</label><br />
      <input type="number" style="width: 50px;" name="nperso" id="nperso" max="20" min="1" value="1" /><br />
      <br />
      <h3>Commande personnalisée</h3>
      <label for="commande">Contenu de la commande</label><br />
      <textarea name="commande" id="commande"></textarea><br />
      <br />
      <h2>Paiement</h2>
      <label for="paie">Type de paiement<span class="redd">*</span> :</label><br />
      <label for="visa">Carte Visa</label> <input type="radio" name="paie" id="visa" checked="checked" value="Carte Visa" /><br />
      <label for="mastercard">Carte Mastercard</label> <input type="radio" name="paie" id="mastercard" value="Carte Mastercard" /><br />
      <label for="cash">Argent comptant</label> <input type="radio" name="paie" id="cash" value="Argent comptant" /><br />
      <label for="debit">Carte de débit</label> <input type="radio" name="paie" id="debit" value="Carte de débit" /><br />
      <br />
      <label for="trucs">Trucs pour faire baisser le montant total :</label><br />
      <label for="coupon">Coupon-rabais</label> <input type="checkbox" name="coupon" id="coupon" value="Coupon-rabais" /><br />
      <label for="ami">"Ami" du proprio</label> <input type="checkbox" name="ami" id="ami" value="Ami du proprio" /><br />
      <label for="cadeau">Cartes cadeaux</label> <input type="checkbox" name="cadeau" id="cadeau" value="Cartes cadeaux" /><br />
      <br />
      <label for="secret">Mon code secret VIP de "Chez Angelo l'Italien" :</label><br />
      <input type="password" size="30" name="secret" id="secret" /><br />
      <br />
      <br />
      <div style="text-align: center;">
        <input type="reset" name="reseta" value="Rénitialiser le formulaire" />
        <input type="submit" name="post" value="Envoyer le formulaire" />
      </div>
      <br />
    </form>


Note : Les h1, h2 et h3 sont simplement des balises de titres.
Note2 : Les br sont des retour à la ligne, cela remplace un "enter" classique qui, dans une page HTML, ne sert à rien.

À vous de jouer pour faire votre propre formulaire maintenant !

Note : Si ce n'est pas déjà fait, enregistrez votre page html avant de la perdre ! Ensuite, assurez-vous de l'enregistrer régulièrement pour ne rien perdre ^^

Attention au champ pour envoyer le message !

Sur forumactif, le champ pour envoyer le message, celui qui a pour type "submit", doit absolument avoir "post" dans son "name". Le name "post" sert à indiquer qu'on veut poster notre message et non pas faire quelque chose d'autre avec.

Du coup, il doit ressembler à cela :
Code:
<input type="submit" name="post" value="Envoyer le formulaire" />


D'ailleurs, si jamais vous voulez rajouter l'option de "prévisualiser" le message avant qu'il soit posté, vous pouvez faire un copier/coller du bouton, mais en utilisant le name "preview" à la place de "post".

Du coup, le bouton prévisualiser ressemblerait à ceci :
Code:
<input type="submit" name="preview" value="Prévisualiser le formulaire" />



Étape 2 - Les champs invisibles de notre formulaire


Houston, on a un problème! Mais de quoi elle parle, des champs invisibles ? WTF ?

Roh, allez, c'est pas si effrayant, je vous en ai déjà parlé tout à l'heure !

Je parle ici des balises "input" de type "hidden", ceux qu'on peut mettre partout sans que la personne qui rempli le formulaire ne les voit.

Mais pourquoi on en aurait besoin ??!

Vous croyez peut-être que votre formulaire, une fois rempli, va savoir qu'il doit aller dans se poster en réponse à un sujet déjà créé ou qu'il doit créer un nouveau sujet dans un sous-forum précis? Nope, il n'en sait rien.

Heureusement, on est là pour l'aider ^^

Donc voilà les champs invisibles qui seront à ajouter directement après la balise "form" :
Code:
      <input type="hidden" name="mode" value="newtopic" />
      <input type="hidden" name="topictype" value="0" checked="checked" />
      <input type="hidden" name="message" value="" />
      <input type="hidden" name="f" value="10" />
      <input type="hidden" name="subject" id="titre" value="" />


.... Et ça veut dire quoi, ça? C'est bien beau d'aider le formulaire à savoir où aller, mais j'en ai pas plus idées que lui moi ><

Ouais, j'imagine XD Allez, passons chaque ligne au peigne fin !


Code:
<input type="hidden" name="mode" value="newtopic" />

Cela sert à définir le mode du message.
Si on met "newtopic" comme valeur, c'est qu'on crée un nouveau sujet. Si on met "reply" comme valeur, c'est qu'on répond à un sujet déjà existant. Si on met "move" comme valeur, c'est qu'on veut déplacer un sujet.
Je ne nommerai pas tous les modes, mais il y en a beaucoup, un pour presque chaque option possible sur forumactif.
Nous, ce qui nous intéresse pour le moment, c'est le "newtopic" pour créer un nouveau sujet et le "reply" pour répondre à un sujet.


Code:
<input type="hidden" name="topictype" value="0" checked="checked" />

Cela sert à dire quel type de sujet on crée.
Si c'est un message normal, on lui donne la valeur "0".
Si c'est une note (post-it), ce sera la valeur "1".
Si c'est une annonce, ce sera la valeur "2".
Si c'est une annonce globale, ce sera la valeur "3".


Code:
<input type="hidden" name="message" value="" />

Il s'agit du contenu du message qui sera posté. Comme le message va prendre les données du formulaire, on le met vide pour le moment et on ira s'occuper de le remplir plus tard grâce au javascript.


Code:
<input type="hidden" name="f" value="10" />

C'est le "où". Où est-ce que le message doit être posté?
Le "f" dans le "name" indique que c'est dans un forum ou sous-forum.
Si on voulait que ce soit dans une catégorie, on aurait mis la valeur "c".
Si on aurait voulait que ce soit dans un sujet déjà créé, on aurait mis la valeur "t".

Ensuite, le "10" dans le "value" indique dans quel forum/sous-forum/catégorie/sujet le message doit être posté.
Autrement dit, vous vous rendez sur la page du sujet/sous-forum/etc. où vous voulez que le sujet soit posté et vous regardez dans la barre d'adresse.
Directement après le "f" (ou c ou t), vous verrez un nombre.
C'est ce nombre qu'il faut mettre dans "value".


Code:
<input type="hidden" name="subject" id="titre" value="" />

C'est simplement le titre du sujet. Si vous voulez que la personne le remplisse par elle-même, vous pouvez changer le "type" pour "text" et l'intégrer au reste du formulaire. Sinon, laissez-le caché et on ira remplir le titre à l'aide du javascript plus tard ^^


Note : Si ce n'est pas déjà fait, enregistrez votre page html avant de la perdre ! Ensuite, assurez-vous de l'enregistrer régulièrement pour ne rien perdre ^^

Et voilà pour cette section \o/

Notepad++ et hébergement CSS sur Archive Host - Sam 14 Mai 2016 - 18:18


Notepad ++ ; premiers pas et trucs utiles.




Coucou les Utopiens ! ♥ Pour ma toute première contribution ici, j'ai décidé de vous parler de ce logiciel dont on voit souvent le nom courir entre les codeurs qui bavardent, et dont certains —comme... moi, jusqu'à il y a peu, je l'avoue— se tiennent à distance, en se demandant "gnééé keskecé ?" Eh bien, je vais vous répondre ! Il s'agit d'une sorte de bloc-notes, mais en beaucoup plus pratique, puisqu'il y a une mise en place automatique de couleurs, par exemple, ce qui vous permets de trouver rapidement vos balises mal écrites ou mal fermées. Il permet de mettre ses codes au propre, notamment, mais aussi de les prévisualiser en direct sur votre navigateur, de les héberger, et... et vous allez voir, ce dernier point est bien l'un des plus pratiques qui soient ! Car, je vous le demande : quel codeur qui touche au CSS dans des posts (par exemple, fiche de RP sur un forum dont on n'a pas accès à la feuille de style) ne s'est jamais retrouvé avec un CSS de 60 lignes imbuvables à descendre dans sa zone de saisie Forumactif avant de pouvoir taper son petit RP ? Et si je vous disais que ces soixante lignes, on pouvait les remplacer par une seule ? Si, si. C'est possible. Et je vais vous le montrer, en toute fin d'astuce, parce que c'est cadeau et que ça fait toujours plaisir !

L'astuce va se diviser en deux parties :
— en premier lieu, je vais vous montrer comment utiliser Notepad++ le plus simplement du monde, autrement dit les bases, et ce qu'il vous suffit de connaître pour exploiter le logiciel.
— dans un deuxième temps, je vous parlerai de la fameuse astuce cadeau pour ne plus s'embêter avec les soixante lignes de CSS au début d'un post. Je vous assure, ça n'est pas de la magie, juste quelques clics !

Notepad ++


Votre logiciel téléchargé sur le lien officiel & sécurité fourni plus haut —pour ma part, j'ai choisi le Notepad++ Installer, autrement dit le premier de la liste— et enfin ouvert, il vous place en face d'une page de récapitulatif des débugs etc, ignorez-la. Cliquez simplement sur l'icone nouveau, ou bien Ficher > Nouveau. C'est un nouvelle onglet qui s'ouvre, complètement vierge, avec un petit chiffre sur la gauche : bref, vous avez affaire à une feuille de style dans toute sa beauté.

Créer une page html


Première étape importante ! Allez dans Langage > H > HTML. Ainsi, le logiciel saura ce que vous comptez lui raconter, la façon dont il devra comprendre votre blabla et comment l'interpréter pour réagir correctement. De ce fait, le style restera noir, mais le html prendra des couleurs de sorte à vous permettre de vous repérer dans votre fichier. Pratique, non ? %D

Etant donné qu'ici, il s'agit d'une page HTML, il faut la "paramétrer" de la même façon qu'on pourrait le faire sur un forum. Mais si, vous savez, le doctype, le body, le style... Le but ici n'est pas de vous expliquer à quoi correspond chaque balise, aussi je vous la fournis simplement. Elle est à copier / coller dans votre document Notepad++.

Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
         <title>Titre</title>
         <style type="text/css">/*Feuille de style CSS*/</style>
    </head>

    <body>
    Corps de la page html
    </body>
</html>


Vous le savez peut-être déjà, mais un rafraîchissement de la mémoire ne fait jamais de mal : c'est à la suite de l'ouverture de la balise "head" que vous pouvez, si vous le souhaitez, rajouter la ou les polices Google Fonts que vous utiliserez dans votre document. N'oubliez pas non plus qu'un seul lien est nécessaire, et qu'il suffit de séparer chaque police d'un | dans ce seul et même lien pour qu'elles fonctionnes toutes ! Exemple : [...]family="Open+Sans|Oswald|Roboto'[...] rend les polices Open Sans, Oswald et Roboto utilisables dans tout le document qui suivra.
Ceci fait, le logiciel fonctionne exactement comme une page HTML : il vous revient donc de remplir le style et le body comme bon vous semble, à votre goût, pour faire une PA, un répertoire à RP, une fiche de relations, bref, ce que vous voulez. Au final, vous n'aurez plus qu'à copier / coller le code sur une véritable page HTML de votre forum, tout beau, tout propre. cheers

Attention ! Lorsque vous enregistrez, vérifier bien que l'extension soit .html, et non pas .txt ! Normalement, puisque vous avez donné le HTML comme langage à votre fichier, le .html devrait s'y trouver par défaut, mais rien n'est moins sûr. Alors, faites-y bien attention ! En soit, ça n'est pas grave s'il reste en .txt, mais cette extension-ci empêchera le bon fonctionnement de l'astuce qui suit, et qui est pourtant fortement pratique. c:


Petite astuce : prévisualisation directe


Petit truc sympa qu'il me semble tenir de Batty, sur Epicode, et qui empêche de galérer à devoir faire d'innombrables copiés / collés pour avoir le droit au visu de sa page : une fois votre document.html enregistré, allez le chercher dans le dossier où vous l'avez placé. Ici, vous faites un petit clic droit dessus > ouvrir avec > votre navigateur. Une page s'ouvrira, avec votre code mis en page ! A chacune de vos modifications ensuite, enregistrez simplement, et actualisez votre page sur votre navigateur. Vous pouvez ainsi voir les changements effectués pas à pas, comme vous le feriez sur un forum par exemple !

Créer une feuille de style CSS


Le principe est exactement le même que pour créer une page HTML. Vous ouvrez votre nouveau document, et vous allez à nouveau déterminer un langage pour votre fichier. Evidemment, puisqu'ici on ne parle plus de HTML, on ne demandera pas à Notepad++ de parler HTML —ne demandez pas à un français de parler allemand dans un cours d'anglais, c'est illogique, m'voyez ?

Alors, cette fois-ci, on va dans Langage > C > CSS. Ensuite, sur votre fichier, pas besoin de glisser le moindre docstyle ou quoique ce soit d'autre : vous pouvez directement commencer à nommer vos class et remplir leur style. Cette fois-ci, le CSS se met en couleurs, et vous guide à nouveau dans votre façon de coder, à l'affût des balises mal fermées ou des souci de syntaxe de votre code !

Attention ! Pour l'enregistrement cette fois-ci, veillez à ce que l'extension soit bien .css et rien d'autre !


Complément utile : Archive Host


Archive Host est une plateforme d'hébergement réputée pour être véritablement polyvalente et utilisable pour tout et n'importe quoi. Elle est parfaite pour installer des musiques sur nos forums ou dans nos signatures, parfaite aussi pour sauvegarder nos fichiers et les retrouver sans avoir à s'encombrer d'une clef USB, et... parfaite aussi pour héberger des feuilles de style, et nous l'allons voir dans un instant !

Inscription


On entend souvent dire qu'Archive Host est payant... C'est faux ! Enfin, il y a eu des périodes où il l'était entièrement, si je ne dis pas de bêtise, mais aujourd'hui, comme beaucoup d'autres plateformes, le site propose une version pour les particuliers, qui n'ont pas besoin d'autant d'espace de stockage que les professionnels ou les entreprises.

Lorsque vous arrivez sur la page d'index d'A-H, cliquez sur Inscription dans la barre de navigation, puis choisissez le Stockage de fichiers. Vous êtes redirigés vers une page avec diverses offres —payantes, oui—, mais celle qui nous intéresse est la dernière, celle qui nous demande si "nos besoins sont simples", et nous propose une offre gratuite réservée à nous autres, pauvres petits particuliers sur la paille. :face: Cliquez, inscrivez-vous, validez votre email, connectez-vous, et ensuite, les choses sérieuses commencent !

Au moment de vous connecter, ne soyez pas bête comme moi qui ne fais pas attention avant de cliquer : il y a deux boutons de connexion, un Panel et un Manager. Faites bien attention de cliquer sur celui qui fait face à Panel, sinon vous pouvez toujours essayer de vous connecter, ce sera un échec pur et dur —auquel je me confronte souvent :mdr:


Hébergement d'une feuille de style


Une fois que vous êtes dans vos fichiers —si votre connexion ne vous y redirige pas automatiquement, cliquez sur la petite maison à côté de Panel pour y accéder—, cliquez sur Ajouter des Fichiers pour ouvrir une boîte d'hébergement. A nouveau, Ajouter des fichiers, et allez chercher votre feuille de style enregistrée un peu plus tôt avec l'extension .css. Ceci fait, vous cliquez sur Démarrer l'envoi, puis vous pouvez fermer votre boîte si elle ne se ferme pas automatiquement. Notez que vous pouvez envoyer plusieurs fichiers à la fois sans souci !

Votre fichier .css apparaît désormais sur votre espace de stockage, sous la forme d'un icone papier à bordure rose —très joli, par ailleurs, notez-le bien. Bravo, vous avez hébergé une feuille de style CSS ! cheers

D'accord... C'est bien joli de savoir héberger une feuille de style, mais concrètement, ça sert à quoi en fait ? Puis t'aurais pas oublié de nous causer de ton astuce pour palier aux soixante lignes de code, là, par hasard ?


Utilisation d'une feuille de style hébergée


Minute, papillon ! Je n'ai point oublié, et nous y voilà enfin : l'astuce finale, bien pratique, qui nous permettra de clôturer en beauté ! Vous avez d'un côté votre CSS, sagement hébergé sur Archive Host, et de l'autre, votre code de RP/répertoire/fiche de liens/que sais-je tout en class et complètement dépendant de ce CSS parti vers d'autres cieux ? Pas de panique, vous pouvez à nouveau les relier, tout en faisant une grosse économie de place, de caractères, et un pas de géant dans la praticité !

La recette magique ? Elle vous dira forcément quelque chose... la voici :
Code:
<link href='URL' rel='stylesheet' type='text/css'>


Eh oui ! Il s'agit du même lien qui vous permet de relier des polices de Google Fonts à vos messages ! Et c'est aussi cette petite chose qui, du même coup, va vous permettre de relier votre CSS à partir d'un autre site —dans le cas présent, à partir d'Archive-Host.

Retournons sur la plateforme d'hébergement, donc. Si vous survolez votre fichier, vous pourrez voir apparaître une petite flèche orientée vers le bas, en haut à droite de la zone de survol. Cliquez dessus ! Apparaissent différentes fonctions. Celle qui nous intéresse ici, c'est la fonction Informations et Codes. Un petit clic, et une nouvelle boîte s'ouvre, normalement par défaut sur l'onglet des codes. C'est parfait ! Ne vous occupez que du premier, le lien Principal, qui doit ressembler à quelque chose comme ça :
Code:
http://www.aht.li/sériedechiffres/NOM_DE_VOTRE_FICHIER.css


Vous le copiez, et vous le collez dans le lien que j'ai mis un peu plus haut, à la place du "URL". Mais si, celui-là même qui vous permet de relier les liens Google Fonts, vous savez bien ! Ceci fait, vous obtenez donc :
Code:
<link href='http://www.aht.li/sériedechiffres/NOM_DE_VOTRE_FICHIER.css' rel='stylesheet' type='text/css'>


Et là, vous n'avez plus qu'à le placer au début ou à la fin de votre message rempli de class, à la façon d'une police Google Fonts. Tout à coup, les class prendront vie, animées par la poussière de fée de votre feuille de style hébergée ! Si c'est pas beau, ça. :hudada:


Petite information bonus :
Sur Archive Host, si vous avez fait une erreur dans votre CSS ou que vous voulez le modifier, il suffit que vous ré-hébergiez le fichier avec le même nom et l'ancien fichier sera remplacé par le nouveau fichier sans que le lien ne soit modifié, ce qui fait gagner beaucoup de temps si votre css est utilisé à plusieurs endroits.

Petite information bonus 2 :
Il est possible d'héberger des fichiers de polices (.ttf par exemple) sur Archive Host.

Youp

Fiche de pub coloréé en page html - Jeu 7 Jan 2016 - 16:50



Hey ! Voici une petite fiche de pub sympathique aux couleurs estivales. Il y'a des animations sur la partie staff, qui dévoile le nom du staff. La voici: (vous n'aurez pas les images dans le code, à vous de les mettre, mais je vous expliquerais où)



Ce livre nécessite une page html, une page qui sera hébergée sur un forum donc. Mais ne vous en faites pas, ce n'est vraiment pas sorcier


Le code de la page html et ses explications

Donc dans modules -> gestion des pages html -> créer en mode avancé, vous mettez ceci :
Code:
<!DOCTYPE html>
  <html>
    <head> 
      <meta charset="utf-8" />
      <title>Fiche de pub pour refresh</title>
      <base target="_blank" />
      <style type="text/css">
.page{
  width: 550px;
  height: 900px;
  background: lightblue;
  background-image: url('LIEN');
  background-repeat: no-repeat;
}

a {
  text-decoration:none;
  color: white !important;
}

.titre {
  color : #fb6920;
  font-size: 24px;
  font-weight: ;
  letter-spacing: px;
  font-family: 'Indie Flower';
  float: right;
  position: relative;
  margin-right: 20px;
  margin-top: 257px;
  text-shadow: 2px 2px 0px white, -1px -1px 0px white;
}    

.contexte{
  width: 350px;
  height: 310px;
  background: white;
  position: absolute;
  top: 300px;
  overflow: auto;
  margin-left: 25px;
  font-size: 15px;
  padding: 7px;
  text-align:justify;
  color: chocolate;
}

.contexte:first-letter {
  font-size:290%;
  float:left;
  background: #fb6920;
  color: white;
  padding-left: 6px;
  padding-right: 5px;
  margin-right: 3px;
}  

.staff1{
  width: 100px;
  height: 100px;
  background: white;
  position: absolute;
  top: 300px;
  left: 420px;
  background: white;
  color: chocolate;
}  

.imagestaff1 {
  height: 100%;
  width: 100%;
  position:absolute;
  top:0;
  left:0;
  background-image: url('LIEN');
  background-size: contain;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}  

.staff1:hover > .imagestaff1 {
  filter:alpha(opacity=0);
  opacity:0;
  visibility:hidden;
}

.staff2 {
  width: 100px;
  height: 100px;
  background: white;
  position: absolute;
  top: 410px;
  left: 420px;
  background: white;
  color: chocolate;
}    


.imagestaff2 {
  height: 100%;
  width: 100%;
  position:absolute;
  top:0;
  left:0;
  background-image: url('LIEN');
  background-size: contain;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}  

.staff2:hover > .imagestaff2 {
  opacity:0;
  filter:alpha(opacity=0);
  visibility:hidden;
}

.staff3{
  width: 100px;
  height: 100px;
  background: white;
  position: absolute;
  top: 520px;
  left: 420px;
  background: white;
  color: chocolate;
}

.imagestaff3 {
  height: 100%;
  width: 100%;
  position:absolute;
  top:0;
  left:0;
  background-image: url('LIEN');
  background-size: contain;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}  

.staff3:hover > .imagestaff3 {
  opacity:0;
  filter:alpha(opacity=0);
  visibility:hidden;
}

.blocliens{
  width: 550px;
  height: 36px;
  position: absolute;
  top: 650px;
  vertical-align: middle;
}  

.lien1{
  width: 109px;
  height: 35px;
  background: #fb6920;
  color: white !important;
  display: inline-block ;
  position: relative;
  top: 0px;
  float:left;
  text-align:center;
  line-height:30px;
}

.lien1:hover{
  width: 109px;
  height: 35px;
  background: #b92b2a;
  color: white;
  display: inline-block ;
  position: relative;
  top: 0px;
  float:left;
  text-align:center;
  line-height:30px;
}

.lien2{
  width: 111px;
  height: 35px;
  background: gold;
  color: white;
  display: inline-block ;
  position: relative;
  top: 0px;
  float: left;
  text-align:center;
  line-height:30px;
}

.lien2:hover{
  width: 111px;
  height: 35px;
  background: #b92b2a;
  color: white;
  display: inline-block ;
  position: relative;
  top: 0px;
  float: left;
  text-align:center;
  line-height:30px;
}

.blocinfo{
  width: 400px;
  background: white;
  position: absolute;
  top: 710px;
  overflow: auto;
  margin-left: 50px;
  font-size: 15px;
  padding: 15px;
  text-align:justify;
  color: chocolate;
  border-radius: 20px;
}

.boutonphrase {
  color : #fb6920;
  font-size: 20px;
  font-family: 'Indie Flower';
  text-shadow: 2px 2px 0px white, -1px -1px 0px white;
  width: 190px;
  margin: auto;
}    

.bouton {
  width: 100px;
  margin: auto;
  margin-top: -17px;
}    

.crédit {
  font-size: 10px;
  position: absolute;
  top: 875px;
  margin-left: 200Px;
  color: grey;
}
</style>
      <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Indie+Flower" >
    </head>       
    <body>                 
<div class="page">
                                                              
 <div class="titre">
                               Si tu devais partir en voyage, où irais-tu?                                
 </div>
                                                            
 <div class="contexte">
                               LE CONTEXTE BLABLABLA, ces balises -> <br /> <br /> Correspondent à un saut de ligne si vous souhaitez les utiliser. A la suite un petit lien vers le contexte en entier, vous pouvez le retirer: <a target="_blank" href="LIENde_la_suite_de_votre_contexte"><span style="color: rgb(185, 43, 42);">La suite...</span></a>                            
 </div>
                                                        
 <div class="staff1">
        
 <div style="height: 100px;  display:table-cell; vertical-align: middle; font-family: 'Indie Flower' ; text-align: center; width : 100px;">
          NOM STAFF      
 </div>
                  
 <div class="imagestaff1">
                    
 </div>
                                                        
 </div>
                                                        
 <div class="staff2">
        
 <div style="height: 100px;  display:table-cell; vertical-align: middle; font-family: 'Indie Flower' ; text-align: center; width : 100px;">
         NOM STAFF          
 </div>
                    
 <div class="imagestaff2">
                      
 </div>
                                                        
 </div>
                                                        
 <div class="staff3">
      
 <div style="height: 100px;  display:table-cell; vertical-align: middle; font-family: 'Indie Flower' ; text-align: center; width : 100px;">
        NOM STAFF    
 </div>
                    
 <div class="imagestaff3">
                    
 </div>
                                                        
 </div>
                                                        
 <div class="blocliens">
                                          
 <div class="lien1">
       <a href="LIEN" target="_blank">                  Règlement </a>                          
 </div>
                            
 <div class="lien2">
       <a href="LIEN" target="_blank">                      Base de données </a>                        
 </div>
                    
 <div class="lien1">
       <a href="LIEN" target="_blank">                     Fruits du démon </a>                          
 </div>
                              
 <div class="lien2">
       <a href="LIEN" target="_blank">                      Questions  </a>                          
 </div>
                          
 <div class="lien1">
       <a href="LIEN" target="_blank">                    Staff  </a>                    
 </div>
                                            
 </div>
                                              
 <div class="blocinfo">
                           Date d'ouverture: <br /> Membres enregistrés: <br />Nombre de messages postés : <br />  <br />                
 <div class="boutonphrase">
                 Venez nous rejoindre !                  
 </div><br />                  
 <div class="bouton">
                  <a title="OnePieceRefresh" href="LIEN_Forum"><img src="Image_bouton_partenariat" alt="logo partenaire" /></a>                  
 </div>
                                        
 </div>
                                    
 <div class="crédit">
                              @Youp sur <a target="_blank" href="http://www.never-utopia.com/"> <span style="color: rgb(185, 43, 42);">Never Utopia</span> </a>                              
 </div>
                                                                                
</div>
</body>
</html>


Ensuite, à chaque fois que vous voulez modifier votre code, vous devrez utiliser le mode avancé, soit l'engrenage sur lequel il est écrit "html". Sinon, cela va cause des bugs.

Code:
.page{
  width: 550px;
  height: 900px;
  background: lightblue;
 background-image: url('LIEN');
 background-repeat: no-repeat;
}

N'oubliez pas de remplacer le LIEN par un... roulement de tambour... Lien ! Razz Ce lien correspond à l'image en haut de la fiche, l'image ici fait 550 de largeur (width) et 275 de hauteur (height). Si vous désirez changer les proportions, il vous faudra changer certains placements comme celui du titre par exemple (modifier simplement la valeur top ).

Modifier aussi le lien des images de imagestaff1, 2 et 3 ainsi que le nom qui s'affiche en dessous (j'ai noté NOM STAFF). Les images font 100x100px.

Code:
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Indie+Flower" />            

Correspond à la police google font que l'on utilise pour certaines parties de la fiche, vous pouvez la remplacer par une autre si vous le souhaitez bien sûr. Ajouter juste à la suite le code similaire que vous donne google font.

N'oubliez pas de modifier aussi tout les LIEN (donc pour la navigation rapide, ex règlement, staff etc..., sur le bouton de partenariat aussi), et l'image du bouton de partenariat.



Utiliser dans un message: mettre une iframe :

Hop hop, maintenant pour l'utiliser, il suffit d'utiliser une iframe sous cette forme:
Code:
<iframe src="Le_lien_de_ta_page_html" frameborder="0" scrolling="no" style="margin:auto; width: 550px; height: 900px;"></iframe>

Modifier les valeurs de hauteur et de largeur si vous avez modifier celle-ci sur votre page html. Enlever la première div si vous ne voulez pas que la fiche soit centrée.

Voili voilou, j'espère que le rendu vous plaît et si vous avez un problème avec la modification du code, n'hésitez pas à passer dans "personnalisations" ou "problème avec mon code". N'enlevez pas le crédit bien sûr (surtout celui qui amène vers N-U, mais sur ce point je vous fait confiance ^^

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>

Loukoum

PA avec Onglets - Ven 25 Sep 2015 - 12:13



Bonjour / Bonsoir chers amis de Never-Utopia!  :hug:  


Me voici ici pour vous laisser un petit code assez sympa de Page d'Accueil, codé par mes petites mains de A à Z!  :artiste:
Vous comprendrez donc que le crédit "PA de Loukoum sur Never-Utopia" est à laisser sous peine de mort...  :bandit:

A savoir que cette PA est une page HTLM, il faut donc être à l'aise avec ce genre de codes! A savoir aussi que votre page HTLM ne devra être modifiée qu'à l'aide de ce bouton Tag page_html sur Never Utopia - graphisme, codage et game design Editer-html et non de celui ci Tag page_html sur Never Utopia - graphisme, codage et game design Editer.
:nanere:   Donc si vous êtes déjà perdu, passez votre chemin.

Pour ceux qui sont trop fort  :cowboy:  nous allons passer au visuel =D
Et pour que tout soit parfait, voici la PA en pleine application ici =D

Donc pour ceux qui se sentent pousser des ailes, voilà les codes  :wesh:

Etape 1 - Notre PA
Voici donc le plus gros, la vrai PA!

Vous devez donc créer une nouvelle page HTLM (PA > Module > Gestion des Pages HTLM), mais faites bien attention à cliquer sur "Création en mode avancé (HTLM)" et non sur "Création en mode simple (WYSIWYG)"!!!

/!\ Les images pour les sabliers sont en 70x70. Si vous êtes à l'aise avec les codes, vous pouvez changer la taille. Mais si ce n'est pas le cas, comme il y a beaucoup de changement à faire, gardez cette taille (ou demandez de l'aide si vraiment vous voulez changer je vous mangerais pas)

Pour le contexte, il y a de quoi intégrer une vidéo. Pensez à mettre le lien mais aussi à changer la taille, qui est pour le moment réglé à 0x0!
Code:
<!DOCTYPE html>
<html>
<head>
  <base target="_blank" />
  <meta charset="UTF-8" />
  <title>Titre</title>
  <style>
/*Effet sur les mots soulignés*/
u {
  border-bottom: 2px dotted;
  border-color: #1d0e14;
  text-decoration: none;
}

/*Effet sur les mots en italique*/
i {
  border-bottom: none;
  color: #ad8c62;
  text-decoration: none;
  text-shadow: 1px 1px 1px #000;
}

/*Effets sur vos liens*/
a,a:link,a:visited,a:hover {
  text-decoration: none;
}

a {
  color: #C0A27B;
  font-family: Georgia;
  font-size: 10px;
  text-decoration: none;
}

a:hover {
  color: #00FFBF;
  font-size: 10px;
  font-family: Georgia;
  text-decoration: none;
}

a.lien,a.lien:link,a.lien:visited,a.lien:hover {
  text-decoration: none;
}

a.lien {
  font-size: 10px;
  font-family: Georgia;
  color: #C0A27B;
  text-shadow: 1px 1px 1px #000;
  text-decoration: none;
}

a.lien:hover {
  font-size: 10px;
  font-family: Georgia;
  color: #00FFBF;
  text-shadow: 1px 1px 1px #000;
  font-weight: bolder;
  text-decoration: none;
}

/*Affichage des Titres de votre PA*/
.titre {
  background: #E5D5BA;
  font-family: 'MV Boli';
  font-size: 15px;
  text-align: center;
  text-shadow: 1px 1px 0 #62584b;
  border: 2px solid #1d0e14;
  border-bottom: 2px dotted #1d0e14;
}

/*Les styles des différents cadres. Vous pouvez tout changer SAUF la taille, soit width et height*/
.staff {
  background: #E5D5BA;
  width: 310px;
  height: 140px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  padding: 10px;
}

/*Ces "info" sont les infobulles, vous pouvez donc changer la couleur et la taille. Normalement la position d'affichage ne doit pas être changée! L'info1 et info2 sont pour le Staff, et la 4 pour les Scénarios*/
.info1 {
  position: relative;
  z-index: 24;
  text-decoration: none;
  font-family: Georgia;
  font-size: 10px;
}

.info1:hover {
  z-index: 25;
}

.info1 span {
  display: none;
}

.info1:hover span {
  display: block;
  position: absolute;
  top: -41px;
  left: -3px;
  width: 105px;
  height: 50px;
  background-color: #ad8c62;
  color: #61574b;
  text-align: center;
  font-weight: none;
  font-family: Georgia;
  font-size: 10px;
  border-radius: 20%;
}

/*Ceci concerne l'image des infobulles*/
.imgwidget {
  border-radius: 20%;
  width: 100px;
  height: 50px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.info2 {
  position: relative;
  z-index: 24;
  text-decoration: none;
  font-family: Georgia;
  font-size: 10px;
}

.info2:hover {
  z-index: 25;
}

.info2 span {
  display: none;
}

.info2:hover span {
  display: block;
  position: absolute;
  top: -21px;
  left: 0;
  width: 100px;
  height: 30px;
  background-color: #ad8c62;
  color: #61574b;
  text-align: center;
  font-weight: none;
  font-family: Georgia;
  font-size: 10px;
}

.imgwidget1 {
  width: 100px;
  height: 30px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

/*Ici on retrouve un code identique à notre complément de PA, alors touchez uniquement la même chose que tout à l'heure*/
.onglet {
  cursor: pointer;
  font-family: 'MV Boli';
  font-size: 15px;
  text-align: center;
  text-shadow: 1px 1px 0 #62584b;
  border: 2px solid #1d0e14;
  border-bottom: 2px dotted #1d0e14;
}

.onglet_0 {
  background: #E5D5BA;
  border-bottom: 2px solid #1d0e14;
}

.onglet_1 {
  background: #E5D5BA;
}

.contenu_onglet {
  background: #E5D5BA;
  display: none;
  width: 300px;
  height: 146px;
  padding: 8px;
  overflow: auto;
  border: 2px solid #1d0e14;
  color: #61574b;
  font-size: 12px;
  text-align: justify;
}

.wanted {
  background: #E5D5BA;
  width: 320px;
  height: 150px;
  padding: 5px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  text-align: center;
  font-family: Georgia;
  font-size: 10px;
  color: #61574b;
}

.info4 {
  position: relative;
  z-index: 24;
  text-decoration: none;
  font-family: Georgia;
  font-size: 10px;
}

.info4:hover {
  z-index: 25;
}

.info4 span {
  display: none;
}

.info4:hover span {
  display: block;
  position: absolute;
  top: -2em;
  left: -2em;
  width: 150px;
  background-color: #ad8c62;
  color: #61574b;
  text-align: center;
  font-weight: none;
  border: 2px solid #1d0e14;
  font-family: Georgia;
  font-size: 10px;
}

.imgwidget2 {
  border-radius: 50%;
  width: 65px;
  height: 65px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
  -moz-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
}

.imgwidget2:hover {
  border-radius: 50%;
  width: 65px;
  height: 65px;
  -moz-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  transform: rotate(-25deg);
}

.tops {
  width: 141px;
  background: #E5D5BA;
  height: 150px;
  padding: 5px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  text-align: center;
  font-family: Georgia;
  font-size: 10px;
  color: #61574b;
  overflow: auto;
}

.news {
  background: #E5D5BA;
  width: 141px;
  height: 150px;
  padding: 5px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  text-align: justify;
  font-family: Georgia;
  font-size: 10px;
  color: #61574b;
  overflow: auto;
}

.meteo {
  background: #E5D5BA;
  width: 320px;
  height: 110px;
  padding: 5px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  text-align: justify;
  font-family: Georgia;
  font-size: 10px;
  color: #61574b;
  overflow: auto;
}

.imgwidget3 {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.systeme_paonglets {
  width: 300px;
  margin: auto;
  text-align: center;
}

.paonglets {
  text-align: center;
}

/*Le style d'affichage des paonglets*/
.paonglet {
  cursor: pointer;
  font-family: 'MV Boli';
  font-size: 15px;
  text-align: center;
  text-shadow: 1px 1px 0 #62584b;
  border: 2px solid #1d0e14;
  border-bottom: 2px dotted #1d0e14;
}

/*Ne pas toucher*/
.paonglet_0 {
  background: #E5D5BA;
  border-bottom: 2px solid #1d0e14;
}

/*Ne pas toucher*/
.paonglet_1 {
  background: #E5D5BA;
}

/*Le style d'affichage du contenu des paonglets*/
.contenu_paonglet {
  margin: auto;
  background: #E5D5BA;
  display: none;
  width: 300px;
/*Ne pas toucher*/
  height: 105px;
/*Ne pas toucher*/
  padding: 8px;
  overflow: auto;
  border: 2px solid #1d0e14;
  color: #61574b;
  font-size: 12px;
  text-align: justify;
}

/*Les codes qui suivent sont pour mon paonglet "Sablier", permettant de donner cet effet glissé sur les images et l'apparition du texte en dessous*/
.cate2 {
  width: 70px;
  height: 70px;
  overflow: hidden;
}

.cate2_img {
  position: relative;
  z-index: 2;
  width: 70px;
  height: 70px;
  margin-left: 0;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  background-color: #ad8c62;
}

.cate2:hover .cate2_img {
  margin-left: 70px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.cate2_description {
  position: relative;
  z-index: 1;
  width: 70px;
  height: 70x;
  margin-top: -70px;
  text-align: center;
  font-size: 11px;
  color: #FAF6F2;
  padding: 2px;
  overflow: auto;
}

/*modifier l'apparence des scrollbars de tout le forum*/
::-webkit-scrollbar {
  width: 5px;
/*largeur de la scrollbar verticale*/
  height: 5px;
/*hauteur de la scrollbar horizontale*/
  background-color: #ad8c62;
}

::-webkit-scrollbar-track {
  background-color: #ad8c62;
/*couleur du fond de la scrollbar*/
}

::-webkit-scrollbar-thumb {
/*la petite bande qui monte/descend*/
  background-color: /*couleur de l'ascenseur*/
#1d0e14;
}
  </style>
</head>
<body>
  <table align="center">
    <tr>
      <td>
        <div class="titre">
          Staff
        </div>
        <div class="staff">
          <span class="info1"><img class="imgwidget" src="IMAGE1" /> <span>TEXTE1 <a href="LIEN1" target="_blank">Profil</a> // <a href="LIEN1" target="_blank">MP</a></span></span>
          <span class="info1"><img class="imgwidget" src="IMAGE2" /> <span>TEXTE2 <a href="LIEN2" target="_blank">Profil</a> // <a href="LIEN2" target="_blank">MP</a></span></span>
          <span class="info1"><img class="imgwidget" src="IMAGE3" /> <span>TEXTE3 <a href="LIEN3" target="_blank">Profil</a> // <a href="LIEN3" target="_blank">MP</a></span></span><br />
          <span class="info1"><img class="imgwidget" src="IMAGE4" /> <span>TEXTE4 <a href="LIEN4" target="_blank">Profil</a> // <a href="LIEN4" target="_blank">MP</a></span></span>
          <span class="info1"><img class="imgwidget" src="IMAGE5" /> <span>TEXTE5 <a href="LIEN5" target="_blank">Profil</a> // <a href="LIEN5" target="_blank">MP</a></span></span>
          <span class="info1"><img class="imgwidget" src="IMAGE6" /> <span>TEXTE6 <a href="LIEN6" target="_blank">Profil</a> // <a href="LIEN6" target="_blank">MP</a></span></span><br />
          <div style="text-align: center;">
            <span class="info2"><img class="imgwidget1" src="IMAGE7" /> <span>TEXTE7 <a href="LIEN7" target="_blank">Profil</a> // <a href="LIEN7" target="_blank">MP</a></span></span>
            <span class="info2"><img class="imgwidget1" src="IMAGE8" /> <span>TEXTE8 <a href="LIEN8" target="_blank">Profil</a> // <a href="LIEN8" target="_blank">MP</a></span></span>
          </div>
        </div>
      </td>
      <td>
        <script type="text/javascript">
        //<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
        </script>
        <div class="systeme_onglets">
          <div align="center" class="onglets">
            <span class="onglet_1 onglet" id="onglet_NomOnglet1" onclick="javascript:change_onglet('NomOnglet1');"> Contexte </span>  <span class="onglet_0 onglet" id="onglet_NomOnglet2" onclick="javascript:change_onglet('NomOnglet2');"> Chronologie </span>  <span class="onglet_0 onglet" id="onglet_NomOnglet3" onclick="javascript:change_onglet('NomOnglet3');"> Nos écoles </span> 
          </div>
          <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_NomOnglet1">
              <!-- Debut 1er onglet -->
              <iframe allowfullscreen="" frameborder="0" src="LIEN%20VIDEO" style="width: 0px; height: 0px; float:left;"></iframe> ICI VOTRE CONTEXTE
            </div><!-- Fin 1er onglet -->
            <div class="contenu_onglet" id="contenu_onglet_NomOnglet2">
              <!-- Debut 2em onglet -->
              ICI VOTRE CHRONO SI VOUS EN AVEZ UNE
            </div><!-- Fin 2em onglet -->
            <div class="contenu_onglet" id="contenu_onglet_NomOnglet3">
              <!-- Debut 3em onglet -->
              SI COMME NOUS VOUS AVEZ D'AUTRES FORUMS OU ALORS TROUVEZ UNE UTILITE A CET ONGLET, OU SUPPRIMEZ LE TOUT SIMPLEMENT ^^
            </div><!-- Fin 3em onglet -->
            <script type="text/javascript">
            //<!--
                var anc_onglet = 'NomOnglet1';
                change_onglet(anc_onglet);
            //-->
            </script>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="titre">
          On les veux
        </div>
        <div class="wanted">
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE1" /> <span>TEXTE1<br />
            <a class="postlink" href="LIEN1" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE2" /> <span>TEXTE2<br />
            <a class="postlink" href="LIEN2" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE3" /> <span>TEXTE3<br />
            <a class="postlink" href="LIEN3" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE4" /> <span>TEXTE4<br />
            <a class="postlink" href="LIEN4" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span><br />
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE5" /> <span>TEXTE5<br />
            <a class="postlink" href="LIEN5" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE6" /> <span>TEXET6<br />
            <a class="postlink" href="LIEN6" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE7" /> <span>IMAGE7<br />
            <a class="postlink" href="LIEN7" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE8" /> <span>TEXTE8<br />
            <a class="postlink" href="LIEN8" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span><br />
         
          <a class="postlink" href="LIEN" rel="nofollow" target="_blank">Découvrir plus de prédéfinis</a>
        </div>
      </td>
      <td>
        <table>
          <tr>
            <td>
              <div class="titre">
                Nos tops-sites
              </div>
              <div class="tops">
                VOS TOP SITES
              </div>
            </td>
            <td>
              <div class="titre">
                News
              </div>
              <div class="news">
                <span style="color: #E7D197;">¤ DATE -</span> VOTRE SUPER NOUVELLE
              </div>
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <div class="titre">
          Météo
        </div>
        <div class="meteo">
          <img class="imgwidget3" src="LIEN" style="float:left;" /> ICI SI VOUS VOULEZ METTRE LA METEO ET LA DATE A LAQUELLE SE DEROULE VOTRE RPG, VOUS POUVEZ =D
        </div>
      </td>
      <td>
        <script type="text/javascript">
        //<!--
                function change_paonglet(name)
                {
                        document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
                        document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
                        document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
                        document.getElementById('contenu_paonglet_'+name).style.display = 'block';
                        anc_paonglet = name;
                }
        //-->
        </script>
        <div class="systeme_paonglets">
          <span class="paonglet_1 paonglet" id="paonglet_NomPaonglet1" onclick="javascript:change_paonglet('NomPaonglet1');"> Partenaires </span>  <span class="paonglet_0 paonglet" id="paonglet_NomPaonglet2" onclick="javascript:change_paonglet('NomPaonglet2');"> Crédits </span>  <span class="paonglet_0 paonglet" id="paonglet_NomPaonglet3" onclick="javascript:change_paonglet('NomPaonglet3');"> Sabliers </span>
          <div class="contenu_paonglets">
            <!-- Debut 1er paonglet -->
            <div class="contenu_paonglet" id="contenu_paonglet_NomPaonglet1">
              Ici la liste de vos partenaires.
            </div><!-- Fin 1er paonglet -->
            <!-- Debut 2em paonglet -->
            <div class="contenu_paonglet" id="contenu_paonglet_NomPaonglet2">
              La PA a été réalisée par <a href="http://mondeandmagiev5.forumactif.org/" target="_blank">Loukoum</a> sur <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>.<br />
              Ici le reste de vos crédits
            </div><!-- Fin 2em paonglet -->
            <!-- Debut 3em paonglet -->
            <div class="contenu_paonglet" id="contenu_paonglet_NomPaonglet3">
              <table>
                <tr>
                  <td>
                    <div class="cate2">
                      <div class="cate2_img"><img src="IMAGE1" /></div>
                      <div class="cate2_description">
                        TEXTE 1
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="cate2">
                      <div class="cate2_img"><img src="IMAGE2" /></div>
                      <div class="cate2_description">
                        TEXTE 2
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="cate2">
                      <div class="cate2_img"><img src="IMAGE3" /></div>
                      <div class="cate2_description">
                        TEXTE 3
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="cate2">
                      <div class="cate2_img"><img src="IMAGE4" /></div>
                      <div class="cate2_description">
                        TEXTE 4
                      </div>
                    </div>
                  </td>
                </tr>
              </table>
              <div style="text-align: center;">
                ICI UN PETIT TEXTE SI VOUS LE VOULEZ
              </div>
            </div><!-- Fin 3em paonglet -->
          </div>
          <script type="text/javascript">
          //<!--
                var anc_paonglet = 'NomPaonglet1';
                change_paonglet(anc_paonglet);
          //-->
          </script>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>



Etape 2 - Mettre la PA en place
Pour cela il vous suffit d'aller dans: PA > Affichage > Généralités, et de copier ce code =D
Code:
 
<div style="font-size: 40px; font-family: Mistral; text-align: center;">
                             Bienvenue sur TITRE DE VOTRE FORUM, {USERNAME} !                         
</div><br /><br /> 
<div style="font-size: 18px; font-family: 'Monotype Corsiva'; text-align: center;">
                             <a href="LIEN" class="postlink" target="_blank" rel="nofollow">~ Guide du débutant ~</a><br /><a rel="nofollow" target="_blank" class="postlink" href="LIEN">Le Règlement</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Le Contexte</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Le Bottin des Avatars</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Lien autre</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Lien autre</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Lien autre</a> 
</div>
  <iframe src="ICI LE LIEN DE LA PAGE HTLM DE VOTRE PA" frameborder="0" scrolling="no" style="margin: auto; width: 700px; height: 570px;"></iframe>


Et voilà =D
Félicitation pour avoir survécu   :friends:

Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Vos commentaires et remerciements sont toujours bienvenus ^^
Si vous avez des problèmes avec ce LS, venez poster ici.

A-Lice

Fiche de Pub Taupe - Dim 15 Mar 2015 - 20:22




Fiche de Pub Taupe


Suite à une demande de Moys voici une fiche de Pub avec transition pour les images du staff.

Je précise que l'arrière plan blanc correspond à mon forum.

HTML ~ Voici donc un aperçu : www


Et le code :
HTML :
Code:
<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>div.staff {width: 100px; height: 75px; margin: auto; overflow: hidden; display: inline-block; margin-left: 5px;} .staff img {position: relative; bottom: 75px; transition: all 0.5s; width: 100px; height: 75px;} .staff:hover img {bottom: 200px; transition: all 0.5s;} .txt_staff {color: #9c887d; font-size: 14px; text-align: justify; overflow: auto; width: 80px; height: 55px; padding: 10px;}</style></head><body>
<div style="width: 530px; padding: 10px; margin: auto; background: #F5F5F2;">
  <img src="http://img15.hostingpics.net/pics/661225image791.jpg" style="width: 530px; height: 350px;" />
  <br /><br />
  <a href="Lien du forum" style="display: block; font-size: 35px; color: #9c887d; text-align: center;">Nom du forum</a>
  <br />
  <div style="width: 255px; display: inline-block; margin-right: 15px; background: #9c887d; height: 16px; color: #F5F5F2; font-size: 25px; text-align: center;">
    <span style="position: relative; top: -6px;">Contexte</span>
  </div>
  <div style="width: 255px; display: inline-block; background: #9c887d; color: #F5F5F2; height: 16px; font-size: 25px; text-align: center;">
    <span style="position: relative; top: -6px;">Informations</span>
  </div>
  <br />
  <div style="width: 215px; height: 140px; overflow: auto; display: inline-block; padding-left: 20px; padding-right: 20px; color: #9c887d; font-size: 11px; text-align: justify; margin-right: 15px;">
    Texte texte
  </div>
  <div style="width: 215px; height: 140px; overflow: auto; display: inline-block; padding-left: 20px; padding-right: 20px; color: #9c887d; font-size: 11px; text-align: justify;">
    Texte texte <br />x membres connectés
  </div>
  <br />
  <div style="width: 255px; display: inline-block; margin-right: 15px; background: #9c887d; color: #F5F5F2; height: 16px; font-size: 25px; text-align: center;">
    <span style="position: relative; top: -6px;">Nouveautés</span>
  </div>
  <div style="width: 255px; display: inline-block; background: #9c887d; color: #F5F5F2; font-size: 25px; height: 16px; text-align: center;">
    <span style="position: relative; top: -6px;">Staff</span>
  </div>
  <br />
  <div style="width: 215px; height: 80px; overflow: auto; display: inline-block; padding-left: 20px; padding-right: 20px; color: #9c887d; font-size: 11px; text-align: justify; margin-right: 15px;">
    Texte texte
  </div>
  <div style="width: 215px; height: 80px; overflow: auto; display: inline-block; padding-left: 20px; padding-right: 20px; color: #9c887d; font-size: 11px; text-align: justify;">
    <div class="staff"><div class="txt_staff">Texte ici
      </div><img src="http://img15.hostingpics.net/pics/219236image990.jpg" alt="staff" /></div>
    <div class="staff"><div class="txt_staff">Texte ici
      </div><img src="http://img15.hostingpics.net/pics/219236image990.jpg" alt="staff" /></div>
  </div>
  <br />
  <div style="background: #9c887d; color: #F5F5F2; font-size: 25px; height: 16px; text-align: center;">
    <span style="position: relative; top: -6px;">Nous lier</span>
  </div>
  <div style="color: #9c887d; font-size: 11px; text-align: justify; height: 80px; overflow: auto; padding: 15px;">
    Texte texte texte
  </div>
<a href="http://www.never-utopia.com" style="display: block; text-decoration: none; font-size: 11px; text-align: center; color: #9c887d;">A-Lice | Never-Utopia</a>
</div></body></html>


Le code est à mettre dans le panneau d'administration, dans Module -> HTML & JAVASCRIPT -> Gestion des pages HTML -> Création en mode avancé (HTML)


Et l'iframe pour poster :
Code:
<center><iframe src="Lien de la page HTML" border="0" frameborder="0" scrolling="no" style="margin: 10px;" width="570px" height="900px"></iframe></center>

Si vous venez à agrandir la taille de la fiche, pensez à le faire pour l'iframe aussi !


/!\ En cas de problème, c'est ici ou que ça ce passe.

RozenBreizh

Fiche de publicité en iframe. - Lun 26 Jan 2015 - 19:59



Bien le bonsoir ou bonjour à toute la communauté :)

Je viens vous proposer une fiche de publicité en iframe pour celles et ceux que ça intéresse :)


Html&CSS ▬ PhpBB 2
Voici un aperçus de la fiche : Fiche de publicité. (screen) ou en live.
Un petit merci fera apparaitre le code Wink

/!\ Je rappelle que cette section existe en cas de problème!./!\



Merci de ne pas retirer le copyright.


Code HTML:
Code:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>NOM DE VOTRE FORUM</title>
  <link href='http://fonts.googleapis.com/css?family=Oldenburg|Oswald|Lobster' rel='stylesheet' type='text/css' />
<style type="text/css">
.body {width: 450px; height: 760px; background-color: #338e9b;}
.text {padding: 25px; width: 430px; height: 200px; text-align: justify; color: #000423; overflow: auto; font-size: 12px; padding: 5px;}
.tableau{width:240px;}
.tableau2{color:#809399;font-family:arial;font-size:13px;margin:5px;padding: 8px;text-align: justify;border-top:3px solid #1D4565;border-bottom:3px solid #1D4565;
 background-color:#000423;height:100px;overflow:auto;} 
</style>
</head>
<body>
<center>
  <div class="body">
    <a href="URL_DE_VOTRE_FORUM"><img src="IMAGE_DILLUSTRATION" /></a>
    <div class="text">Mettre votre contexte ou un texte accrocheur!</div>
    <center>
      <table>
        <tr>
          <td class="tableau">
            <div class="tableau2">
              Mettre des infos sur votre rpg.
            </div>
          </td>
          <td class="tableau">
            <div class="tableau2">
              Mettre des infos sur le forum en général ou des liens menant à votre contexte, règlement et autres annexes utiles..
            </div>
          </td>
        </tr>
      </table>
    </center>
    <center>
      <a href="URL_DE_VOTRE_FORUM" style="color: #000423 !important; text-decoration: none !important; font-size: 18px;">PHRASE D'ACCROCHE/LOGO DE PARTENARIAT</a>
    </center>
  </div>
  </center>
  </body>
</html>



Explications:
Le code est à placer dans une feuille HTML de votre forum. Pour cela allez sur votre Panneau d'Administration. Pour avoir accès à l'onglet "Modules" il faut basculer en mode "Avancé". Puis dans votre onglet "Modules" => HTML & JAVASCRIPT => Gestion des pages HTML => Création en mode avancée (HTML).

Les tableaux sont à rajouter/enlever comme bon vous semble avec le morceau de code suivant:
Code:

<center>
  <table>
    <tr>
      <td class="tableau">
        <div class="tableau2">
          ✘<a href="http://antartica-rpg.actifforum.com/contact" style="color: #338e9b !important; text-decoration: none !important; font-size: 12px;">La Façonneuse.(contacter)</a>
          <br />
          ✘Ouvert depuis le 20/01/2015.
          <br />
        </div>
      </td>
      <td class="tableau">
        <div class="tableau2">
          ✘<a href="http://antartica-rpg.actifforum.com/t9-reglement-du-forum#9" style="color: #338e9b !important; text-decoration: none !important; font-size: 12px;">Règlement.</a>
          <br />
          ✘<a href="http://antartica-rpg.actifforum.com/t3-petit-guide-du-debutant#3" style="color: #338e9b !important; text-decoration: none !important; font-size: 12px;">Guide du Débutant.</a>
          <br />
          ✘<a href="http://antartica-rpg.actifforum.com/t4-background-1-la-vie-en-duerine" style="color: #338e9b !important; text-decoration: none !important; font-size: 12px;">Background #1.</a>
          <br />
          ✘<a href="http://antartica-rpg.actifforum.com/t14-les-races-de-duerine" style="color: #338e9b !important; text-decoration: none !important; font-size: 12px;">Les Races.</a>
          <br />
          ✘<a href="http://antartica-rpg.actifforum.com/t24-les-classes" style="color: #338e9b !important; text-decoration: none !important; font-size: 12px;">Les Classes.</a>
        </div>
      </td>
    </tr>
  </table>
</center>


Puis vous validez votre feuille. Ensuite vous prenez l'url de votre feuille "URL du lien" que vous allez placer dans le code suivant :
Code:
<iframe src="PLACER_LURL_DE_VOTRE_LIEN" width="XXpx" height="XXpx" border="none" frameborder="no"></iframe>


- width="XXpx" => vous devez mettre une largeur à votre iframe, je vous conseil de mettre 10 à 15 px en plus que ce que vous avez définie dans votre feuille.
- height="XXpx" => vous devez mettre une longueur à votre iframe, je vous conseil de mettre 10 à 15 px en plus que ce que vous avez définie dans votre feuille.

Et voilà vous avez une fiche de publicité en iframe qui ira sur tous les forums Very Happy

Mini fiche de pub simple (2 cases / gris-rouge) - Sam 4 Oct 2014 - 16:21



Bonjour à tous,

Voilà une mini fiche pour ceux qui aiment comme moi les fiches petites mais efficaces.

Aperçu


Quelques informations :

- Les images se redimensionnent automatiquement sauf pour le logo de partenariat (bien sur...).
- Les couleurs personnalisables sont celles du fond et de la bordure du bas. A savoir que les 2 cases ainsi que leurs titres sont en transparence donc inutile de modifier leurs couleurs, elles s'adaptent automatiquement
- Il est possible de rajouter encore une icone pour les attendus pas plus.
- Merci de conserver le crédit.



Code:
<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css' />
<div style="width:400px; margin:auto; background: #606060; border-bottom:3px solid darkred;"><img src="IMAGE DU HEADER" alt="entete" width="400" />
<div style="width:185px; height:210px; background:rgba(255,255,255,0.1); margin-left: 10px; margin-top: 10px;"><span style="font-family: 'Anton'; font-weight: lighter; text-transform: lowercase; color:rgba(0,0,0,0.4); font-size: 20px; text-align:center; margin-top: 20px; display: block;padding-top:10px; padding-bottom:10px;">News</span><span style="width:165px; height:150px; font-family:Trebuchet MS; font-size:11px; color: black; padding : 10px; overflow : auto; display: block; text-align:justify;">- news
- news
- news
- news</span></div><div style="width:185px; height:210px; background:rgba(255,255,255,0.1); margin-right: 10px; margin-top: -210px; float: right; "><span style="font-family: 'Anton'; font-weight: lighter; text-transform: lowercase; color:rgba(0,0,0,0.4); font-size: 20px; text-align:center; margin-top:10px; margin-bottom:10px; display: block;">Stats</span><span style="width:165px; height:100px; font-family:Trebuchet MS; font-size:11px; color: black; padding : 10px; overflow : auto; display: block; text-align:justify;"><b>Ouvert depuis le :</b> XX/XX/XXXX
<b>Messages :</b> XXXX
<b>Membres :</b> XX
<b style="color:pink;">~ Groupe :</b> XX
<b style="color:orange;">~ Groupe :</b> XX
<b style="color:red;">~ Groupe :</b> XX
<b style="color:purple;">~ Groupe :</b> XX
<b>Dernier enregistré :</b> Nom Prénom</span>
<div style="width:185px; height:50px; margin-top: -20px; font-family:Trebuchet MS; font-size:9px; color: black; text-align: center; text-transform:uppercase;">Attendus
<a href="http://" target="_blank"><img src="ICONE" width="30" /></a> <a href="http://" target="_blank"><img src="ICONE" width="30" /></a> <a href="http://" target="_blank"><img src="ICONE" width="30" /></a> <a href="http://" target="_blank"><img src="ICONE" width="30" /></a></div></div>
<center><img src="IMAGE DU LOGO" alt="bouton partenariat" /></center>
[code]<a href="http://" target="_blank"><img src="http://" alt="bouton partenariat" /></a>[/code]
<a href="http://www.never-utopia.com/" style="font-size:8px; text-align:center; display:block; font-family:Trebuchet MS; text-transform:uppercase;">Lady sur Never-Utopia</a></div></div>

Onyx

Signature à onglets - Jeu 25 Sep 2014 - 2:56




LS - Signature à onglets


Voici un petit LS de signature à onglets j'ai fait pour la demande de Madii-x.

Pour voir l'aperçu de l'onglet "Signature" : cliquez ici.
Pour voir l'aperçu de l'onglet "Cadeaux" : cliquez ici.
Pour voir l'aperçu de l'onglet "Moi" : cliquez ici.

Ce LS est en deux parties.
  • Tout d'abord, nous allons créer notre signature dans une page html.
  • Puis, nous allons mettre l'iframe qui contient la page html dans notre signature.

  • Puisqu'on se sert d'une page html, il que vous ayez votre propre forum pour héberger la page html ou que votre administrateur accepte de le faire sur son propre forum.

  • Il ne faudrait pas que l'image de l'onglet "signature" dépasse 500x200 pixels.

  • L'image dans l'onglet "moi" a une hauteur de 180 pixels.
Merci de ne pas enlever le crédit vers Never-Utopia.



1. Le corps de la signature (Page HTML)


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

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 nom, comme "Signature de NOM" par exemple.
Enfin, on met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Signature</title>
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css' />
<script type="text/javascript">
        //<!--
                function change_ongletii(name)
                {
document.getElementById('ongletii_'+anc_ongletii)
.className = 'ongletii_0 ongletii';
document.getElementById('ongletii_'+name).
className = 'ongletii_1 ongletii';
document.getElementById('contenu_ongletii_'+anc_ongletii)
.style.display = 'none';
document.getElementById('contenu_ongletii_'+name).
style.display = 'block';
                        anc_ongletii = name;
                }
        //-->
</script>
<style type="text/css">
/*Fond par HTML*/
body {
  margin: 0px;
}

/*Tableau qui entoure la sign*/
.signii {
  border: 1px solid #fe285a;
  width: 502px;
  height: 218px;
}
 
/*Onglets*/
.ongletii {
  background: #fe285a;
  height: 20px;
  font-size: 16px;
  color: white;
  font-family: abel;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid #fe285a;
}
/*Onglet au survol*/
.ongletii_0:hover {
  cursor: pointer;
}
/*Onglet actif*/
.ongletii_1 {
  background: #c8254b;
}
 
/*Contenu des onglets*/
.contenu_ongletii {
  background: url('http://i39.servimg.com/u/f39/18/85/39/07/transi10.jpg');
  display: none;
  font-family: abel;
  color: #fe285a;
  font-size: 14px;
}
 
/*Contenu onglet SIGNATURE*/
.inside_1 {
  height: 200px;
}

/*Contenu onglet CADEAUX*/
.inside_2 {
  overflow: auto;
  height: 200px;
}

/*Contenu onglet MOI*/
.inside_3 {
  padding: 9px;
  padding-right: 0px;
  height: 182px;
}

/*Image dans contenu onglet MOI*/
.imgii {
  float: left;
  height: 180px;
  border: 1px solid #fe285a;
  margin-right: 10px;
}
 
/*Texte dans contenu onglet MOI*/
.textii {
  height: 172px;
  padding-right: 10px;
  text-align: justify;
  overflow: auto;
}

/*Liens dans contenu onglet MOI en bas*/
.linksii a {
  display: inline-block;
  color: #fe285a;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none!important;
  margin-right: 20px;
  margin-bottom: -8px;
}
/*Liens au survol dans contenu onglet MOI en bas*/
.linksii a:hover {
  color: #7a162d;
  font-size: 14px;
}
</style>
</head>
<body>
  <table align="center" border="0" cellpadding="0" cellspacing="0" class="signii"><tr>
    <td width="33%">
      <div onmouseover="javascript:change_ongletii('1er');" id="ongletii_1er" class="ongletii_1 ongletii">
        Signature
      </div>
    </td>
    <td width="34%">
      <div onmouseover="javascript:change_ongletii('2eme');" id="ongletii_2eme" class="ongletii_0 ongletii">
        Cadeaux
      </div>
    </td>
    <td width="33%">
      <div onmouseover="javascript:change_ongletii('3eme');" id="ongletii_3eme" class="ongletii_0 ongletii">
        Moi
      </div>
    </td></tr><tr>
    <td colspan="3">
      <div id="contenu_ongletii_1er" class="contenu_ongletii">
        <div align="center" class="inside_1">
          Contenu de l'onglet "Signature"
        </div>
      </div>
      <div id="contenu_ongletii_2eme" class="contenu_ongletii">
        <div align="center" class="inside_2">
          Contenu de l'onglet "Cadeaux"
        </div>
      </div>
      <div id="contenu_ongletii_3eme" class="contenu_ongletii">
        <div class="inside_3">
          <img src="URL DE L'IMAGE DE L'ONGLET MOI" alt=" " class="imgii" />
          <div class="textii">
            Texte de l'onglet moi.
          </div>
          <div align="right" class="linksii">
            <a href="LIEN VERS LE PROFIL" target="_blank">Profil</a>
            <a href="LIEN VERS LES MP" target="_blank">MP</a>
            <a href="http://www.never-utopia.com/t51249-signature-a-onglets" target="_blank">N-U</a>
          </div>
        </div>
      </div>
    </td></tr>
  </table>
<script type="text/javascript">
        //<!--
                var anc_ongletii = '1er';
                change_ongletii(anc_ongletii);
        //-->
</script>
</body>
</html>


Changer les images/texte
Si jamais vous voulez changer ce qu'il y a dans les onglets, c'est indiqué par "contenu de l'onglet signature", "contenu de l'onglet cadeaux", "URL DE L'IMAGE DE L'ONGLET MOI", "texte de l'onglet moi", etc... Je vous fais confiance pour vous y retrouver Wink

Modifier les onglets pour qu'ils changent au clic
Il vous suffit de trouver tous les endroits où il est indiqué "onmouseover" et de le remplacer par "onclick".

Comment modifier le style ou la mise en forme
Dans ce code, il y a aussi du CSS qui met en forme la signature. Si vous voulez modifier la police, les couleurs ou autres éléments de mise en forme, c'est là qu'il faudra le faire. Le CSS est entre les balises suivantes :
Code:
<style type="text/css">
VOTRE CSS EST ICI
</style>


Lorsque vous modifiez votre signature, il faut cliquer sur l'engrenage où c'est inscrit "HTML", pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.



1. Mettre l'iframe (espace signature)


Maintenant que la page HTML est créée avec votre signature à l'intérieur, on va aller la mettre dans votre profil à l'aide d'un iframe.

Pour cela, nous allons aller dans :
> PROFIL
> > SIGNATURE

Puis, nous allons mettre le code suivant :
Code:
<iframe src="LIEN DE LA PAGE HTML" style="display: block; margin: auto; height: 230px; width: 510px; border: none;"></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, notre signature), 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 un tutoriel".

À plus !

A-Lice

Affaire classée - Sam 23 Aoû 2014 - 0:08




Affaire classée


Suite à une demande d'Angie Dalton voici une fiche de Pub Affaire classée.

Je précise que l'arrière plan vert correspond à mon forum.

Voici donc un aperçu : www


Et le code :
HTML :
Code:
<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css' /></head><body>
<div style="width:650px; background-color: firebrick; border:1px solid black; margin:auto;"><div style="border-top-left-radius: 20px; border-top-right-radius: 20px; width:80px; background-color: firebrick; padding:5px; font-size:12px; color:black; border-top:solid 1px black; border-left:solid 1px black; border-right:1px solid black; text-align:center; transform:rotate(-90deg); position:relative; left:-59px; top:40px;">Pub</div><br/><br/>
<div style="width:93%; background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg); transform:rotate(-1deg); border: solid 1px black; margin-left:auto; margin-right:auto; margin-top:-50px;"><div style="width:100%; background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg); transform:rotate(-1deg); border: solid 1px black; margin:auto;"><div style="width:97%; background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg); margin:auto; padding:10px; transform:rotate(2deg); border: solid 1px black; text-align:center;">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Torchwood_old_logo.svg/275px-Torchwood_old_logo.svg.png" alt="logo" style="width:150px; height:150px;" /><br /><br /><div style="width:90%; text-align:justify; font-size:13px; color:black; padding:10px; margin:auto;"><span style="display:block; text-align:center; font-size:25px; color:black;">Fiche de Pub</span>
  <br/>
  <br/>
  <div style="width:580px; height:200px; margin-left:-25px; overflow:hidden;"><img src="http://img11.hostingpics.net/pics/993999600200.png" /></div>
  <br/>
<div style="margin:auto; width:90%; padding:10px; text-align:justify; background-color:firebrick; color:white; border:black 1px solid;"><span style="display:block; text-align:center; font-size:25px; color:BurlyWood; font-family: 'Pacifico', cursive; padding:10px;">Nom du forum et/ou lien</span>
    <div style="width:95%; border:2px black dashed;padding:5px; margin:auto;"><span style="display:block; margin:auto; width:50%; border-bottom:2px solid white; text-shadow:0px 0px 2px white; font-size:18px; text-align:center; padding:5px;">Contexte</span><br />
  Blabla du contexte.
    </div> <br />
  <div style="width:95%; border:2px black dashed; text-align:center; padding:5px; margin:auto;"><span style="display:block; margin:auto; width:50%; border-bottom:2px solid white; text-shadow:0px 0px 2px white; font-size:18px; text-align:center; padding:5px;">Staff</span><br />
      <div style="display:inline-block; padding:5px;"><img src="http://img15.hostingpics.net/pics/847387renzoicon03.png" alt="" style="width:100px; height:100px;" /></div> <div style="padding:5px; display:inline-block;"><img src="http://img15.hostingpics.net/pics/847387renzoicon03.png" alt="" style="width:100px; height:100px;" /></div> <div style="display:inline-block; padding:5px;"><img src="http://img15.hostingpics.net/pics/847387renzoicon03.png" alt="" style="width:100px; height:100px;" /></div> <div style="padding:5px; display:inline-block;"><img src="http://img15.hostingpics.net/pics/847387renzoicon03.png" alt="" style="width:100px; height:100px;" /></div>
    </div><br />
    <div style="display:inline-block; margin-left:1%; width:31%; border:2px black dashed;padding:5px;"><span style="display:block; margin:auto; width:50%; border-bottom:2px solid white; text-shadow:0px 0px 2px white; font-size:18px; text-align:center; padding:5px;">Stat's</span><br />
    Blabla.
      </div> <div style="display: inline-block; width:61%; border:2px black dashed;padding:5px;"><span style="display:block; margin:auto; width:50%; border-bottom:2px solid white; text-shadow:0px 0px 2px white; font-size:18px; text-align:center; padding:5px;">Ce que tu veux</span><br />
  Blabla.
    </div> <br /><br />
    <div style="width:95%; border:2px black dashed;padding:5px; margin:auto;"><span style="display:block; margin:auto; width:50%; border-bottom:2px solid white; text-shadow:0px 0px 2px white; font-size:18px; text-align:center; padding:5px;">En savoir plus...</span><br />
      <a href="">Blabla d'un lien</a><br />
      <a href=""><img src="" alt="" /></a>
     
    </div> <br />
  </div>
</div>
</div></div></div><a href="http://www.never-utopia.com/" style="text-decoration:none; font-size:12px; color:black; text-align:center; padding:5px; display:block;">© A-Lice | Never-Utopia</a></div></body></html>


Cette fiche a été codé pour être mise en page HTML (Panneau d'administration -> Modules -> Gestion des pages HTML -> Création en mode avancé (HTML)) Et pour la partager, il faut le faire via iframe.


Iframe :
Code:
<center><iframe src="LIEN DE LA PAGE HTML" border="0" frameborder="0" scrolling="no" style="margin:10px;" width="710px" height="1450px"></iframe></center>


D'ailleurs, il faut adapter la hauteur (height) de l'iframe à celle de la Pub.


La suite de l'ensemble se trouve ici :


Règlement
Contexte
Présentation
Prédéfini
Liens
Récapitulatif
Contenu RP
Demande de Partenariat
Pub

/!\ En cas de problème, c'est ici que ça ce passe.

A-Lice

En rouge et noir - Mer 13 Aoû 2014 - 22:36




En rouge et noir


Voici le fruit d'une collaboration avec Dakota (:

Je précise que l'arrière plan vert correspond à mon forum.

HTML ~ Voici donc un aperçu : www


Et le code :
Code:
<!Doctype><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css' /></head><body>
  <div style="width:565px; height:1009px; background:url(http://i39.servimg.com/u/f39/18/91/99/24/fond_f11.jpg); margin:auto; color:silver;"><img src="http://i39.servimg.com/u/f39/18/91/99/24/fiche_12.jpg" alt="" style="width:565px; height:169px;" /><br/>
    <span style="display:block; font-size:22px; text-transform:uppercase; font-family: 'Francois One', sans-serif; padding:3px; letter-spacing:-1px; margin-top:5px; text-align:center;">- <span style="color:firebrick;">Nom du forum</span> - Genre - <span style="color:firebrick;">Nom du forum</span> - Genre -</span><br/>
    <span style="display:block; text-indent:40px; position:relative; top:30px; font-size:20px; font-family: 'Francois One', sans-serif; letter-spacing:-1px;">Le forum en quelques mots</span><br/>
    <div style="margin-left:15px; width:350px; height:150px; background:#232625; overflow:auto; border-radius:15px; border-right:1px solid silver; border-bottom:1px solid silver; padding:10px; float:left;">Blabla est un forum de blabla</div> <br/>
    <span style="font-size:25px; text-align:center; line-height:25px; display:block; height:140px; overflow:auto; font-family: 'Francois One', sans-serif;">
      <a href="LIEN ICI" style="color:firebrick; text-decoration:none;">Lien 1</a><br/>
      <a href="LIEN ICI" style="color:firebrick; text-decoration:none;">Lien 1</a><br/>
      <a href="LIEN ICI" style="color:firebrick; text-decoration:none;">Lien 1</a><br/>
      <a href="LIEN ICI" style="color:firebrick; text-decoration:none;">Lien 1</a></span><br/>
    <span style="display:block; text-indent:85px; position:relative; top:30px; font-size:20px; font-family: 'Francois One', sans-serif; letter-spacing:-1px;">Le contexte</span><br/>
    <div style="margin-right:15px; width:470px; height:130px; background:#232625; overflow:auto; border-radius:15px; border-right:1px solid silver; border-bottom:1px solid silver; padding:10px; float:right;">C'est l'histoire de blabla</div><br/>
    <div style="margin-left:15px; float:left; margin-top:75px; width:150px;">
      <span style="font-size:25px; color:firebrick; text-align:center; display:block; font-family: 'Francois One', sans-serif;">Stats</span><br/>
      • XX membres<br/>
      • XX messages<br/>
      • Ouvert le XX<br/></div><br/>
    <span style="display:block; text-indent:45px; position:relative; top:45px; font-size:20px; font-family: 'Francois One', sans-serif; letter-spacing:-1px;">La vie du forum</span><br/>
    <div style="margin-right:15px; margin-top:15px; width:350px; height:150px; background:#232625; overflow:auto; border-radius:15px; border-right:1px solid silver; border-bottom:1px solid silver; padding:10px; float:right;">Actuellement sur  blabla il se passe</div><br/><br/>
    <div style="height:70px; overflow:hidden; clear:both; position:relative; top:65px;">
      <a href="LIEN DU FORUM" style="font-size:25px; text-decoration:none; color:firebrick; font-family: 'Francois One', sans-serif; position:relative; right:20px; left:200px;">Rejoignez-nous !</a>
      <img src="http://img4.hostingpics.net/pics/960813bouton.png" style="border-radius:15px; margin-right:15px; float:right;" /><br/>
    <a href="http://www.never-utopia.com/" style="text-decoration:none; color:white; margin-left:15px; position:relative; top:8px; font-size:13px;">© Fiche par Dakota et A-Lice sur Never-Utopia</a></div>
</div></body></html>


Un petit commentaire (un avis ?) suffit pour voir le code.

Précisions : - Cette fiche a été codé pour être mise dans une page HTML (Panneau d'administration -> Modules -> HTML & JAVASCRIPT -> Gestion des pages HTML -> Création en mode avancé (HTML)

- Il est donc préférable de la distribuer avec ce code :
Code:
<center><iframe src="ICI LE LIEN DE LA PAGE HTML" border="0" frameborder="0" scrolling="no" style="margin:10px;" width="565px" height="1039px"></iframe></center>


/!\ En cas de problème, c'est ici que ça ce passe.

A-Lice

Fiche de Pub - Sweet Darkness - Dim 15 Juin 2014 - 21:13




Fiche de Pub


Suite à une demande d'Eternal Moon voici un ensemble de fiches "Sweet Darkness".

Je précise que l'arrière plan bleu correspond à mon forum.


Voici donc un aperçu : www



Et le code :
Code:
<br /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link href='http://fonts.googleapis.com/css?family=Handlee|Berkshire+Swash' rel='stylesheet' type='text/css'><div style="margin:auto; width:96%; border-radius: 200px; background-color:#141517; border:4px solid #767676; padding:10px; box-shadow:0px 0px 8px #767676; text-align:center;"><br/>
<span style="display:block; width:60%; margin:auto; color:white; font-size:25px; text-align:center; border:2px dotted #767676; border-radius: 100px; padding:10px; background-color:#2F3C3E; font-family: 'Berkshire Swash', cursive; text-shadow:2px 2px 2px #141517;">Fiche de Pub</span><br /><br /><div style="margin:auto; width:95%; height:200px; border-radius: 100px; border:2px dotted #767676; text-align:justify; color:white; overflow:hidden;"><img src="http://img4.hostingpics.net/pics/909792Bannierefofo.png" style="margin-left:-130px;" alt="" /></div><br/><br/>
  <div style="margin:auto; width:75%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Contexte</span><br /><div style="height:250px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.   
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    </div></div><br />
  <div style="display:inline-block; margin:auto; width:35%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Stat's</span><br /><div style="height:150px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    <p>Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
    </p>
    </div></div> <div style="display:inline-block; margin:auto; width:35%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Liens</span><br /><div style="height:150px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    <p>Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
    </p>
  </div></div><br /><br />
  <div style="margin:auto; width:75%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Nouveautés</span><br /><div style="height:150px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    <p>Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
    </p>
    </div></div><br />
  <div style="margin:auto; width:75%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Logo's</span><br /><div style="height:100px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    </div></div><br />
  <br/><a href="http://www.never-utopia.com/" style="font-size:11px; color:#767676; text-decoration:none;">© By A-Lice sur Never-Utopia</a>
</div>


Perso je mets ce code dans une page HTML (panneau d'admin > modules > gestion des pages HTML > création en mode avancé (HTML) en cochant bien "non" à "Voulez-vous utiliser le haut et le bas de page de votre forum ?") et ensuite je la donne à mes partenaires sous forme d'une iframe comme ceci :
Code:
<center><iframe src="LIEN DE LA PAGE HTML" border="0" frameborder="0" scrolling="no" style="margin:10px;" width="650px" height="1450px"></iframe></center>



La suite des fiches se trouve ici :


-Annonce
-Contexte
-Règlement
-Présentation
-Prédéfini
-Demande de partenariat
-Partenariat
-Pub

A-Lice

Fiche de Partenariat - Sweet Darkness - Dim 15 Juin 2014 - 21:10




Fiche de Partenariat


Suite à une demande d'Eternal Moon voici un ensemble de fiches "Sweet Darkness".

Je précise que l'arrière plan bleu correspond à mon forum.


Voici donc un aperçu : www


Et le code :
Code:
<br /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link href='http://fonts.googleapis.com/css?family=Handlee|Berkshire+Swash' rel='stylesheet' type='text/css' /><div style="margin:auto; width:96%; border-radius: 200px; background-color:#141517; border:4px solid #767676; padding:10px; box-shadow:0px 0px 8px #767676; text-align:center;"><br/>
<span style="display:block; width:60%; margin:auto; color:white; font-size:25px; text-align:center; border:2px dotted #767676; radius: 100px; padding:10px; background-color:#2F3C3E; font-family: 'Berkshire Swash', cursive; text-shadow:2px 2px 2px #141517;">Fiche de Partenariat</span><br /><br /><div style="margin:auto; width:95%; height:200px; border-radius: 100px; border:2px dotted #767676; text-align:justify; color:white; overflow:hidden;"><img src="http://img4.hostingpics.net/pics/909792Bannierefofo.png" style="margin-left:-130px;" alt="" /></div><br/><br/>
  <div style="margin:auto; width:75%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Contexte</span><br /><div style="height:250px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.   
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    </div></div><br />
  <div style="display:inline-block; margin:auto; width:35%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Stat's</span><br /><div style="height:150px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    <p>Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
    </p>
    </div></div> <div style="display:inline-block; margin:auto; width:35%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Liens</span><br /><div style="height:150px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    <p>Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
    </p>
  </div></div><br /><br />
  <div style="margin:auto; width:75%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Staff</span><br /><div style="height:150px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    <p>Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
    </p>
    </div></div><br />
  <div style="margin:auto; width:75%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Logo's</span><br /><div style="height:100px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    </div></div><br />
  <br/><a href="http://www.never-utopia.com/" style="font-size:11px; color:#767676; text-decoration:none;">© By A-Lice sur Never-Utopia</a>
</div>

Perso je mets ce code dans une page HTML (panneau d'admin > modules > gestion des pages HTML > création en mode avancé (HTML) en cochant bien "non" à "Voulez-vous utiliser le haut et le bas de page de votre forum ?") et ensuite je la donne  sous forme d'une iframe comme ceci :
Code:
<center><iframe src="LIEN DE LA PAGE HTML" border="0" frameborder="0" scrolling="no" style="margin:10px;" width="650px" height="1450px"></iframe></center>



La suite des fiches se trouve ici :


-Annonce
-Contexte
-Règlement
-Présentation
-Prédéfini
-Demande de partenariat
-Partenariat
-Pub

Klash

Fiche de Pub, i-frame - Dim 24 Juin 2012 - 18:30



Bonjour à tous, je vous propose donc une fiche de pub pré-remplie, ils vous suffira donc je changer ce qui vous intéresse soit dans la partie html ou bien le css pour utiliser cette fiche, il vous faut être fondateur de votre forum.

Ce qui donne une fois fini :


Il va falloir créer une page Html rien de compliquer je vous rassure c'est tout simple. D'abord ouvrez votre panneau d'administration, puis allez dans module, puis pages html et cliquez sur création en mode avancé (html).


Puis coller le code de la fiche en entier que je vais vous passer.
Ensuite validez et là vous aurez votre page html de crée. Le lien vous servira pour votre fiche de pub, donc copiez-le.


Puis utilisez le lien pour faire votre pub.

Le lien de la pub sera à insérer comme suit:
Code:
<iframe src="votre lien de page html" width="610px" height="1175"; frameborder="no"; ></iframe>



Code complet de la fiche merci de laisser le crédit un petit merci aussi serait sympa enjoy you like it.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fiche pub</title>
<style type="text/css">

.titre-forum
{
font-family: "palatino linotype",palatino,serif;
color: #545D5E;
margin-top: -60px;
margin-bottom: 15px;
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
text-shadow: 3px 3px 1px #cccccc;
filter: dropshadow(color=#cccccc, offx=3, offy=3);
}

.header {
border-bottom:ridge 1px #161616;
margin: auto;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(229,229,229) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(229,229,229))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* IE10+ */
background: linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

width: 560px;
height: 80px;
-moz-border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
-webkit-border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
-khtml-border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
-moz-box-shadow: 2px 4px 4px #8a8a8a;
-webkit-box-shadow: 2px 4px 4px #8a8a8a;
box-shadow: 2px 4px 4px #8a8a8a;

 
   
}



.back {
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(238,238,238) 0%, rgb(204,204,204) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(238,238,238)), color-stop(100%,rgb(204,204,204))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* IE10+ */
background: linear-gradient(top,  rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-top: 3px solid #cccccc;
border-bottom: 2px solid #cccccc;
}

.titre {
color: #eae9e9;
font-family: helvetica,serif;
margin-bottom: 10px;
padding: 1px;
font-size: 16px;

}

.lier {
color: #eae9e9;
font-family: helvetica,serif;
margin-bottom: 10px;
padding: 1px;
font-size: 16px;
text-align: center;
background-color: #eae9e9;
background-repeat: no-repeat;
background-position: center center;
font-size: 18px;
letter-spacing: 4px;
display: block;
width: 100%;
color: #717171;
}

.stat {
color: #eae9e9;
font-family: helvetica,serif;
margin-bottom: 10px;
padding: 1px;
font-size: 16px;
text-align: center;
background-color: #eae9e9;
background-repeat: no-repeat;
background-position: center center;
font-size: 18px;
letter-spacing: 4px;
display: block;
width: 100%;
color: #717171;
}

.lien a {
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(229,229,229) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(229,229,229))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* IE10+ */
background: linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background-repeat: no-repeat;
background-position: center center;
font-size: 13px;
display: block;
width: 100%;
height: 34px;
color: #717171;
text-shadow: 1px 1px 0px #FFFFFF;
line-height: 34px;
}

.lien a:hover {
background: rgb(226,226,226); /* Old browsers */
background: -moz-linear-gradient(top, rgb(226,226,226) 0%, rgb(219,219,219) 50%, rgb(209,209,209) 51%, rgb(254,254,254) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(226,226,226)), color-stop(50%,rgb(219,219,219)), color-stop(51%,rgb(209,209,209)), color-stop(100%,rgb(254,254,254))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* IE10+ */
background: linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
background-repeat: no-repeat;
background-position: center center;
font-size: 13px;
display: block;
width: 100%;
height: 34px;
color: #717171;
text-shadow: 1px 1px 0px #FFFFFF;
line-height: 34px;
}


.bod {
background-color: #aaaaaa;
min-height: 58px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.para {
display: block;
float: left;
margin-left: 10px;
margin-top: 3px;
position: absolute;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;   
}

.para1 {
display: block;
position: absolute;
float: left;
margin-top: 3px;
margin-left: 280px;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;   
}

.para2 {
display: block;
position: absolute;
float: left;
margin-left: 10px;
margin-top: 165px;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;   
}

.para3 {
display: block;
position: absolute;
float: left;
margin-left: 280px;
margin-top: 165px;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;
margin-bottom: 50px;   
}

.second {
background-color: #aaaaaa;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 555px;
height: 330px;
margin: auto;
border: 1px dotted #000;
text-align: justify;
color: #eae9e9;
font-size: 13px;
}

.troisième {
background-color: #aaaaaa;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 555px;
margin: auto;
border: 1px dotted #000;
text-align: center;
color: #eae9e9;
font-size: 13px;
}

.quatrième {
background-color: #aaaaaa;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 555px;
margin: auto;
border: 1px dotted #000;
text-align: center;
color: #eae9e9;
font-size: 13px;
}

.border {
border: 1px dotted #000;
width: 555px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-left: auto;
margin-right: auto;
}

.qeel_infos {
color: #000;   
background: rgb(245,246,246); /* Old browsers */
background: -moz-linear-gradient(top, rgb(245,246,246) 0%, rgb(219,220,226) 21%, rgb(184,186,198) 49%, rgb(221,223,227) 80%, rgb(245,246,246) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(245,246,246)), color-stop(21%,rgb(219,220,226)), color-stop(49%,rgb(184,186,198)), color-stop(80%,rgb(221,223,227)), color-stop(100%,rgb(245,246,246))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* IE10+ */
background: linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
width: 500px;
padding: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-left: auto;
margin-right: auto;
}
   
</style>
</head>


<body>
<table width="600" border="0" cellspacing="0" cellpadding="10" class="back">
  <tr>
    <td><div class="header"></div><div class= titre-forum> Ton Forum </div></td>
  </tr>
  <tr>
    <td><div class="border">
    <div class="bod">
  <table width="100%" border="0" cellspacing="5" cellpadding="0" style="height: 58px;">
  <tr>
    <td width="83" align="center" valign="middle" class="lien"><a href="http://" target="_blank">Lien</a><td width="83" align="center" valign="middle" class="lien"><a href="http://" target="_blank">Lien</a><td width="83" align="center" valign="middle" class="lien"><a href="http://" target="_blank">Lien</a><td width="83" align="center" valign="middle" class="lien"><a href="http://" target="_blank">Lien</a><td width="83" align="center" valign="middle" class="lien"><a href="http://" target="_blank">Lien</a></td>

  </tr></table></div></div>


<div class="second">
<table width="100%" border="0" cellspacing="10">
  <tr>
    <div class="para"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
<div class="para1"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
    <div class="para2"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
    <div class="para3"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
    </tr></table></div>
     
<div class="troisième">
<table width="100%" border="0" cellspacing="10">
  <tr>
    <td class="pub" width="90%" valign="top">
  <span class="lier"> Nous lier ?</span><br><br>
    <a href="http://www.never-utopia.com/" target="_blank"><img src="http://i70.servimg.com/u/f70/09/00/56/80/miniba15.png"/></a><br><br>
    <textarea><a href="http://www.never-utopia.com/" target="_blank"><img src="http://i70.servimg.com/u/f70/09/00/56/80/miniba15.png"/></a></textarea><br><br>
   
    <a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/666823logo6.jpg"/></a><br><br>
    <textarea><a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/666823logo6.jpg"/></a></textarea><br><br>
   
    <a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/876649logo1.jpg"/></a><br><br>
    <textarea><a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/876649logo1.jpg"/></a></textarea>
    </td></tr></table></div>
   
    <div class="quatrième">
<table width="100%" border="0" cellspacing="10">
  <tr>
    <td class="stats" width="90%" valign="top">
  <span class="stat">Quelques Stats</span><br><br>
<div class="qeel_infos">Nous avons <strong><span class="FORUMCOUNTUSER">0</span></strong> utilisateurs enregistrés.<br>
Nos membres ont postés un total de <strong><span class="FORUMCOUNTPOST">0</span></strong> messages.<br>
Dernier membre à nous avoir rejoints. <strong><span class="FORUMLASTUSER">Klash</span></strong>.<br>
</div><br />Mise en page et codage par © <a href="http://www.never-utopia.com/">Never-Utopia</a></td></tr></table></div>
</body>
</html>

Klash

Fiche de Pub - Dim 24 Juin 2012 - 18:12



Bonjour à tous, je vous propose donc une fiche de pub pré remplie, ils vous suffira donc je changer ce qui vous intéresse soit dans la partie html ou bien le css pour utiliser cette fiche, il vous faut être fondateur de votre forum.  

Ce que ça donne une fois fini en direct :


En image : https://2img.net/r/hpimg11/pics/478447sans.jpg


Il va falloir crée une page Html rien de compliquer je vous rassure c'est tout simple d'abord ouvrez votre panneau d'administration puis allez dans module puis pages Html ensuite cliquez sur crée une page Html.

Puis coller le code de la fiche en entier:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fiche pub</title>
<style type="text/css">
body {
  margin: 0px;
  }
.titre-forum
{
font-family: "palatino linotype",palatino,serif;
color: #545D5E;
margin-top: -60px;
margin-bottom: 15px;
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
text-shadow: 3px 3px 1px #cccccc;
filter: dropshadow(color=#cccccc, offx=3, offy=3);
}

.header {
border-bottom:ridge 1px #161616;
margin: auto;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(229,229,229) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(229,229,229))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* IE10+ */
background: linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

width: 560px;
height: 80px;
-moz-border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
-webkit-border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
-khtml-border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
-moz-box-shadow: 2px 4px 4px #8a8a8a;
-webkit-box-shadow: 2px 4px 4px #8a8a8a;
box-shadow: 2px 4px 4px #8a8a8a; 
}


.back {
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(238,238,238) 0%, rgb(204,204,204) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(238,238,238)), color-stop(100%,rgb(204,204,204))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* IE10+ */
background: linear-gradient(top,  rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-top: 3px solid #cccccc;
border-bottom: 2px solid #cccccc;
}

.titre {
color: #eae9e9;
font-family: helvetica,serif;
margin-bottom: 10px;
padding: 1px;
font-size: 16px;

}

.lier {
color: #eae9e9;
font-family: helvetica,serif;
margin-bottom: 10px;
padding: 1px;
font-size: 16px;
text-align: center;
background-color: #eae9e9;
background-repeat: no-repeat;
background-position: center center;
font-size: 18px;
letter-spacing: 4px;
display: block;
width: 100%;
color: #717171;
}

.stat {
color: #eae9e9;
font-family: helvetica,serif;
margin-bottom: 10px;
padding: 1px;
font-size: 16px;
text-align: center;
background-color: #eae9e9;
background-repeat: no-repeat;
background-position: center center;
font-size: 18px;
letter-spacing: 4px;
display: block;
width: 100%;
color: #717171;
}

.lien a {
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(229,229,229) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(229,229,229))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* IE10+ */
background: linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background-repeat: no-repeat;
background-position: center center;
font-size: 13px;
display: block;
width: 100%;
height: 34px;
color: #717171;
text-shadow: 1px 1px 0px #FFFFFF;
line-height: 34px;
}

.lien a:hover {
background: rgb(226,226,226); /* Old browsers */
background: -moz-linear-gradient(top, rgb(226,226,226) 0%, rgb(219,219,219) 50%, rgb(209,209,209) 51%, rgb(254,254,254) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(226,226,226)), color-stop(50%,rgb(219,219,219)), color-stop(51%,rgb(209,209,209)), color-stop(100%,rgb(254,254,254))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* IE10+ */
background: linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
background-repeat: no-repeat;
background-position: center center;
font-size: 13px;
display: block;
width: 100%;
height: 34px;
color: #717171;
text-shadow: 1px 1px 0px #FFFFFF;
line-height: 34px;
}


.bod {
background-color: #aaaaaa;
min-height: 58px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.para {
display: block;
float: left;
margin-left: 10px;
margin-top: 3px;
position: absolute;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;
}

.para1 {
display: block;
position: absolute;
float: left;
margin-top: 3px;
margin-left: 280px;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;
}

.para2 {
display: block;
position: absolute;
float: left;
margin-left: 10px;
margin-top: 165px;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;
}

.para3 {
display: block;
position: absolute;
float: left;
margin-left: 280px;
margin-top: 165px;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;
margin-bottom: 50px;
}

.second {
background-color: #aaaaaa;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 555px;
height: 330px;
margin: auto;
border: 1px dotted #000;
text-align: justify;
color: #eae9e9;
font-size: 13px;
}

.troisième {
background-color: #aaaaaa;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 555px;
margin: auto;
border: 1px dotted #000;
text-align: center;
color: #eae9e9;
font-size: 13px;
}

.quatrième {
background-color: #aaaaaa;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 555px;
margin: auto;
border: 1px dotted #000;
text-align: center;
color: #eae9e9;
font-size: 13px;
}

.border {
border: 1px dotted #000;
width: 555px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-left: auto;
margin-right: auto;
}

.qeel_infos {
color: #000;
background: rgb(245,246,246); /* Old browsers */
background: -moz-linear-gradient(top, rgb(245,246,246) 0%, rgb(219,220,226) 21%, rgb(184,186,198) 49%, rgb(221,223,227) 80%, rgb(245,246,246) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(245,246,246)), color-stop(21%,rgb(219,220,226)), color-stop(49%,rgb(184,186,198)), color-stop(80%,rgb(221,223,227)), color-stop(100%,rgb(245,246,246))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* IE10+ */
background: linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
width: 500px;
padding: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-left: auto;
margin-right: auto;
}
 
</style>
</head>


<body>
<table width="600" border="0" cellspacing="0" cellpadding="10" class="back">
  <tr>
    <td>
      <div class="header"></div>
      <div class= titre-forum> Ton Forum </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="border">
        <div class="bod">
          <table width="100%" border="0" cellspacing="5" cellpadding="0" style="height: 58px;">
            <tr>
              <td width="83" align="center" valign="middle" class="lien">
                <a href="http://" target="_blank">Lien</a>
              </td>
              <td width="83" align="center" valign="middle" class="lien">
                <a href="http://" target="_blank">Lien</a>
              </td>
              <td width="83" align="center" valign="middle" class="lien">
                <a href="http://" target="_blank">Lien</a>
              </td>
              <td width="83" align="center" valign="middle" class="lien">
                <a href="http://" target="_blank">Lien</a>
              </td>
              <td width="83" align="center" valign="middle" class="lien">
                <a href="http://" target="_blank">Lien</a>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="second">
        <table width="100%" border="0" cellspacing="10">
          <tr>
            <div class="para"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
            <div class="para1"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
            <div class="para2"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
            <div class="para3"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
          </tr>
        </table>
      </div>
      <div class="troisième">
        <table width="100%" border="0" cellspacing="10">
          <tr>
            <td class="pub" width="90%" valign="top">
              <span class="lier"> Nous lier ?</span><br /><br />
              <a href="http://www.never-utopia.com/" target="_blank"><img src="http://i70.servimg.com/u/f70/09/00/56/80/miniba15.png"/></a><br /><br />
              <textarea><a href="http://www.never-utopia.com/" target="_blank"><img src="http://i70.servimg.com/u/f70/09/00/56/80/miniba15.png"/></a></textarea><br /><br />
   
              <a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/666823logo6.jpg"/></a><br /><br />
              <textarea><a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/666823logo6.jpg"/></a></textarea><br /><br />
   
              <a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/876649logo1.jpg"/></a><br /><br />
    <textarea><a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/876649logo1.jpg"/></a></textarea>
    </td></tr></table></div>
   
    <div class="quatrième">
<table width="100%" border="0" cellspacing="10">
  <tr>
    <td class="stats" width="90%" valign="top">
      <span class="stat">Quelques Stats</span><br /><br />
      <div class="qeel_infos">Nous avons <strong><span class="FORUMCOUNTUSER">0</span></strong> utilisateurs enregistrés.<br />
        Nos membres ont postés un total de <strong><span class="FORUMCOUNTPOST">0</span></strong> messages.<br />
        Dernier membre à nous avoir rejoints. <strong><span class="FORUMLASTUSER">Klash</span></strong>.<br />
      </div><br />Mise en page et codage par © <a href="http://www.never-utopia.com/">Never-Utopia</a></td></tr></table></div></td></tr></table>
</body>
</html>


Ensuite validez et là vous aurez votre page html de créé.

Le lien vous servira pour votre fiche de pub, donc copiez le. Le lien de la pub sera à insérer comme suit :
Code:
<iframe src="votre lien de page html" style="width: 610px; height: 1175px; margin: auto; border: none;"></iframe>



Merci de laisser le crédit un petit merci aussi serait sympa, enjoy if you like it.

EDIT : Vous trouverez également d'autres modèles ici.


Revenir en haut

La date/heure actuelle est Mar 19 Mar 2024 - 11:20