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 messages de la page d’accueil seront nommés avec des chiffres, tandis que pour les qui est en ligne  seront nommés avec des lettres /!\

 

 

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

<!– END message_admin_index –>

<!– BEGIN switch_user_login_form_header –>

♦ Vous alliez maintenant mettre entre ses deux code, le code ci-dessous en modifiant les caractères en majuscule et contenu

<!– DEBUT DU MESSAGE D’ACCUEIL –> 

<table class=”pacadre” width=”1024px” border=”0″ cellspacing=”1″ cellpadding=”0″ align=”center”><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’;
document.getElementById(‘ongletD’).style.display=’none’;
document.getElementById(‘ongletE’).style.display=’none’;
document.getElementById(‘ongletF’).style.display=’none’;
document.getElementById(‘ongletG’).style.display=’none’;
document.getElementById(‘ongletH’).style.display=’none’;
document.getElementById(‘ongletI’).style.display=’none’;
document.getElementById(‘ongletJ’).style.display=’none’;}

function patongletB() { document.getElementById(‘ongletA’).style.display=’none’;
document.getElementById(‘ongletB’).style.display=’block’;
document.getElementById(‘ongletC’).style.display=’none’; 
document.getElementById(‘ongletD’).style.display=’none’;
document.getElementById(‘ongletE’).style.display=’none’;
document.getElementById(‘ongletF’).style.display=’none’;
document.getElementById(‘ongletG’).style.display=’none’;
document.getElementById(‘ongletH’).style.display=’none’;
document.getElementById(‘ongletI’).style.display=’none’;
document.getElementById(‘ongletJ’).style.display=’none’;}

function patongletC() { document.getElementById(‘ongletA’).style.display=’none’;
document.getElementById(‘ongletB’).style.display=’none’;
document.getElementById(‘ongletC’).style.display=’block’;
document.getElementById(‘ongletD’).style.display=’none’;
document.getElementById(‘ongletE’).style.display=’none’;
document.getElementById(‘ongletF’).style.display=’none’;
document.getElementById(‘ongletG’).style.display=’none’;
document.getElementById(‘ongletH’).style.display=’none’;
document.getElementById(‘ongletI’).style.display=’none’;
document.getElementById(‘ongletJ’).style.display=’none’;}

function patongletD() { document.getElementById(‘ongletA’).style.display=’none’;
document.getElementById(‘ongletB’).style.display=’none’;
document.getElementById(‘ongletC’).style.display=’none’;
document.getElementById(‘ongletD’).style.display=’block’;
document.getElementById(‘ongletE’).style.display=’none’;
document.getElementById(‘ongletF’).style.display=’none’;
document.getElementById(‘ongletG’).style.display=’none’;
document.getElementById(‘ongletH’).style.display=’none’;
document.getElementById(‘ongletI’).style.display=’none’;
document.getElementById(‘ongletJ’).style.display=’none’;}

function patongletE() { document.getElementById(‘ongletA’).style.display=’none’;
document.getElementById(‘ongletB’).style.display=’none’;
document.getElementById(‘ongletC’).style.display=’none’;
document.getElementById(‘ongletD’).style.display=’none’;
document.getElementById(‘ongletE’).style.display=’block’;
document.getElementById(‘ongletF’).style.display=’none’;
document.getElementById(‘ongletG’).style.display=’none’;
document.getElementById(‘ongletH’).style.display=’none’;
document.getElementById(‘ongletI’).style.display=’none’;
document.getElementById(‘ongletJ’).style.display=’none’;}

function patongletF() { document.getElementById(‘ongletA’).style.display=’none’;
document.getElementById(‘ongletB’).style.display=’none’;
document.getElementById(‘ongletC’).style.display=’none’;
document.getElementById(‘ongletD’).style.display=’none’;
document.getElementById(‘ongletE’).style.display=’none’;
document.getElementById(‘ongletF’).style.display=’block’;
document.getElementById(‘ongletG’).style.display=’none’;
document.getElementById(‘ongletH’).style.display=’none’;
document.getElementById(‘ongletI’).style.display=’none’;
document.getElementById(‘ongletJ’).style.display=’none’;}

function patongletG() { document.getElementById(‘ongletA’).style.display=’none’;
document.getElementById(‘ongletB’).style.display=’none’;
document.getElementById(‘ongletC’).style.display=’none’;
document.getElementById(‘ongletD’).style.display=’none’;
document.getElementById(‘ongletE’).style.display=’none’;
document.getElementById(‘ongletF’).style.display=’none’;
document.getElementById(‘ongletG’).style.display=’block’;
document.getElementById(‘ongletH’).style.display=’none’;
document.getElementById(‘ongletI’).style.display=’none’;
document.getElementById(‘ongletJ’).style.display=’none’;}
</script>

<!– BARRE D’ONGLETS 1 –>
<div style=”padding-top: 85px”></div><table width=”80%” class=”patitre” align=”center”><tr>
                  <td>
 <table width=”80%”><tr>
                  <td width=”20%”><font face=”Times New Roman” size=”2″ color=”#COULEUR”><b>NAVIGATION</b></font><br><br>
<div class=”menu” onmouseover=”javascript:patongletA()”>MENU A</div><br>
                  <div class=”menu” onmouseover=”javascript:patongletB()”>MENU B</div><br>
                  <div class=”menu” onmouseover=”javascript:patongletC()”>MENU C</div><br>
                  <div class=”menu” onmouseover=”javascript:patongletD()”>MENU D</div><br>
                  <div class=”menu” onmouseover=”javascript:patongletE()”>MENU E</div><br>
                  <div class=”menu” onmouseover=”javascript:patongletF()”>MENU F</div><br>
                  <div class=”menu” onmouseover=”javascript:patongletG()”>MENU G</div><br>
</td>
                                 
                <td width=”100%”>
<!– MENU A –>             
                    <div id=”ongletA”>
                        <div class=”contenu”>
                          <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=”#COULEUR”><b>MENU A</b></font></center><br><br>
<font size=”1″><div style=”margin-left: 40px; margin-right: 40px” 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></div></font><br>
                                </td>
                              </tr>
                          </table>
                        </div>
                    </div>

<!– MENU B –>
                    <div id=”ongletB” style=”display: none;”>
                        <div class=”contenu”>
                          <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=”#COULEUR”><b>MENU B</b></font></center><br><br>
 <font size=”1″><div style=”margin-left: 40px; margin-right: 40px” 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></div></font><br>
                                </td>
                              </tr>
                          </table>
                        </div>
                    </div>
                
                
<!– MENU C –>                 
                    <div id=”ongletC” style=”display: none;”>
                        <div class=”contenu”>
                          <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=”#COULEUR”><b>MENU C</b></font></center><br><br>
<font size=”1″><div style=”margin-left: 40px; margin-right: 40px” 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></div></font><br>
                                </td>
                              </tr>
                          </table>
                        </div>
                    </div>

<!– MENU D –>                 
                    <div id=”ongletD” style=”display: none;”>
                        <div class=”contenu”>
                          <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=”#COULEUR”><b>MENU D</b></font></center><br><br>
<font size=”1″><div style=”margin-left: 40px; margin-right: 40px” 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></div></font><br>
                                </td>
                              </tr>
                          </table>
                        </div>
                    </div>

<!– MENU E –>                 
                    <div id=”ongletE” style=”display: none;”>
                        <div class=”contenu”>
                          <table width=”100%” border=”0″ cellpadding=”10″ cellspacing=”1″>
                              <tr>
                                <td width=”100%” align=”center”><center><font face=”Times New Roman” size=”3″ color=”#COULEUR”><b>MENU E</b></font></center><br><br>
<font size=”1″><div style=”margin-left: 40px; margin-right: 40px” 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></div></font><br>
                                </td>
                              </tr>
                          </table>
                        </div>
                    </div>

<!– MENU F –>                 
                    <div id=”ongletF” style=”display: none;”>
                        <div class=”contenu”>
                          <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=”#COULEUR”><b>MENU F</b></font></center><br><br>
<font size=”1″><div style=”margin-left: 40px; margin-right: 40px” 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></div></font><br>
                                </td>
                              </tr>
                          </table>
                        </div>
                    </div>

<!– MENU G –>                 
                    <div id=”ongletG” style=”display: none;”>
                        <div class=”contenu”>
                          <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=”#COULEUR”><b>MENU G</b></font></center><br><br>
<font size=”1″><div style=”margin-left: 40px; margin-right: 40px” 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></div></font><br>
                                </td>
                              </tr>
                          </table>
                        </div>
                    </div>

<!– FIN CONTENU –> 

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

<!– FIN DU MESSAGE D’ACCUEIL –>

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

<table class=”pacadre” width=”1024px” border=”0″ cellspacing=”1″ cellpadding=”0″ align=”center”>

♦ 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

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~- MESSAGE DE LA PAGE D’ACCUEIL -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

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

.contourimage {
border: 3px solid #COULEUR; /* couleur de la bordure */
padding:3px;
}

.patitre {
background-color: #COULEUR; /* couleur de fond */
border: 3px solid #COULEUR; /* couleur de la bordure */
box-shadow: 5px 5px 5px #000000;
-o-box-shadow: 5px 5px 5px #000000;
-webkit-box-shadow: 5px 5px 5px #000000;
-ms-box-shadow: 5px 5px 5px #000000;
-moz-box-shadow: 5px 5px 5px #000000;
}

.menu {
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: 10px;
padding-right: 10px;
width:150px;
display:inline-block;
}

.menu:hover{
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: 10px;
padding-right: 10px;
width:150px;
display:inline-block;
}

.contenu {
color: #COULEUR; /* couleur du texte */
font-family: verdana;
text-align: center;
background-image: url(‘URL DE VOTRE IMAGE – TEXTURES’); /* mettre l’image de votre texture */
background-repeat: repeat;
border: 5px solid #COULEUR; /* couleur de la bordure */
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
height:240px;
width:610px;
}

/* CADRE
————————————————*/

.Cadre{
background-color: #COULEUR; /* couleur de fond */
border: 1px dashed #COULEUR; /* couleur de la bordure */
padding-right:10px;
padding-left:10px;
padding-bottom: 3px;
padding-top:3px;
-moz-border-radius:7px;
-ms-border-radius:7px;
-o-border-radius:7px;
-webkit-border-radius:7px;}

♦ Selon la taille de votre image de votre page d’accueil, vous deviez surement modifier “height:600px;” dans .pacadre

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