Tuto de Danny-dev
tout d'abord, un folder est l'image qui est situé devant le nom des forums et qui en donne l'état (lu, non lu, notes, annonces, etc.)
Vous voulez personnaliser les folders de votre page d'index, ceux ci sont plus grands que les folders d'origine.
Vous avez changé les valeurs des images dans le fichier/imageset/imageset.cfg mais si ceux ci sont bien passés à la bonne taille, ils sont coupés, le texte vient par dessus etc.
Voici comment ajuster la place de vos folders:
- - Calcul de la différence de taille entre l'image originale et votre nouvelle image
- Code: Tout sélectionner
dl.icon dt { padding-left: 45px; /* Space for folder icon */ background-repeat: no-repeat; background-position: 5px 95%; /* Position of topic icon */ }
- Code: Tout sélectionner
dl.icon dt { /*padding-left: 45px;*/ /* Space for folder icon */ padding-left: 69px; /* Space for folder icon */ background-repeat: no-repeat; background-position: 5px 95%; /* Position of topic icon */ }
- Code: Tout sélectionner
ul.topiclist dt { display: block; float: left; width: 50%; font-size: 1.1em; padding-left: 5px; padding-right: 5px; }
- Code: Tout sélectionner
ul.topiclist dt { display: block; float: left; /*width: 50%;*/ width: 46%; font-size: 1.1em; padding-left: 5px; padding-right: 5px; }
- Code: Tout sélectionner
li.header dl.icon dt { /* Tweak for headers alignment when folder icon used */ padding-left: 0; /* padding-right: 44px;*/ padding-right: 68px; }
- Code: Tout sélectionner
/* Forum list column styles */ dl.icon { /* min-height: 35px;*/ min-height: 59px; background-position: 10px 50%; /* Position of folder icon */ background-repeat: no-repeat; }
- Code: Tout sélectionner
/* Simple fix so forum and topic lists always have a min-height set, even in IE6 From http://www.dustindiaz.com/min-height-fast-hack */ dl.icon { min-height: 35px; height: auto !important; height: 35px; }
- Code: Tout sélectionner
/* Simple fix so forum and topic lists always have a min-height set, even in IE6 From http://www.dustindiaz.com/min-height-fast-hack */ * html li.row dl.icon { min-height: 59px; height: auto !important; height: 59px; }
exemple avec des images de taille 51px x 51px.
Il faut calculer la différence de taille donc :
51-27 (taille d'origine) = 24px Souvenez vous de cette valeur, elle sera utilisée pour les calculs des valeurs de remplacement
Vous devez bien sur adapter cette valeur à votre cas personnel!!
- Ouvrez le fichier content.css
On va commencer par la largeur en ajoutant du padding-left au lien du forum.
Cherchez et modifiez comme suit:
Dans ce code, il faut modifier la ligne padding_left: 45px; et remplacer le 45 par sa nouvelle valeur qui vaudra 45 + 24 = 69, vous aurez donc ceci, il est préférable de garder la ligne originale et de la passer en commentaires (ajout de /* et */ en debut et fin de ligne) pour un éventuel retour au style de base, voici votre fichier après modifications:
On réduit la taille du lien du forum et en même temps celui du titre (forum ou categories).
Cherchez:
on remplace width: 50%; par une valeur un peu plus petite : width: 46%;, vous aurez donc ceci
Là on remarque que les titres sont décalés donc on va rajouter du padding-right.
Cherchez et modifiez comme suit:
le 68 de la ligne modifié vient de 44 + 24 = 68
On finit par la hauteur, toujours dans le fichier content.css.
Cherchez et modifiez comme suit:
le 59 de la ligne modifiée vient de 35 + 24 = 59
-tweaks.css pour bug IE6
Ici on va remplacer pour bien préciser qu'il s' agit seulement du lien du forum pour IE6
trouver:
remplacer par:
35 + 24 = 59
et voilà le résultat vu par IE6 :
Vous pouvez réduire l'espacement en modifiant les valeurs "background-position: 10px 50%;" de l'image ...
si, malgré ces modifications vous avez un bug persistant sous ie6, voici une modification supplémentaire proposée par MissGeek;
- Code: Tout sélectionner
* html li.row dl.icon dt { height: taille choisie en px; overflow: visible; }