FluxBB.fr

Le site des utilisateurs francophones de FluxBB.

Recherche rapide

Mise en forme et CSS

Comment modifier l'apparence du forum ?

Tout le style est géré par des fichiers CSS situés dans les dossiers /style et /style/imports, ceux du premier répertoire étant de la forme monsuperstyle.css et correspondant à la mise en forme générale, ceux du second de la forme monsuperstyle_cs.css et définissent surtout les couleurs et bordures. Les fichiers /style/imports/base.css et /imports/base_admin.css contiennent une mise en forme minimale.

Le fichier /style/monsuperstyle.css va contenir au tout début quelque chose comme ça :

/****************************************************************/
 
/* 1. IMPORT DES FEUILLES DE STYLE */
 
/****************************************************************/
 
/* Import de la feuille de style de base */
@import url(imports/base.css);
 
/* Import du thème de couleur */
@import url(imports/monsuperstyle_cs.css);

En CSS, la priorité est donnée à la dernière instruction, donc dans notre cas, les instructions données dans style/imports/monsuperstyle_cs.css sont prioritaires sur celles données dans style/imports/base.css, et celles de style/monsuperstyle.css ont la priorité sur toutes les autres.

Les styles de base n'utilisent aucune image, le parti pris de ce moteur de forum étant la légèreté, cependant, il est assez facile de modifier un style ou de créer le sien à condition de comprendre le fonctionnement du CSS.

Conseil : consulter des sites expliquant l'utilisation du CSS et ouvrir les fichiers commentés du style Oxygen pour comprendre le fonctionnement des styles avec le forum.

Comment remplacer le titre des forums par une image ?

Pour toutes les solutions il est recommandé de placer les images dans le dossier img de FluxBB.

Première solution

Cette solution permet d'ajouter une image à la place du titre grâce à la balise image de (X)HTML. Si vous utilisez plusieurs styles, cette solution à un inconvénient : c'est la même image pour tous les styles, ce qui ne correspond pas forcément. Par ailleur elle nécessite de modifier le fichier header.php, ce qui n'est pas conseillé pour effectuer facilement les mises à jour.

Ouvrir header.php et rechercher (ligne 139):

<h1><span>'.pun_htmlspecialchars($pun_config['o_board_title']).'</span></h1>

remplacer par

<h1><span><img src="chemin/de/mon/image.png" alt="'.pun_htmlspecialchars($pun_config['o_board_title']).'" /></span></h1>

Deuxième solution

La deuxième solution essaie de palier les inconvénients de la première en mettant les images en arrière plan grâce à CSS. Nous vous recommandons cette technique.

Ouvrir style/votre-style.css et ajoutez à la fin :

/****************************************************************/
/** 11. CUSTOM IMAGE HEADER **/
/****************************************************************/
 
#brdtitle h1 span {
	display: block;
	background-image: url(chemin/de/mon/image/image.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	height: 50px; /* Hauteur de l'image */
	width: 200px; /* largeur de l'image */
	text-indent: -200%;
}

Forums à largeur fixe

Par défaut la largeur des forums est extensible, pour fixer cette largeur, par exemple à 730 pixels procéder comme suit :

Chercher dans votre feuille de style la partie qui gère l'espacement des pages, dans les styles par défaut il s'agit de cela :

HTML, BODY {MARGIN: 0; PADDING: 0}
#punwrap {margin:12px 20px}

Pour fixer la largeur à 730 pixels changer comme ceci :

HTML, BODY {MARGIN: 0; PADDING: 0; text-align:center}
#punwrap {width:730px; margin:12px auto; text-align:left}

Changer les couleurs de fond de certaines catégories

Modification crée par .g@sp. dans ce sujet du forum FluxBB.fr

Avec cette astuce, vous pouvez changer la couleur de la ligne de titre de chaque catégorie (ici “FluxxBB en français”, “FluxBB”, “Divers” et “Liens”)

ouvrez index.php

Cherchez

<h2><span><?php echo pun_htmlspecialchars($cur_forum['cat_name']) ?></span></h2>

Remplacez par :

<h2 id="id_<?php echo $cur_forum['cid'] ?>"><span><?php echo pun_htmlspecialchars($cur_forum['cat_name']) ?></span></h2>

ouvrez import/votrestyle_cs.css

Cherchez

.pun H2, #brdmenu {BACKGROUND-COLOR: #xxxxxx; COLOR: #xxxxxx}

(où xxxxxx sont la couleur de fond et la couleur du texte du menu, et de chaque catégorie)

Ajoutez après:

.pun H2#id_* {BACKGROUND-COLOR: #xxxxxx; COLOR: #xxxxxx}

Où * est l'indentifiant de la catégorie dont vous voulez changer les couleurs et xxxxxx la (ou les) nouvelle(s) couleur(s).

Il faut ajouter cette ligne pour chaque catégorie dont vous voulez changer les couleurs (si vous ne connaissez pas l'id_* de la catégorie, affichez le code source, reherchez “id_”, vous trouverez les numéros, ou jetez un coup d'oeil à la table “catergories” de votre base de données, c'est le champ “id”.)

Vous pouvez aussi par exemple mettre une image de fond aux catégorie avec les propriétés CSS.

.pun H2#id_* {BACKGROUND: #xxxxxx url(/chemin/image.png) no-repeat 0 0}

Ajouter des icônes aux liens "Citer" "Supprimer" etc. en bas des messages

Pour ajouter des icônes aux liens situés en bas des messages (Signaler Modifier Supprimer Citer) nous allons utiliser les arrières plans CSS.

Si vous regardez le fichier sources de cette partie des forums vous verrez quelque chose comme ça :

<div class="postfootright">
	<ul>
		<li class="postreport"><a href="misc.php?report=1645">Signaler</a> | </li>
		<li class="postdelete"><a href="delete.php?id=1645">Supprimer</a> | </li>
		<li class="postedit"><a href="edit.php?id=1645">Modifier</a> | </li>
		<li class="postquote"><a href="post.php?tid=3027&amp;qid=1645">Citer</a></li>
	</ul>
</div>

Nous avons donc une boite classépostfootright qui contient une liste non-ordonnée de lien, chaque item de cette liste étant classé de la façon suivante :

  • postreport : lien pour signaler un message
  • postdelete : lien pour supprimer un message
  • postedit : lien pour modifier un message
  • postquote lien pour citer un message

Nous allons donc utiliser ces différentes classes pour appliquer nos arrières plans masi avant cela il faut évidement placer les images de nos icones dans le répertoire images. Disons que pour cet exemple nous mettrons dans le répertoire /forums/img/mon_style/ les images suivantes :

  • bt_report.png comme icône pour le lien “Signaler”
  • bt_delete.png comme icône pour le lien “Supprimer”
  • bt_edit.png comme icône pour le lien “Modifier”
  • bt_quote.png comme icône pour le lien “Citer”

Une fois les images envoyées sur le serveur il ne nous reste plus qu'à placer dans notre fichier CSS les sélecteurs qui conviennent. Comme il s'agit de décoration j'ai choisi de mettre les sélecteurs CSS dans le fichier /forums/style/imports/mon_style_cs.css mais rien ne vous empêche de les mettre dans /forums/style/mon_style.css il suffira simplement d'ajuster le chemin des images d'arrières plans.

Voici donc le premier sélecteur pour le lien “Signaler”

div.postfootright li.postreport {background: transparent url(../../img/mon_style/bt_report.png) no-repeat 0 0; }

Voilà mon icône apparait effectivement mais je constate un premier problème : l'image est située sous le lien, je veut qu'elle apparaisse à côté, avant le lien. Il va donc falloir que j'applique une marge interne à un élément, deux solutions, soit je met la marge sur l'élément li soit je l'applique à l'élément lien a. Pour que l'icone soit “cliquable”, je vais appliquer cette marge au lien :

div.postfootright li a { padding-left: 20px; }

Ici il faut évidement régler la taille de la marge en fonction de la taille de l'image.

Après selon la taille de l'image vous pouvez rencontrer d'autre problèmes, par exemple l'image peut être tronquée en haut et en bas, ceci est due à la taille de la boite de l'élément li ; en effet cette dernière ne fait en hauteur que la taille que le texte du lien prend en hauteur, pour corriger cela il faut appliquer une marge au dessus et en dessous du texte à l'élément de liste de cette façon :

div.postfootright li { padding: 5px 0 5px 0; }

Autre problème possible : l'image peut se trouver “trop haute” par rapport au texte du lien, dans ce cas il suffit de la positionner de cette façon :

div.postfootright li.postreport {background: transparent url(../../img/mon_style/bt_report.png) no-repeat 0 5px; }

Evidement toutes ces dimensions sont à ajuster en fonction de voter style et des images utilisées.

Voilà théoriquement vous devez avoir une belle icône cliquable à votre lien “Signaler” il ne reste plus qu'à mettre en place les sélecteurs pour les autres liens et au final vous devez obtenir quelque chose comme ça :

div.postfootright li { padding: 5px 0 5px 0; }
 
div.postfootright li.postreport {background: transparent url(../../img/mon_style/bt_report.png) no-repeat 0 5px; }
div.postfootright li.postdelete {background: transparent url(../../img/mon_style/bt_delete.png) no-repeat 0 5px; }
 
div.postfootright li.postedit {background: transparent url(../../img/mon_style/bt_edit.png) no-repeat 0 5px; }
div.postfootright li.postquote {background: transparent url(../../img/mon_style/bt_quote.png) no-repeat 0 5px; }
 
fluxbb_1_2/mise_en_forme_et_css.txt · Dernière modification: 2010/06/26 22:26 (édition externe)