Qui est en ligne ...

[Saki-vampire]

Bonjour à tous,

Voilà, je suis une "débutante" en matière de forum, et j'aimerais bien changer l'apparence de mon "qui est en ligne". Comme je ne m'y connais pas du tout en code html et css, je m'en remet à vous --".

J'aimerais bien savoir comment faire pour que le QEEL de mon forum ressemble à peut près à ça :



Excusez moi si le schéma est un peu bizarre ^^"

Merci d'avance.

[Invité]

Bonjour et Bienvenue sur le Forum des Forums Forumactif Vu que vous êtes nouveau, voici quelques sujets importants : Sécurité : mail de fondation - Ce qu'il ne faut pas faire Questions/Réponses fréquentes - Listing Trucs et astuces - Listing La fonction Rechercher La FAQ de Forumactif.com N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse

Bonjour,

je déplace dans la bonne rubrique, où vous serez guidée pour la réalisation de votre QEEL. Pourriez-vous juste préciser si vous avez déjà des templates modifiés, notamment l'index body, et si vous avez une feuille de CSS personnalisée?

Cordialement.

[Saki-vampire]

(Désolé pour mon post dans la mauvaise rubrique ! )

Non, je n'ai rien modifié pour l'instant

[Saki-vampire]

Up

[Saki-vampire]

Up

[Invité]

Bonjour,
Je vous propose un début de modification pour s'approcher du résultat voulu.
Nous allons commencer par ajouter les 2 images de chaque coté:
Repérez:

Code:

<!-- BEGIN disable_viewonline -->

et remplacez par:

Code:

<!-- BEGIN disable_viewonline -->
<table width="100%" cellspacing="8"><tr><td class="forumline"><img src="url de la première image" /></td><td>

Repérez:

Code:

<!-- END disable_viewonline -->

et remplacez par:

Code:

</td><td class="forumline"><img src="url de l'image 2" /></td></tr></table>
<!-- END disable_viewonline -->

Ensuite nous ôtons l'image dans la partie centrale:
Repérez et supprimez:

Code:

      <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>

Pour la suite, il faudrait que je sache si tout votre forum a des contours arrondis, quels sont les éléments que vous voulez dans la partie centrale précisément, si vous souhaitez conserver l'image "normale" du QEEL d'un côté ou de l'autre?

Cordialement.

[Saki-vampire]

Bonjour,

Non, mon forum n'a pas les contours arrondis.
Dans la partie centrale, j'aimerais bien avoir quelque chose se rapprochant de ça:

J'aimerais bien mettre cela sous forme de texte centré, par exemple pour le nombre de membres, marquer à la place : Le pensionnat abrite x membres.

Et pour l'image du QEEL je ne veux pas spécialement la garder. Je voudrais juste mettre deux images différentes sur chaque côté.

Merci d'avance

[Saki-vampire]

Up

[Invité]

Bonjour,
Donc nous sommes sur la bonne voie. Dans les modification données précédemment, il faut remplacer "forumline" par "contourqeel".
Ensuite:
1.Supprimer l'en-tête classique:
Cherchez:

Code:

      <td class="catHead" colspan="2" height="28">
      <!-- BEGIN switch_viewonline_link -->
      <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
      <!-- END switch_viewonline_link -->

      <!-- BEGIN switch_viewonline_nolink -->
      <span class="cattitle">{L_WHO_IS_ONLINE}</span>
      <!-- END switch_viewonline_nolink -->
      </td>

et remplacez par:

Code:

<td><span class="titreqeel"> Qui est en ligne ?></span></td>

2. Supprimer l'image normale:
Cherchez et supprimez:

Code:

      <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>

3.Réunir toutes les variables au centre:
Ceci:

Code:

<td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}

      {TOTAL_USERS}

      {NEWEST_USER}</span></td>
   </tr>
   <tr>
      <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}

      {RECORD_USERS}

      

      {LOGGED_IN_USER_LIST}</span></td>
   </tr>
   {L_CONNECTED_MEMBERS}
   {L_WHOSBIRTHDAY_TODAY}
   {L_WHOSBIRTHDAY_WEEK}
   <tr>
      <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
   </tr>
   <!-- BEGIN switch_chatbox_activate -->
   <tr>
      <td class="row1">
         <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}

            <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
            //<![CDATA[
            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            //]]>
            </script>
            <!-- END switch_chatbox_popup -->
         </span>
      </td>
   </tr>
   <!-- END switch_chatbox_activate -->

devient:

Code:

<td class="" width="100%" align="center"><span class="gensmall">{TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}<br />
                {TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      {LOGGED_IN_USER_LIST}<br />
</span>
              <div style="text-align: left !important;"><span class="gensmall"> {LEGEND} : {GROUP_LEGEND}</span></div>
<hr style="border: 1px solid #000;" />
   <table align="center">{L_CONNECTED_MEMBERS}
   {L_WHOSBIRTHDAY_TODAY}
   {L_WHOSBIRTHDAY_WEEK}</table>
</td>
   </tr>
   <!-- BEGIN switch_chatbox_activate -->
   <tr>
      <td class="" align="center">
         <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}

            <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
            //<![CDATA[
            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            //]]>
            </script>
            <!-- END switch_chatbox_popup -->
         </span>
      </td>
   </tr>
   <!-- END switch_chatbox_activate -->

4. Ajouter le style dans la feuille CSS:
Ajoutez dans PA > Affichage > couleurs > feuille de style CSS:

Code:

/*cadres du QEEL*/
.contourqeel{
border: 2px solid #000;
padding: 3px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;}

/*ôter le fond des dernier connectés*/
#lastc .row1{background: transparent;}

---

Dans le template vous devez personnaliser les deux images qui entourent les statistiques, <img src="url de la première image" /> , <img src="url de l'image 2" /> et la ligne de séparation <hr style="border: 1px solid #000;" />. Dans la partie CSS, personnalisez les cadres à votre convenance.

---

Pour obtenir des phrases personnalisées, il faut modifier chaque variable à l'aide d'un script. Le tutoriel est ici:
> https://forum.forumactif.com/t274260-modifier-le-qui-est-en-ligne-par-template
Cette étape étant assez compliquée, gardez-la pour la fin quand tout vous paraîtra bien en place .

Cordialement.

[Saki-vampire]

Je vous remercie, c'est exactement comme je voulais, mais il y un détail qui me chiffonne ... Est-ce normal que le cadre arrondit ne prenne que l'image de gauche ?

[Invité]

Bonjour,

Si vous avez bien remplacer les class des 3 cadres par "countourqeel" , il n'y a pas de raison que ça ne prenne que sur un seul cadre. Vous pouvez donner la partie de votre template Index-body comprise entre <!-- BEGIN disable_viewonline --> et <!-- END disable_viewonline --> si vous ne parvenez pas à trouver ce qui pose soucis .

Cordialement.

[Saki-vampire]

Ah ! J'avais oublié de faire ça ^^" ...
Maintenant c'est parfait !
Je vous remercie beaucoup pour votre aide !!