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” border=”0″ cellpadding=”0″ cellspacing=”1″ width=”100%”><tr><td align=”center” valign=”middle”><div class=”gensmall”><script type=”text/javascript”>function patongletA() { document.getElementById(‘ongletA’).style.display=’block’;
document.getElementById(‘ongletB’).style.display=’none’;
document.getElementById(‘ongletc’).style.display=’none’;}

function patongletB() { document.getElementById(‘ongletA’).style.display=’none’;
document.getElementById(‘ongletB’).style.display=’block’;
document.getElementById(‘ongletC’).style.display=’none’;}

function patongletC() { document.getElementById(‘ongletA’).style.display=’none’;
document.getElementById(‘ongletB’).style.display=’none’;
document.getElementById(‘ongletC’).style.display=’block’;}
</script>

<!– MENU PRINCIPAL –>

      <table width=”100%”><tr valign=”top”><td width=”30%”></td><td width=”50%”><br><br><br><br><br><br><br><br>
            <div class=”qeelmenu” onmouseover=”javascript:patongletA()”>QUI EST EN LIGNE ?</div>             <div class=”qeelmenu” onmouseover=”javascript:patongletB()”>STATISTIQUES</div> <div class=”qeelmenu” onmouseover=”javascript:patongletC()”>ANNIVERSAIRE</div> <br><br><center>

<!– A – –>             
                    <div id=”ongletA”>
                        <div class=”qeelcontenu”>
                          <table width=”100%” border=”0″ cellpadding=”10″ cellspacing=”1″>
                              <tr>
                                <td style=”text-align: center;” width=”100%”><center>
<font size=”1″><div align=”left”>Voyons qui est maintenant en ligne… {TOTAL_USERS_ONLINE}. {LOGGED_IN_USER_LIST}</span></div></span><br>
<table width=”100%” valign=”top” border=”0″ cellpadding=”0″ style=”text-align: justify”><div style=”text-decoration: none; text-align:justify; margin-top: “><span class=”gensmall”><span id=”delf”><div style=”background: none;>{L_CONNECTED_MEMBERS}</div></span></span></div>
</table></div></font>
                                </td>
                              </tr>
                          </table>
                        </div>
                    </div>

<!– B –  –>                 
                    <div id=”ongletB” style=”display: none;”>
                        <div class=”qeelcontenu”>
                          <table width=”100%” border=”0″ cellpadding=”10″ cellspacing=”1″>
                              <tr>
                                <td style=”text-align: center;” width=”100%”><center>
<font size=”1″><div align=”left”>NOM DU FORUM est un forum de CATEGORIE crée par NOM DU FONDATEUR depuis ANNEE DE LA CREATION. {RECORD_USERS}. {TOTAL_USERS}. {TOTAL_POSTS}. <br><br>{NEWEST_USER}</div></font>
                                </td>
                              </tr>
                          </table>
                        </div>
                    </div>

<!– C –  –>                 
                    <div id=”ongletC” style=”display: none;”>
                        <div class=”qeelcontenu”>
                          <table width=”100%” border=”0″ cellpadding=”10″ cellspacing=”1″>
                              <tr>
                                <td style=”text-align: center;” width=”100%”><center>
<font size=”1″><div align=”left”><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>
                                </td>
                              </tr>
                          </table>
                        </div>
                    </div><br><br>
<center><div style=”padding-left: 10px;”><span class=”groupes”><a href=”/URL DU GROUPE 01″><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 02″><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 03″><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 04″><font color=”#COULEUR” size=”1″><b>GROUPE 04</b></font></a></span><img src=”http://stockage.ffmystery.com/images/groupe_transp.png”>
<br><br></div></center>

<!– FIN CONTENU –> 

</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=”100%” au tout début du code.

<table class=”statistiques” border=”0″ cellpadding=”0″ cellspacing=”1″ width=”100%”>

♦ 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 -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* MENU DES ONGLETS
 —————————————————–*/

.qeelmenu { /* menu des onglets */
color:#COULEUR; /* couleur du texte */
font-family: verdana;
font-size: 8px;
text-align: center;
background-color: #COULEUR; /* couleur de fond */
border-right: 5px solid #COULEUR; /* couleur de la bordure droit */
border-left: 5px solid #COULEUR; /* couleur de la bordure gauche */
border-top: 1px dotted #COULEUR; /* couleur de la bordure haut */
border-bottom: 1px dotted #COULEUR; /* couleur de la bordure bas*/
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
padding-right: 15px;
width:90px;
display:inline-block;
}

.qeelmenu:hover{  /* menu des onglets survolé */
color: #COULEUR; /* couleur du texte */
font-family: verdana;
font-size: 8px;
text-align: center;
background-color: #COULEUR; /* couleur de fond */
border-right: 5px solid #COULEUR; /* couleur de la bordure droit */
border-left: 5px solid #COULEUR; /* couleur de la bordure gauche */
border-top: 1px dotted #COULEUR; /* couleur de la bordure haut */
border-bottom: 1px dotted #COULEUR; /* couleur de la bordure bas*/
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
padding-right: 15px;
width:90px;
display:inline-block;
}

/* CONTENU DES ONGLETS
 —————————————————–*/

.qeelcontenu { /* contenu du qeel */
color: #COULEUR; /* couleur du texte */
font-family: TrebuchetMS,Verdana,Arial,Helvetica,sans-serif;
text-align: center;
background-color: #COULEUR; /* couleur de fond */
border-right: 1px solid #COULEUR; /* couleur de la bordure droit */
border-left: 1px solid #COULEUR; /* couleur de la bordure gauche */
border-top: 1px solid #COULEUR; /* couleur de la bordure haut */
border-bottom: 1px solid #COULEUR; /* couleur de la bordure bas*/
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
height:150px;
width:350px;
}

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

.statistiques{ /* image de fond du qeel */
background-image: url(“LIEN DE VOTRE IMAGE DE FOND”);
background-repeat: no-repeat;
background-position: center;
border:1px;
height: 415px;
}

.groupes{ /* personnalisation des groupes */
font-size:14px;
font-weight: bold;
text-align:center;
text-decoration: none !important;
border: 1px #COULEUR dotted; /* couleur de la bordure */
-moz-border-radius : 3px 3px 3px 3px;
-ms-border-radius : 3px 3px 3px 3px;
-o-border-radius : 3px 3px 3px 3px;
-webkit-border-radius : 3px 3px 3px 3px;
height:40px;
padding-right:12px;
padding-left:14px;
padding-bottom:3px;
}

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

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

/* LIEN EN MINI-MAJUSCULE
 —————————————————–*/

a {
font-variant: small-caps;
}

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

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

♦ Selon la taille de votre image qui est en ligne, vous deviez surement modifier “height:415px;” 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

Laisser un commentaire

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