Qui est en ligne?

Ceci est un code de QEEL crée suite à la Demande de B-lueberry, ici.

Le code

Vous trouverez à la suite le code brut avec quelques commentaires. Cependant, pour des informations supplémentaires quant à comment modifier ce code, suivez les indications postées plus bas, intitulées "Modifications supplémentaires".

Code HTML à la place dans index_body, entre BEGIN disable_viewonline et END disable_viewonline

Code:

<!-- BEGIN switch_viewonline_link -->
 <!-- END switch_viewonline_link -->

 <!-- BEGIN switch_viewonline_nolink -->
 <!-- END switch_viewonline_nolink -->
<div id="qeel">
  <div id="groupes_qeel">
    <div class="infobulle_groupe_qeel"><a href="#" title="Groupe 1"><img src="http://i55.servimg.com/u/f55/09/03/38/36/untitl11.jpg" /></a>
      <div><h2 class="nom_groupe_qeel">Nom du Groupe</h2><section class="txt_groupe_qeel">Texte texte texte texte</section>
      </div>
    </div>
    <div class="infobulle_groupe_qeel"><a href="#" title="Groupe 1"><img src="http://i55.servimg.com/u/f55/09/03/38/36/untitl11.jpg" /></a>
      <div><h2 class="nom_groupe_qeel">Nom du Groupe</h2><section class="txt_groupe_qeel">orem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet dolor nulla. Fusce porta, ipsum eu tincidunt aliquam, velit nisl cursus lectus, quis laoreet risus dui a nunc. Maecenas nec erat hendrerit, eleifend nisl quis, posuere enim. In turpis felis, mollis ultrices dui quis, mattis rutrum diam. Donec ac porta purus, in sagittis sem. Suspendisse potenti. Suspendisse porta ac est nec accumsan. Curabitur non dui accumsan, tempor nunc vel, vehicula diam. Phasellus pharetra metus ut tortor commodo lobortis.</section>
      </div>
    </div>
    <div class="infobulle_groupe_qeel"><a href="#" title="Groupe 1"><img src="http://i55.servimg.com/u/f55/09/03/38/36/untitl11.jpg" /></a>
      <div><h2 class="nom_groupe_qeel">Nom du Groupe</h2><section class="txt_groupe_qeel">Texte texte texte texte</section>
      </div>
    </div>
    <div class="infobulle_groupe_qeel"><a href="#" title="Groupe 1"><img src="http://i55.servimg.com/u/f55/09/03/38/36/untitl11.jpg" /></a>
      <div><h2 class="nom_groupe_qeel">Nom du Groupe</h2><section class="txt_groupe_qeel">Texte texte texte texte</section>
      </div>
    </div>
    <div class="infobulle_groupe_qeel"><a href="#" title="Groupe 1"><img src="http://i55.servimg.com/u/f55/09/03/38/36/untitl11.jpg" /></a>
      <div><h2 class="nom_groupe_qeel">Nom du Groupe</h2><section class="txt_groupe_qeel">Texte texte texte texte</section>
      </div>
    </div>
  </div>
  <div id="contenteur_infos_qeel"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" />
    <div id="utilisateur_online_qeel"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
 {RECORD_USERS}<br />
 <br />
 {LOGGED_IN_USER_LIST}</span></div>
    <div id="infos_qeel"><span class="gensmall">{TOTAL_POSTS}<br />
 {TOTAL_USERS}<br />
 {NEWEST_USER}</span></div>
  </div>
  <table id="connectes_qeel">{L_CONNECTED_MEMBERS}</table>
<div style="width: 100%; text-align: center;">©NyoTheNeko pour Never-Utopia</div>
</div>
 <!-- BEGIN switch_chatbox_activate -->
 <!-- BEGIN switch_chatbox_popup -->
 <!-- END switch_chatbox_popup -->
 <!-- END switch_chatbox_activate -->

Le CSS:

Code:

]/* ------- DEBUT MISE EN FORME QEEL (index-box)------- */
/* Ceci est le contour du QEEL.  */
#qeel {
  width: 800px;
  border-radius: 200px;
  background-color: #D5A35E;
  /* Modifiez les valeurs de padding pour retirer la hauteur supplémentaire. Pensez également à changer le border-radius pour ne pas couper les rectangles dans le QEEL */
  padding-top: 120px;
  padding-bottom: 120px;
}

/* Rectangle du haut contenant les images du QEEL */
#groupes_qeel {
  width: 750px;
  height: 150px;
  padding-top: 50px;
  /* Permet de faire voir les infobulles si elles dépassent du carré  */
  overflow: visible;
  margin: auto;
  margin-bottom: 20px;
  /* La dernière variable détermine l'opacité du fond. Ici: un blanc avec opacité 0.6 */
  background-color: rgba(255, 255, 255, 0.6);
}

/* Div contenant à la fois l'image et l'infobulle. */
.infobulle_groupe_qeel {
  position: relative;
  /* Permet de mettre les images à la suite. */
  display: inline-block;
  margin: auto;
  /* À changer selon la taille de l'image */
  width: 100px;
  height: 75px;
  overflow: visible;
  /* Permet de mettre une marge entre les images */
  margin-left: 10px;
}
 
/* Mise en forme de l'infobulle */
.infobulle_groupe_qeel div {
  position: absolute;
  /* À modifier pour changer la position, par rapport à l'image de groupe, de la bulle. */
  top: 60px;
  left: 80px;
  /* Taille de l'infobulle */
  width: 200px;
  height: 150px;
  /* Couleur de l'infobulle */
  background-color: white;
  /* Couleur du texte dans l'infobulle */
  color: black;
  border: 2px solid black;
  border-radius: 20px;
  opacity:0;
  /* Ajoutez ici des transform si vous voulez + d'effets */
  transition: all 0.5s ease-in-out 0s;
  z-index: 999;
  visibility: hidden;
}
 
.infobulle_groupe_qeel:hover div, .infobulle_groupe_qeel:focus div {
  /* Ajoutez ici des transform si vous voulez plus d'effets. */
  opacity:1;
  transition: all 0.5s ease-in-out 0s;
  visibility: visible;
}

/* Nom du groupes dans l'infobulle. À modifier comme n'importe quel titre. */
.nom_groupe_qeel {
  font-family: 'Georgia';
  font-size: 18pt;
  width: 100%;
  text-align: center;
  background-color: #D5A35E;
}

 /* Texte dans le QEEL. Hauteur à modifier si la hauteur de l'infobulle est modifiée. */
.txt_groupe_qeel {
  width: 90%;
  height: 75px;
  font-size: 9pt;
  text-align: justify;
  margin: auto;
  overflow: auto;
}

 /* Contient les trois cases de la deuxième ligne */
#contenteur_infos_qeel {
  width: 750px;
  margin: auto;
  overflow: hidden;
  margin-bottom: 20px;
}

 /* Image qui est en ligne */
#i_whosonline {
  float: left;
}

 /* Contient les utilisateurs actuellement en ligne */
#utilisateur_online_qeel {
  float: left;
  width: 190px;
  margin-left: 10px;
  height: 220px;
  padding: 5px;
  text-align: justify;
  overflow: auto;
  background-color: rgba(255, 255, 255, 0.6);
}

/* Contient les infos générales du forum. */
#infos_qeel {
  float: left;
  width: 190px;
  margin-left: 10px;
  height: 220px;
  padding: 5px;
  text-align: justify;
  overflow: auto;
  background-color: rgba(255, 255, 255, 0.6);
}

/* Tableau des derniers connectés les dernières 48h/24h/etc */
#connectes_qeel {
  width: 750px;
  height: 150px;
  margin: auto;
  overflow: auto;
  background-color: rgba(255, 255, 255, 0.6);
}

 /* Permet de retirer le fond de la table des derniers connectés & le réaligner. */
#connectes_qeel td {
  vertical-align: top;
  background: none;
}

/* -------- FIN MISE EN FORME QEEL (index-box)--------- */

Informations

L'image du QEEL est de 330px de largeur et 230px de hauteur.
Les images de groupe sont de 100px de hauteur et de 75px de hauteur.

Vous pouvez rajouter des groupes o en retirer en ajoutant ce bout de code:

Code:

<div class="infobulle_groupe_qeel"><a href="#" title="Groupe 1"><img src="http://i55.servimg.com/u/f55/09/03/38/36/untitl11.jpg" /></a>
      <div><h2 class="nom_groupe_qeel">Nom du Groupe</h2><section class="txt_groupe_qeel">Texte texte texte texte</section>
      </div>
    </div>

Notez que les groupes ne sont pas centrés. En effet, il vous faudra ajouter une div autour des groupes en lui donnant la largeur qu'il vous faut et margin: auto.
Exemple pour deux groupes:

HTML:

Code:

<div id="qeel">
  <div id="groupes_qeel">
    <div id="contour_groupes_qeel">
    <div class="infobulle_groupe_qeel"><a href="#" title="Groupe 1"><img src="http://i55.servimg.com/u/f55/09/03/38/36/untitl11.jpg" /></a>
      <div><h2 class="nom_groupe_qeel">Nom du Groupe</h2><section class="txt_groupe_qeel">Texte texte texte texte</section>
      </div>
    </div>
    <div class="infobulle_groupe_qeel"><a href="#" title="Groupe 1"><img src="http://i55.servimg.com/u/f55/09/03/38/36/untitl11.jpg" /></a>
      <div><h2 class="nom_groupe_qeel">Nom du Groupe</h2><section class="txt_groupe_qeel">orem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet dolor nulla. Fusce porta, ipsum eu tincidunt aliquam, velit nisl cursus lectus, quis laoreet risus dui a nunc. Maecenas nec erat hendrerit, eleifend nisl quis, posuere enim. In turpis felis, mollis ultrices dui quis, mattis rutrum diam. Donec ac porta purus, in sagittis sem. Suspendisse potenti. Suspendisse porta ac est nec accumsan. Curabitur non dui accumsan, tempor nunc vel, vehicula diam. Phasellus pharetra metus ut tortor commodo lobortis.</section>
      </div>
    </div>
</div>
</div>

CSS:

Code:

#contour_groupes_qeel {
  /* Taille de 2 images + les 10px de marge. */
  width: 210px;
  margin: auto;
  overflow: visible;
}

Modifications supplémentaires

Comme vous avez pu le remarquer, ce code est "brut" c'est à dire que beaucoup de choses sont modulables. Si vous voulez des exemples, de choses à changer ou SAVOIR comment modifier certaines choses, n'hésitez pas à poster à la suite. Voici une liste d'idée qui pourraient être expliquées plus tard si besoin est:

• Avoir une image de fond de QEEL  (CSS à modifier: #QEEL)
  
• Avoir d'autres effets sur l'infobulle pour son apparition, disparition (CSS à modifier: .infobulle_groupe_qeel div et .infobulle_groupe_qeel:hover div, .infobulle_groupe_qeel:focus div
  
• Avoir des effets sur les images de groupes (CSS à ajouter: .infobulle_groupe_qeel img et .infobulle_groupe_qeel img:hover)
  
• Effets sur les blocs (CSS à modifier: #groupes_qeel, #i_whosonline, #utilisateur_online_qeel, #infos_qeel et #connectes_qeel)
  

Un code bien annoté et des explications pour modifier le code, c'est parfait^^

Je te remercie pour ce LS !

Merci beaucoup pour le LS et la réalisation de cette demande ♥

mercii

Merci :)

Merci~!

Merci, j'adore !

merci !

Merci :)

Merci du partage, j'aime beaucoup

Sais plus ou donner de la tête ><

merci :)(aa)

merci :)

Bonjour, merci pour le code. ATTENTION, par contre, il y a un ] au début du code, ça fout tout le css en l'air. *a mis 20 minutes à comprendre pk ça marchait pas ^^"*

Merci pour le partage !