phpBB-fr.com

[micka76]

Bonjour,

Certaines personnes ont déjà voulu faire cette modification sans pour autant y arriver.
Dans le style Prosilver il n' y a aucune cellule en tableau mais que des éléments imbriqués dans des <div></div>.
Dans la liste des forums les éléments sont donc séparés par de simple traits qui s'adaptent au contenu des classes dd.posts, dd.topics, dd.views (à petit contenu, petit trait).
Voici un exemple en image:


On voit que quand une description de forum est longue, que la séparation n'est pas très esthétique, et certaines personnes aimeraient avoir une séparation jusqu'en bas (comme un tableau).
Exemple:



Tout est une histoire de marge,
Dans la content.css
chercher

Code: Tout sélectionner

ul.topiclist dd {
   display: block;
   float: left;
   border-left: 1px solid #FFFFFF;
   padding: 4px 0;
}

dans ces codes on change les attributs pour les marges, donc on remplace:

Code: Tout sélectionner

padding: 4px 0;

par

Code: Tout sélectionner

padding: 100% 0 100% 0; /* on envoie les traits en augmentant les marges interieures du haut et bas de la classe) */

copier juste après les codes citer plus haut (là on annule la marge pour remettre les éléments à zéro)

Code: Tout sélectionner

margin: -100% 0 -100% 0; /* on annule l'action en mettant une marge exterieure negative */

ce qui fait descendre les traits sans pour autant faire descendre l'ensemble.

Un peu plus bas chercher

Code: Tout sélectionner

li.header dd {
   margin-left: 1px;
}

remplacer par

Code: Tout sélectionner

li.header dd {
   margin-left: 1px;
   padding: 4px 0; /* on remet la marge qu'on a enleve avant  */
}

pour les heureux possesseurs d'internet explorer
chercher

Code: Tout sélectionner

dl.icon {
   min-height: 35px;
   background-position: 10px 50%;      /* Position of folder icon */
   background-repeat: no-repeat;
}

remplacer par

Code: Tout sélectionner

dl.icon {
   min-height: 35px;
   background-position: 10px 50%;      /* Position of folder icon */
   *background-position: 10px 6px;
   background-repeat: no-repeat;
}

A bientôt...