Positions icones de messages

[Romu-e34]

Bonjour,

J'ai bien suivi le tutoriel concernant les icônes de messages Ici

cependant, j'ai quelques soucis avec le code Css, surtout avec les valeurs en gras:

dl.icon {
min-height: 35px;
background-position: left top;
background-repeat: no-repeat;
height: auto !important;
}
ul.topics dt {
padding-left: 80px;
display: block;
float: left;
width: 50%;
}
.row dl.icon dt {
background-position: 35px 5px;
min-height: 35px;
height:auto !important
}

Sans code Css, mon icône de message se place par dessus l'icone de sujet (phpBB3) ce qui est logique, et elle se superposent parfaitement

Avec le Css ci dessus, alors que mes icônes font 30*30px, l’icône de sujet, se place en haut à gauche (sans marges) et l’icône de message, elle reste à son endroit d'origine.

Je cherche alors à garder la position de l’icône de sujet, et décaler l’icône de message dans le même axe horizontalement de quelques pixels

Voici ce que j'obtiens avec le code ci dessus :



Merci de vos informations, même si à première vue, ce sont les valeurs qui sont fausses (j'ai fait d'autres essais, sans résultat )

Fichiers joints

Sans titre-2.jpg Vous n'avez pas la permission de télécharger les fichiers joints.(34 Ko) Téléchargé 2 fois

[Scipion]

Bonjour

Je ne suis pas très sûr d'avoir compris votre problème, cependant sur un forum de version phpBB3 vous avez la possibilité d'adapter la cellule des icônes en allant sur PA >> Général >> Forum >> Configuration >> Structure des pages >>

Hauteur de la cellule image catégorie/forum > adaptez
Largeur de la cellule image catégorie/forum > adaptez
Enregistrez.

Le tutoriel :

Personnaliser les icones catégories et forums (phpBB3)

Cordialement

[Romu-e34]

Cette manipulation change en effet la taille de cellules dans la page principale des Catégories et Forums, mais aucun effet dans les sujets...

Je vais essayé de creuser un petit peu aussi dans ce sens

[Scipion]

Je vous donne une idée qui pourrait vous aider éventuellement dans vos tests. Sur mon forum, les icônes de forum ont un format de (53 x 40 pixels). Pour les icônes de sujets, j'ai dû adapter leur taille en la réduisant à (40 x 30 pixels) et tout fonctionne bien.

Cordialement

[Romu-e34]

Comme ceci ? (exemple du tuto, mais en (phpBB2)



ce que j'aimerai, c'est les avoir un peu comme ceci en (phpBB3)



non, comme cela actuellement :



Mais je vais étudier le problème

Édit:

Suite à quelques manipulation, j'arrive à cela :



reste à connaitre le "nom" Css de l’icône des messages afin de la placée comme face à la flèche

[Scipion]

Je regrette énormément de ne pas disposer d'un forum test de version phpBB3 afin de mieux vous aider.

Cordialement

[Romu-e34]

Ce n'est pas grave

Vous m'avez tout de même donner de bonne piste à suivre

Merci

[Romu-e34]

Bonsoir,

Après quelques recherches, la solution au problème est la suivante :

Code:


/* Position de l’icône du sujet et hauteur cellule */
.topiclist dl.icon {
min-height: 55px;
background-position: 2px 8px;
}
* html .topiclist dl.icon {
height: 35px;
}

/* largeur de la cellule contenant l’icône du sujet */
ul.topics dt,ul.topics dd.dterm {
padding-left: 60px;
}

/* position de l’icône de messages */
ul.topics dt,ul.topics dd.dterm {
min-height: 30px;
background-position: 26px 5px;
}


Petite explication :
/* Position de l’icône de sujet et hauteur de la cellule */
min-height: 55px; -> Qui donne une hauteur de cellule de 55px minimum
background-position: 2px 8px; -> Qui place l'icone de sujtet à 2px (en rapport au coté gauche) et 8 px (en rapport au haut)

/* largeur de la cellule contenant l’icône du sujet */
padding-left: 60px; -> Donne une largeur de cellule de 60px en rapport au coté gauche

/* position de l’icône de messages */
min-height: 30px; -> hauteur minimum de l’icône de message
background-position: 26px 5px; -> Position de l'icone de message 26px (en rapport au coté gauche) et 5 px (en rapport au haut)

Ce qui donne :



Sujet résolu

Je n'ai pas éditer afin de faire un retour, m'en excuse à l'avance si l'édition du message précédent était nécessaire. Cordialement.