Mettre les icones de sujet entre le logo "Nouveau" et le titre des sujets

[Féline1984]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : depuis la création du forum
Lien du forum : https://breizh-tendresse.forumactif.com/

Description du problème

Bonsoir

Mon nouveau forum est : https://breizh-tendresse.forumactif.com/
Pour que ce soit bien lisible, agréable à lire, j'aimerai que les icones de sujet soient entre le logo "Nouveau" et le titre du sujet avec un espace entre le logo nouveau et l'icone de sujet et un espace entre l'icone du sujet et le titre du sujet posté.

[Oka.mi]

Bonjour,

Ajoutez ce code dans votre feuille de style css

Code:

.dterm {
    margin-left: 50px;
}

ul.topics dd.dterm, ul.topics dt {
    padding-left: 140px;
}

ils servent à régler la marge gauche des éléments concernés et ainsi corriger le souci de visibilité.

[Féline1984]

Bonjour
Ca a marché mais ça a décalé les colonnes "Sujet", "Messages", "Dernier message" sur l'accueil: https://breizh-tendresse.forumactif.com/

Aussi dans les listes de sujets ça a décalé les colonnes "Réponses", "Vues", "Derniers messages : https://breizh-tendresse.forumactif.com/f29-36-a-45-ans

[Invité]

Hello Féline1984 et Oka.mi,
c'est normal car on agit sur l'entête de cette façon .
Il vaut placer l’Icône du sujet à droite car ta version posera des soucis, c'est gérer par du padding et le texte risque de déborder
modifies ainsi la css:

Code:



.topiclist.topics.bg_none .dterm {
background-position: right center!important;
}
 


a++

[Oka.mi]

Bonjour,

C'est plutôt sur .topiclist.topics qu'il faut isoler la modification vu que l'utilisatrice ne souhaite pas le décalage sur sa page d'accueil notamment ^^

Du coup voici la nouvelle version du css :

Code:

ul.topics li.header dl.icon dt {
    padding-left: 50px;
    width: 55%;
}

.topiclist.topics .dterm {
    margin-left: 50px;
}
 
ul.topics dd.dterm, ul.topics dt {
    padding-left: 140px;
}

J'ai ajouté un width pour réajuster les colonnes "Réponses", "Vues", "Derniers messages : https://breizh-tendresse.forumactif.com/f29-36-a-45-ans

Néanmoins je vais probablement signaler ce souci à l'équipe technique car la variable {topics_list_box.row.ICON} est traitée différemment ici par rapport à la version phpbb2, en transformant l'image en background-image alors que sur phpbb2, il n'y a pas ce genre de prise de tête...
Il s'agirait donc d'une solution temporaire, si l'équipe juge bon de changer ça (ce qui n'est absolument pas garanti vu que c'est un problème vraiment minime), il vous faudra retirer le css qui ne sera alors plus utile.

[Invité]

Re,

C'est plutôt sur .topiclist.topics

Tu agis sur la barre et non sur la ligne des sujets dans cas.




la version phpbb3 a toujours était ainsi c'est un background contrairement aux autres versions.
Il suffit de voir les lignes concernées dans le template:

Code:


<dl class="icon" style="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
<dd class="dterm" title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" {topics_list_box.row.ICON}>


C'est juste que l'icône est vraiment très conséquente .
a++

[Féline1984]

Bonjour

1)J'ai mis ce code dans mon CSS, mais il disparait de la feuille de style CSS :

Code:

<dl class="icon" style="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
<dd class="dterm" title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" {topics_list_box.row.ICON}>

Mais c'est pas du CSS, c'est du phpbb je crois

2)J'ai mis ce code suivant mais ça décale les colonnes :

Code:

.dterm {
    margin-left: 50px;
}
 
ul.topics dd.dterm, ul.topics dt {
    padding-left: 140px;
}
ul.topics li.header dl.icon dt {
    padding-left: 50px;
    width: 55%;
}
 
.topiclist.topics .dterm {
    margin-left: 50px;
}
 
ul.topics dd.dterm, ul.topics dt {
    padding-left: 140px;
}

3) J'ai mis ce code mais ça déplace aussi les colonnes :

Code:

/** Début icone de sujet  **/
.dterm {
    margin-left: 50px;
}
 
ul.topics dd.dterm, ul.topics dt {
    padding-left: 140px;
}
.topiclist.topics.bg_none .dterm {
background-position: right center!important;
}
/** Fin icone de sujet  **/

[Invité]

Re,
non faut retirer ceci:

Code:


<dl class="icon" style="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
<dd class="dterm" title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" {topics_list_box.row.ICON}>


Tu peux supprimer ce que tu as déposé récemment et tester ceci:

Code:


 ul.topiclist.topics.bg_none li[class^="row"] .dterm
{
padding-left: 180px;
background-position: 40px 2px!important;
}
.topiclist.topics li.header dd.posts,
.topiclist.topics li.header .lastposts{margin-left: 140px;}


Il faut prendre en compte que je me suis basé sur la plus grande image:

Donc forcément tu aura un espace conséquent si l'icône n'est pas présente.

a++

[Féline1984]

Bonjour

1) J'ai supprimé ce code :

Code:


<dl class="icon" style="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
<dd class="dterm" title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" {topics_list_box.row.ICON}>

2) J'ai mis le CSS suivant, ça laisse la page d'accueil comme avant, c'est tant mieux, par contre, ça décale les colonnes "Réponses", "Vues" , "Derniers messages" : dans la liste des sujets : https://breizh-tendresse.forumactif.com/f29-36-a-45-ans

Code:

/** Début icone de sujet  **/
 ul.topiclist.topics.bg_none li[class^="row"] .dterm
{
padding-left: 180px;
background-position: 40px 2px!important;
}
/** Fin icone de sujet  **/

[Invité]

Re,

tu avais dis que tu avais déposé ce code dans la css,
je te dis simplement de le supprimer , c'est tout chère amie .

Code:

 
<dl class="icon" style="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
<dd class="dterm" title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" {topics_list_box.row.ICON}>


On ne pourra guère faire mieux avec ta version.
Comme mentionné plus haut, les images sont gérées par un background.
a++

[Féline1984]

Bonjour

Je ne veux pas que les colonnes soient déplacées. J'ai une autre idée, j'aimerai créer un marge entre le nom du membre qui a posté le topic et le bords du bas du topic (pour que l'icone de sujet puisse se mettre entre les deux), voir flèche rouge ci-dessous :


J'aimerai que ça s'affiche comme dans l'exemple ci-dessus.
Et, pour que l'icone de sujet soit en dessous du pseudo du membre ayant posté un sujet, je ferai des icones de sujet avec une marge transparente en haut de l'icone, comme cet exemple :

[Oka.mi]

Bonjour,

Est-ce que quelque chose comme ça vous conviendrait ?

Code:

.topiclist.bg_none .dterm {
    background-position: 50px 45px;
}

.topiclist.bg_none .dterm, .topiclist.bg_none dd.posts, .topiclist.bg_none dd.topics, .topiclist.bg_none dd.views, .topiclist.bg_none dd.lastpost {
    height: 75px;
}

[Féline1984]

Bonjour
Oui, merci, c'est parfait. Le sujet est résolu . Merci beaucoup Oka.mi