Si vous essayez de mettre des folders de sujets plus gros que ceux par défaut de Prosilver, voici quelques fixes CSS pour vous permettre d'éviter le chevauchement du texte ainsi que d'avoir une partie de l'icone cachée.
Rappel : Pour modifier le CSS du forum, au delà de l'édition simplifiée des couleurs et des images, vous devez passer par
Affichage > Couleurs > (onglet) Feuille de style CSS, puis vous aurez un champ où vous pouvez ajouter du code CSS qui aura priorité sur les propriétés qui ont été déjà définies dans la feuille externe. Le CSS permet de pousser plus la personnalisation de l'apparence du forum. Il existe plusieurs sites pour apprendre le CSS, dont
le site du zéro, dont ses cours sont adaptés aux débutants.
Corriger le chevauchement
Les folders de Prosilver font normalement 35 pixels de dimensions. Or, quand on met des folders ayant des dimensions plus grandes, le texte chevauche l'icone et comme je ne retrouve plus le champ pour ajuster ça dans le panneau d'admin de Forumactif, on va y aller avec les corrections par codes CSS.
Admettons que vos icones font 40*40. On va donc ajouter un petit padding-left de 10 ou 20 pixels pour tasser le texte vers la droite :
.topics li.row dl.icon, .pmlist li.row dl.icon
{
padding-left: 20px;
}
Notez que je l'ai donné à la fois pour les sujets et les messages privés, puisqu'ils utilisent les même dossiers et ont tous deux le même problème de chevauchement.
Réglez ensuite le nombre de pixels pour avoir juste assez d'espace entre l'icone et le texte.
Enlever la bordure de gauche de la colonne des icones de messages
En appliquant le padding-left plus haut, on se retrouve avec une bordure qui chevauche notre dossier. Il s'agit de la bordure de la colonne des icones de messages, qui sont prévus de s'afficher par dessus le dossier, comme dans le phpBB3 original. Pour enlever cette bordure gênante, on va donc utiliser ce code :
.topics li.row dl.icon dd.dterm
{
border-left: none;
}
Et hop, bordure disparue !
Ajuster la hauteur des rangées
La largeur est maintenant bonne, mais il reste encore la hauteur à régler. Pour reprendre l'exemple, le nouveau dossier fait 40*40 au lieu de 35*35.
On va donc redéfinir le code qui avait été défini pour régler la hauteur.
Code d'origine :
ul.topics li.row dl.icon, ul.pmlist dl.icon
{
min-height: 35px;
height: auto !important;
height: 35px;
}
Nouveau code :
ul.topics li.row dl.icon, ul.pmlist dl.icon
{
min-height: 40px;
height: auto !important;
height: 40px;
}
Mais il reste un problème : Internet Explorer 6 ne reconnaît pas min-height, et le fix qui avait été fait initialement par l'équipe de développement de phpBB.com, ne marche plus.
Je vous propose donc un nouveau fix que j'ai découvert en faisant des tests dans mon style pro_ubuntu pour le phpBB3 original, et qui fonctionne parfaitement sous IE6. Je vous l'adapte donc aux particularités de Forumactif :
* html ul.topics li.row dl.icon dd, * html ul.pmlist li.row dl.icon dd
{
height: 40px;
overflow: visible;
}
Le
* html est un hack CSS qui permet de ne faire interpréter du code CSS que par Internet Explorer 6 et versions antérieures, ce qui permet de mettre du code CSS spécifique pour IE6 sans que ce ne soit interprété par IE7+, Firefox, Opera et autres navigateurs modernes.
Résultat final
Voici le code que vous devriez avoir au final dans votre champ "Feuille de style CSS" :
.topics li.row dl.icon, .pmlist li.row dl.icon
{
padding-left: 20px;
}
.topics li.row dl.icon dd.dterm
{
border-left: none;
}
ul.topics li.row dl.icon, ul.pmlist dl.icon
{
min-height: 40px;
height: auto !important;
height: 40px;
}
* html ul.topics li.row dl.icon dd, * html ul.pmlist li.row dl.icon dd
{
height: 40px;
overflow: visible;
}
Et le résultat sur mon forum de test :
http://youwontfindme.editboard.com/forum.htm
(je pourrais éventuellement faire des captures afin de pouvoir continuer à vous le montrer même si je testais d'autres thèmes sur le forum).
