AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

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



24 résultats trouvés pour page_html

Onyx

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




Lecteur audio personnalisable


Salut !

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

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

Voilà l'aperçu :


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


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


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


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


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



1. Lecteur audio (Page HTML)


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

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

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

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

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

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


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


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

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

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

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

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

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

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

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


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


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

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



2. Comment mettre des chansons dans le lecteur audio


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

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

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

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


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


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

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


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

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


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


C'est tout pour cette partie ~



3. Mettre le lecteur audio dans un iframe


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

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


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

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





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

À plus !



Un petit oubli - Rappel sur le droit d'auteur


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

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

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



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

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




Système de Boutique avec triage automatique


Salut !

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

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

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

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

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

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


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


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


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



1. Créer la boutique (Page HTML)


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

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

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


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




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

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

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

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

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

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

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

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

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

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

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

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




2. Personnaliser la boutique


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

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

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


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


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

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


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

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

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




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


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


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

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

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

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




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



3. Activer les formulaires externes


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

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

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

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



4. Mettre la boutique dans un iframe


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

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


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

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

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





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

À plus !

Onyx

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




Bestiaire et Herbier avec triage


Salut !

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

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

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

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


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


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


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



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


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

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

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

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

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

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

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

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

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

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

      </div>

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

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


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

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

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

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

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

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


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



2. Personnaliser le bestiaire/herbier


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

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

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


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

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


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

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




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


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


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

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




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


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

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

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

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



3. Option pour réduire les menus


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


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




4. Mettre le bestiaire/herbier dans un iframe


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

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


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

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

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





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

À plus !

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 (), 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://forum-test-onyx5.forum-canada.com/h9-formulaire-de-bouffe

Et un autre exemple d'un formulaire de présentation :
http://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 :
http://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:
Bonsoir les cocos.
Je sais bien que ces quelques lignes ne serviront pas à grand monde... mais un jour peut-être vous en aurez besoin, et là je sais qu'elles vous serviront.
Dans cette espoir je vous fais un petit topo sur la structuration d'un formulaire en HTML !! Je dis bien en HTML, le traitement en PHP c'est une autre histoire Razz

Formulaire en HTML

Je vais vous faire peur d'entrée... voici un code :

Code:
<form action="mailto:destinataire@hotmail.fr" method="post" enctype="text/plain">
<input type="hidden" name="Riku Asakura" value="Formulaire" />
Votre nom : <input type="text" name="nom" />
<br />
Votre Prénom : <input type="text" name="Prénom" /> 
<br />
Votre adresse : <input type="text" name="Adresse" size="80" /> 
<br />
<textarea name="texte" cols=35 rows=10></textarea>
<br />
Votre mot de passe : <input type="password" name="pass" size=9 maxlenght=10 />
<br />
Votre site : <input type="text" name="url" size=50 value="http://" />
<br />
<input type="submit" value="Envoyer le formulaire " name="submit" />
<br />
<input type="reset" value="Effacer " name="reset" />
 

Ce qui donne:


Votre nom :

Votre Prénom :

Votre adresse :



Votre mot de passe :

Votre site :





Quelques explications :
  • action : Donne l'adresse du script qui va gérer les données envoyées. Si vous avez appris le php, vous saurez qu'on peut aussi utiliser une page de traitement. Ce formulaire là vous permet de faire envoyer un mail en passant par un logiciel de messagerie (outlook, live mail etc..).
  • disabled : créé une liste ou un champs grisé.
  • "hidden" : Contenu de type="" - Créé une liste ou un champs masqué.
  • "checkbox" : Contenu de type="" - Créé une case à cocher.
  • "radio" : Contenu dans type="" - Créé un bouton avec choix unique mais varié.
  • "button" : Contenu de type="" - Créé un bouton cliquable.
  • cols : Détermine le nombre maximum de caractères que peut contenir une ligne.
  • maxlenght : délimite le nombre de caractères maximum dans un champ.
  • method : Dans la balise form. C'est la méthode employée pour traiter les données. Il faut savoir qu'il en existe deux : POST et GET. L'un fait passer les données du formulaire via l'url (GET) l'autre via un traitement PHP plus précis (POST), je ne rentrerai pas dans les détails ici.
  • name : Nomme un champs du formulaire. Pour les boutons de type Radio il vous faudra le même
  • name pour créer un même groupe de bouton.(cf. exemple plus bas)
  • readonly : empêche les utilisateur de modifier le texte par défaut d'un champ.
  • rows : Représente le nombre de lignes définies pour la hauteur d'un champ textarea.
  • "password" : contenu de type="" - Créé un champ de saisie crypté.
  • value : Donne une valeur par défaut à un champ.
  • "reset" : Contenu dans type="" - Créé un bouton d'effacement (déconseillé)
  • "submit" : Bouton d'envoi de données.
  • type : Le fameux type="". Il est placé dans une balise < input >, il permet de faire un choix entre différents input (bouton, radio, chekbox, champs mdp, champs texte etc..)
  • size : définit la largeur d'un champ.


Voici un autre bout de code qui vous permettra d'ajouter une liste déroulante à votre formulaire.
Code:
<form>
N-U est :
<select name="liste">
<option value="excellent">Excellent</option>
<option value="super">Super</option>
<option value="pas mal">Pas mal</option>
<option value="pas top">Pas top</option>
<option value="nul">Nul</option>
</select></form>

Résultat :
N-U est :



- Créer un choix par défaut dans une liste déroulante
Code:
<form>
Never-Utopia est :
<select name="liste">
<option value="excellent">Excellent</option>
<option value="super" selected="selected">Super</option>
<option value="pas mal">Pas mal</option>
<option value="pas top">Pas top</option>
<option value="nul">Nul</option>
</select></form>

Donnera :

Never-Utopia est :


Vous pouvez voir que pour créer ce choix par défaut j'ai rajouté l'attribut
Code:
selected="selected"

dans l'option à sélectionner par défaut.

On peut faire pareil avec un choix fait par défaut dans des boutons radio, ou checkbox.
Radio
Code:
<form>
Les tutos de N-U sont :
<input type="radio" name="tuto" value="excellents" />Excellents<br />
<input type="radio" name="tuto" value="bons"  checked="checked" />bons<br />
<input type="radio" name="tuto" value="pas-mal" />Pas Mal<br />
<input type="radio" name="tuto" value="bof" />bof<br />
<input type="radio" name="tuto" value="nuls" />nuls</form>


Les tutos de N-U sont :
Excellents

bons

Pas Mal

bof

nul


Sauf qu'ici on aura utilisé
Code:
 checked="checked"

pour présélectionner un choix.
On peut faire de la même manière avec de véritables checkbox (donc plusieurs choix possibles).
Checkbox
Code:
<form>Vous trouvez que je suis :
<input type="checkbox" value="excellent" />Barbant<br />
<input type="checkbox" value="bon" checked="checked" />Agréable<br />
<input type="checkbox" value="pas-mal"  checked="checked" />Beau gosse<br />
<input type="checkbox" value="bof" />Trop long<br />
<input type="checkbox" value="nul" />Je sais pô...</form>

Vous trouvez que je suis :
Barbant

Agréable

Beau gosse

Trop long

Je sais pô...


Ainsi ici on aura deux présélections, mais la possibilités de désélectionner ou d'avoir d'autres choix.
Voilà... bon ne faites pas attention aux présélections, en fait je ne suis pas que beau gosse XD
ptdr !

Enjoy Wink






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 et non de celui ci .
: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:
Si vous avez des questions, postez les à la suite de ce message et je trouverais le temps pour vous répondre.
Et si ça fait une semaine que vous attendez une réponse, hésitez pas à m'envoyer un petit MP Wink

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.

Rozenbrez

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

Halloween

Blocs illustrés, tons jaunes, en Iframe - Jeu 30 Oct 2014 - 15:08



Plop,

Petite fiche simple de publicité à la demande d'Insane paper-plane. Quelques effets au survol (changement de couleurs). Fiche de pub en page HTML, liée dans un message par le biais d'une Iframe, permettant ainsi une mise à jour (sur la page HTML) : la fiche s'actualisera automatiquement sur tous les messages.


/!\ Je rappelle que cette section existe en cas de problème, je ne réponds pas aux MP (et encore moins quand ils sont rageux !).



Fiche de Publicité


Versions HTML ▬ Iframe

Aperçu classique ▬ www | Aperçu au survol ▬ www




Dans un premier temps, vous devez créer une page HTML. Dans le panneau d'administration, rendez-vous dans l'onglet "Modules", puis "Gestion des pages HTML", et "Création en mode avancé (HTML)". Nommez votre fiche, et copiez/collez le code suivant :

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" />
          <base target="_blank" />
        <title>Fiche de publicité</title>

        <style type="text/css">
          .fiche {
          width: 400px;
          background-color: #FFFFFF;
          margin: auto;
          font-family: courier new;
          font-size: 11px;
          color: #B0B0B0;
          border-left: 2px solid #EAC01A;
          border-right: 2px solid #EAC01A;
          }
       
          .fiche a{
          color: #CAA40D;
          text-decoration: none;
          }
       
          .titre {
          font-size: 18px;
          text-align: center;
          color: #A27714;
          text-transform: uppercase;
          position: relative;
          top: -2em;
          }
       
          .sous-titre {
          font-size: 14px;
          text-align: center;
          color: #A27714;
          position: relative;
          top: -3em;
          }
       
          .bloc_contexte {
          width: 230px;
          height: 280px;
          overflow: auto;
          text-align: justify;
          color: #B0B0B0;
          }
       
          .bloc_info {
          width: 210px;
          background-color: #E9E9E9;
          padding: 5px 5px;
          color: #B2B2B2;
          }
       
          .bouton_nav {
          background-color: #DDDDDC;
          width: 115px;
          padding: 10px;
          text-align: center;
          color: #ADADAD;
          -webkit-transition: 1s;
          transition: 1s;
          }
       
          .bouton_nav:hover {
          background-color: #F5D180;
          color: #ffffff;
          }
       
          .bouton_nav a{
          color: #ADADAD;
          width: 100%;
          text-decoration: none;
          }
       
     
       
        </style>
        </head>
        <body>
          <div class="fiche"><img src="http://i.imgur.com/LZ1vfZc.png" />
            <div class="titre">Nom du forum</div>
            <div class="sous-titre">Type du forum</div>
            <table style="padding: 15px;"><tr><td>
              <div class="bloc_contexte">Amore sed non (neque ut enim sumus enim omnis enim putamus (neque putamus enim sumus) adducti in ipso propensi inest amicitiam expetendam non putamus spe enim enim spe natura propensi sumus) enim eius mercedis sumus) inest inest spe inest adducti mercedis inest inest spe exigamus propensi beneficium enim enim sed expetendam in adducti sic in beneficium fructus sumus amore gratiam sic propensi liberalitatem beneficium benefici putamus gratiam expetendam spe ut mercedis (neque liberalesque amicitiam ipso (neque expetendam ut enim (neque ipso (neque liberalesque sic eius amore fructus spe enim quod fructus sic non enim fructus exigamus enim benefici ut amore. Amore sed non (neque ut enim sumus enim omnis enim putamus (neque putamus enim sumus) adducti in ipso propensi inest amicitiam expetendam non putamus spe enim enim spe natura propensi sumus) enim eius mercedis sumus) inest inest spe inest adducti mercedis inest inest spe exigamus propensi beneficium enim enim sed expetendam in adducti sic in beneficium fructus sumus amore gratiam sic propensi liberalitatem beneficium benefici putamus gratiam expetendam spe ut mercedis (neque liberalesque amicitiam ipso (neque expetendam ut enim (neque ipso (neque liberalesque sic eius amore fructus spe enim quod fructus sic non enim fructus exigamus enim benefici ut amore. Amore sed non (neque ut enim sumus enim omnis enim putamus (neque putamus enim sumus) adducti in ipso propensi inest amicitiam expetendam non putamus spe enim enim spe natura propensi sumus) enim eius mercedis sumus) inest inest spe inest adducti mercedis inest inest spe exigamus propensi beneficium enim enim sed expetendam in adducti sic in beneficium fructus sumus amore gratiam sic propensi liberalitatem beneficium benefici putamus gratiam expetendam spe ut mercedis (neque liberalesque amicitiam ipso (neque expetendam ut enim (neque ipso (neque liberalesque sic eius amore fructus spe enim quod fructus sic non enim fructus exigamus enim benefici ut amore.</div>
              <br /><br />
              <div class="bloc_info"><p align="center">XX membres | XX messages</p>
                Ouvert le XX/XX<br />
                Avatars iréels <br />
                NC -16 forum mature<br />
                <a href="#"><p align="center">Lien direct</p></a></div></td>
              <td><center><a href="#"><div class="bouton_nav">Navigation</div></a><br /><a href="#"><div class="bouton_nav">Navigation</div></a><br /><a href="#"><div class="bouton_nav">Navigation</div></a><br /><a href="#"><div class="bouton_nav">Navigation</div></a><br /><a href="#"><div class="bouton_nav">Navigation</div></a>
                <br /><div style="white-space: nowrap;"><a href="#"><img src="http://i.imgur.com/pD9xadU.png" /></a> <a href="#"><img src="http://i.imgur.com/pD9xadU.png" /></a> <a href="#"><img src="http://i.imgur.com/pD9xadU.png" /></a><br /><a href="#"><img src="http://i.imgur.com/pD9xadU.png" /></a> <a href="#"><img src="http://i.imgur.com/pD9xadU.png" /></a> <a href="#"><img src="http://i.imgur.com/pD9xadU.png" /></a>
                </div>
                <table><tr><td><img src="http://i.imgur.com/As2JhDo.png" /><br /> <span style="font-size: 9px;">© Halloween sur <a href="http://www.never-utopia.com">Never Utopia</a></span>
                  </td><td><img src="http://i.imgur.com/mWpIICZ.png" /></td></tr></table><img src="http://i.imgur.com/OKt8f0h.png" /> <img src="http://i.imgur.com/0iwVXEd.png" /></center></td></tr></table>
           
              </div>
           
           
          </body></html>


Puis enregistrez. Copiez le lien présent dans le récapitulatif des pages HTML de la page correspondante.

Pour afficher la publicité dans un message, copiez/collez le code suivant, en y ajoutant l'URL de la page HTML :

Code:
<iframe src="LIENPAGEHTML" width="100%" height="805px" border="0" frameborder="0"></iframe>



Bonne promotion Wink




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

Halloween

Créer un Mag grâce aux pages HTML - Mar 19 Fév 2013 - 17:17


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


    Hey,

    J'ai jeté un coup d’œil rapide un peu partout, et je n'ai pas vu d'astuce sur la création de mag pour vos forums, je me lance donc.

    Premièrement pour éclairer vos lanternes, voici à quoi ressemble ce fameux mag : Aperçu. Vous pouvez vous dirigez grâce au sommaire, ou aux flèches directionnelles du bas.

    1. Le code.


    Ce système se base sur la gestion des pages HTML de votre fofo. Pour commencer, nous allons créer une de ces fameuses page HTML. Pour cela, direction le panneau d'administration, et : Modules > HTML > Gestion des pages HTML. On clique sur "créer une page HTML", et on commence la bataille ! è.é

    Voici le code brut :

    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>Tuto mag</title>

    <style type="text/css">
    a { text-decoration: none;
    color: #6D6D6D; }</style>
    <script type="text/javascript" src="http://s3.archive-host.com/membres/up/1696114791/java/accordeon_effet.js"></script>
    </head>
    <body><div style="background-image: url(http://i71.servimg.com/u/f71/17/97/89/15/i_back10.png); height: 100%; width: 100%;"><br><br>

    <center><div style="width: 500px; background-color: #000000; border: 1px solid #6E6E6E; padding: 20px;"><table border="0" cellspacing="2" width="100%">
      <tbody><tr>
        <td width="50%"><div style="text-align: center; font-size: 25px; color: #FFFFFF; font-family: georgia;"><i>Nom du journal # 1</i></div><div style="text-align: center; font-size: 14px; font-family: georgia; color: #C6B8B9;"><i>Parce qu'on a toujours des choses à dire</i></div></td>
        <td width="50%"><div style="text-align: center; background-color: #E6E4D0; font-size: 14px; font-family: georgia; color: #000000; padding: 20px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;"><i>Résumé de l'article
    <br>By X and X</i></div></td>
      </tr>
    </tbody></table></div></center>

    <center><div style="background-color: #F3F3F3; width: 500px; border: 1px solid #6E6E6E; color: #6E6E6E; padding: 20px; height: 490px; margin-top: -1px; font-size: 12px; text-align: justify; overflow: auto;"><div style="text-align: center; font-size: 28px; color: #000000; font-family: old english text mt; transform: rotate(-3deg"><i>Titre de l'article</i></div>

    <br>Nam quibusdam, quos audio sapientes habitos in Graecia, placuisse opinor mirabilia quaedam (sed nihil est quod illi non persequantur argutiis): partim fugiendas esse nimias amicitias, ne necesse sit unum sollicitum esse pro pluribus; satis superque esse sibi suarum cuique rerum, alienis nimis implicari molestum esse; commodissimum esse quam laxissimas habenas habere amicitiae, quas vel adducas, cum velis, vel remittas; caput enim esse ad beate vivendum securitatem, qua frui non possit animus, si tamquam parturiat unus pro pluribus.
    <br><br>
    Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia. Nam quibusdam, quos audio sapientes habitos in Graecia, placuisse opinor mirabilia quaedam (sed nihil est quod illi non persequantur argutiis): partim fugiendas esse nimias amicitias, ne necesse sit unum sollicitum esse pro pluribus; satis superque esse sibi suarum cuique rerum, alienis nimis implicari molestum esse; commodissimum esse quam laxissimas habenas habere amicitiae, quas vel adducas, cum velis, vel remittas; caput enim esse ad beate vivendum securitatem, qua frui non possit animus, si tamquam parturiat unus pro pluribus.
    <br><br>
    Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.<br><br>
    Quanta autem vis amicitiae sit, ex hoc intellegi maxime potest, quod ex infinita societate generis humani, quam conciliavit ipsa natura, ita contracta res est et adducta in angustum ut omnis caritas aut inter duos aut inter paucos iungeretur. Hinc ille commotus ut iniusta perferens et indigna praefecti custodiam protectoribus mandaverat fidis. quo conperto Montius tunc quaestor acer quidem sed ad lenitatem propensior, consulens in commune advocatos palatinarum primos scholarum adlocutus est mollius docens nec decere haec fieri nec prodesse addensque vocis obiurgatorio sonu quod si id placeret, post statuas Constantii deiectas super adimenda vita praefecto conveniet securius cogitari.
    <br><br>
    Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus. Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.
    <br><br>
    Et quoniam mirari posse quosdam peregrinos existimo haec lecturos forsitan, si contigerit, quamobrem cum oratio ad ea monstranda deflexerit quae Romae gererentur, nihil praeter seditiones narratur et tabernas et vilitates harum similis alias, summatim causas perstringam nusquam a veritate sponte propria digressurus. Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.</div></center>

    <center><a href="http://halloweens-test.forumactif.org"><img src="http://i71.servimg.com/u/f71/17/97/89/15/gauche11.png"></a>  <a href="http://halloweens-test.forumactif.org/h6-tuto-mag-2"><img src="http://i71.servimg.com/u/f71/17/97/89/15/droite11.png"></a></center>
    </div>
    <div style="background-color: #E6E4D0; width: 200px; height: auto; padding: 20px; margin-top: -763px; margin-left: 140px; font-family: arial; font-size: 12px;"><div style="text-align: center; font-size: 25px; color: #000000; font-family: georgia;"><i>Sommaire</i></div>

    <br><a href="http://halloweens-test.forumactif.org"><div style="color: #717458;"><b>Page 1 ; Nom article</b></div></a><a href="http://halloweens-test.forumactif.org/h6-tuto-mag-2">Page 2 ; Nom article</a><br><br> <div style="font-size: 10px; text-align: right; color: #6D6D6D;">© Code by Halloween de <a href="http://www.never-utopia.com">NU</a></div></div> 

    </body> </html>
     


    Il vous suffit de remplacer les textes par votre production. Ceci fait, on enregistre la page. Pour continuer le mag (dans l'exemple, je n'ai fais que deux pages, mais il est tout à fait possible d'en faire plus), on réitère l'opération autant de fois que nécessaire.

    Attention : pensez à déplacer ceci :

    Code:
    <div style="color: #717458;"><b>Page X ; Nom article</b></div>


    En fonction du numéro de la page que vous venez de créer.


    2. La navigation.

    Il faut désormais ajouter les liens des pages pour la navigation. Pour cela, vous devez copier/coller l'adresse des pages précédentes et suivantes à celle que vous modifiez (cf : ici). Elles sont à insérer dans les bouts de codes suivants :

    Code:
    <center><a href="ADRESSE PAGE PRECEDENTE"><img src="http://i71.servimg.com/u/f71/17/97/89/15/gauche11.png"></a>  <a href="ADRESSE PAGE SUIVANTE"><img src="http://i71.servimg.com/u/f71/17/97/89/15/droite11.png"></a></center>


    En ce qui concerne le sommaire, il vous faudra ajouter les adresses de toutes les pages (copiez/collez les sur un bloc-note pour plus de praticité, ou gardez la liste des pages HTML dans un autre onglet), de cette manière :

    Code:
    <div style="background-color: #E6E4D0; width: 200px; height: auto; padding: 20px; margin-top: -763px; margin-left: 140px; font-family: arial; font-size: 12px;"><div style="text-align: center; font-size: 25px; color: #000000; font-family: georgia;"><i>Sommaire</i></div>

    <br><a href="LIEN PAGE 1"><div style="color: #717458;"><b>Page 1 ; Nom article</b></div></a><a href="LIEN PAGE 2">Page 2 ; Nom article</a><br><br> <div style="font-size: 10px; text-align: right; color: #6D6D6D;">© Code by Halloween de <a href="http://www.never-utopia.com">NU</a></div></div> 



    3. Attention.

    Attention, à chaque édition de vos pages, vous devrez réinsérer le code suivant au début de votre page :

    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>Tuto mag</title>

    <style type="text/css">
    a { text-decoration: none;
    color: #6D6D6D; }</style>
    <script type="text/javascript" src="http://s3.archive-host.com/membres/up/1696114791/java/accordeon_effet.js"></script>
    </head>
    <body>


    Et celui-ci à la fin :

    Code:
    </body> </html>



    Merci de ne pas toucher au crédit, s'approprier le travail des autres, c'mal. Si vous avez des questions, des réactions, des soucis ... n'hésitez pas Wink

    Au boulot \o/

Halloween

Fiche de pub avec effet hover - Lun 18 Fév 2013 - 20:07



Une fiche de pub avec effet hover
Tutoriel



MAJ 2016-10-01 : Salut, c'est Onyx, le LS vient d'être mis à jour alors il devrait fonctionner parfaitement maintenant ^^




Avant tout, pardon d'avance, mes explications ne sont pas toujours claires, et mes codes sont peut-être brouillon u.u
AperçuAperçu en image


Sachez que cette fiche nécessite de créer une page HTML sur votre forum, et d'intégrer un iframe dans le message où vous posterez car certains effets ne sont pris en compte que dans le CSS, et ne s'adapteront donc pas à chaque forum si ce dernier est négligé.

Pour les plus rebelles d'entre vous, je poste en premier lieu les codes, sait-on jamais, vous vous débrouillerez peut-être seul ? Dans tous les cas, no panic, des explications vont suivre.


Code


Pour les plus calés d'entre vous, voici le code à insérer dans la page HTML :

Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base target="_blank" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fiche pub Never Utopia</title>
<style type="text/css">
body {
  margin: 0px;
}
.cadre{
width:100px;
height:100px;
background-image: url("http://i47.servimg.com/u/f47/17/97/89/15/j10.png");
border-radius:50px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
}

.description
{
  display: block;
  width: 200px;
  margin: auto;
  height: 100px;
  overflow: hidden;
}
.description_contenu
{
  position: absolute;
  width: 190px;
  height: 90px;
  overflow: 100px;
  background-color: #EFE9DD;
  font-size: 10px;
  color: #3E352E;
  text-align: jutsify;
  padding: 5px;
  opacity: 0;
  -webkit-transition: 1s;
  transition: 1s;
}
.description_contenu:hover
{
  opacity: 0.9;
}
.code textarea {
  width: 300px;
  margin: auto;
  padding: 2px;
  max-height: 200px;
  overflow: auto;
}
</style>
</head>
<body>
  <center>
    <div style="width: 500px;  background-image: url('http://i71.servimg.com/u/f71/17/97/89/15/non10.png'); text-align: justify; font-family: arial,sans-serif; font-size: 11px; color: rgb(51, 51, 51); padding-bottom: 10px; padding-top: 15px;border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171);">
      <center>
        <div style="margin-top: -20px;">
          <img src="http://i71.servimg.com/u/f71/17/97/89/15/sans_t10.png" />
        </div>
      </center>
      <blockquote>
        <div style="border-bottom: 3px dotted rgb(68, 50, 23); display: block;"></div>
      </blockquote>
      <center>
        <link href="http://fonts.googleapis.com/css?family=Parisienne" rel="stylesheet" type="text/css" />
        <div style="font-family:Parisienne;color: white; font-size: 25px; letter-spacing: 0px; font-weight: normal; text-shadow: black 0px 2px 2px; margin-top: -43px;">
          Pirouette cacahuète, votre slogan
        </div>
      </center>
      <br /><br />
      <center>
        <div style="width:405px;font-family:calibri;text-align:justify;color:#777777;font-size:12px; line-height:14px;">
          <div style="background-color: #C6B8B9; text-align: center; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171);">
            <table border="0" cellspacing="2" width="100%">
              <tbody>
                <tr>
                  <td width="30%">
                    <center>
                      <img src="http://i71.servimg.com/u/f71/17/97/89/15/210.png" />
                    </center>
                  </td>
                  <td width="70%">
                    <div style="font-size: 25px; color: #1E1A19;">
                      « Citation de membre ou accroche »
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <br /><br />
          <div style="background-color: #C6B8B9; text-align: justify; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171); padding: 20px; color:#3E352E;">
            Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬
            <br />
          </div>
          <br /><br />
          <span style="color: #E2DFCD;">▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ✄</span>
          <br /><br />
          <div style="background-color: #EFE9DD; text-align: justify; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171); padding: 20px; color:#3E352E;">
            Description de l'ambiance du forum (convivialité ...), mot du staff, vos points forts ou autre ▬ Description de l'ambiance du forum (convivialité ...), mot du staff, vos points forts ou autre ▬ Description de l'ambiance du forum (convivialité ...), mot du staff, vos points forts ou autre ▬ Description de l'ambiance du forum (convivialité ...), mot du staff, vos points forts ou autre ▬
          </div>
        </div>
        <br /><br /><br /><br />
        <table border="0" cellspacing="-2" width="100%">
          <tbody>
            <tr>
              <td width="50%">
                <div class="description">
                  <div style="display: block; text-align: justify; width: 200px; height: 100px; background: url(http://i71.servimg.com/u/f71/17/97/89/15/ong110.png) center center no-repeat;">
                    <div class="description_contenu">
                      <div style="OVERFLOW: auto; width: 180px; height: 70px; padding: 5px;">
                        Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1Contenu onglet 1 Contenu onglet 1
                      </div>
                    </div>
                  </div>
                </div>
                <div class="description">
                  <div style="display: block; text-align: justify; width: 200px; height: 100px; background: url(http://i71.servimg.com/u/f71/17/97/89/15/ong210.png) center center no-repeat;">
                    <div class="description_contenu">
                      <div style="OVERFLOW: auto; width: 180px; height: 70px; padding: 5px;">
                        Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2Contenu onglet 2Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2
                      </div>
                    </div>
                  </div>
                </div>
              </td>
              <td width="50%">
                <div class="description">
                  <div style="display: block; text-align: justify; width: 200px; height: 100px; background: url(http://i71.servimg.com/u/f71/17/97/89/15/ong310.png) center center no-repeat;">
                    <div class="description_contenu">
                      <div style="OVERFLOW: auto; width: 180px; height: 70px; padding: 5px;">
                        Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3Contenu onglet 3 Contenu onglet 3 Contenu onglet 3Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3
                      </div>
                    </div>
                  </div>
                </div>
                <div class="description">
                  <div style="display: block; text-align: justify; width: 200px; height: 100px; background: url(http://i71.servimg.com/u/f71/17/97/89/15/ong410.png) center center no-repeat;">
                    <div class="description_contenu">
                      <div style="OVERFLOW: auto; width: 180px; height: 70px; padding: 5px;">
                        Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <br /><br />
        <span style="color: #E2DFCD;">▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ✄</span>
        <br />
        <br />
        <div style="background-color: #EFE9DD; text-align: justify; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171); padding: 20px; width: 350px; color:#3E352E;">
          Merci d'avoir pris le temps de lire cette modeste fiche (et inutile d'essayer de résister à l'appel du clic, vous devez venir nous voir \o/). Pour les petits curieux et les généreux, voici de quoi nous lier :
          <br /><br />
          <center>
            <a href="#">
              <img src="http://i71.servimg.com/u/f71/17/97/89/15/bouton10.png" />
            </a>
            <br /> <br />
            <table style="table-layout:fixed;" align="center" border="0" cellpadding="0" cellspacing="1" width="90%">
              <tbody>
                <tr>
                  <td>
                    <span class="genmed">
                      <b>Code:</b>
                    </span>
                  </td>
                </tr>
                <tr>
                  <td class="code">
                    <textarea readonly="readonly" class="cont_code"><a href="LIEN FORUM"><img src="IMAGEBOUTON" alt="Titre du forum" /></a></textarea>
                  </td>
                </tr>
              </tbody>
            </table>
            <span class="postbody">
              <br /><br />
              ▬ <a href="#">Lien utile</a> ▬ <a href="#">Lien utile</a> ▬ <a href="#">Lien utile</a> ▬ <a href="#">Lien utile</a>
            </span>
          </center>
        </div>
        <br />
        <div align="right">
          <a href="http://www.never-utopia.com/" style="font-size: 9px; line-height: normal">© By Halloween sur Never Utopia</a>
        </div>
      </center>
    </div>
  </center>
</body>
</html>



Dans le message où vous postez, on met ceci :

Code:
<iframe src="LIENPAGEHTML" border="0" style="margin: auto; display: block; width: 500px; height: 1500px;" frameborder="0"></iframe>



Explications & Co


Et voici donc les explications. Pour commencer, nous allons créer une page HTML. Pour cela, direction le panneau d'administration, et : Modules > HTML > Gestion des pages HTML. On clique sur "Création en mode avancé", et on commence la bataille ! è.é
On complète ainsi (excluant basculer le mode d'édition qui n'existe plus) :
Spoiler:


Passons maintenant au code. Copiez/collez ce qui suit :

Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base target="_blank" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fiche pub Never Utopia</title>
<style type="text/css">
body {
  margin: 0px;
}
.cadre{
width:100px;
height:100px;
background-image: url("http://i47.servimg.com/u/f47/17/97/89/15/j10.png");
border-radius:50px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
}

.description
{
  display: block;
  width: 200px;
  margin: auto;
  height: 100px;
  overflow: hidden;
}
.description_contenu
{
  position: absolute;
  width: 190px;
  height: 90px;
  overflow: 100px;
  background-color: #EFE9DD;
  font-size: 10px;
  color: #3E352E;
  text-align: jutsify;
  padding: 5px;
  opacity: 0;
  -webkit-transition: 1s;
  transition: 1s;
}
.description_contenu:hover
{
  opacity: 0.9;
}
.code textarea {
  width: 300px;
  margin: auto;
  padding: 2px;
  max-height: 200px;
  overflow: auto;
}
</style>
</head>
<body>
  <center>
    <div style="width: 500px;  background-image: url('http://i71.servimg.com/u/f71/17/97/89/15/non10.png'); text-align: justify; font-family: arial,sans-serif; font-size: 11px; color: rgb(51, 51, 51); padding-bottom: 10px; padding-top: 15px;border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171);">
      <center>
        <div style="margin-top: -20px;">
          <img src="http://i71.servimg.com/u/f71/17/97/89/15/sans_t10.png" />
        </div>
      </center>
      <blockquote>
        <div style="border-bottom: 3px dotted rgb(68, 50, 23); display: block;"></div>
      </blockquote>
      <center>
        <link href="http://fonts.googleapis.com/css?family=Parisienne" rel="stylesheet" type="text/css" />
        <div style="font-family:Parisienne;color: white; font-size: 25px; letter-spacing: 0px; font-weight: normal; text-shadow: black 0px 2px 2px; margin-top: -43px;">
          Pirouette cacahuète, votre slogan
        </div>
      </center>
      <br /><br />
      <center>
        <div style="width:405px;font-family:calibri;text-align:justify;color:#777777;font-size:12px; line-height:14px;">
          <div style="background-color: #C6B8B9; text-align: center; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171);">
            <table border="0" cellspacing="2" width="100%">
              <tbody>
                <tr>
                  <td width="30%">
                    <center>
                      <img src="http://i71.servimg.com/u/f71/17/97/89/15/210.png" />
                    </center>
                  </td>
                  <td width="70%">
                    <div style="font-size: 25px; color: #1E1A19;">
                      « Citation de membre ou accroche »
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <br /><br />
          <div style="background-color: #C6B8B9; text-align: justify; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171); padding: 20px; color:#3E352E;">
            Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬
            <br />
          </div>
          <br /><br />
          <span style="color: #E2DFCD;">▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ✄</span>
          <br /><br />
          <div style="background-color: #EFE9DD; text-align: justify; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171); padding: 20px; color:#3E352E;">
            Description de l'ambiance du forum (convivialité ...), mot du staff, vos points forts ou autre ▬ Description de l'ambiance du forum (convivialité ...), mot du staff, vos points forts ou autre ▬ Description de l'ambiance du forum (convivialité ...), mot du staff, vos points forts ou autre ▬ Description de l'ambiance du forum (convivialité ...), mot du staff, vos points forts ou autre ▬
          </div>
        </div>
        <br /><br /><br /><br />
        <table border="0" cellspacing="-2" width="100%">
          <tbody>
            <tr>
              <td width="50%">
                <div class="description">
                  <div style="display: block; text-align: justify; width: 200px; height: 100px; background: url(http://i71.servimg.com/u/f71/17/97/89/15/ong110.png) center center no-repeat;">
                    <div class="description_contenu">
                      <div style="OVERFLOW: auto; width: 180px; height: 70px; padding: 5px;">
                        Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1Contenu onglet 1 Contenu onglet 1
                      </div>
                    </div>
                  </div>
                </div>
                <div class="description">
                  <div style="display: block; text-align: justify; width: 200px; height: 100px; background: url(http://i71.servimg.com/u/f71/17/97/89/15/ong210.png) center center no-repeat;">
                    <div class="description_contenu">
                      <div style="OVERFLOW: auto; width: 180px; height: 70px; padding: 5px;">
                        Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2Contenu onglet 2Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2
                      </div>
                    </div>
                  </div>
                </div>
              </td>
              <td width="50%">
                <div class="description">
                  <div style="display: block; text-align: justify; width: 200px; height: 100px; background: url(http://i71.servimg.com/u/f71/17/97/89/15/ong310.png) center center no-repeat;">
                    <div class="description_contenu">
                      <div style="OVERFLOW: auto; width: 180px; height: 70px; padding: 5px;">
                        Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3Contenu onglet 3 Contenu onglet 3 Contenu onglet 3Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3
                      </div>
                    </div>
                  </div>
                </div>
                <div class="description">
                  <div style="display: block; text-align: justify; width: 200px; height: 100px; background: url(http://i71.servimg.com/u/f71/17/97/89/15/ong410.png) center center no-repeat;">
                    <div class="description_contenu">
                      <div style="OVERFLOW: auto; width: 180px; height: 70px; padding: 5px;">
                        Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <br /><br />
        <span style="color: #E2DFCD;">▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ✄</span>
        <br />
        <br />
        <div style="background-color: #EFE9DD; text-align: justify; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171); padding: 20px; width: 350px; color:#3E352E;">
          Merci d'avoir pris le temps de lire cette modeste fiche (et inutile d'essayer de résister à l'appel du clic, vous devez venir nous voir \o/). Pour les petits curieux et les généreux, voici de quoi nous lier :
          <br /><br />
          <center>
            <a href="#">
              <img src="http://i71.servimg.com/u/f71/17/97/89/15/bouton10.png" />
            </a>
            <br /> <br />
            <table style="table-layout:fixed;" align="center" border="0" cellpadding="0" cellspacing="1" width="90%">
              <tbody>
                <tr>
                  <td>
                    <span class="genmed">
                      <b>Code:</b>
                    </span>
                  </td>
                </tr>
                <tr>
                  <td class="code">
                    <textarea readonly="readonly" class="cont_code"><a href="LIEN FORUM"><img src="IMAGEBOUTON" alt="Titre du forum" /></a></textarea>
                  </td>
                </tr>
              </tbody>
            </table>
            <span class="postbody">
              <br /><br />
              ▬ <a href="#">Lien utile</a> ▬ <a href="#">Lien utile</a> ▬ <a href="#">Lien utile</a> ▬ <a href="#">Lien utile</a>
            </span>
          </center>
        </div>
        <br />
        <div align="right">
          <a href="http://www.never-utopia.com/" style="font-size: 9px; line-height: normal">© By Halloween sur Never Utopia</a>
        </div>
      </center>
    </div>
  </center>
</body>
</html>


______

Reprenons bout à bout.
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base target="_blank" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fiche pub Never Utopia</title>
<style type="text/css">
body {
  margin: 0px;
}
.cadre{
width:100px;
height:100px;
background-image: url("http://i47.servimg.com/u/f47/17/97/89/15/j10.png");
border-radius:50px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
}

.description
{
  display: block;
  width: 200px;
  margin: auto;
  height: 100px;
  overflow: hidden;
}
.description_contenu
{
  position: absolute;
  width: 190px;
  height: 90px;
  overflow: 100px;
  background-color: #EFE9DD;
  font-size: 10px;
  color: #3E352E;
  text-align: jutsify;
  padding: 5px;
  opacity: 0;
  -webkit-transition: 1s;
  transition: 1s;
}
.description_contenu:hover
{
  opacity: 0.9;
}
.code textarea {
  width: 300px;
  margin: auto;
  padding: 2px;
  max-height: 200px;
  overflow: auto;
}
</style>
</head>
<body>


Cette partie permet d'intégrer le CSS à la page HTML. Normalement, vous ne devriez pas avoir à y toucher.

______

La suite (j'ai remplacé les liens par du texte histoire que ce soit moins complexe) :

Code:
  <center>
    <div style="width: 500px;  background-image: url('IMAGE DE FOND DE LA PUB'); text-align: justify; font-family: arial,sans-serif; font-size: 11px; color: rgb(51, 51, 51); padding-bottom: 10px; padding-top: 15px;border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171);">
      <center>
        <div style="margin-top: -20px;">
          <img src="BANNIERE 500*98" />
        </div>
      </center>
      <blockquote>
        <div style="border-bottom: 3px dotted rgb(68, 50, 23); display: block;"></div>
      </blockquote>
      <center>
        <link href="http://fonts.googleapis.com/css?family=Parisienne" rel="stylesheet" type="text/css" />
        <div style="font-family:Parisienne;color: white; font-size: 25px; letter-spacing: 0px; font-weight: normal; text-shadow: black 0px 2px 2px; margin-top: -43px;">
          Pirouette cacahuète, votre slogan
        </div>
      </center>


Cette partie concerne la configuration de la fiche : sa taille, ses couleurs, ses polices, son fond ... mais aussi l'en-tête (la bannière, le slogan). L'image de fond se répètera. Vous pouvez personnaliser les couleurs, les tailles, à vous de vous faire plaisir.


______

Code:
      <br /><br />
      <center>
        <div style="width:405px;font-family:calibri;text-align:justify;color:#777777;font-size:12px; line-height:14px;">
          <div style="background-color: #C6B8B9; text-align: center; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171);">
            <table border="0" cellspacing="2" width="100%">
              <tbody>
                <tr>
                  <td width="30%">
                    <center>
                      <img src="LIEN ICONE" />
                    </center>
                  </td>
                  <td width="70%">
                    <div style="font-size: 25px; color: #1E1A19;">
                      « Citation de membre ou accroche »
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>


Ceci, c'est le tableau, l'icône (capture d'un bout de votre design, d'un membre ... au choix) et la citation. Sachez que pour l'icône n'est pas réellement arrondie, c'est l'image elle-même et non un code (mais ça peut se faire avec du CSS).


______

Code:
          <br /><br />
          <div style="background-color: #C6B8B9; text-align: justify; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171); padding: 20px; color:#3E352E;">
            Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬
            <br />
          </div>
          <br /><br />
          <span style="color: #E2DFCD;">▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ✄</span>
          <br /><br />
          <div style="background-color: #EFE9DD; text-align: justify; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171); padding: 20px; color:#3E352E;">
            Description de l'ambiance du forum (convivialité ...), mot du staff, vos points forts ou autre ▬ Description de l'ambiance du forum (convivialité ...), mot du staff, vos points forts ou autre ▬ Description de l'ambiance du forum (convivialité ...), mot du staff, vos points forts ou autre ▬ Description de l'ambiance du forum (convivialité ...), mot du staff, vos points forts ou autre ▬
          </div>
        </div>
        <br /><br /><br /><br />


Vient ensuite l'espace pour votre contexte et votre petit message personnalisé, dont les couleurs et la taille peuvent aussi être modifiées. Contexte ou concept pour les forum de service par exemple. Je pense qu'il n'y a rien de particulier à expliquer, au besoin, posez des questions Wink


______


Code:
        <table border="0" cellspacing="-2" width="100%">
          <tbody>
            <tr>
              <td width="50%">
                <div class="description">
                  <div style="display: block; text-align: justify; width: 200px; height: 100px; background: url(IMAGE ONGLET 1) center center no-repeat;">
                    <div class="description_contenu">
                      <div style="OVERFLOW: auto; width: 180px; height: 70px; padding: 5px;">
                        Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1Contenu onglet 1 Contenu onglet 1
                      </div>
                    </div>
                  </div>
                </div>
                <div class="description">
                  <div style="display: block; text-align: justify; width: 200px; height: 100px; background: url(IMAGE ONGLET 2) center center no-repeat;">
                    <div class="description_contenu">
                      <div style="OVERFLOW: auto; width: 180px; height: 70px; padding: 5px;">
                        Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2Contenu onglet 2Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2
                      </div>
                    </div>
                  </div>
                </div>
              </td>
              <td width="50%">
                <div class="description">
                  <div style="display: block; text-align: justify; width: 200px; height: 100px; background: url(IMAGE ONGLET 3) center center no-repeat;">
                    <div class="description_contenu">
                      <div style="OVERFLOW: auto; width: 180px; height: 70px; padding: 5px;">
                        Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3Contenu onglet 3 Contenu onglet 3 Contenu onglet 3Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3
                      </div>
                    </div>
                  </div>
                </div>
                <div class="description">
                  <div style="display: block; text-align: justify; width: 200px; height: 100px; background: url(IMAGE ONGLET 4) center center no-repeat;">
                    <div class="description_contenu">
                      <div style="OVERFLOW: auto; width: 180px; height: 70px; padding: 5px;">
                        Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>


Voici la partie qui doit vous angoisser le plus ... et pourtant. Les onglets sont des illustrations, vous pouvez les remplacer par des images ou du texte fait sur toshop, au choix. Pas d'inquiètude à avoir pour la taille du texte puisque chaque partie a un overflow (la petite barre défilante). Pour le contenu, à vous de voir. Pour les RPG, des personnages prédéfinis, les nouveautés, des partenaires, des infos complémentaires (taille des ava, type du forum ...), recrutement ... et pour les forum de services, les diverses choses proposées par exemple. A vous de voir, on ne peut pas tout faire à votre place Wink


______

Code:
        <br /><br />
        <span style="color: #E2DFCD;">▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ✄</span>
        <br />
        <br />
        <div style="background-color: #EFE9DD; text-align: justify; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171); padding: 20px; width: 350px; color:#3E352E;">
          Merci d'avoir pris le temps de lire cette modeste fiche (et inutile d'essayer de résister à l'appel du clic, vous devez venir nous voir \o/). Pour les petits curieux et les généreux, voici de quoi nous lier :
          <br /><br />
          <center>
            <a href="#">
              <img src="http://i71.servimg.com/u/f71/17/97/89/15/bouton10.png" />
            </a>
            <br /> <br />
            <table style="table-layout:fixed;" align="center" border="0" cellpadding="0" cellspacing="1" width="90%">
              <tbody>
                <tr>
                  <td>
                    <span class="genmed">
                      <b>Code:</b>
                    </span>
                  </td>
                </tr>
                <tr>
                  <td class="code">
                    <textarea readonly="readonly" class="cont_code"><a href="LIEN FORUM"><img src="IMAGEBOUTON" alt="Titre du forum" /></a></textarea>
                  </td>
                </tr>
              </tbody>
            </table>
            <span class="postbody">
              <br /><br />
              ▬ <a href="#">Lien utile</a> ▬ <a href="#">Lien utile</a> ▬ <a href="#">Lien utile</a> ▬ <a href="#">Lien utile</a>
            </span>
          </center>
        </div>
        <br />
        <div align="right">
          <a href="http://www.never-utopia.com/" style="font-size: 9px; line-height: normal">© By Halloween sur Never Utopia</a>
        </div>
      </center>
    </div>
  </center>
</body>
</html>


Je ne pense pas avoir grand chose à expliquer ici non plus, insérer des liens utiles et des boutons de partenariat ne devrait pas poser de problème, évitez le BBcode simplement.



______

Pour ceux qui le souhaitent, le code complet avec les images et autre remplacés par du texte (comme précédemment donc) pour compléter directement :

Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base target="_blank" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fiche pub Never Utopia</title>
<style type="text/css">
body {
  margin: 0px;
}
.cadre{
width:100px;
height:100px;
background-image: url("http://i47.servimg.com/u/f47/17/97/89/15/j10.png");
border-radius:50px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
}

.description
{
  display: block;
  width: 200px;
  margin: auto;
  height: 100px;
  overflow: hidden;
}
.description_contenu
{
  position: absolute;
  width: 190px;
  height: 90px;
  overflow: 100px;
  background-color: #EFE9DD;
  font-size: 10px;
  color: #3E352E;
  text-align: jutsify;
  padding: 5px;
  opacity: 0;
  -webkit-transition: 1s;
  transition: 1s;
}
.description_contenu:hover
{
  opacity: 0.9;
}
.code textarea {
  width: 300px;
  margin: auto;
  padding: 2px;
  max-height: 200px;
  overflow: auto;
}
</style>
</head>
<body>
  <center>
    <div style="width: 500px;  background-image: url('IMAGE DE FOND DE LA PUB'); text-align: justify; font-family: arial,sans-serif; font-size: 11px; color: rgb(51, 51, 51); padding-bottom: 10px; padding-top: 15px;border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171);">
      <center>
        <div style="margin-top: -20px;">
          <img src="BANNIERE 500*98" />
        </div>
      </center>
      <blockquote>
        <div style="border-bottom: 3px dotted rgb(68, 50, 23); display: block;"></div>
      </blockquote>
      <center>
        <link href="http://fonts.googleapis.com/css?family=Parisienne" rel="stylesheet" type="text/css" />
        <div style="font-family:Parisienne;color: white; font-size: 25px; letter-spacing: 0px; font-weight: normal; text-shadow: black 0px 2px 2px; margin-top: -43px;">
          Pirouette cacahuète, votre slogan
        </div>
      </center>
      <br /><br />
      <center>
        <div style="width:405px;font-family:calibri;text-align:justify;color:#777777;font-size:12px; line-height:14px;">
          <div style="background-color: #C6B8B9; text-align: center; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171);">
            <table border="0" cellspacing="2" width="100%">
              <tbody>
                <tr>
                  <td width="30%">
                    <center>
                      <img src="LIEN ICONE" />
                    </center>
                  </td>
                  <td width="70%">
                    <div style="font-size: 25px; color: #1E1A19;">
                      « Citation de membre ou accroche »
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <br /><br />
          <div style="background-color: #C6B8B9; text-align: justify; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171); padding: 20px; color:#3E352E;">
            Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬ Concept de votre forum ou contexte ▬
            <br />
          </div>
          <br /><br />
          <span style="color: #E2DFCD;">▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ✄</span>
          <br /><br />
          <div style="background-color: #EFE9DD; text-align: justify; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171); padding: 20px; color:#3E352E;">
            Description de l'ambiance du forum (convivialité ...), mot du staff, vos points forts ou autre ▬ Description de l'ambiance du forum (convivialité ...), mot du staff, vos points forts ou autre ▬ Description de l'ambiance du forum (convivialité ...), mot du staff, vos points forts ou autre ▬ Description de l'ambiance du forum (convivialité ...), mot du staff, vos points forts ou autre ▬
          </div>
        </div>
        <br /><br /><br /><br />
        <table border="0" cellspacing="-2" width="100%">
          <tbody>
            <tr>
              <td width="50%">
                <div class="description">
                  <div style="display: block; text-align: justify; width: 200px; height: 100px; background: url(IMAGE ONGLET 1) center center no-repeat;">
                    <div class="description_contenu">
                      <div style="OVERFLOW: auto; width: 180px; height: 70px; padding: 5px;">
                        Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1 Contenu onglet 1Contenu onglet 1 Contenu onglet 1
                      </div>
                    </div>
                  </div>
                </div>
                <div class="description">
                  <div style="display: block; text-align: justify; width: 200px; height: 100px; background: url(IMAGE ONGLET 2) center center no-repeat;">
                    <div class="description_contenu">
                      <div style="OVERFLOW: auto; width: 180px; height: 70px; padding: 5px;">
                        Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2Contenu onglet 2Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2 Contenu onglet 2
                      </div>
                    </div>
                  </div>
                </div>
              </td>
              <td width="50%">
                <div class="description">
                  <div style="display: block; text-align: justify; width: 200px; height: 100px; background: url(IMAGE ONGLET 3) center center no-repeat;">
                    <div class="description_contenu">
                      <div style="OVERFLOW: auto; width: 180px; height: 70px; padding: 5px;">
                        Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3Contenu onglet 3 Contenu onglet 3 Contenu onglet 3Contenu onglet 3 Contenu onglet 3 Contenu onglet 3 Contenu onglet 3
                      </div>
                    </div>
                  </div>
                </div>
                <div class="description">
                  <div style="display: block; text-align: justify; width: 200px; height: 100px; background: url(IMAGE ONGLET 4) center center no-repeat;">
                    <div class="description_contenu">
                      <div style="OVERFLOW: auto; width: 180px; height: 70px; padding: 5px;">
                        Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4 Contenu onglet 4
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <br /><br />
        <span style="color: #E2DFCD;">▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ✄</span>
        <br />
        <br />
        <div style="background-color: #EFE9DD; text-align: justify; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171); padding: 20px; width: 350px; color:#3E352E;">
          Merci d'avoir pris le temps de lire cette modeste fiche (et inutile d'essayer de résister à l'appel du clic, vous devez venir nous voir \o/). Pour les petits curieux et les généreux, voici de quoi nous lier :
          <br /><br />
          <center>
            <a href="#">
              <img src="http://i71.servimg.com/u/f71/17/97/89/15/bouton10.png" />
            </a>
            <br /> <br />
            <table style="table-layout:fixed;" align="center" border="0" cellpadding="0" cellspacing="1" width="90%">
              <tbody>
                <tr>
                  <td>
                    <span class="genmed">
                      <b>Code:</b>
                    </span>
                  </td>
                </tr>
                <tr>
                  <td class="code">
                    <textarea readonly="readonly" class="cont_code"><a href="LIEN FORUM"><img src="IMAGEBOUTON" alt="Titre du forum" /></a></textarea>
                  </td>
                </tr>
              </tbody>
            </table>
            <span class="postbody">
              <br /><br />
              ▬ <a href="#">Lien utile</a> ▬ <a href="#">Lien utile</a> ▬ <a href="#">Lien utile</a> ▬ <a href="#">Lien utile</a>
            </span>
          </center>
        </div>
        <br />
        <div align="right">
          <a href="http://www.never-utopia.com/" style="font-size: 9px; line-height: normal">© By Halloween sur Never Utopia</a>
        </div>
      </center>
    </div>
  </center>
</body>
</html>




Enfin, on enregistre. On vérifie le résultat (et ça marche, ça ne peut que marcher \o/), et on passe au contenu du message sur autre forum (pour l'insérer ailleurs donc, sur NU par exemple).

Attention peuple, c'est compliqué ... tu dois copier/coller ceci :

Code:
<iframe src="LIENPAGEHTML" border="0" style="margin: auto; display: block; width: 500px; height: 1500px;" frameborder="0"></iframe>


Le lien de la page HTML se situe ici : http://i70.servimg.com/u/f70/16/61/97/52/sans_t13.png



J'espère que ce n'est pas trop brouillon, ou trop mal expliqué. Si vous avez des questions, des remarques, n'hésitez pas \o/

Au boulot !




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 : http://img11.hostingpics.net/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 Dim 19 Nov 2017 - 9:55