Salut !

Voici un petit LS de Qeel que j'ai fait pour la demande de P'tit loup. Le code vient de cette cette PA (page d'accueil) de Okhmhaka qui a été adaptée pour un qeel.

Pour voir l'aperçu du bloc de devant (bloc 1): cliquez ici.
Pour voir l'aperçu du bloc de droite (bloc 2) : cliquez ici.
Pour voir l'aperçu du bloc de droite (bloc 2) au survol d'une image de groupe : cliquez ici.
Pour voir l'aperçu du bloc de gauche (bloc 3) : cliquez ici.
Pour voir l'aperçu du bloc de gauche (3) au survol de l'image : cliquez ici.
Pour voir l'aperçu du bloc de derrière (4) : cliquez ici.

Ce LS est en deux parties.

• Tout d'abord, nous allons installer le qeel dans le template et regarder comment ajouter/supprimer/modifier des groupes.
  
• Puis, nous allons le mettre en forme à l'aide du CSS.

1. Corps du qeel (Template Index_Body)

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

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

Puis, il va nous falloir trouver le "BEGIN disable_viewonline" et le "END disable_viewonline". Normalement, ils sont respectivement aux lignes 173 et 220 du template.

Nous allons remplacer tout ce qu'il y a entre ces deux lignes par :

Code:

<script type="text/javascript">
        //<!--
                function change_qeelonglet(name)
                {
                        document.getElementById('qeelonglet_'+anc_qeelonglet).className = 'qeelonglet_0 qeelonglet';
                        document.getElementById('qeelonglet_'+name).className = 'qeelonglet_1 qeelonglet';
                        document.getElementById('contenu_qeelonglet_'+anc_qeelonglet).style.display = 'none';
                        document.getElementById('contenu_qeelonglet_'+name).style.display = 'block';
                        anc_qeelonglet = name;
                }
        //-->
</script>
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace" rel="stylesheet" />
<div id="qeeltarget1">
  <div id="qeeltarget2">
    <div id="qeeltarget3">
      <div id="qeeltarget4">
        <div id="qeelespace_top">
          <a href="{U_VIEWONLINE}" rel="nofollow">Qui se cache dans l'ombre ?</a>
        </div>
        <div id="qeelespace_carousel">
         
          <!-- ZONE 1 - DEFAUT -->
          <div id="qeelcarousel_1">
            <a href="#qeeltarget1" class="qeellien1"></a>
            <div class="qeelcarousel_1_content">
              <div class="qeel_subtitle">Statistiques</div>
              <div class="qeel_bloc">
                Bienvenue à<span id="newuser">{NEWEST_USER}</span> !
                <div id="loggedlist">{LOGGED_IN_USER_LIST}</div>
                <table id="connlist" cellspacing="0">{L_CONNECTED_MEMBERS}</table>
              </div>
            </div>
          </div>
         
          <!-- ZONE 2 -->
          <div id="qeelcarousel_2">
            <a href="#qeeltarget2" class="qeellien2"></a>
            <div class="qeelcarousel_2_content">
              <div class="qeel_subtitle">Groupes</div>
              <div class="qeel_bloc">
                <span class="qeelonglet_1 qeelonglet" id="qeelonglet_Groupe1" onmouseover="javascript:change_qeelonglet('Groupe1');">
                  <a href="#">NOM DU GROUPE 1</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe2" onmouseover="javascript:change_qeelonglet('Groupe2');">
                  <a href="#">NOM DU GROUPE 2</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe3" onmouseover="javascript:change_qeelonglet('Groupe3');">
                  <a href="#">NOM DU GROUPE 3</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe4" onmouseover="javascript:change_qeelonglet('Groupe4');">
                  <a href="#">NOM DU GROUPE 4</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe5" onmouseover="javascript:change_qeelonglet('Groupe5');">
                  <a href="#">NOM DU GROUPE 5</a>
                </span>
              </div>
              <div class="qeel_bloc">
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe1">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 1" alt="Image du groupe 1" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 1
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe2">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 2" alt="Image du groupe 2" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 2
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe3">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 3" alt="Image du groupe 3" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 3
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe4">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 4" alt="Image du groupe 4" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 4
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe5">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 5" alt="Image du groupe 5" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 5
                  </div>
                </div>
              </div>
              <div class="clear"></div>
            </div>
          </div>
         
          <!-- ZONE 3 -->
          <div id="qeelcarousel_3">
            <a href="#qeeltarget3" class="qeellien3"></a>
            <div class="qeelcarousel_3_content">
              <div class="qeel_subtitle">Anniversaires</div>
              <div class="qeel_bloc">
                <table id="qeelbirthday" cellspacing="0">
                  {L_WHOSBIRTHDAY_TODAY}
                  {L_WHOSBIRTHDAY_WEEK}
                </table>
              </div>
              <div class="qeel_anniv_bas">
                <img class="qeel_img_anniv" src="URL IMAGE SOUS LES ANNIVERSAIRES" alt="machin" />
                <div class="qeel_anniv_texte">
                  Codage du Qeel par Okhmhaka et Onyx de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>.
                </div>
              </div>
            </div>
          </div>
         
          <!-- ZONE 4 -->
          <div id="qeelcarousel_4">
            <a href="#qeeltarget4" class="qeellien4"></a>
            <div class="qeelcarousel_4_content">
              <div class="qeel_subtitle">Partenaires</div>
              <div class="qeel_bloc">
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 1" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 2" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 3" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 4" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 5" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 6" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 7" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 8" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 9" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 10" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 11" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 12" /></a>
              </div>
            </div>
          </div>
         
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");
</script>
    <script type="text/javascript">
        //<!--
                var anc_qeelonglet = 'Groupe1';
                change_qeelonglet(anc_qeelonglet);
        //-->
    </script>

Pour ce qui est rajouter, d'enlever ou de modifier un groupe, cela se fait par trois manipulations. Premièrement, on ajoute/enlève/modifie le nom du groupe. Puis, on enlève/ajoute/modifie la description du groupe. Enfin, on modifie la hauteur des groupes.

Les noms des groupes ressemblent à ceci :

Code:

                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe5" onmouseover="javascript:change_qeelonglet('Groupe5');">
                  <a href="#">NOM DU GROUPE 5</a>
                </span>

Quant aux descriptions des groupes, elles correspondent à ceci :

Code:

                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe5">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 5" alt="Image du groupe 5" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 5
                  </div>
                </div>

Il suffit de changer le 5 à tous les endroits où il y en a un par un nouveau chiffre.

Pour la hauteur des groupes, il faut se rendre à cet endroit dans le CSS (que nous allons ajouter à la prochaine étape) :

Code:

/*Nom des groupes*/
.qeelonglet {
  display: block;
  font-size: 18px;
  height: 38px;
  padding: 15px 3px 0px 3px;
  margin-bottom: 1px;
  text-align: center;
  background: #E9E8E8;
  font-weight: bold;
  text-transform: uppercase;
}

Et vous devez modifier le "height" et le "padding" pour arriver à une hauteur des onglets qui vous convient.

2. Mise en forme (CSS)

Si vous regardez votre qeel, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme notre qeel à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :

Code:

/************************************************************ DÉBUT QEEL ************************************************************/

/*Fond du qeel*/
#qeel {
  position: relative;
  width: 800px;
  height: 680px;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  background: #141313 url('http://img15.hostingpics.net/pics/570241qeel2.png') no-repeat top center;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #000000;
}


/*Titre du qeel*/
#qeel_title {
  color: goldenrod;
  font-size: 44px;
  font-family: 'Great Vibes', cursive;
  text-shadow: 1px 1px 2px #000000;
  padding-left: 15px;
}


/*Carré des informations sur les membres*/
#qeel_info_members {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 320px;
  height: 290px;
  background-color: rgba(20, 19, 19, 0.6);
  border-radius: 10px;
  box-shadow: 0px 0px 3px #141313;
  padding: 10px;
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: left;
}


/*Mise en forme des listes des membres connectés*/
#userlists {
  margin-top: 5px;
  height: 205px;
  overflow: auto;
}
#totalconn {
  margin-top: 5px;
}
#totalconn .row1{
  background: transparent;
  vertical-align: top;
}
#totalconn .gensmall {
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: left;
}


/*Section des groupes*/
#qeel_bottom {
  position: absolute;
  top: 418px;
  left: 0px;
  width: 800px;
  text-align: center; 
}


/*Nom des groupes*/
.qeelonglet {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 2px;
  height: 40px;
  font-size: 38px;
  font-family: 'Great Vibes', cursive;
  letter-spacing: 1px;
  text-shadow: 0px 0px 3px #000000;
  opacity: 0.6;
}
/*Groupe au survol*/
.qeelonglet_0:hover {
  cursor: pointer;
  opacity: 0.8;
}
/*Groupe actif*/
.qeelonglet_1 {
  opacity: 1;
}


/*Description des groupes*/
.contenu_qeelonglet {
  position: relative;
  width: 800px;
  height: 200px;
  margin-top: 20px;
  display: none;
}
/*Images des groupes*/
.contenu_qeelonglet img {
  width: 800px;
  height: 200px;
  border-radius: 0px 0px 20px 20px;
}
/*Descriptions des groupes*/
.qeel_desc {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 780px;
  height: 180px;
  background-color: rgba(20, 19, 19, 0.6);
  border-radius: 0px 0px 20px 20px;
  padding: 10px;
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: justify;
  overflow: auto;
  transition: 0.5s;
  opacity: 0;
}
/*Descriptions des groupes au survol*/
.contenu_qeelonglet:hover .qeel_desc {
  opacity: 1;
}

/************************************************************ FIN QEEL ************************************************************/

---

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

À plus !