[prosilver] Faire comme un tableau sur l'index

Image Liste des documentations utiles pour votre forum phpBB3.
Image Astuces et autres ressources

Répondre
     
Avatar du membre

Auteur du sujet
micka76
Graphiste phpBB Assistance
Graphiste phpBB Assistance
Messages : 168
Enregistré le : mai 2010
Localisation : Normandie

[prosilver] Faire comme un tableau sur l'index

Message par micka76 » mar. 1 mai 2012 09:03

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


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...
Image Si à la saint Valentin tu me tient la main, vivement la saint Marguerite que tu me tienne la ......

Répondre

Retourner vers « Forum de documentation »