Introduction

Pourquoi "Utopia" ?

Il s'agit du nom du forum pour lequel j'avais réalisé ce Qui Est En Ligne. Vous pouvez d'ailleurs voir le QEEL originel dans l'image de démonstration. Le forum ayant péri corps et bien dans les méandres de l'Internet, j'ai remis à jour le template du QEEL pour vous le proposer comme code directement exploitable.

Spécifications

• Affiche un résumé des statistiques
  
• Phrases du QEEL personnalisées
  
• L'image du QEEL est celle que vous uploadez dans votre panneau d'administration
  
• Les groupes sont mis en page automatiquement, pas besoin de trifouiller le code pour mettre la liste à jour.
  
• Les liens des statistiques (Sujets actifs du jour, top 20 des posteurs) sont placés dans le QEEL, il faut donc les supprimer de leur emplacement d'origine.
  
• Les anniversaires ne sont PAS inclus
  
• Affiche la liste des utilisateurs connectés au cours des dernières heures
  
• Affiche les statistiques de la chatbox (n'affichera rien si vous n'avez pas activé l'option ), mais pas le lien vers celle ci.
  

Règles d'utilisation

• Vous pouvez éditer ce code à votre convenance
  
• Vous ne pouvez pas redistribuer ce code sur un autre forum, quel qu'il soit.
  
• Vous devez impérativement laisser mes crédits, même après modification (vous pourrez évidemment ajouter "personnalisé par (pseudo)")
  
• L'usage de ce code est autorisé pour un usage strictement personnel et non commercial.
  
• En aucun cas vous ne pouvez utiliser ce code sur un forum faisant la promotion du racisme, de la xénophobie, de l'homophobie, de la pédophilie, de la pornographie, du warez et de tout autre contenu de nature discriminatoire ou illégale. Cette interdiction s'applique également aux forums RPG dits "Hentai/Yaoi/Yuri" qui ne mettent pas en place les mesures minimales de protection contre les mineurs (c'est à dire au minimum le contenu sensible caché aux visiteurs, un avertissement clair et visible à l'inscription et sur l'accueil, et pas de personnages mineurs)
  
• Merci d'ajouter un lien retour vers CSSActif sur votre forum si vous utilisez ce QEEL.
  

Scripts à installer

Allez dans votre panneau d'administration, onglet Modules puis dans Gestion des Codes Javascript. Assurez-vous que la gestion du javascript est activée, puis créez les deux pages javascript qui suivent, que vous activerez sur l'index.

Code JS n°1 - Variables de templates dans le QEEL

Copiez collez le code que vous trouverez à cette adresse dans un nouveau fichier javascript.
Vous trouverez plus d'explications sur ce code alambiqué en allant lire ce tutoriel sur le Forum des Forums. Il nous servira à afficher le nombre de messages, de sujets, de membres et le dernier inscrit.

Code JS n°2 - Script de personnalisation des phrases

Le script qui suit remplace différentes parties des phrases par défaut du QEEL. La fonction remplaceText cible les éléments précisés par un identifiant dans le HTML et remplace la première partie entre guillemets par la seconde, comme ceci :

Code:

remplaceText('#identifiant', "texte à remplacer","Texte de remplacement");

Les identifiants utilisables sont :

• totalUsersOnline pour le nombre d'utilisateurs connectés
  
• loggedInUsers pour le nombre d'utilisateurs connectés pendant les dernières 24h
  
• totalChattersOnline pour le nombre d'utilisateurs connectés sur la chatbox
  

Et donc, le script en question (rappel : vous devez répondre au sujet pour voir le code) :

Édition du template index_body

Rendez-vous dans votre panneau d'administration, onglet Affichage puis dans le menu Templates » Général et ouvrez le template index_body.

Suppression des liens vers les pages de statistiques

Vu qu'ils sont utilisés dans cette structure de QEEL, vous pouvez retirer ceux qui existent actuellement ! Cherchez cette partie et supprimez-la :

Code:

<a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
 <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
 <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>

Code du QEEL

Cherchez les commentaires suivants :

Code:

<!-- BEGIN disable_viewonline -->

Code:

<!-- END disable_viewonline -->

Supprimez tout ce qui se trouve entre les deux.

Puis ajoutez le code qui suit (caché par défaut, pour rappel) :

En principe, vous ne devriez pas avoir besoin de trop éditer le contenu.

Le CSS

Dans votre panneau d'administration, choisissez la rubrique Affichage, puis dans le menu Images et couleurs » Couleurs sélectionnez l'onglet feuille de styles CSS et collez y le code qui suit :

J'ai essayé de commenter au mieux pour les débutants, mais il vous faudra un minimum de bases en CSS pour modifier les détails selon vos goûts.

Bonus : fichier LESS

Pour pouvoir modifier le code de votre QEEL sans avoir à vous battre avec le CSS (surtout si vous ne le maîtrisez pas), vous pouvez également utiliser le fichier LESS qui suit. Éditez les variables puis utilisez le logiciel Crunch! [voir le tutoriel] pour comiler le code et générer votre CSS personnalisé

Le code LESS est ci après :