PHPBoost CMS : Sujet - Problème de mise en forme d'en-tête et de pied du forum

Accueil

Forum PHPBoost

Support

Support des modules

Forum

Problème de mise en forme d'en-tête et de pied du forum

Forum PHPBoost

• Index

Sujets suivis •

Derniers messages lus •

Messages non lus

•

Marquer comme lu

• Support des modules » Forum » [Réglé] Problème de mise en forme d'en-tête et de pied du forum

djikstra

Le 30/09/09 à 11h29

Booster Fronde

Groupe: Membre

Inscrit le: 22/09/08
Messages: 13

Bonjour à tous,

J'ai un petit soucis de mise en forme avec le template de base sur la partie forum. J'ai changé certaines couleurs et images, mais je n'ai pas touché au reste du css, et donc rien changé dans le positionnement.

Pour résumer, le soucis se trouve à la fois en tête du forum, et en pied de forum, dans la partie où s'affiche le titre du sujet et sa description. Lorsque titre+description+liens vers les pages est trop grand, on a un décalage. En soit il ne serait pas gênant mais le soucis vient du conteneur qui ne s'ajuste pas en hauteur, créant un bug graphique. Mais comme des images sont plus parlantes, voici mon soucis:

Avec un sondage

Haut du forum

Bas du forum

Sans sondage

Haut du forum

le bas est identique au cas avec sondage.

Vous voyez que j'ai pu tricher un peu lorsqu'il n'y a pas de sondage, et supprimer le vide, en assignant la couleur adéquate au

<div>

qui vient juste après. Mais pas lorsqu'il y a un sondage. Et cette solution n'est pas possible pour le pied de forum.

Bref, j'imagine que le soucis vient du positionnement en

float: left;

float: right;

dans la div parent, mais je ne trouve pas de solution propre pour le moment

Edité par djikstra Le 30/09/09 à 11h33

djikstra

Le 30/09/09 à 16h12

Booster Fronde

Groupe: Membre

Inscrit le: 22/09/08
Messages: 13

Bon, je me réponds en partie

Pour le pied de forum, il faut modifier le fichier forum\templates\forum_topic.tpl
le code original, ligne 310
Code TPL :

<div class="msg_position">
			<div class="msg_bottom_l"></div>
			<div class="msg_bottom_r"></div>
			<div class="msg_bottom" style="text-align:left;">
				<span>
					<a href="{PATH_TO_ROOT}/syndication.php?m=forum&cat={ID}" title="Rss"><img class="valign_middle" src="../templates/{THEME}/images/rss.png" alt="Rss" title="Rss" /></a>
					&bull; {U_FORUM_CAT} <a href="{U_TITLE_T}"><span id="display_msg_title2">{DISPLAY_MSG}</span>{TITLE_T}</a> <span style="font-weight:normal"><em>{DESC}</em></span>
				</span>
<span style="float:right;">
					{PAGINATION}
 
					# IF C_FORUM_MODERATOR #
						# IF C_FORUM_LOCK_TOPIC #
					<a href="action{U_TOPIC_LOCK}" onclick="javascript:return Confirm_lock_topic();" title="{L_TOPIC_LOCK}"><img src="../templates/{THEME}/images/{LANG}/lock.png" alt="{L_TOPIC_LOCK}" title="{L_TOPIC_LOCK}" class="valign_middle" /></a>
						# ELSE #
					<a href="action{U_TOPIC_UNLOCK}" onclick="javascript:return Confirm_unlock_topic();" title="{L_TOPIC_LOCK}"><img src="../templates/{THEME}/images/{LANG}/unlock.png" alt="{L_TOPIC_LOCK}" title="{L_TOPIC_LOCK}" class="valign_middle" /></a>
						# ENDIF #
 
					<a href="move{U_TOPIC_MOVE}" onclick="javascript:return Confirm_move_topic();" title="{L_TOPIC_MOVE}"><img src="{MODULE_DATA_PATH}/images/move.png" alt="{L_TOPIC_MOVE}" title="{L_TOPIC_MOVE}" class="valign_middle" /></a>
					# ENDIF #
				</span>&nbsp;
			</div>
		</div>

est remplacé par
Code TPL :

<div class="msg_position">
			<div class="msg_bottom_l"></div>
			<div class="msg_bottom_r"></div>
			<div class="msg_bottom" style="text-align:left;">
				<span style="float:right; margin-left:5px;">
					{PAGINATION}
 
					# IF C_FORUM_MODERATOR #
						# IF C_FORUM_LOCK_TOPIC #
					<a href="action{U_TOPIC_LOCK}" onclick="javascript:return Confirm_lock_topic();" title="{L_TOPIC_LOCK}"><img src="../templates/{THEME}/images/{LANG}/lock.png" alt="{L_TOPIC_LOCK}" title="{L_TOPIC_LOCK}" class="valign_middle" /></a>
						# ELSE #
					<a href="action{U_TOPIC_UNLOCK}" onclick="javascript:return Confirm_unlock_topic();" title="{L_TOPIC_LOCK}"><img src="../templates/{THEME}/images/{LANG}/unlock.png" alt="{L_TOPIC_LOCK}" title="{L_TOPIC_LOCK}" class="valign_middle" /></a>
						# ENDIF #
 
					<a href="move{U_TOPIC_MOVE}" onclick="javascript:return Confirm_move_topic();" title="{L_TOPIC_MOVE}"><img src="{MODULE_DATA_PATH}/images/move.png" alt="{L_TOPIC_MOVE}" title="{L_TOPIC_MOVE}" class="valign_middle" /></a>
					# ENDIF #
				</span>&nbsp;
				<span>
					<a href="{PATH_TO_ROOT}/syndication.php?m=forum&cat={ID}" title="Rss"><img class="valign_middle" src="../templates/{THEME}/images/rss.png" alt="Rss" title="Rss" /></a>
					&bull; {U_FORUM_CAT} <a href="{U_TITLE_T}"><span id="display_msg_title2">{DISPLAY_MSG}</span>{TITLE_T}</a> <span style="font-weight:normal"><em>{DESC}</em></span>
				</span>
			</div>
		</div>

J'ai seulement interverti les deux balises

<span>

. Ainsi, le

<span>

faisant la liste des pages du sujet reste en flottant, à droite. Ce span flottant est défini avant l'autre, celui qui écrit le chemin vers le sujet. Ce dernier perd sa caractéristique flottante, pour que le conteneur père ajuste sa hauteur à sa taille. Cet ajustement est obtenu en enlevant la propriété

height:23px;

dans le fichier template\base\theme\content.css pour la classe

.msg_bottom

:
Code CSS :

.msg_bottom {
    /*height:23px;*/
    background:#FFFFFF;
    padding-top:6px;
    padding-left:6px;
    border:1px solid #FFFFFF;
    border-top:1px dotted #C4CED6;
}