Personnalisation de l'affichage de l'index d'un forum hébergé sur Forumactif, basé sur une maquette fournie par Sygea. En raison de la présence d'une carpe rouge sur les illustrations, je lui ai donné le poétique nom de Scarlet Koi (ou Carpe Écarlate en français mais ça sonne moins classe).
Le thème utilise la version ModernBB de Forumactif et n'est pas compatible par défaut avec les autres versions. Il comporte les modifications et composants suivants :
- Une barre de navigation qui inclut une barre de recherche et un bouton pour les notifications
- Un message d'accueil (PA)
- Des catégories personnalisées
- Un pied de page (dont le QEEL) modifié
Les templates index_body, index_box, overall_footer_begin, overall_footer_end et overall_header devront être modifiés pour l'installer.
- Vous pouvez modifier ce code comme vous en avez envie ;
- Merci de ne pas redistribuer ce code à tort et à travers sur les forums d'entraide, même si vous l'avez modifié ;
- Merci de conserver les crédits présents dans ce code, même après modification (vous pouvez évidemment ajouter un "personnalisé par votrepseudo" si vous voulez) ;
- L'usage de ce code est destiné à un usage strictement personnel et non commercial ;
- Merci d'ajouter un lien retour vers le forum où vous aurez trouvé ces codes sur votre forum.
Note : Elles ne sont pas incluses dans ce repository Github.
- Lien de l'image du header (le "logo" du forum) : https://i.goopics.net/vXRGe.png
- Image de séparation (la barre verticale) : https://i.goopics.net/O5x3w.png
- L'avatar par défaut : https://i.goopics.net/emAgj.png
- L'icone des notifications (pas de nouvelle notif): https://i.goopics.net/4NOkZ.png
- L'icone des notifications (nouvelle notification) : https://i.goopics.net/2powK.png
- L'illustration des forums : https://i.goopics.net/X2A0g.png
- L'image de fond du pied de page (QEEL) : https://i.goopics.net/d7gXr.png
- Les étoiles pour les top sites :
A vous de créer les autres images, à savoir :
- Les icones du staff (format 100x100px)
- Les icônes des personnages prédéfinis (format 50x50px)
- Les boutons de partenariat (format à votre choix)
Pour que ce thème fonctionne au mieux, voici les réglages à avoir sur votre forum :
- Pour avoir les notifications, activez la toolbar : Dans votre panneau d'administration, rendez vous dans l'onglet Modules → Toolbar → Configuration et cochez "Oui" pour l'option "Activer la toolbar". Si vous n'aimez pas le système de notifications de Forumactif, cette étape n'est pas obligatoire.
- Déplacez le lien "Rechercher" : J'ai choisi de laisser le bouton "Rechercher" dans la barre de navigation en plus de la recherche rapide, pour ceux qui préfèrent faire une recherche avancée. Idéalement, déplacez le dans la barre de navigation pour qu'il se trouve juste avant le bouton "S'enregistrer". Pour cela, rendez vous dans l'onglet Affichage → Page d'accueil → En-tête & Navigation → Barre de navigation et utilisez les flèches pour déplacer les éléments du menu.
- Désactivez la chatbox : Elle est fonctionnelle, mais son affichage n'a pas été modifié pour ce thème. Il vous faudra trouver vous même comment la personnaliser sous modernBB si vous tenez à l'utiliser. Pour la désactiver, rendez vous dans votre panneau d'administration, onglet Modules → Chatbox → Configuration et sélectionnez "Non" pour l'option "Activer la Chatbox".
- Désactivez l'affichage de la légende des statuts des messages : Dans le panneau d'administration, sous l'onglet Général → Messages et Emails → Configuration, trouvez l'option "Afficher la légende des statuts des messages" et cochez "Non".
- Désactivez l'affichage de la connexion rapide : Comme pour la chatbox, elle est fonctionnelle, mais pas personnalisée pour ce thème. Vous pourrez la désactiver dans votre panneau d'administration, onglet Affichage → Page d'Accueil → Généralités → Général, trouvez l'option "Affichage de la connexion rapide" et choisissez "Ne pas afficher".
- Réglez la structure des catégories : dans votre panneau d'administration, onglet Affichage → Page d'accueil → Structure et hiérarchie → Niveau de compression de l'index, sélectionner l'option Séparer les catégories sur l'index : Moyen
- Activez l'affichage des sous-forums : dans votre panneau d'administration, onglet Affichage → Page d'accueil → Structure et hiérarchie → Hiérarchie, réglez l'option "Afficher les liens vers les sous-forums" sur "Oui" ou "avec une image".
- Activez l'affichage du dernier message posté : dans votre panneau d'administration, onglet Affichage → Page d'accueil → Structure et hiérarchie → Hiérarchie, réglez l'option Afficher le titre du sujet du dernier message d'un forum sur l'index sur "Oui"
- Activez l'affichage de l'avatar du dernier posteur : dans votre panneau d'administration, onglet Affichage → Page d'accueil → Structure et hiérarchie → Hiérarchie, réglez l'option "Afficher les avatars dans la colonne "Derniers messages" sur "Oui".
- Affichez la liste des membres connectés au cours des dernières heures : dans votre panneau d'administration, onglet Affichage → Page d'accueil → Généralités → Général, réglez l'option "Afficher la liste des membres connectés au cours des 24* dernières heures :" sur "Oui". (* Vous pouvez changer la période).
- Ce thème est prévu pour une largeur de forum de 1200px minimum
- Pour ajouter l'image du header, vous devez tout simplement changer le logo via le panneau d'administration (onglet Affichage → Images et Couleurs → Gestion des Images → Mode Avancé et mettre le lien de l'illustration du header pour le logo)
- Comme les groupes sont affichés sur le message d'accueil, ils ne sont pas présents dans le QEEL, ce n'est pas un oubli
- Les catégories n'utilisent pas les images définies dans le panneau d'administration pour les icônes du forum : c'est le contour des images qui change pour indiquer le statut de lecture de la catégorie.
- Vous pouvez illustrer chaque catégorie avec une image différente. Pour cela, au moment de définir un nouveau forum (dans Général → Forum → Catégories et forums), remplissez le champ Adresse de l'image par le lien d'une image d'illustration de votre choix. Leur format est à votre discrétion, les dimensions étant réglables dans cette partie du code CSS :
/* illustration des forums */ --img-forum-par-defaut: url("https://i.goopics.net/X2A0g.png"); --img-forum-largeur: 250px; --img-forum-hauteur: 150px;
Pour installer cet affichage sur votre forum en version ModernBB, vous allez devoir modifier les templates de base et rajouter un peu de CSS et de Javascript :
Remplacez vos templates index_body, index_box, overall_footer_begin, overall_footer_end et overall_header dans votre panneau d'administration (onglet Affichage → Templates → Général) par ceux fournis dans le dossier /templates. N'oubliez pas de les enregistrer et de les valider.
Installez (et personnalisez) la feuille de styles CSS en copiant collant le code dans /misc/scarletkoi.css dans Affichage → Images et Couleurs → Couleurs, onglet Feuille de style CSS. Cochez "non" à toutes les options du CSS.
Notez le code présent au début de la feuille de styles :
/* définition des variables utilisées */
:root {
(plein de trucs ici)
}Je n'ai probablement pas pensé à tout, mais c'est ici que vous pourrez faire l'essentiel de vos modifications de couleurs et images. Aidez-vous du nom des variables et des commentaires pour savoir ce que vous modifiez. Le reste du code est commenté pour vous aider à vous repérer, mais en principe le nom des classes vous permet de savoir à quel élément vous avez affaire.
Rendez-vous dans la gestion des codes Javascript de votre panneau d'administration (onglet Modules → HTML & JAVASCRIPT → Gestion des codes Javascript) et creéz un nouveau javacript pour chacun des scripts présents dans le dossier /scripts/, avec les règles de placement suivantes :
- Script de déplacement du message d'accueil : Activé sur l'index uniquement
- Script du menu de navigation : Activé sur toutes les pages
- Script de l'avatar dans le QEEL : Activé sur l'index uniquement
- Script des onglets dans le QEEL : C'est celui qui a un nom "bizarre", il n'est pas de moi, comme vous pourrez le voir dans son contenu ^^ Il ne doit être activé sur aucune page. Une fois ce script enregistré, notez son URL dans la liste des scripts de votre forum, puis allez éditer le template
overall_footer_beginet trouvez le texteURL_SCRIPT_ONGLETS_SUR_VOTRE_FORUM. Remplacez le par l'URL du script !
- Vous pouvez afficher un titre au dessus du message d'accueil
- Le code est prévu pour trois icones de staff (format 100*100px) mais devrait pouvoir être adapté pour en rajouter ou en supprimez si vous modifiez les bonnes valeurs dans le CSS (en particulier la largeur de la première colonne)
- Il vaut mieux éviter d'avoir plus de 5 liens dans le menu de navigation (mais là encore ça se gère en jonglant dans le CSS)
- Vous pouvez avoir plus (ou moins) de six groupes affichés (il vous faudra juste adapter la hauteur de la PA)
- Vous pouvez avoir plus (ou moins) de 4 images de prédéfinis affichés (il vous faudra juste adapter la hauteur de la PA)
- Vous pouvez mettre autant de partenaires et de tops que vous le souhaitez
- Attention : L'ordre des éléments dans le code ne correspond pas exactement à celui que vous pouvez voir à l'affichage ;) Aidez-vous des commentaires ou des noms de classes pour savoir ce qui correspond à quoi.
Dans votre panneau d'administration, rendez vous dans l'onglet Affichage → Page d'accueil → Généralités → Message sur la page d'accueil et dans le champ de texte Contenu du message collez le code du message d'accueil fourni ici.
Note : Veillez à ce que le bouton "basculer le mode d'édition" au bout de la barre de mise en forme soit bien enfonçé (son fond doit être blanc).
Il n'y en a pas (pour l'instant), ce code ne concerne que l'index du forum. Si Sygea fait une maquette pour ces éléments additionnels, je les ajouterai. En attendant, il faudra faire sans.
Dans le CSS, trouvez la partie de code avec les classes dont les noms commencent par .sklmHeader et rajoutez à la suite les règles CSS suivantes :
.wrap.sklmHeader_wrap-ban {padding:0;margin:0;width:100%;max-width:100%;}
.wrap.sklmHeader_wrap-ban img {max-width:100%;}J'ai fait un petit guide pour l'installation individuelle des éléments si ça vous intéresse.
J'ai également fait un petit guide de personnalisation du message d'accueil :)
Là encore, il y a un guide de personnalisation du QEEL pour vous dépanner.
En cas de questions, vous pourrez me contacter sur Epicode (où j'ai partagé ce code) et potentiellement via la fonction "Issues" de github.