Changement automatique du rang selon le groupe

Salut !

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

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

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

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


Ce LS est en trois parties.

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

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

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

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

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

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

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

Puis, on chercher cette variable :

Code:

{postrow.displayed.POSTER_RANK}

Qu'on va remplacer par ceci :

Code:

<span class="rangtitre"></span>

Et on va trouver cette variable :

Code:

{postrow.displayed.RANK_IMAGE}

Qu'on va remplacer par ceci :

Code:

<span class="rangimg"></span>

2. Ajouter le javascript

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

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

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

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

Enfin, on met le javascript suivant et on enregistre :

Code:

$(function () {
  var groupcouleur = [
  "rgb(144, 55, 199)",
  "rgb(162, 176, 102)",
  "rgb(133, 199, 194)",
  "rgb(67, 145, 181)",
  "rgb(10, 163, 97)",
  ];

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

  var group2 = [
  "https://2img.net/r/hpimg11/pics/215624jaime.png",
  "https://2img.net/i/fa/subsilver/icon_pm.gif",
  "https://2img.net/i/fa/subsilver/icon_email.gif",
  "https://illiweb.com/fa/subsilver/icon_www.gif",
  "https://2img.net/i/fa/subsilver/icon_online_fr.gif",
  ];

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

3. Adapter le javascript à vos propres groupes et rangs

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

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

---

Partie des couleurs des groupes qui ont des rangs

Si on décortique le javascript, la première partie, "groupcouleur", comporte la couleur de chacun des groupes en mode "rgb":

Code:

$(function () {
  var groupcouleur = [
  "rgb(144, 55, 199)", /*Couleur du 1er groupe*/
  "rgb(162, 176, 102)", /*Couleur du 2e groupe*/
  "rgb(133, 199, 194)", /*Couleur du 3e groupe*/
  "rgb(67, 145, 181)", /*Couleur du 4e groupe*/
  "rgb(10, 163, 97)", /*Couleur du 5e groupe*/
  ];

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

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

---

Partie des "faux titres de rang"

Ensuite, la deuxième partie, "group1", sert à mettre le titre de chacun des rangs : :

Code:

 var group1 = [
  "Élèves", /*Titre du 1er groupe*/
  "Professeurs", /*Titre du 2e groupe*/
  "Personnel", /*Titre du 3e groupe*/
  "Habitants", /*Titre du 4e groupe*/
  "PNJ", /*Titre du 5e groupe*/
  ];

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

D'ailleurs, si vous voulez personnaliser chacun des rangs, vous pouvez facilement mettre quelque chose comme :

Code:

 var group1 = [
  "<span style='color: red;'>Élèves</span>",
  "<span style='color: blue;'>Professeurs</span>",
  "<span style='color: orange;'>Personnel</span>",
  "<span style='color: purple;'>Habitants</span>",
  "<span style='color: green;'>PNJ</span>",
  ];

Ou encore :

Code:

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

---

Partie des "fausses images de rang"

La troisième partie, "group2", sert à mettre l'url des images de rang pour chacun des groupes :

Code:

 var group2 = [
  "https://2img.net/r/hpimg11/pics/215624jaime.png", /*Image du 1er groupe*/
  "https://2img.net/i/fa/subsilver/icon_pm.gif", /*Image du 2e groupe*/
  "https://2img.net/i/fa/subsilver/icon_email.gif", /*Image du 3e groupe*/
  "https://illiweb.com/fa/subsilver/icon_www.gif", /*Image du 4e groupe*/
  "https://2img.net/i/fa/subsilver/icon_online_fr.gif", /*Image du 5e groupe*/
  ];

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

---

La partie où le javascript fait actuellement quelque chose

La dernière partie du javascript, soit le reste, sert à repérer la couleur du nom de l'utilisateur, de la comparer avec le groupcouleur et d'appliquer le titre de rang et l'image de rang qui correspond :

Code:

 /*On calcule le nombre de couleurs au total*/
  var nbgroup = groupcouleur.length;

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

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

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

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

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

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

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

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

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

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

---

Personnaliser le titre de rang et l'image de rang

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

Pour personnaliser tous les titres de rang à la fois, vous pouvez mettre ceci dans votre CSS :

Code:

/*Titres des rangs*/
.rangtitre {
  propriété: valeur;
}

Pour personnaliser tous les images de rang à la fois, vous pouvez mettre ceci dans votre CSS :

Code:

/*Images des rangs*/
.rangimg img {
  propriété: valeur;
}

Quant à personnaliser les images de rang individuellement, vous pouvez mettre ceci dans votre CSS et remplacer le URL par le lien de l'image de rang à modifier :

Code:

.rangimg img[src="URL"] {
  propriété: valeur;
}

---

Partie des rangs dans le reste du forum

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

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

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

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

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

---

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

À plus !

La bête:

Code:

<link href='https://fonts.googleapis.com/css?family=Jim+Nightshade|Metamorphous' rel='stylesheet' type='text/css' /><div style="margin: auto; text-align: center; border: 3px solid #F7C257; width:630px; background-image: url(http://zupimages.net/up/16/15/i03p.png); height: 1150px; overflow: auto;">
<br/>
<div align="center" style="font-size:30px; color: #F7C257;font-family: 'Metamorphous', cursive; text-shadow: 0px 0px 20px #000000 ">Missions en cours</div>
<table style="margin: auto;"><tr><td>
<div align="center" style="font-size:20px; color:#F7C257 ;font-family: 'Metamorphous', cursive; text-shadow: 0px 0px 20px #000000">Nom de la mission</div><br/><div style="border: 3px solid #F7C257;width: 250px; height: 200px ; overflow: auto; position: relative; left: 5px; padding: 5px; background-image: url(http://zupimages.net/up/16/15/13az.jpg) ;text-align: justify; font-size: 12px; color: #3C3C3C;"><b>Description :</b>
<b>Récompense :</b>
<b>Factions concernées :</b>
</div></td><td>
<div align="center" style="font-size:20px; color:#F7C257 ;font-family: 'Metamorphous', cursive; text-shadow: 0px 0px 20px #000000">Nom de la mission</div><br/><div style="border: 3px solid #F7C257;width: 250px; height: 200px; overflow: auto; position: relative; left: 5px; padding: 5px;background-image: url(http://zupimages.net/up/16/15/13az.jpg) ;text-align: justify; font-size: 12px; color: #3C3C3C;"><b>Description :</b>
<b>Récompense :</b>
<b>Factions concernées :</b>
</div></td></tr></table>
<table style="margin: auto;"><tr><td>
<div align="center" style="font-size:20px; color: #F7C257;font-family: 'Metamorphous', cursive; text-shadow: 0px 0px 20px #000000">Nom de la mission</div><br/><div style="border: 3px solid #F7C257;width: 250px; height: 200px ; overflow: auto; position: relative; left: 5px; padding: 5px; background-image: url(http://zupimages.net/up/16/15/13az.jpg) ;text-align: justify; font-size: 12px; color: #3C3C3C;"><b>Description :</b>
<b>Récompense :</b>
<b>Factions concernées :</b>
</div></td><td>
<div align="center" style="font-size:20px; color: #F7C257;font-family: 'Metamorphous', cursive; text-shadow: 0px 0px 20px #000000">Nom de la mission</div><br/><div style="border: 3px solid #F7C257;width: 250px; height: 200px; overflow: auto; position: relative; left: 5px; padding: 5px; background-image: url(http://zupimages.net/up/16/15/13az.jpg) ;text-align: justify; font-size: 12px; color: #3C3C3C;"><b>Description :</b>
<b>Récompense :</b>
<b>Factions concernées :</b>
</div></td></tr></table>
<br/>
<div align="center" style="font-size:30px; color: #F7C257;font-family: 'Metamorphous', cursive; text-shadow: 0px 0px 20px #000000 ">Missions à venir</div>
<table style="margin: auto;"><tr><td>
<div align="center" style="font-size:20px; color:#F7C257 ;font-family: 'Metamorphous', cursive; text-shadow: 0px 0px 20px #000000">Nom de la mission</div><br/><div style="border: 3px solid #F7C257;width: 250px; height: 200px; overflow: auto; position: relative; left: 5px; padding: 5px; background-image: url(http://zupimages.net/up/16/15/13az.jpg) ;text-align: justify; font-size: 12px; color: #3C3C3C;"><b>Description :</b>
<b>Récompense :</b>
<b>Factions concernées :</b>
</div></td><td>
<div align="center" style="font-size:20px; color:#F7C257 ;font-family: 'Metamorphous', cursive; text-shadow: 0px 0px 20px #000000">Nom de la mission</div><br/><div style="border: 3px solid #F7C257;width: 250px; height: 200px; overflow: auto; position: relative; left: 5px; padding: 5px; background-image: url(http://zupimages.net/up/16/15/13az.jpg) ;text-align: justify; font-size: 12px; color: #3C3C3C;"><b>Description :</b>
<b>Récompense :</b>
<b>Factions concernées :</b>
</div></td></tr></table>
<br/>
<div align="center" style="font-size:15px; color: #F7C257;font-family: 'Metamorphous', cursive; text-shadow: 0px 0px 20px #000000 "><a href="http://www.never-utopia.com/"><@> Kira pour Never Utopia</a></div></div>

Aperçu:

Code:

<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css' /><div style="margin: auto; text-align: center; background-color:#D1D1D1; width:400px; text-transform:uppercase; font-size:11px; font-family: 'Roboto Condensed', sans-serif; color:#1F1F1F;">Tes partenaires de rp ici (ou une petite citation)</div><div style="margin: auto; text-align: center; background-color:#ffffff; width:480px; font-family: 'Roboto Condensed', sans-serif;"><img src="http://zupimages.net/up/16/14/yndn.png" width="480px" /><div style="text-transform:uppercase; color: #E2E2E2; font-size:25px; margin-top:-18px;">Le titre de ton rp</div><div style="padding:20px 30px; text-align:justify; color:#1F1F1F;"> Le contenu de votre message RPG vient ici, avec vos actions et vos dialogues. Faites vivre votre personnage, il vous en sera reconnaissant!</div></div><div style="margin: auto; text-align: center; background-color:#D1D1D1; width:400px; text-transform:uppercase; font-size:11px; font-family: 'Roboto Condensed', sans-serif; color:#444444;">GOTHEIM sur <a href="http://www.never-utopia.com/">Never Utopia</a> </div>

Code:

<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css' /><div style="width: 300px; margin: auto;"><div style="width: 300px; height: 150px; border-radius: 15px 35px 15px 35px; background-image: url('http://i86.servimg.com/u/f86/18/39/18/54/300x1511.jpg'); font-size: 7px;"><a href="http://www.never-utopia.com/" style="font-weight: bold; text-decoration: none; color:#31353A;" />Jasmée sur Never-Utopia</a></div><div style="margin-top: 2px; border-top: solid 3px #FF6600; text-align: center; font-family: 'Rock Salt'; font-size:13px; color:black;">Lorem ipsum <span style="font-weight: bold; text-transform: uppercase; color: #FF6600;">dolor</span> sit amet...</div></div>

Rendu en image:

Code:

<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){

    if(typeof(_atc) == "undefined") {
        _atc = { };
    }
   
    _atc.cwait = 0;
    $('.addthis_button').mouseup(function(){
        if ($('#at15s').css('display') == 'block') {
            addthis_close();
        }
    });
});

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
       
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
         {
            if( $(this).is(":visible") )
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            }
            else
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
         });
        }
    }
    catch(e) { }
   
   return false;
};

//]]>
</script>

<link href='https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web|Yanone+Kaffeesatz|Roboto' rel='stylesheet' type='text/css' />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="left" valign="middle">
         <span class="nav">
         <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
         <!-- END switch_user_authpost -->
         <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
         <!-- END switch_user_authreply -->
         </span>
      </td>   
          </tr>
          <tr>
      <td class="nav" valign="middle" width="100%">
      </td>
   </tr>
</table>

<table class="affichagesujet" width="100%" border="0" cellspacing="0" cellpadding="0" >
   <tr>
             <td colspan="3">
                     <h1 class="sujettitre">
                          {TOPIC_TITLE}<br />
           <span class="nav" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                      <a class="nav" href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a>
                      <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}" itemprop="url"><span itemprop="title">{L_ALBUM}</span></a>-->
                      {NAV_CAT_DESC_SECOND}
                    </span>
                     </h1>
      </td>
   </tr>
   <!-- BEGIN topicpagination -->
   <tr>
             <td colspan="2" align="right" valign="top">
                     <div class="paginationsujet">{PAGINATION}</div>
             </td>
   </tr>
   <!-- END topicpagination -->
   {POLL_DISPLAY}
   <!-- BEGIN postrow -->
   <!-- BEGIN hidden -->
   <tr>
      <td class="postdetails" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
   </tr>
   <!-- END hidden -->
   <!-- BEGIN displayed -->
   <tr class="post--{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}">
          <td valign="top">
            <div class="profilmodif">
              <h1 class="pseudo">{postrow.displayed.POSTER_NAME}</h1>
              <div class="profavatar">
                <div class="infos">
                    <!-- BEGIN profile_field -->
                    {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}
                    <!-- END profile_field -->
                    {postrow.displayed.POSTER_RPG}
                </div>
                <div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div>
              </div>
              <div class="rang">
                {postrow.displayed.POSTER_RANK}<br />
                {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
                <!-- BEGIN contact_field -->{postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
              </div>
            </div>
            </td>
                <td valign="top" colspan="2">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr class="heureedit">
                                     <td class="heureedit">
                                          <div class="on">{postrow.displayed.ONLINE_IMG}</div>
                                          <div class="heure">{postrow.displayed.POST_DATE}</div>
                                     </td>
            </tr>
            <tr>
               <td colspan="2">
                  <!-- BEGIN switch_vote_active -->
                  <div class="vote gensmall">
                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                     <!-- END switch_vote -->

                     <!-- BEGIN switch_bar -->
                     <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                        <!-- BEGIN switch_vote_plus -->
                        <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                        <!-- END switch_vote_plus -->

                        <!-- BEGIN switch_vote_minus -->
                        <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                        <!-- END switch_vote_minus -->
                     </div>
                     <!-- END switch_bar -->

                     <!-- BEGIN switch_no_bar -->
                     <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                     <!-- END switch_no_bar -->

                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                     <!-- END switch_vote -->
                  </div>
                  <!-- END switch_vote_active -->

                  <div class="affichmess">
                                                  <div class="imagesedit">{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}</div>
                    <div>{postrow.displayed.MESSAGE}</div>

                     <!-- BEGIN switch_attachments -->
                     <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                           <!-- BEGIN switch_post_attachments -->
                           <dl class="file">
                              <dt>
                                 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                                 <!-- BEGIN switch_dl_att -->
                                 <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_dl_att -->

                                 <!-- BEGIN switch_no_dl_att -->
                                 {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_no_dl_att -->
                              </dt>

                              <!-- BEGIN switch_no_comment -->
                              <dd>
                                 <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                              </dd>
                              <!-- END switch_no_comment -->

                              <!-- BEGIN switch_no_dl_att -->
                              <dd>
                                 <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                              </dd>
                              <!-- END switch_no_dl_att -->

                              <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                           </dl>
                           <!-- END switch_post_attachments -->
                        </dd>
                     </dl>
                     <!-- END switch_attachments -->

                  </div>
                                  </td>
                          </tr>
                  </table>
          </td>
        </tr>
        <!-- BEGIN switch_signature -->
     <tr>
          <td colspan="3">
            <div class="signmss">
              {postrow.displayed.SIGNATURE}
            </div>
          </td>
     </tr>
        <!-- END switch_signature -->
   <!-- BEGIN first_post_br -->
</table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <!-- END first_post_br -->
   <!-- END displayed -->
   <!-- END postrow -->
   <!-- BEGIN no_post -->
   <tr align="center">
      <td colspan="3" height="28">
         <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
   </tr>
   <!-- END no_post -->
</table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td class="paginationsujet" valign="top" {COLSPAN_PAGINATION}>{PAGE_NUMBER}</td>
      <!-- BEGIN topicpagination -->
      <td class="paginationsujet" align="right" valign="top" >{PAGINATION}</td>
      <!-- END topicpagination -->
   </tr>
   <!-- BEGIN switch_user_logged_in -->
   <!-- BEGIN watchtopic -->
   <tr>
      <td class="paginationsujet" colspan="2" align="right" valign="top">{S_WATCH_TOPIC}</td>
   </tr>
   <!-- END watchtopic -->
   <!-- END switch_user_logged_in -->
</table>

<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td colspan="2" align="center">
         <!-- BEGIN switch_user_logged_in -->
         <a name="quickreply"></a>
         {QUICK_REPLY_FORM}<br />
         <!-- END switch_user_logged_in -->
      </td>
   </tr>
   <tr>
      <td style="margin:0; padding: 0;" colspan="2">
         <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
            <tbody>
      <!-- BEGIN show_permissions -->
      <tr>
         <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
         <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
      </tr>
      <!-- END show_permissions -->
   </tbody>
         </table>
      </td>
   </tr>
</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
         <span class="nav">
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->
         </span>
      </td>

      <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>

      <!-- BEGIN moderation_panel -->
      <td align="center">
         <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
      </td>
      <!-- END moderation_panel -->
   </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
         <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />

            <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
            <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

            <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
         </form>
      </td>
   </tr>
</table>
<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

Code:

/*Affichage des sujets par Cheshire Cat*/
/*Message du posteur*/
.affichagesujet{
  margin:10px 0;
  background-color:#BAC49C;
}
.sujettitre{
  margin:0 0 10px;
  padding:5px;
  background-color:#E2DFED;
  color:#8665AB;
  font-family: 'Amaranth', sans-serif;
  font-size:24px;
  text-transform:uppercase;
  text-align:center;
  font-weight:normal;
  letter-spacing:2px;
}
.sujettitre .nav{
  font-size:0;
}
.sujettitre .nav a{
  color:#8665AB!important;
  font-size:12px;
  font-weight:normal;
}
.sujettitre .nav a:not(:last-of-type):after{
  content:"-";
  margin:0 2px;
}
.paginationsujet{
  font-size:12px;
  padding:0 10px;
  color:#504254;
}
.paginationsujet a{
  color:#504254!important;
}
.paginationsujet img{
  height:10px;
  opacity:0.8;
}
.heureedit{
  height:20px;
  padding:10px 10px 0 0;
}
.on{
  float:left;
}
.heure{
  float:right;
  font-family: 'Titillium Web', sans-serif;
  font-size:12px;
  font-weight:bold;
  color:#794F82;
  text-transform:uppercase;
}
.imagesedit{
  text-align:right;
}
.imagesedit img{
  height:20px;
  opacity:0.8;
  margin:0 3px;
}
.affichmess{
  width:480px;
  min-height:357px;
  margin:10px;
  padding:10px;
  background-color:#929a79;
  font-size:12px;
  color:#504254;
  text-align:justify;
  font-family:Roboto;
  line-height:18px;
}
.signmss{
  min-height:100px;
  max-height:200px;
  margin:0 10px 10px;
  padding:10px;
  color:#504254;
  background-color:#E2DFED;
  overflow:auto;
  font-size:12px;
  font-family: 'Roboto', sans-serif;
}
.signmss br:first-of-type,
.signmss br:nth-of-type(2){
  display:none;
}
/*Profil du posteur*/
.profilmodif{
  z-index:1;
  width:200px;
  background-color:#E2DFED;
  margin:0 0 10px 10px;
}
.pseudo{
  margin:0;
  padding:7px 0 5px;
  text-align:center;
  font-family:Yanone Kaffeesatz;
  font-size:23px;
}
.pseudo strong{
  font-weight:normal;
}
.pseudo a{
  text-decoration:none !important;
}
.pseudo a:hover{
  text-decoration:none !important;
}
.profavatar{
  position:relative;
  width:200px;
  height:320px;
  overflow:hidden;
}
.profil_avatar img{
  position:absolute;
  top:-15px;
  left:0px;
  height:320px;
  width:200px;
  margin-top:15px;
  transition: all 600ms;
}
.profavatar:hover .profil_avatar img {
  -webkit-transform:translatex(-200px);
  transform:translatex(-200px);
}
.infos{
  position:absolute;
  top:0px;
  left:0px;
  width:190px;
  height:310px;
  overflow:auto;
  padding:5px;
  text-align:left;
  letter-spacing:0px;
  color:#504254;
  font-size:12px;
  font-family: 'Roboto', sans-serif;
  background-color:#f4ecea;
}
.rang{
  overflow:hidden;
  color:#504254;
  text-align:center;
  font-size:20px;
  letter-spacing:-2px;
  font-family: 'Titillium Web', sans-serif;
}
.rang img{
  height:20px;
  opacity:0.8;
  margin:0 2px;
}

/* empeche certaines infos du profil de depasser*/
.profavatar .infos img,
.profavatar .infos textarea {
  max-width: 100%;
  box-sizing: border-box;
}

Bloc de connexion rapide verte

Il s'agit du bloc de connexion. La partie image à gauche est un lien version l'inscription.

Template

Connexion rapide en haut

Code:

<!-- BEGIN switch_user_login_form_header -->
       REMPLACEZ TOUT LE CODE ENTRE LES 2 PAR LE HTML PLUS BAS
<!-- END switch_user_login_form_header -->

Connexion rapide en bas

Code:

<!-- BEGIN switch_user_login_form_footer -->
       REMPLACEZ TOUT LE CODE ENTRE LES 2 PAR LE HTML PLUS BAS
<!-- END switch_user_login_form_footer -->

Le HTML

Code:

<!-- DEBUT LS CONNEXION RAPIDE VERTE NEVER UTOPIA -->

<!-- Ajout de la police -->
<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>

<div class="cnxl-bloc">
    <form class="cnxl-form" action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <!-- Bloc gauche - INSCRIPTION-->
       <a class="cnxl-inscription" href="/register" title="S'inscrire !">
           <img src="http://image.noelshack.com/fichiers/2016/09/1457207134-decoration.png" alt="Rejoindre le forum" />
       </a>

         <!-- Bloc milieu - LES CHAMPS A REMPLIR-->
        <div class="cnxl-input-bloc">
            <input type="text" name="username" placeholder="Pseudo" />
            <input type="password" name="password" placeholder="Mot de passe" />
        </div>

         <!-- Bloc droit - BOUTON CONNEXION-->
         <div class="cnxl-submit-bloc">
            <input type="submit" name="login" value="Connexion" />
        </div>

        <!-- En bas-->
        <div>
            <input class="radio" type="checkbox" name="autologin" id="autologin" {AUTOLOGIN_CHECKED} />
            <label for="autologin">Connexion automatique</label>
        </div>
    </form>
    <a href="/profile?mode=sendpassword" title="Récupérer son mot de passe">Mot de passe oublié ?</a>
</div>
<!-- DEBUT LS CONNEXION RAPIDE VERTE NEVER UTOPIA -->

Spoiler:

CSS

Code:

/*
 * Libre service bloc de connexion rapide verte
 * NEVER UTOPIA
 */

 /* Bloc qui entoure tout */
 .cnxl-bloc {
     margin: 20px auto;

     font-family: 'Playfair Display', serif;
     text-align: center;
     font-size: 15px;
     color: #484848;
 }

 /* Aligner les 3 blocs */
 .cnxl-submit-bloc,
 .cnxl-inscription,
 .cnxl-input-bloc {
     display: inline-block;
     vertical-align: middle;
 }

 /* Style commun pour tous les champs */
 .cnxl-form input {
     padding: 10px;
     border: none;
     font-family: inherit;
     font-size: 15px;
     outline: none;
 }

 /*
  * Décoration à gauche
  * Inscription
  */

 .cnxl-inscription {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     border: 2px solid #E5DB84;
     padding: 8px;
 }

 .cnxl-inscription img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 50%;
 }


 /*
  * Champs à remplir au centre
  */

 .cnxl-input-bloc {
     margin: 0 20px;
     width: 200px;
     border-radius: 5px;
     box-shadow: 0 0 0 2px #E5DB84;
     overflow: hidden;
     padding: 0 5px; /* espace entre le bord et le trait des input */
     background: #FFFFFF;
 }

 .cnxl-input-bloc input {
     color: black;
     box-sizing: border-box;
     display: block;
     width: 100%;
     border-bottom: 1px solid #E5DB84; /* bordure entre les input */
     box-shadow: 0 0 0 100px #ffffff inset; /* couleur de fond des input */
 }
 .cnxl-input-bloc input:last-of-type {
     border: none;
 }


 /*
  * Connexion à droite
  */

 /* Bouton de connexion */
 .cnxl-submit-bloc input {
     background: #E5DB84;
     border-radius: 3px;
     cursor: pointer;
     transition: all 300ms ease-out;
 }

 /* Bouton de connexion au survol */
 .cnxl-submit-bloc input:hover {
     background: #ede390;
 }

 /*
  * Zone en bas
  */

 .cnxl-form label {
     cursor: pointer;
 }

 /* Liens (Mot de passe oublié) */
 .cnxl-bloc a {
     font-size: 10px;
     text-decoration: none!important;
     color: #766e6e;
     text-decoration: none;
     transition: all 300ms ease-out;
 }

 /* Liens au survol (Mot de passe oublié) */
 .cnxl-bloc a:hover {
     color: #a79d46;
 }

 /*
  * Fin libre service Connexion rapide verte
  * Never Utopia
  */

En cas de problème, merci de vous rendre dans la section "Problème avec mon code" ou "Personnalisation"  

Merci de penser à créditer Never Utopia, avec un lien vers le forum, merci  

Aperçu:

Les Codes

Code:

<link href="http://www.aht.li/2840022/Fiche_Basique.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet' type='text/css' />
<div class="title" style="width:500px;"><div class="block-title-on" style="width: 500px;  height: 208px;"><a href="LIEN VERS LA PREMIÈRE PAGE DU RP"><img src="LIEN IMAGE EN 500*208" style="width:500px; height:208px;"/></a><div class="block-title-under" style="vertical-align:middle; text-align:center; font-variant:small-caps; padding-top:30px;"><span style="text-shadow: 2px 2px 2px #766344; font-family: 'Mr Dafoe', cursive; font-size: 40px;">TITRE DU RP</span><div class="img-rp" style="letter-spacing : 15px;">
<img src="LIEN IMAGE 100*100 GAUCHE" width="100px" height="100px"/> <img src="LIEN IMAGE 100*100 DROITE" width="100px" height="100px"/></div>Ft JOUEUR UN & JOUEUR DEUX</div></div></div>
<div class="rp" style="width:540px;margin-top:5px;"><div class="rp-txt" style="height:700px;  color:black;  border-bottom:8px solid black;  border-left:1px solid black; box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); background-color:#306B17; "><div class="rp-scroll">
--------------------------------> CONTENU DE VOTRE RP <-----------------------------
</div></div> <span style="font-size:10px; color:black;">@ Jodie Cravery sur <a href="http://www.never-utopia.com">Never Utopia</a></span></div>

Code:

<link href='http://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet' type='text/css' />
<div class="title"><div class="block-title-on"><a href="LIEN VERS LA PREMI7RE PAGE DU RP"><img src="LIEN IMAGE EN 500*208"/></a><div class="block-title-under"><span style="text-shadow: 2px 2px 2px #766344; font-family: 'Mr Dafoe', cursive; font-size: 40px;">TITRE DU RP</span><div class="img-rp">
<img src="LIEN IMAGE 100*100 GAUCHE" width="100px" height="100px"/> <img src="LIEN IMAGE 100*100 DROITE" width="100px" height="100px"/></div>Ft JOUEUR UN & JOUEUR DEUX</div></div></div>
<div class="rp" style="margin-top:5px;"><div class="rp-txt" style="color:black; background-color:#306B17;"><div class="rp-scroll">
--------------------------------> CONTENU DE VOTRE RP <-----------------------------
</div></div> <span style="font-size:10px; color:black;">@ Jodie Cravery sur <a href="http://www.never-utopia.com">Never Utopia</a></span></div>

Code:

.title {
  margin:auto; /*centrage du bloc titre et image*/
    width:500px; /*largeur du bloc titre et image*/
}

.block-title-on
{
   -webkit-transition: all 1.5s ease; /*vitesse de transition*/
   transition: all 1.5s ease; /*vitesse de transition*/
   display: block;
   width: 500px; /*largeur du bloc titre et image*/
   height: 208px; /*hauteur du bloc titre et image*/
   position: relative;
  opacity: 1.0; /*opacité de base de l'image */
  filter: alpha(opacity=100);  /*opacité de base de l'image */
  filter: grayscale(0); /*opacité de base de l'image */
        -webkit-filter: grayscale(0); /*image en couleurs*/
}

.block-title-on:hover a img {
     display: block;
   -webkit-transition: all 1.5s ease; /*vitesse de transition*/
   transition: all 1.5s ease; /*vitesse de transition*/
   opacity: 0.4; /*opacité de l'image au survol*/
    filter: alpha(opacity=40);   /*opacité de l'image au survol*/
  width:500px; /*largeur de l'image au survol */
  height:208px;  /*hauteur de l'image au survol */
   filter: grayscale(1); /*passage de l'image en noir et blanc*/
   -webkit-filter: grayscale(1); /*passage de l'image en noir et blanc*/
border-radius: 1px; /*diminution de l'arrondi au survol*/
}

.block-title-on a img {
     display: block;
     position: absolute;
    left: 0; right: 0;
  top: 0; bottom: 0;
  -webkit-transition: all 1.5s ease; /*vitesse de transition*/
  transition: all 1.5s ease;  /*vitesse de transition*/
   width:500px; /*largeur de base de l'image */
  height:208px; /*hauteur de base de l'image */
border-radius: 50px; /* arrondi de base de l'image*/
border-top-left-radius: 15px; /* arrondi de base de l'image haut gauche*/
border-bottom-right-radius: 15px; /* arrondi de base de l'image bas droite*/
}

.block-title-under {
    vertical-align:middle; /*centrage vertical du texte*/
text-align:center;  /*centrage du texte */
font-variant:small-caps; /*passage en petites majuscules */
  padding-top:30px; /*écart avec le haut du bloc titre*/
 }

.block-title-under img {
   width:100px; /*largeur des petites images */
  height:100p ; /* hauteur des petites imaages*/
border-radius: 50px; /*arrondi des petites images */
border-top-left-radius: 15px;/*arrondi des petites images haut gauche */
border-bottom-right-radius: 15px;x;/*arrondi des petites images bas droite*/
}

.img-rp {
  letter-spacing : 15px;} /*espace entre les deux images */

.rp {
  margin:auto; /*centrage du bloc rp*/
  width:540px; /*largeur du bloc rp*/
  padding-left:10px;
  margin-bottom:20px;
}

.rp-txt {
  height:700px; /*hauteur du bloc rp*/
  overflow:auto; /*barre de défilement automatique*/
border-top-left-radius: 2px; /*arrondi haut gauche */
border-top-right-radius: 20px; /*arrondi haut droite */
border-bottom-right-radius: 100px;/*arrondi bas droite */
border-bottom-left-radius: 2px; /*arrondi bas gauche */
  padding:10px 25px 15px 10px;
  border-bottom:8px solid black; /*bordure bas */
  border-left:1px solid black; /*bordure gauche*/
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); /*ombre du bloc texte*/
  direction:rtl; /*NE PAS MODIFIER*/
  text-align:justify; /*NE PAS MODIFIER*/
}

.rp-scroll {
  direction:ltr; /*NE PAS MODIFIER*/
    text-align:justify; /*NE PAS MODIFIER*/
}

.rp-txt::-webkit-scrollbar {
    width: 3px; /*largeur de la barre de défilement*/
}
 
.rp-txt::-webkit-scrollbar-track {
          box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  background-color:black; /*couleur de la barre de défilement*/
}
 
.rp-txt::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  background-color:#DDDDDD; /*couleur du rectangle dans la barre de défilement*/
}

Code:

<link href="http://www.aht.li/2840035/Fiche_Complete.css" rel="stylesheet" type="text/css" />

Code:

http://i.imgur.com/J3kEMuF.png

Bloc de connexion rapide

Il s'agit du bloc noir

Template

Connexion rapide en haut

Code:

<!-- BEGIN switch_user_login_form_header -->
       REMPLACEZ TOUT LE CODE ENTRE LES 2 PAR LE HTML PLUS BAS
<!-- END switch_user_login_form_header -->

Connexion rapide en bas

Code:

<!-- BEGIN switch_user_login_form_footer -->
       REMPLACEZ TOUT LE CODE ENTRE LES 2 PAR LE HTML PLUS BAS
<!-- END switch_user_login_form_footer -->

Le HTML

Code:

<!-- DEBUT LS CONNEXION RAPIDE NEVER UTOPIA -->

<!-- Ajout de la police -->
<link href='https://fonts.googleapis.com/css?family=Arapey' rel='stylesheet' type='text/css' />

<div class="connexion-bloc">
    <form class="connexion-form" action="{S_LOGIN_ACTION}" method="post" name="form_login">
        <div><input type="text" name="username" placeholder="Nom d'utilisateur"/></div>
        <div><input type="password" name="password" placeholder="Mot de passe"/></div>
        <div>
<input class="radio" type="checkbox" name="autologin" id="autologin" {AUTOLOGIN_CHECKED} />
<label for="autologin">Connexion automatique</label>
        </div>
        <input type="submit" name="login" value="Connexion" />
    </form><!-- fermeture du bloc du formulaire -->
    <a href="/profile?mode=sendpassword" title="Récupérer son mot de passe">Mot de passe oublié ?</a>
</div>
<!-- DEBUT LS CONNEXION RAPIDE NEVER UTOPIA -->

Spoiler:

CSS

Code:

/*
 * Libre service bloc de connexion rapide
 * NEVER UTOPIA
 */

/* Bloc qui entoure tout */
.connexion-bloc {
    margin: 20px auto;
    padding: 20px 0;

    background: #040004;

    font-family: 'Arapey', serif;
    color: #ffffff;
    text-align: center;

    font-size: 15px;
}

/* Formulaire */
.connexion-form {
    width: 50%;
    min-width: 190px;

    margin: auto;
    margin-bottom: 30px;

    padding: 20px;
    padding-top: 30px;

    position: relative;
    border: 2px solid #FA023C;
}

/* Les champs */
.connexion-form input {
    padding: 10px 20px;
    margin-bottom: 15px;

    background: #ffffff;
    border: none;

    font-family: inherit;
    font-size: 15px;

    outline: none;
}

.connexion-form label {
    cursor: pointer;
}

/* Bouton de connexion */
.connexion-form input[type="submit"] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);

    background: #FA023C;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 16px;

    padding: 10px 18px;
    margin: 0;

    cursor: pointer;
    transition: all 1000ms;
}

/* Bouton de connexion au survol */
.connexion-form input[type="submit"]:hover {
    color: #FA023C;
    background: #262323;
}

/* Liens (Mot de passe oublié) */
.connexion-bloc a {
    text-decoration: none!important;
    color: #766e6e;
    text-decoration: none;
    transition: all 300ms ease-out;
}

/* Liens au survol (Mot de passe oublié) */
.connexion-bloc a:hover {
    color: #FA023C;
}
/*
 * Fin libre service Connexion rapide
 * Never Utopia
 */

En cas de problème, merci de vous rendre dans la section "[url=/f177-probleme-avec-mon-code]Problème avec mon code[/url]" ou "[url=/f75-personnalisations]Personnalisation[/url]"  

Merci de penser à créditer Never Utopia, avec un lien vers le forum, merci  

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>


Code:

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

Code:

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

Code:

<iframe src="Le_lien_de_ta_page_html" frameborder="0" scrolling="no" style="margin:auto; width: 550px; height: 900px;"></iframe>

Spoiler:

Code:

<link href='http://fonts.googleapis.com/css?family=Sacramento' rel='stylesheet' type='text/css' /><div style="width: 400px; font-family: 'Sacramento', cursive; font-size: 50px; text-transform: lowercase; line-height: 100%; text-align: center; margin: auto; margin-top: -20px; margin-bottom: -10px; color: #fff; text-shadow: -1px 0 #96be36, 0 1px #96be36, 1px 0 #96be36, 0 -1px #96be36;">NOM & PRENOM</div><div style="margin: auto; width: 400px; height: 5px; background-color: #96be36"></div><div style="margin: auto; height: 1px; width: 400px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><table cellpadding="0" cellspacing="0" style="margin: auto; width: 400px;"><tr><td><div style="width: 249px; height: 250px; background-image: url(IMAGE 249*250)" /></div></td><td><div style="width: 1px"></div></td><td><div style="width: 150px; height: 250px; background-image: url(IMAGE 150*250)" /></div></td></tr></table><div style="margin: auto; height: 1px; width: 400px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style="margin: auto; width: 400px; height: 5px; background-color: #96be36"></div><div style="margin: auto; height: 1px; width: 400px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style="margin: auto; width: 400px; height: 60px; text-align: center; background-image: url(http://www.shizoo-design.de/stuff/patterns/335.jpg)" />
<a href="http://www.never-utopia.com/" style="font-size: 10px;">Zuiichi (c) Never Utopia</a></div>

Code:

<link href='http://fonts.googleapis.com/css?family=Sacramento' rel='stylesheet' type='text/css' />
<div style="text-align: center;"><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style=" height: 5px; background-color: #96be36"></div><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div>
<img src="GIF OU IMAGE 500*200" style="border: 1px solid #96be36" />
<div style="margin: auto; width: 400px; font-family: 'Sacramento', cursive; font-size: 50px; text-transform: lowercase; line-height: 100%; text-align: center; margin-top: -20px; margin-bottom: -10px; color: #fff; text-shadow: -1px 0 #96be36, 0 1px #96be36, 1px 0 #96be36, 0 -1px #96be36; text-align: center;">TITRE</div><div style="margin: auto; width: 400px; height: 5px; background-color: #96be36"></div>


<div style="margin:auto;border-left: 5px solid #96be36; border-right: 5px solid #96be36; background-color: white; width: 440px;"><table width="100%"><tr><td align="middle" width="120px" style="padding: 3px;"><img src="IMAGE 100*100" /></td><td valign="top"style="border-left: 1px dotted #96be36; padding: 3px; text-align: left;"><span style="font-family: 'times new roman'; color: black;">NOM PRENOM</span>
<div style="overflow: auto; height: 100px; padding-right: 5px; padding-left: 3px; color:grey; size: 11px;">
citation ou titre de lien
Description du lien, description du lien, description du lien description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien.
</div></td></tr></table></div>

<div style="margin:auto;border-left: 5px solid #96be36; border-right: 5px solid #96be36; background-color: white; width: 440px;"><table width="100%"><tr><td align="middle" width="120px" style="padding: 3px;"><img src="IMAGE 100*100" /></td><td valign="top"style="border-left: 1px dotted #96be36; padding: 3px; text-align: left;"><span style="font-family: 'times new roman'; color: black;">NOM PRENOM</span>
<div style="overflow: auto; height: 100px; padding-right: 5px; padding-left: 3px; color:grey; size: 11px;">
citation ou titre de lien
Description du lien, description du lien, description du lien description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien.
</div></td></tr></table></div>

<div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style="height: 5px; background-color: #96be36"></div><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div>
</div>

Code:

<div style="margin:auto;border-left: 5px solid #96be36; border-right: 5px solid #96be36; background-color: white; width: 440px;"><table width="100%"><tr><td align="middle" width="120px" style="padding: 3px;"><img src="IMAGE 100*100" /></td><td valign="top"style="border-left: 1px dotted #96be36; padding: 3px; text-align: left;"><span style="font-family: 'times new roman'; color: black;">NOM PRENOM</span>
<div style="overflow: auto; height: 100px; padding-right: 5px; padding-left: 3px; color:grey; size: 11px;">
citation ou titre de lien
Description du lien, description du lien, description du lien description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien.
</div></td></tr></table></div>

Fiche officielle Démons

A quoi ça ressembleuuu ?
Voilà l'aperçu : Ce qu'on fait est qu'on crée une mise en page qui va aller "par-dessus" la colone du profil et qui va aller le cacher avec votre faux profil. Du coup, dépendement de la largeur/hauteur de votre propre profil, vous devrez sans doute modifier un peu le code pour qu'il corresponde à votre forum.

Le Code

Code:

<table style="position: relative; z-index: 15; margin-left:-210px; margin-top:-37px; width:770px"><tr><td style="vertical-align: top; height: 400px;"><img style="border:4px solid #BB9600;" src="http://i66.tinypic.com/14iz7te.png"/></td><td rowspan="2"; valign="top"><div style="border-right:4px solid #BB9600; padding: 10px; height:800px; overflow: scroll"><span style="font-family: Time New Roman; font-size:34px; letter-spacing: -3px;font-variant: small-caps; text-shadow: 3px 3px 3px grey; color: #BB9600;">Titre du Rp.</span><br/>
<p style="text-align: justify;">
TEXTE DU RP TEXTE DU RP TEXTE DU RP TEXTE DU RP
</p>
</div></td></tr><tr><td style="vertical-align: top; width: 200px; height: 400px; color: #BB9600;">
<span style="font-size:200%">Prénom<br/>NOM</span><br/><span style="font-size:100%">
<p align="justify">âge, civilités etc<br/>taille ~poids<br/><br/><br/>
Petite bio jolie pour ceux qui aime ça, ou bien compétences et statistiques quand vous en avez. Il y a largement la place de mettre du texte comme vous voulez.<br/><br/></p></span>
</td></tr></table>
<p style="text-align:right";><strong>Réponse attendue pour le XX-XX-XX au plus tard</strong></p>
<div style="texte-align:center; color:#cccccc; font-size:75%;">Code par Elocha sur <a href="url=http://www.never-utopia.com/">Nerver-Utopia</a></div>

Code:

<table style="margin-right:-210px; margin-top:-40px; width:800px"><tr><td rowspan="2"; valign="top"><div style="border-right:4px solid #BB9600; padding: 10px; height:800px; overflow: scroll"><span style="font-family: Time New Roman; font-size:34px; letter-spacing: -3px;font-variant: small-caps; text-shadow: 3px 3px 3px grey; color: #BB9600;">Titre du Rp.</span><br/>
  <p style="text-align: justify;">
TEXT Du RPTEXT Du RP TEXT Du RP TEXT Du RP TEXT Du RP TEXT Du RP TEXT Du RP
  </p>
</div></td>
  <td style="height: 400px; vertical-align: top;"><img style="border:4px solid #BB9600;" src="http://i66.tinypic.com/14iz7te.png"/></td></tr><tr><td style="height: 400px; width: 200px; vertical-align: top; color: #BB9600;"><span style="font-size:200%">Prénom<br/>NOM</span><br/><span style="font-size:100%">
  <p style="text-align: justify;">âge, civilités etc<br/>taille ~poids<br/><br/><br/>
Petite bio jolie pour ceux qui aime ça, ou bien compétences et statistiques quand vous en avez. Il y a largement la place de mettre du texte comme vous voulez.<br/><br/></p></span>
  </td></tr></table>
  <p style="text-align:right; font-size:100%;">Réponse attendue pour le XX-XX-XX au plus tard</p>
<div style="texte-align:center; color:#cccccc; font-size:75%;">Code par Elocha sur <a href="url=http://www.never-utopia.com/">Nerver-Utopia</a></div>

Usage

• Il faudra jouer sur les positions en début de code ainsi que sur la largeur des colonnes pour bien superposer le profil et le message sur ce que fait le forum normalement.
  
• J'ai gardé deux lignes dans la première colonne parce que, ainsi, je peux gérer la partie basse du profil selon mes besoin séparément de la partie haute (avatar du PNJ).
  
• Pour ceux qui affichent la colonne de profil à droite il suffit d'inverser l'ordre des colonnes dans le code et de changer l'alignement des marges (je vous propose les deux codes).
  
• Sur cette version, les avatars sur ce forum font 200*400 et ne sont pas "resized".
  
• Pour chaque personnage il faut changer l'avatar, la couleur éventuellement, et bien sûr le petit texte de présentation de votre PNJ.
  
• Astuce : les couleurs du cadre sont celle du groupe en fait, ce qui permet aux joueurs d'identifier le PNJ rapidement -et pratiquement inconsciemment-

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>

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>  

Code:

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

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>

Code:

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

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>

Code:

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

Code:

<iframe src="LIEN DE VOTRE PAGE HTML" frameborder="0" scrolling="no" style="width: 660px; height: 533px; display: block; margin: auto;"></iframe>

Code:


.PA_totale {
    position: relative;
    height: 587px;
    width: 900px;
    padding-top: 100px;
    background: url(http://nsa37.casimages.com/img/2015/10/07/15100704212978660.png);
}
.PA_totale > a{
    position: absolute;
    top: 22px; left: 225px;
    color: #A9916F;
    -webkit-transform: rotate(48deg);
    transform: rotate(48deg);
    font-size: 11px;
}
.PA_totale *::-webkit-scrollbar-thumb {
    background: #5E4E39;
}
.PA_totale *::-webkit-scrollbar-track {
 background: #CCBDAB;
}
.PA_totale *::-webkit-scrollbar {
    width: 7px;
}
.cadre_contexte {
    height: 190px;
    width: 815px;
    margin: 35px auto 0;
    position: relative;
    font: 30px 'Kaushan Script';
    color: #CCBDAB;
    text-align: left;
}
.texte_contexte {
    position: absolute;
    height: 150px;
    width: 800px;
    top : 45px; left : 0;
    font: 15px 'Droid Serif';
    color: #DDD3C7;
    overflow: auto;
    text-align: justify;
    padding: 5px;
    -webkit-transition: 1s all;
    transition: 1s all;
}
#texte1{
    opacity: 1;
}
#texte2{
    opacity: 0;
}
#texte2:target{
    opacity: 1;
}
#texte2:target ~ #texte1{
    opacity: 0;
}
.tour_point {
    position: absolute;
    right: -10px;
    top: 50px;
}
.point {
    display: block;
    height: 6px;
    width: 6px;
    background: #CCBDAB;
    border-radius: 10px;
    margin-top: 40px;
}
.cadre_actu{
    height: 90px;
    width: 815px;
    margin: 20px auto 0;
    font: 30px 'Kaushan Script';
    color: #CCBDAB;
    text-align: left;
}
.texte_actu{
    height: 95px;
    width: 800px;
    font: 15px 'Droid Serif';
    margin-top: -5px;
    color: #DDD3C7;
    overflow: auto;
    text-align: justify;
    padding: 5px;
}
.cadre_staff{
    height: 65px;
    width: 790px;
    position: relative;
    top: 70px;
    font: 13px 'Droid Serif';
    color: #CCBDAB
}
.cadre_staff img{
    height: 60px;
    width: 60px;
    margin: 4px 0 0 10px;
}
.cadre_staff span{
    display: inline-block;
    vertical-align: middle;
    height: 60px;
}
.top_site{
    height: 90px;
    width: 235px;
    position: relative;
    top: 80px;
    display: inline-block;
}
.top_site img{
    height: 31px;
    width: 88px;
    margin: 8px 0 0 20px;
}
.musica{
    height: 85px;
    width: 265px;
    position: relative;
    top: 82px; left: 6px;
    display: inline-block;
}
.liens_utiles{
    height: 85px;
    width: 285px;
    position: relative;
    top: 82px;
    display: inline-block;
    text-align: center;
    font: 17px 'Droid Serif';
    overflow: auto;
}
.liens_utiles a{
    display: block;
}

Code:

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Serif|Kaushan+Script" />
<div class="PA_totale">
    <a href="http://www.never-utopia.com/"> (c) Fyraliel </a>    
 <div class="cadre_contexte">
 Contexte  
 <div id="texte2" class="texte_contexte">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam diam arcu, dictum ac dignissim sed, aliquam nec eros. Suspendisse potenti. Praesent ac nisl ac sapien imperdiet aliquam sit amet a mi. Aliquam sodales, nibh sed feugiat semper, mi dui maximus felis, vitae dapibus est dolor non lacus. Vivamus aliquam dui ac tortor ornare euismod. Aliquam sed facilisis est. Morbi id lectus ultrices enim rutrum laoreet. Proin eget lectus scelerisque, sollicitudin justo dapibus, tempus est. Mauris et neque porta, suscipit mi ac, semper tortor. Ut interdum vitae elit laoreet lobortis. Cras dictum mollis eleifend. Sed in elit vel ante semper venenatis sit amet a risus.
 </div>
        
 <div id="texte1" class="texte_contexte">
 Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam licentia crudelitati indulta per suspicionum nebulas aestimati quidam noxii damnabantur. quorum pars necati, alii puniti bonorum multatione actique laribus suis extorres nullo sibi relicto praeter querelas et lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad voluntatem converso cruentam, claudebantur opulentae domus et clarae. Alii nullo quaerente vultus severitate adsimulata patrimonia sua in inmensum extollunt, cultorum ut puta feracium multiplicantes annuos fructus, quae a primo ad ultimum solem se abunde iactitant possidere, ignorantes profecto maiores suos, per quos ita magnitudo Romana porrigitur, non divitiis eluxisse sed per bella saevissima, nec opibus nec victu nec indumentorum vilitate gregariis militibus discrepantes opposita cuncta superasse virtute.
 </div>
        
 <div class="tour_point">
            <a href="#texte1">
 <span class="point">
 </span></a>            <a href="#texte2">
 <span class="point">
 </span></a> 
 </div>
    
 </div>
    
 <div class="cadre_actu">
 Actualité    
 <div class="texte_actu">
 Praesent consectetur nibh quis viverra facilisis. Proin ultricies, dolor mollis molestie accumsan, sapien tellus tincidunt erat, a efficitur nisl justo a metus. Aliquam tempor, est id condimentum commodo, nisl libero feugiat sem, in vehicula felis tortor a risus. Donec egestas lacinia augue vel elementum. Nam accumsan lectus quis arcu fermentum, in blandit risus dignissim. Donec in augue maximus, malesuada tortor ac, convallis orci. Morbi quis vulputate velit, vitae porta lorem. Vestibulum tristique erat eu lectus aliquet, hendrerit tristique sapien lobortis. Pellentesque viverra a quam vel suscipit.
 </div>
 </div>
    
 <div class="cadre_staff">
 <img src="http://ecx.images-amazon.com/images/I/41HvkfoCaRL._AC_SX60_CR,0,0,60,60_.jpg" /> <span>pseudo1</span>    <img src="https://i.vimeocdn.com/portrait/8284582_60x60.jpg" /> <span>pseudo2</span>    <img src="http://fr.web.img5.acsta.net/c_60_60/avatar/FR/1/4/5/Z20111208150552540635541/img/4rclfxgv.ve2.jpg" /> <span>pseudo3</span>    <img src="http://0.gravatar.com/avatar/fa1faaa25e9b175ec5c36991ff82ef1f?s=60&d=identicon&r=G" /> <span>pseudo4</span>        <img src="http://www.eteks.com/coursjava/images/ImageTableau.jpg" /> <span>pseudo5</span>        <img src="http://piglab.fr/site/imgcarre/tafs_0007_batgumfizz.jpg" /> <span>pseudo6</span>    
 </div>
    
 <div class="top_site">
 <a href="http://www.never-utopia.com/"><img src="http://img4.hostingpics.net/pics/213378miniban3.jpg" /></a>    <a href="http://www.never-utopia.com/"><img src="http://img4.hostingpics.net/pics/889072miniban11.gif" /></a>    <a href="http://www.never-utopia.com/"><img src="http://img11.hostingpics.net/pics/852212logo2.gif" /></a>    <a href="http://www.never-utopia.com/"><img src="http://img4.hostingpics.net/pics/120350miniban.jpg" /></a>
 </div>
    
 <div class="musica">
 <iframe style="width: 265px; height: 85px;" ;="" src="//www.youtube.com/embed/8zj-UWmPqzU" allowfullscreen="" frameborder="0">
 </iframe>
 </div>
    
 <div class="liens_utiles">
        <a href="#">Lien 1</a>        <a href="#">Lien 2</a>        <a href="#">Lien 3</a>        <a href="#">Lien 4</a>        <a href="#">Lien 5</a>        <a href="#">Lien 6</a>        <a href="#">Lien 7</a>        <a href="#">Lien 8</a>    
 </div>
</div>

Bonjour / Bonsoir chers amis de Never-Utopia!    

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>

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>

Code:

<link href='https://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css' / /><div style="height: 650px; width: 500px; background: #C78A31; text-align: center;"><img src="http://i21.servimg.com/u/f21/15/03/21/91/banniy10.png" style="margin: 20px 0 0 20px;" /><div style="height: 25px; width: 250px; color: #371605; font-size: 50px; font-family: 'Great Vibes'; margin: 30px 0 0 115px; border-bottom: 1px solid #371605;">Contexte</div><div style="height: 187px; width: 430px; background: #FEFDA5; border: 2px dotted #371605; border-radius: 5px; overflow: auto; text-align: justify; padding: 3px 2px 0 3px; font-family: Time New roman; font-size: 15px; color: #371605; margin: 10px 0 0 35px;">Haec igitur Epicuri non probo, inquam. De cetero vellem equidem aut ipse doctrinis fuisset instructior est enim, quod tibi ita videri necesse est, non satis politus iis artibus, quas qui tenent, eruditi appellantur aut ne deterruisset alios a studiis. quamquam te quidem video minime esse deterritum. Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim super hoc ulla documentorum rata est fides. Haec et huius modi quaedam innumerabilia ultrix facinorum impiorum bonorumque praemiatrix aliquotiens operatur Adrastia atque utinam semper quam vocabulo duplici etiam Nemesim appellamus: ius quoddam sublime numinis efficacis, humanarum mentium opinione lunari circulo superpositum, vel ut definiunt alii, substantialis tutela generali potentia partilibus praesidens fatis, quam theologi veteres fingentes Iustitiae filiam ex abdita quadam aeternitate tradunt omnia despectare terrena.</div><div style="height: 25px; width: 200px; color: #371605; font-size: 50px; font-family: 'Great Vibes'; margin: 30px 0 0 145px; border-bottom: 1px solid #371605;">Statistiques</div><div style="height: 187px; width: 430px; background: #FEFDA5; border: 2px dotted #371605; border-radius: 5px; overflow: auto; text-align: justify; padding: 3px 2px 0 3px; font-family: Time New roman; font-size: 15px; color: #371605; margin: 15px 0 0 35px;">Haec igitur Epicuri non probo, inquam. De cetero vellem equidem aut ipse doctrinis fuisset instructior est enim, quod tibi ita videri necesse est, non satis politus iis artibus, quas qui tenent, eruditi appellantur aut ne deterruisset alios a studiis. quamquam te quidem video minime esse deterritum. Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim super hoc ulla documentorum rata est fides. Haec et huius modi quaedam innumerabilia ultrix facinorum impiorum bonorumque praemiatrix aliquotiens operatur Adrastia atque utinam semper quam vocabulo duplici etiam Nemesim appellamus: ius quoddam sublime numinis efficacis, humanarum mentium opinione lunari circulo superpositum, vel ut definiunt alii, substantialis tutela generali potentia partilibus praesidens fatis, quam theologi veteres fingentes Iustitiae filiam ex abdita quadam aeternitate tradunt omnia despectare terrena.</div><a href="http://www.never-utopia.com/">Fyraliel</a></div>

Titre du Jour

Titre ici

Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Cum saepe multa, tum memini domi in hemicyclio sedentem, ut solebat, cum et ego essem una et pauci admodum familiares, in eum sermonem illum incidere qui tum forte multis erat in ore. Meministi enim profecto, Attice, et eo magis, quod P. Sulpicio utebare multum, cum is tribunus plebis capitali odio a Q. Pompeio, qui tum erat consul, dissideret, quocum coniunctissime et amantissime vixerat, quanta esset hominum vel admiratio vel querella.

Cyprum itidem insulam procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis et Paphus, altera Iovis delubris altera Veneris templo insignis. tanta autem tamque multiplici fertilitate abundat rerum omnium eadem Cyprus ut nullius externi indigens adminiculi indigenis viribus a fundamento ipso carinae ad supremos usque carbasos aedificet onerariam navem omnibusque armamentis instructam mari committat.

   

Titre ici Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Cum saepe multa, tum memini domi in hemicyclio sedentem, ut solebat, cum et ego essem una et pauci admodum familiares, in eum sermonem illum incidere qui tum forte multis erat in ore. Meministi enim profecto, Attice, et eo magis, quod P. Sulpicio utebare multum, cum is tribunus plebis capitali odio a Q. Pompeio, qui tum erat consul, dissideret, quocum coniunctissime et amantissime vixerat, quanta esset hominum vel admiratio vel querella.

Cyprum itidem insulam procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis et Paphus, altera Iovis delubris altera Veneris templo insignis. tanta autem tamque multiplici fertilitate abundat rerum omnium eadem Cyprus ut nullius externi indigens adminiculi indigenis viribus a fundamento ipso carinae ad supremos usque carbasos aedificet onerariam navem omnibusque armamentis instructam mari committat.

News de la Meute Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Cum saepe multa, tum memini domi in hemicyclio sedentem, ut solebat, cum et ego essem una et pauci admodum familiares, in eum sermonem illum incidere qui tum forte multis erat in ore. Meministi enim profecto, Attice, et eo magis, quod P. Sulpicio utebare multum, cum is tribunus plebis capitali odio a Q. Pompeio, qui tum erat consul, dissideret, quocum coniunctissime et amantissime vixerat, quanta esset hominum vel admiratio vel querella.

Cyprum itidem insulam procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis et Paphus, altera Iovis delubris altera Veneris templo insignis. tanta autem tamque multiplici fertilitate abundat rerum omnium eadem Cyprus ut nullius externi indigens adminiculi indigenis viribus a fundamento ipso carinae ad supremos usque carbasos aedificet onerariam navem omnibusque armamentis instructam mari committat

Titre ici Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Cum saepe multa, tum memini domi in hemicyclio sedentem, ut solebat, cum et ego essem una et pauci admodum familiares, in eum sermonem illum incidere qui tum forte multis erat in ore. Meministi enim profecto, Attice, et eo magis, quod P. Sulpicio utebare multum, cum is tribunus plebis capitali odio a Q. Pompeio, qui tum erat consul, dissideret, quocum coniunctissime et amantissime vixerat, quanta esset hominum vel admiratio vel querella.

Cyprum itidem insulam procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis et Paphus, altera Iovis delubris altera Veneris templo insignis. tanta autem tamque multiplici fertilitate abundat rerum omnium eadem Cyprus ut nullius externi indigens adminiculi indigenis viribus a fundamento ipso carinae ad supremos usque carbasos aedificet onerariam navem omnibusque armamentis instructam mari committat.

Rédigé par:
Codage Par Nutop de Never-Utopia.

Code:

<div style="margin: auto; width:660px; background-image: url('http://img12.deviantart.net/0403/i/2016/113/4/f/streaked_watercolor_paper_texture_by_cattbon-da001tb.png');opacity:0.8"><span style="font-family:'lucida console'; font-size:40px; display:block; text-align:center; margin-top:10px; color:white; text-shadow:2px 2px 3px silver">Titre du Jour </span><div style="width:300px;height:250px;margin-top:90px;opacity:1; margin-left:10px;float:left;"><span style="font-family:'fantasy'; color:black; margin-top:-10px; font-size:26px; display:block; text-align:center;"> Titre ici </span><div style="height:250px;overflow:auto"><span style="color:#000066;font-weight:bold;font-size:14px; opacity:2.0; font-family:'comic sans ms';">Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Cum saepe multa, tum memini domi in hemicyclio sedentem, ut solebat, cum et ego essem una et pauci admodum familiares, in eum sermonem illum incidere qui tum forte multis erat in ore. Meministi enim profecto, Attice, et eo magis, quod P. Sulpicio utebare multum, cum is tribunus plebis capitali odio a Q. Pompeio, qui tum erat consul, dissideret, quocum coniunctissime et amantissime vixerat, quanta esset hominum vel admiratio vel querella.

Cyprum itidem insulam procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis et Paphus, altera Iovis delubris altera Veneris templo insignis. tanta autem tamque multiplici fertilitate abundat rerum omnium eadem Cyprus ut nullius externi indigens adminiculi indigenis viribus a fundamento ipso carinae ad supremos usque carbasos aedificet onerariam navem omnibusque armamentis instructam mari committat.</span></div></div><img src="http://zupimages.net/up/16/37/h6qm.png" alt="" style="width:300px; height:300px; border:6px double grey;margin-top:100px; margin-left:20px;margin-right:10px;"/><br/> <img src="http://zupimages.net/up/16/37/h6qm.png" alt="" style="width:300px; height:300px; border:6px double grey; margin-left:10px; float:left;margin-right:20px;margin-top:-10px "/>     <div style="width:290px; height:500px; overflow:auto;margin-right:-20px;"><span style="font-family:'fantasy'; color:black; margin-top:10px; font-size:26px; display:block; text-align:center;"> Titre ici </span><span style="color:#000066;font-size:14px; opacity:2.0; font-family:'comic sans ms';"><b>Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Cum saepe multa, tum memini domi in hemicyclio sedentem, ut solebat, cum et ego essem una et pauci admodum familiares, in eum sermonem illum incidere qui tum forte multis erat in ore. Meministi enim profecto, Attice, et eo magis, quod P. Sulpicio utebare multum, cum is tribunus plebis capitali odio a Q. Pompeio, qui tum erat consul, dissideret, quocum coniunctissime et amantissime vixerat, quanta esset hominum vel admiratio vel querella.

Cyprum itidem insulam procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis et Paphus, altera Iovis delubris altera Veneris templo insignis. tanta autem tamque multiplici fertilitate abundat rerum omnium eadem Cyprus ut nullius externi indigens adminiculi indigenis viribus a fundamento ipso carinae ad supremos usque carbasos aedificet onerariam navem omnibusque armamentis instructam mari committat.</b></span></div><div style="width:300px;height:180px;margin-left:10px;margin-top:-200px;display:block;overflow:auto;float:left"><span style="font-family:'fantasy'; font-size:26px; color:black;display:block; text-align:center; margin-top:10px;">News de la Meute </span><span style="color:#000066;font-size:14px; opacity:2.0; font-family:'comic sans ms';">Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Cum saepe multa, tum memini domi in hemicyclio sedentem, ut solebat, cum et ego essem una et pauci admodum familiares, in eum sermonem illum incidere qui tum forte multis erat in ore. Meministi enim profecto, Attice, et eo magis, quod P. Sulpicio utebare multum, cum is tribunus plebis capitali odio a Q. Pompeio, qui tum erat consul, dissideret, quocum coniunctissime et amantissime vixerat, quanta esset hominum vel admiratio vel querella.

Cyprum itidem insulam procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis et Paphus, altera Iovis delubris altera Veneris templo insignis. tanta autem tamque multiplici fertilitate abundat rerum omnium eadem Cyprus ut nullius externi indigens adminiculi indigenis viribus a fundamento ipso carinae ad supremos usque carbasos aedificet onerariam navem omnibusque armamentis instructam mari committat</span></div><div style="width:300px; height:288px;margin-left:10px; margin-top: 20px; margin-bottom:30px; float:left; overflow:auto;"><span style="font-family:'fantasy'; color:black; margin-top:10px; font-size:26px; display:block; text-align:center;"> Titre ici </span><span style="color:#000066;font-size:14px; opacity:2.0; font-family:'comic sans ms';">Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Cum saepe multa, tum memini domi in hemicyclio sedentem, ut solebat, cum et ego essem una et pauci admodum familiares, in eum sermonem illum incidere qui tum forte multis erat in ore. Meministi enim profecto, Attice, et eo magis, quod P. Sulpicio utebare multum, cum is tribunus plebis capitali odio a Q. Pompeio, qui tum erat consul, dissideret, quocum coniunctissime et amantissime vixerat, quanta esset hominum vel admiratio vel querella.

Cyprum itidem insulam procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis et Paphus, altera Iovis delubris altera Veneris templo insignis. tanta autem tamque multiplici fertilitate abundat rerum omnium eadem Cyprus ut nullius externi indigens adminiculi indigenis viribus a fundamento ipso carinae ad supremos usque carbasos aedificet onerariam navem omnibusque armamentis instructam mari committat.</span></div><div style="width:200px; height:75px; background-color:white; border: 7px dotted black;float:right; margin-top:50px; margin-right:50px;opacity:0.5">Rédigé par:
Codage Par Nutop de <a href="http://www.never-utopia.com/">Never-Utopia</a>.
</div> <br/> <center><iframe width="425" height="315" src="https://www.youtube.com/embed/PXfw1CgA0dk?" frameborder="0" allowfullscreen; style="text-align:center"></iframe></center> <br/> <br/> </div>