Ajouter les icônes des sujets sur la version mobile

[Mat]

Bonjour ,
je voudrais savoir comment je pourrais faire pour ajouter les icônes des sujets sur la version mobile
Je parle des icônes des sujets comme celle "résolu"
Merci d'avance

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Mat]

Et un up

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Mat]

Et un up

[Walt]

Bonjour,

Dans le template topics_list_box (version mobile), situez cet extrait :

Code:

<h3>{topics_list_box.row.TOPIC_TYPE}{topics_list_box.row.TOPIC_TITLE}</h3>

et remplacez-le par :

Code:

<h3 class="icon_topic_title_mobile" style="{topics_list_box.row.ICON}">{topics_list_box.row.TOPIC_TYPE}{topics_list_box.row.TOPIC_TITLE}</h3>

Puis ajoutez dans votre CSS :

Code:

.icon_topic_title_mobile[style*="http"] {
    padding-left: 35px;
    padding-right: 0 !important;
}

En modifiant 35px par la largeur de la plus large de vos icônes de sujet.

Cordialement,
Walt

[Mat]

Bonjour,

Dans le template topics_list_box (version mobile), situez cet extrait :

Code:

<h3>{topics_list_box.row.TOPIC_TYPE}{topics_list_box.row.TOPIC_TITLE}</h3>

et remplacez-le par :

Code:

<h3 class="icon_topic_title_mobile" style="{topics_list_box.row.ICON}">{topics_list_box.row.TOPIC_TYPE}{topics_list_box.row.TOPIC_TITLE}</h3>

Puis ajoutez dans votre CSS :

Code:

.icon_topic_title_mobile[style*="http://"] {
     padding-left: 35px;
     padding-right: 0;
     background-position: 0 40%;
}

En modifiant 35px par la largeur de la plus large de vos icônes de sujet.

Cordialement,
Walt

Merci , mais elles sont en dessous, ou au dessus :p, du texte


Sinon ça fonctionne

[Walt]

Avec le CSS, le résolu est celui normalement attendu : (EDIT - je viens de modifier le CSS pour qu'il prenne en compte le https)



Au passage, modifiez le CSS précédemment donné par :

Code:

.icon_topic_title_mobile[style*="http"] {
    padding-left: 35px;
    padding-right: 0 !important;
    }

Cordialement,
Walt

[Mat]

Merci ,
Ca fonctionne, sauf pour une icône

[Walt]

Comme précisé précédemment :

En modifiant 35px par la largeur de la plus large de vos icônes de sujet.

Cordialement,
Walt

[Mat]

Ha oui, je devais augmenter encore plus que la plus grand des largeurs  
Mais ça créent donc un espace sur les autres aussi  :

Je pensais à cette solution :
Agrandir mes images avec un fond transparent sur leurs droites 
Seul problème, ça va affecter la version PC...

C'est possible de ne toucher qu'a une seule image ?

Sinon deuxième solutions, agrandir les bords de mes images, pour qu'elles aient tous la même taille

[Walt]

Au CSS donné précédemment, rajoutez un background-position: 0 50% !important; pour que vos icônes aillent le plus à gauche possible (actuellement il y a un petit décalage). Remettez également le padding-left à 40px.

Puis ajoutez enfin à votre CSS :

Code:

.icon_topic_title_mobile[style*="single"] {
    padding-left: 70px;
}

Cordialement,
Walt

[Mat]

C'est parfait, et ça fonctionne, encore un grand merci