Comme de plus en plus d'internautes succombent à la folie du weblog, j'ai essayé d'imaginer de quelle façon on pouvait transformer un forum les-forums.com pour le faire ressembler à un blog.

Préparatifs

Analysons pour cela la fonction d'un blog:
- saisie de nouvelles par ordre chronologique inverse par le(s) rédacteur(s), avec texte et images
- saisie de commentaires par les visiteurs, en texte seul
- différentes catégories

Voyons maintenant comment adapter un forum pour ces fonctions:

Saisie de nouvelles

- On peut utiliser pour cela les messages. A chaque nouvelle un topic dont le message contient le texte et les images.
- Le forum devra autoriser un ou plusieurs rédacteurs à écrire dans le forum, avec un grade personnalisé par exemple.
- Le forum devra autoriser l'insertion d'images
- Aucun utilisateur ne doit pouvoir créer de topic sans autorisation des rédacteurs: il faut donc bloquer le forum en interdisant la création de topics (ce qui n'empêche pas d'y répondre si on a un compte utilisateur)

Saisie de commentaires

- Léger problème: on ne peut rien écrire sans avoir au moins un compte utilisateur sinon mieux. Donc pas de commentaires sans droit de réponse et donc d'écriture, et donc tout visiteur doit pouvoir utiliser un compte pour taper des commentaires.
Soit on fait un forum ouvert sans obligation d'entrer une adresse e-mail, sans inscription par e-mail et sans e-mail unique
Soit on ouvre arbitrairement un compte unique dont le nom et le mot de passe seront donnés à tout visiteur, mais ça implique que personne ne s'amuse à changer le mot de passe... peu probable
==> On va donc retenir la solution de l'inscription libre sans e-mail
- On doit empêcher l'insertion d'images dans les commentaires: le plus simple est un hack CSS de la skin du forum: il suffit de déclarer dans le style que toutes les images dans les messages sont invisibles (visibility: hidden) ou non placées (display: none)

Différentes catégories

Je pense tout naturellement à une hiérarchie du type:
Forum blog
Catégories & sous-forums catégories et sous-catégories
Topics nouvelles
Premier message de chaque topic la nouvelle en elle-même
Les messages suivants les commentaires

En fait on a quasiment tout pour faire un blog sommaire avec un forum.
Le plus gros travail va être le repérage de nos outils de travail, c.a.d. les règles de style à modifier. Il faut donc bien identifier sur quoi on veut agir et à quoi ça correspond dans le code HTML.

La mise en forme des nouvelles

C.a.d. le premier message de chaque topic.

Heureusement des ID et des classes de style adaptés existent déjà dans les skins officielles et nous allons les réutiliser.
Le sélecteur de style que nous allons utiliser est

div#div_forum div.liste_messages_forum_11 table.premier_message td.message_zone_message_date_sujet div.message_message

qui pointe vers le bloc DIV contenant le texte du premier message de chaque topic dans un sous-forum donné (le n°11 dans cet exemple).
Les sous-forums faisant déjà office de catégories, on pourra vouloir mettre une ambiance différente par catégorie, du coup on pourra préciser pour quel sous-forum on fait le hack (donc un hack par sous-forum).
Si on veut définir des règles de style communes aux nouvelles de chaque catégorie, il faut tronquer le sélecteur et utiliser quelque chose comme

div#div_forum table.premier_message td.message_zone_message_date_sujet div.message_message

On perd un peu en rigueur et en précision mais le résultat sera très bien et le sélecteur pointera vers les premiers messages des topics de tout le bloc de forum, donc de n'importe quel sous-forum.
A votre charge de choisir les règles de style à appliquer au sélecteur pour obtenir l'apparence choisie.

La nouvelle en elle-même: le premier message

On pourrait par exemple vouloir une taille de police plus grosse, en gras et d'une couleur différente, avec un une couleur de fond différente également, et une marge inférieure pour bien le séparer des messages suivants qui seront des commentaires:

div#div_forum div.liste_messages_forum_11 table.premier_message td.message_zone_message_date_sujet div.message_message
{
    font-size: large;
    font-weight: bold;
    color: white;
    background-color: #6666AA;
    margin-bottom: 4em;
}

On peut aussi mettre le sujet du message et la date en plus gros:

div#div_forum div.liste_messages_forum_11 table.premier_message td.message_zone_message_date_sujet div.message_zone_date_sujet
{
    font-size: larger;
    font-weight: bold;
    color: blue;
    height: 1.5em;
}

Les commentaires: les messages suivants

En fait on va définir l'ensemble des messages et faire une exception pour le premier, puisqu'on possède un sélecteur qui pointe vers le premier message mais pas de sélecteur qui pointe précisément sur tous les messages sauf le premier.
Je conseille donc de définir l'ensemble des messages comme s'ils étaient des commentaires, par exemple avec une petite police, via l'onglet Apparence-thème de l'administration du forum.
Cela dit, on va tout de même faire quelques petites améliorations, à chaque fois en définissant le comportement pour *tous* les messages puis en corrigeant pour le premier qui sera particulier:

- On enlève le bloc du sujet du topic du flux d'affichage de la page et on garde la date et l'heure d'envoi des commentaires

div#div_forum td.message_zone_message_date_sujet div.message_zone_date_sujet div.message_sujet
{
    display: none;
}
div#div_forum table.premier_message td.message_zone_message_date_sujet div.message_zone_date_sujet div.message_sujet
{
    display: block;
}

- Pour réduire la hauteur des commentaires on fait aussi disparaître du flux la zone des icônes d'action, dont l'empilage vertical impose une hauteur minimale aux messages, mais aussi à gauche des messages de commentaires, dans la zone de signature: la signature elle-même, le séparateur, et on réduit en non gras et plus petit le lien du pseudo

div#div_forum td.message_zone_pseudo a.message_lien_pseudo
{
    font-size: small;
    font-weight: normal;
}
div#div_forum table.premier_message td.message_zone_pseudo a.message_lien_pseudo
{
    font-size: medium;
    font-weight: bold;
}
div#div_forum td.message_zone_pseudo div.separateur,
div#div_forum td.message_zone_pseudo div.message_signature,
div#div_forum td.message_zone_pseudo div.message_date_inscription,
div#div_forum td.message_zone_pseudo div.message_image_membre,
div#div_forum td.message_zone_actions
{
    display: none;
}
div#div_forum table.premier_message td.message_zone_pseudo div.separateur,
div#div_forum table.premier_message td.message_zone_pseudo div.message_signature,
div#div_forum table.premier_message td.message_zone_pseudo div.message_date_inscription,
div#div_forum table.premier_message td.message_zone_pseudo div.message_image_membre,
div#div_forum table.premier_message td.message_zone_actions
{
    display: block;
}

- Et enfin comme prévu au départ on retire du flux d'affichage les blocs d'image:

div#div_forum td.message_zone_message_date_sujet div.message_message div.message_contenu img
{
    display: none;
}

Conclusion

A vous maintenant de continuer les modifications, ce document ne sert qu'à titre d'exemple pour démontrer qu'on peut faire beaucoup de choses avec la puissance des CSS pour peu qu'on sache
1) reconnaître dans le code HTML de la page les structures que l'on veut modifier
2) utiliser les classes et les IDs qui leur sont attribuées dans le code HTML généré par les-forums, pour construire des sélecteurs de style précis et pertinents
3) leur attribuer les bonnes règles de style