phpBB-fr.com

[abble]

» Mettre des folders plus grands
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, post-it, 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

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:



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 */
}


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:


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 */
}



On réduit la taille du lien du forum et en même temps celui du titre (forum ou categories).
Cherchez:



Code: Tout sélectionner

ul.topiclist dt {
   display: block;
   float: left;
        width: 50%;
   font-size: 1.1em;
   padding-left: 5px;
   padding-right: 5px;
}


on remplace width: 50%; par une valeur un peu plus petite : width: 46%;, vous aurez donc ceci


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;
}




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


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;
}



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


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;
}



»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:


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;
}



remplacer par:
35 + 24 = 59



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;
}



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;
    }