Titres de sujet: modifier leur taille

[TigreRouxDuCoux]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://celliacraft.forumactif.org

Description du problème

C'est encore moi ...
Grace à milouze j'ai pu mettre les icones de forum dans les titres de sujet mais problème: l'écriture des titres et des icones (j'ai écris des mots, voir screen) n'est pas la même et j'aimerais donc modifier la taille des titres de sujet. J'ai trouvé une variable .postdetails dans le CSS qui modifie les titres de sujet mais aussi les details du profil ce que je ne veux pas ...
Voici mon screen:

Legende: Titre de sujet | Details du profil

[Neptunia]

Bonjour ^^


En théorie il suffirait de remplacer dans le template viewtopic_body (toujours vers la ligne 155)

Code:

<span class="postdetails">{postrow.displayed.ICON}

par

Code:

<span class="postdetails postheader">{postrow.displayed.ICON}

Puis de passer ensuite par le sélecteur .postheader fraîchement rajouté

Code:

.postheader {
...
...
...
}

[TigreRouxDuCoux]

C'est parfait, mais es-ce qu'il n'y aurait pas une variable pour le decaller en hauteur? car là il grandit mais fait descendre l'image et n'est donc pas aligné.

[Neptunia]

Peut-être un code comme ceci ?

Code:

.postheader {
min-height: xxpx
}

Avec xx = la hauteur de votre icône de sujet ?

[TigreRouxDuCoux]

Non ça ne change rien, au cas ou vous auriez mal compris, je cherche à changer l'écart entre le haut du cadre d'un message et le titre. La partie en vert

[Neptunia]

Essayez

Code:

img.posticon2 {
 padding-bottom: 10px;
}

[TigreRouxDuCoux]

Ca aligne bien mais je vais paraitre difficile... mais la ligne qui sépare le titre du texte est un peu trop basse xDD

[Neptunia]

Désolé, je ne saurais pas faire mieux

[TigreRouxDuCoux]

Merci quand même vous m'avez beaucoup aidé

[Invité]

Salut TigreRouxDuCoux et Neptune ,

pour aligner l'image , il suffit de l'entourer avec un span stylé :

Comme ceci:

Code:


<span style="vertical-align:middle;">{postrow.displayed.ICON}</span>


Donc recherches la variable suivante:

Code:

{postrow.displayed.ICON}

Supprimes et remplaces par:

Code:


<span style="vertical-align:middle;">{postrow.displayed.ICON}</span>


Penses a enregistrer les modifications en cliquant respectivement sur et


Puis supprimes le code donné par Neptune dans la css:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Code:

  img.posticon2 {
        padding-bottom: 10px;
        }

Penses à cliquer sur le bouton
a++

[TigreRouxDuCoux]

Ta solution ne marche pas Milouze, et je ne veux pas aligner l'image mais le texte "titre sujet", je veux pouvoir reduire ou augmenter l'espace que j'ai colorié en vert plus haut..

[Invité]

Re,

ok , on va procéder autrement afin de bouger ce contenu:

Actuellement tu as ceci:

Code:


  <span class="postdetails postheader">
    {postrow.displayed.ICON}
    <img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}&nbsp; &nbsp;<img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />
    {postrow.displayed.POST_DATE}</span>


Supprimes et remplaces parceci:

Code:


  <div class="postdetails postheader">
    {postrow.displayed.ICON}
    <img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}&nbsp; &nbsp;<img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />
    {postrow.displayed.POST_DATE}</div>


Penses a enregistrer les modifications en cliquant respectivement sur et

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Recherches ceci:

Code:

.postheader
{
    color: #1F1E1E;
    font-size: 15px;
}

Supprimes et remplaces par:

Code:



.postdetails.postheader
{
 color: #1F1E1E;
font-size: 15px;
margin-top:5px;
}



Augmentes ou diminues la valeur 5px si besoin .


Penses à cliquer sur le bouton


a++

[TigreRouxDuCoux]

Ca decalle exactement ce que je veux mais.... ça decalle l'icone de forum avec >< donc je peux pas les aligner ...

[Invité]

Re,

tu n'as pas appliquer le code html que je t'ai donné il faut remplacer le span par une div .

a++

[TigreRouxDuCoux]

il me semble que si, voici la ligne après modification:

Code:

<td><div class="postdetails postheader">{postrow.displayed.ICON}<img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}&nbsp; &nbsp;<img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</div></td>

[Invité]

Re,

applique un

Code:

margin-left:70px;

dans la css

L'icône à une largeur de 68px , donc en mettant 70px on arrive a aligner sur la marge de gauche .

Si tu veux aligner les images:
Il faut ajouter ceci dans ta feuille de style:

Code:

.postdetails.postheader img {vertical-align:middle;}

a++

[TigreRouxDuCoux]

C'est parfait ! Merci beaucoup de ta patience