Ce code amélioré permet de personnaliser et de modifier votre Qui en ligne avec une image en fond et des menus avec onglets. /!\ Chaque onglet pour les QEEL seront nommés avec des lettres, tandis que pour les messages de la page d’accueil seront nommés avec des chiffres /!\

 

 

Rendez-vous dans votre Panneau d’Administration
♦ Dirigez-vous dans Affichages > Templates > Général > Index_body.
♦ Recherche le code entre ses 2 balises

<!– BEGIN disable_viewonline –>

<!– END disable_viewonline –>

♦ Vous alliez maintenant remplacer tout le code par celui de ci-dessous en modifiant les caractère en Majuscule

<!– BEGIN disable_viewonline –>

<table class=”statistiques” width=”1023px” border=”0″ cellspacing=”1″ cellpadding=”0″><tr><td align=”center” valign=”middle”>
<div class=”gensmall”><script type=”text/javascript”>
function patonglet1() { document.getElementById(‘onglet1′).style.display=’block’;
document.getElementById(‘onglet2′).style.display=’none’;
document.getElementById(‘onglet3′).style.display=’none’;
document.getElementById(‘onglet4′).style.display=’none’;
document.getElementById(‘onglet5′).style.display=’none’;
document.getElementById(‘onglet6′).style.display=’none’;}

function patonglet2() { document.getElementById(‘onglet1′).style.display=’none’;
document.getElementById(‘onglet2′).style.display=’block’;
document.getElementById(‘onglet3′).style.display=’none’;
document.getElementById(‘onglet4′).style.display=’none’;
document.getElementById(‘onglet5′).style.display=’none’;
document.getElementById(‘onglet6′).style.display=’none’;}

function patonglet3() { document.getElementById(‘onglet1′).style.display=’none’;
document.getElementById(‘onglet2′).style.display=’none’;
document.getElementById(‘onglet3′).style.display=’block’;
document.getElementById(‘onglet4′).style.display=’none’;
document.getElementById(‘onglet5′).style.display=’none’;
document.getElementById(‘onglet6′).style.display=’none’;}

function patonglet4() { document.getElementById(‘onglet1′).style.display=’none’;
document.getElementById(‘onglet2′).style.display=’none’;
document.getElementById(‘onglet3′).style.display=’none’;
document.getElementById(‘onglet4′).style.display=’block’;
document.getElementById(‘onglet5′).style.display=’none’;
document.getElementById(‘onglet6′).style.display=’none’;}

function patonglet5() { document.getElementById(‘onglet1′).style.display=’none’;
document.getElementById(‘onglet2′).style.display=’none’;
document.getElementById(‘onglet3′).style.display=’none’;
document.getElementById(‘onglet4′).style.display=’none’;
document.getElementById(‘onglet5′).style.display=’block’;
document.getElementById(‘onglet6′).style.display=’none’;}

function patonglet6() { document.getElementById(‘onglet1′).style.display=’none’;
document.getElementById(‘onglet2′).style.display=’none’;
document.getElementById(‘onglet3′).style.display=’none’;
document.getElementById(‘onglet4′).style.display=’none’;
document.getElementById(‘onglet5′).style.display=’none’;
document.getElementById(‘onglet6′).style.display=’block’;}
</script>

<!– BALISE D’INTRO –>

<table border=”0″ width=”100%”>
    <tr>

<!– GROUPES & MENUS –>

 <table width=”100%”><tr valign=”top”>
                  <td width=”50%” style=”padding-top: 95px”><div style=”border: 3px solid #111111; background-color: #COULEUR; “><br><center><font face=”Times New Roman” size=”3″ color=”#COULEUR”><b>LES GROUPES</b></font><br><br><br>
<span class=”groupes”><a href=”/URL DU GROUPE”><font color=”#COULEUR” size=”1″><b>GROUPE #01</b></font></a></span><img src=”http://stockage.ffmystery.com/images/groupe_transp.png”>
<span class=”groupes”><a href=”/URL DU GROUPE”><font color=”#COULEUR” size=”1″><b>GROUPE #02</b></font></a></span><img src=”http://stockage.ffmystery.com/images/groupe_transp.png”>
<span class=”groupes”><a href=”/URL DU GROUPE”><font color=”#COULEUR” size=”1″><b>GROUPE #03</b></font></a></span><img src=”http://stockage.ffmystery.com/images/groupe_transp.png”>
<span class=”groupes”><a href=”/URL DU GROUPE”><font color=”#COULEUR” size=”1″><b>GROUPE #04</b></font></a></span><img src=”http://stockage.ffmystery.com/images/groupe_transp.png”><br><br><br>
<span class=”groupes”><a href=”/URL DU GROUPE”><font color=”##COULEUR” size=”1″><b>GROUPE #05</b></font></a></span><img src=”http://stockage.ffmystery.com/images/groupe_transp.png”>
<span class=”groupes”><a href=”/URL DU GROUPE”><font color=”#COULEUR” size=”1″><b>GROUPE #06</b></font></a></span><img src=”http://stockage.ffmystery.com/images/groupe_transp.png”>
<span class=”groupes”><a href=”/URL DU GROUPE”><font color=”#COULEUR” size=”1″><b>GROUPE #07</b></font></a></span><img src=”http://stockage.ffmystery.com/images/groupe_transp.png”></center>
<br><br></div><table width=”100%” align=”center” style=”padding-top: 10px;”><tr><td width=”33%” ><div class=”onglet” onmouseover=”javascript:patonglet1()”>EN LIGNE</div></td><td width=”33%” >
<div class=”onglet” onmouseover=”javascript:patonglet2()”>STATISTIQUES</div></td><td width=”33%” >
<div class=”onglet” onmouseover=”javascript:patonglet3()”>ANNIVERSAIRES</div></td><tr><tr><td width=”33%” >
<div class=”onglet” onmouseover=”javascript:patonglet4()”>MENU #04</div></td><td width=”33%” >
<div class=”onglet” onmouseover=”javascript:patonglet5()”>MENU #05</div></td><td width=”33%” >
<div class=”onglet” onmouseover=”javascript:patonglet6()”>CREDITS</div><br></td></tr></table></td>

                <td width=”50%” style=”padding-top: 95px”>
<!– MENU 1 – EN LIGNE –>
                    <div id=”onglet1″>
                        <div class=”message”>
                          <table width=”100%” border=”0″ cellpadding=”10″ cellspacing=”1″>
                              <tr>
                                <td width=”100%”><center><font face=”Times New Roman” size=”3″ color=”#B1B1B1″><b>EN LIGNE</b></font></center><br><br>
<font size=”1″><div style=”margin-left: 20px; margin-right: 20px” align=justify>Voyons qui est maintenant en ligne… {TOTAL_USERS_ONLINE}. {LOGGED_IN_USER_LIST}</div></font>
<table width=”100%” valign=”top” border=”0″ cellpadding=”0″ style=”text-align: justify”><div style=”text-align:justify; margin-top: 10px; margin-left: 20px; margin-right: 20px”><span class=”gensmall”><span id=”delf”><div style=”text-decoration: none;>{L_CONNECTED_MEMBERS}</div></span></span></div></table></div></font>
                                </td>
                              </tr>
                          </table>
                        </div>
                    </div>

<!– MENU 2 – STATISTIQUES –>
                    <div id=”onglet2″ style=”display: none;”>
                        <div class=”message”>
                          <table width=”100%” border=”0″ cellpadding=”10″ cellspacing=”1″>
                              <tr>
                                <td style=”text-align: center;” width=”100%”><center><font face=”Times New Roman” size=”3″ color=”#B1B1B1″><b>STATISTIQUES</b></font></center><br><br>
<font size=”1″><div style=”margin-left: 20px; margin-right: 20px” align=justify>NOM DU FORUM est un forum sur le THEME DU FORUM dont le projet a été créé le DATE DU FORUM par le fondateur : PSEUDO DU FONDATEUR. <br><br>{RECORD_USERS}. {TOTAL_USERS} {TOTAL_POSTS}. {NEWEST_USER}<br><br></div></font><br>
                                </td>
                              </tr>
                          </table>
                        </div>
                    </div>

<!– MENU 3 – ANNIVERSAIRES –>                
                    <div id=”onglet3″ style=”display: none;”>
                        <div class=”message”>
                          <table width=”100%” border=”0″ cellpadding=”10″ cellspacing=”1″>
                              <tr>
                                <td style=”text-align: center;” width=”100%”><center><font face=”Times New Roman” size=”3″ color=”#B1B1B1″><b>ANNIVERSAIRES</b></font></center><br><br>
<font size=”1″><div style=”margin-left: 20px; margin-right: 20px” align=justify><table width=”100%” valign=”top” border=”0″ cellpadding=”0″ style=”text-align: justify;”><span class=”gensmall”><span id=”delf”><div style=”background: none;>{L_WHOSBIRTHDAY_TODAY}<br>
{L_WHOSBIRTHDAY_WEEK}</div></span></span></div></table></div></font><br>
                                </td>
                              </tr>
                          </table>
                        </div>
                    </div>

<!– MENU 4 –>                
                    <div id=”onglet4″ style=”display: none;”>
                        <div class=”message”>
                          <table width=”100%” border=”0″ cellpadding=”10″ cellspacing=”1″>
                              <tr>
                                <td style=”text-align: center;” width=”100%”><center><font face=”Times New Roman” size=”3″ color=”#B1B1B1″><b>MENU 04</b></font></center><br><br>
<div class=”opacity”> <font size=”1″><div style=”margin-left: 20px; margin-right: 20px” align=justify>Martinus agens illas provincias pro praefectis aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare.</div></font><br></div>
                                </td>
                              </tr>
                          </table>
                        </div>
                    </div>

<!– MENU 5 –>                
                    <div id=”onglet5″ style=”display: none;”>
                        <div class=”message”>
                          <table width=”100%” border=”0″ cellpadding=”10″ cellspacing=”1″>
                              <tr>
                                <td style=”text-align: center;” width=”100%”><center><font face=”Times New Roman” size=”3″ color=”#B1B1B1″><b>ELITE AFFILIATES</b></font></center><br><br>
<div class=”opacity”><font size=”1″><div style=”margin-left: 10px; margin-right: 10px” align=justify>Martinus agens illas provincias pro praefectis aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare.<br><br></div></font><br></div>
                                </td>
                              </tr>
                          </table>
                        </div>
                    </div>

<!– MENU F – CREDITS –>                
                    <div id=”onglet6″ style=”display: none;”>
                        <div class=”message”>
                          <table width=”100%” border=”0″ cellpadding=”10″ cellspacing=”1″>
                              <tr>
                                <td style=”text-align: center;” width=”100%”><center><font face=”Times New Roman” size=”3″ color=”#B1B1B1″><b>CREDITS</b></font></center><br><br>
<div class=”opacity”> <font size=”1″><div style=”margin-left: 20px; margin-right: 20px” align=justify>- Le “Qui est en ligne” a été codé par Shaynee sur “<a href=”http://www.mof-design.com” target=”bank”>MoF Design</a>”.</div></font><br></div>
                                </td>
                              </tr>
                          </table>
                        </div>
                    </div>

<!– FIN CONTENU –> 

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

<!– END disable_viewonline –>

♦ Selon la largeur de votre image du qui est en ligne, vous deviez surement modifier width=”1023PX” au tout début du code.

<table class=”statistiques” width=”1023px” border=”0″ cellspacing=”1″ cellpadding=”0″>

♦ Dirigez-vous maintenant dans Affichages > Couleurs > Général > Feuille de Style CSS
♦ Installez ce code en modifiant les #COULEUR et en mettant votre image de votre Qui en Ligne

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~- QUI EST EN LIGNE -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* TABLEAU DU QEEL
—————————————————–*/

.statistiques{
border:1px;
background-image: url(“URL DE L’IMAGE DE FOND”); /*Ici mettez le lien de l’image de votre QEEL*/
background-repeat: no-repeat;
background-position: center;
height: 490px; /*Ici mettez la hauteur de l’image qui sera sur le QEEL*/
}

.groupes{
text-align:center;
text-decoration: none !important;
font-size:14px;
font-weight: bold;
border: 1px #COULEUR dashed; /*Regler l’épaisseur du contour et de la couleur des bords des nom de groupe*/
padding-right:5px;
padding-left:5px;
padding-bottom:3px;
}

/* COULEUR DU TEXTE SUR LE QEEL
PARTIE ANNIVERSAIRE ET DERNIERE CONNEXION DES MEMBRES
—————————————————–*/

.gensmall {
text-decoration: none;
color : #COULEUR; /* couleur du texte */
 }

/* MENU DU QEEL AVEC ONGLET
………………………………………….*/

.onglet {
color: #COULEUR; /* couleur du texte */
font-size: 10px;
font-family: verdana;
text-align: center;
background-color: #COULEUR; /* couleur de fond */
border: 2px solid #COULEUR; /* couleur de la bordure */
padding-top: 8px;
padding-bottom: 8px;
padding-left: 30px;
padding-right: 30px;
display:inline-block;
width: 60%;
}

.onglet:hover {
color: #COULEUR; /* couleur du texte survolé */
font-size: 10px;
font-family: verdana;
text-align: center;
background-color: #COULEUR; /* couleur de fond */
border: 2px solid #COULEUR; /* couleur de la bordure */
padding-top: 8px;
padding-bottom: 8px;
padding-left: 30px;
padding-right: 30px;
display:inline-block;
width: 60%;
}

/* CONTENU DU QEEL AVEC ONGLET
………………………………………………*/

.message {
font-size: 12px;
font-family: verdana;
text-align: center;
border: 3px solid #COULEUR; /* couleur de la bordure */
background-color: #COULEUR;  /* couleur de fond */
text-decoration: none;
height:230px;
width: 99%;
}

/* LIEN EN MINI-MAJUSCULE
…………………………………….*/

a {
font-variant: small-caps;
}

a:link,a:active,a:visited {
font-variant: small-caps;
text-decoration: none !important;
      font-weight: bold;
 }

a:hover{
font-variant: small-caps;
text-decoration: none !important;
      font-weight: bold;
}

♦ Selon la taille de votre image qui est en ligne, vous deviez surement modifier “height:490px;” dans .statistiques

♦ Et enregistrez. !

Il est interdit de retirer le crédit qui est en bas de la page d’accueil et de prendre possession de mon codage!!! Si je le remarque, vous serez banni définitivement sans explication !!!

© By Shaynee sur MoF Design

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *