Changer les icônes des catégories via CSS

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Changer les icônes des catégories via CSS

Message par xArchange le Dim 31 Aoû 2014 - 21:47

Bonsoir (ou bonjour, selon l'heure à laquelle vous lirez ce message),

Je suis actuellement en plein développement de designs pour un forum qui aura un sélecteur de styles pour laisser à ses membres le choix du design qu'ils préfèrent. Pour que ça soit possible, je tente donc de modifier tout l'aspect graphique via les templates et le CSS.

Or, je me heurte à un "léger" problème : celui qui concerne les icônes des catégories. Au départ, je pensais pouvoir les changer facilement, comme on change le header grâce à #i_logo. Malgré de nombreuses recherches, je n'ai pas su trouver de class correspondant aux icônes "New", "Old", "Lock", etc. Je me suis donc tournée vers le template index_box, et je pense (sans trop m'avancer) que tout se joue à ce niveau-ci :
Code:
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>

Cependant, je suis bien incapable de résoudre le problème... Si quelqu'un pouvait éclairer ma lanterne, ça serait bien aimable à lui.

Je suis sous phpBB2, fondatrice, aucun template n'a été modifié pour l'instant (mais je sais comment toucher à index_body pour que mes icônes de catégories s'affichent en bas de page ; dommage que je ne sache que ça...) et j'ai du CSS personnalisé.

Merci d'avance.

Bien cordialement,
xArchange


Dernière édition par xArchange le Mer 3 Sep 2014 - 21:35, édité 1 fois

xArchange
Nouveau membre

Féminin
Messages : 24
Inscrit(e) le : 11/12/2013

http://xarchange-tests.forumactif.org
xArchange a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer les icônes des catégories via CSS

Message par xArchange le Lun 1 Sep 2014 - 22:08

Bonsoir,

Ce sujet étant toujours d'actualité, je me permets de l'uper. Merci d'avance Smile

xArchange
Nouveau membre

Féminin
Messages : 24
Inscrit(e) le : 11/12/2013

http://xarchange-tests.forumactif.org
xArchange a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer les icônes des catégories via CSS

Message par xArchange le Mar 2 Sep 2014 - 22:13

Plop,

Un petit up, pour ne sombrer dans les abysses de l'oubli. Razz
Merci d'avance à ceux qui voudront bien éclairer ma lanterne.

xArchange
Nouveau membre

Féminin
Messages : 24
Inscrit(e) le : 11/12/2013

http://xarchange-tests.forumactif.org
xArchange a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer les icônes des catégories via CSS

Message par f le Mar 2 Sep 2014 - 22:42

tu veut changer le dessin de la petite boule avec le bonnet de père-noël ?

f
***

Masculin
Messages : 116
Inscrit(e) le : 26/09/2009

http://echecfaitmain.forumactif.com/
f a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer les icônes des catégories via CSS

Message par xArchange le Mer 3 Sep 2014 - 10:57

Le forum qu'il y avait dans mon profil n'est plus d' actualité (d'ailleurs, vu le design, je pense qu'on comprenait le décalage) ; le forum sur lequel je voudrais effectuer ces changements est le suivant: xarchange-tests.forumactif.org

Mais effectivement, ce que je voudrais faire, c'est remplacer ces icônes-ci (donc celles avec la boule au bonnet de père Noël) via le CSS, donc sans passer par la gestion des images du panneau d'administration.


Dernière édition par xArchange le Mer 3 Sep 2014 - 17:07, édité 1 fois

xArchange
Nouveau membre

Féminin
Messages : 24
Inscrit(e) le : 11/12/2013

http://xarchange-tests.forumactif.org
xArchange a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer les icônes des catégories via CSS

Message par Neptunia le Mer 3 Sep 2014 - 11:48

Bonjour ^^


Ces 3 images n'ont pas d'identifiant permettant de les différencier et par conséquent ce n'est pas possible de changer cet élément dans un sélecteur de styles par feuilles CSS

Neptunia
+ Hyperactif +

Féminin
Messages : 10936
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer les icônes des catégories via CSS

Message par f le Mer 3 Sep 2014 - 12:44

Gestion des images (mode avancé) du panneau d'administration est la seul méthode

f
***

Masculin
Messages : 116
Inscrit(e) le : 26/09/2009

http://echecfaitmain.forumactif.com/
f a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Changer les icônes des catégories via CSS

Message par [Nihil] le Mer 3 Sep 2014 - 13:02

En fait si c'est possible Wink
Je te fais une explication très très rapide, dis moi si tu veux plus de détails.

Il faut d'abord dans ton template index_box que tu mettes une classe autour de la variable pour les images new / no new, etc.

Ensuite dans le CSS tu peux mettre ceci par exemple :
Code:
.ma-classe img[alt="Pas de nouveaux messages"] {
    border: 5px solid black;
}

"Pas de nouveaux messages" correspond à la l'attribut alt et l'attribut title mis aux images.

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer les icônes des catégories via CSS

Message par Neptunia le Mer 3 Sep 2014 - 13:59

@[Nihil] a écrit:"Pas de nouveaux messages" correspond à la l'attribut alt et l'attribut title mis aux images.

Ne fonctionnera qu'à condition que tous les utilisateurs visitent le forum dans une langue unique.

Pour ma part j'aurai plutôt vu une modification du template par le biais d'un javascript testant l'url de l'image à appliquer (et 6 images transparentes de nom différent sur le panneau admin).

Plus complexe à mettre en oeuvre mais fonctionnera dans n'importe quelle langue.

Neptunia
+ Hyperactif +

Féminin
Messages : 10936
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer les icônes des catégories via CSS

Message par [Nihil] le Mer 3 Sep 2014 - 14:05

On peut remplacer par src="URLDELIMAGE" si on veut, le principe est exactement le même oui

Code:
.ma-classe img[src="URL"] {
    border: 5px solid black;
}

Ou bien le faire en javascript pour plus de compatilité sur les vieux navigateurs, j'expliquais juste le principe "logique" Mr. Green

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer les icônes des catégories via CSS

Message par Neptunia le Mer 3 Sep 2014 - 14:09

Et bien là c'est parfait !

Plus qu'à en faire autant pour l'index_body et le viewforum_body au cas où la légende serait activée.

Neptunia
+ Hyperactif +

Féminin
Messages : 10936
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer les icônes des catégories via CSS

Message par xArchange le Mer 3 Sep 2014 - 17:49

Bonjour !

Tout d'abord, merci à tous pour votre aide, c'est très gentil de votre part !

J'ai utilisé la première méthode donnée par [Nihil] (utilisant l'attribut alt) car je suis partie du principe que tout le monde visiterait le forum dans la même langue et que de toute façon, la méthode de Neptune- me semble un tantinet trop complexe pour mes compétences. Razz

Donc avec la méthode de Nihil, magie, ça fonctionne parfaitement ! Simplement (une question en amenant une autre, mes excuses), en ce qui concerne les forums verrouillés, j'ai un petit problème. Dans mon CSS, j'ai :
Code:
.icones_categories img[alt="Forum Verrouillé"] {
    //
}

Sauf que bien évidemment, avec l'accent, ça ne fonctionne pas (tout au moins, je présume que c'est de là que vient le problème). Est-ce que quelqu'un pourrait me dire comment faire pour me "débarrasser" de cet accent ? (si le problème vient bien de là ; dans le cas contraire, je me sentirais un peu bête)

En tout cas, un très grand merci pour vos réponses et solutions, vous m'ôtez réellement une épine du pied. Smile

xArchange
Nouveau membre

Féminin
Messages : 24
Inscrit(e) le : 11/12/2013

http://xarchange-tests.forumactif.org
xArchange a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer les icônes des catégories via CSS

Message par [Nihil] le Mer 3 Sep 2014 - 20:43

En fait, il faut écrire ceci (attention, tiens toi bien, c'est long)
Code:
.icones_categories img[alt="Ce forum est verrouillé, vous ne pouvez pas poster, ni répondre, ni éditer les sujets."]{

}

Sinon, la technique de Neptune n'est pas très compliquée non plus, il suffit de faire une image transparente de 1px par 1px.
Une fois que c'est fait, tu upload l'image, tu la mets dans le PA et au lieu de mettre [alt="MACHIN"] tu mets [src="URL"]
L'avantage c'est que si un jour FA veut changer les textes par défaut, tu n'as pas besoin de revoir tes codes Wink (bon après c'est pas très long non plus xD).
Tu peux prendre la méthode que tu veux, le principale c'est que ça te convienne XD

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer les icônes des catégories via CSS

Message par xArchange le Mer 3 Sep 2014 - 21:34

Ok, donc j'étais complètement à côté de mes pompes (que j'avais dû oublier chez le voisin, en fait) !

Merci de l'explication/solution. Effectivement, la méthode de Neptune- m'est désormais beaucoup plus claire. Je ne comprends même plus ce qui m'avait bloquée au premier coup, d'ailleurs ; ça a dû être le mot "javascript". x)

Dans tous les cas, j'ai trouvé la solution à mon problème (qui, maintenant que vous me l'avez expliqué, paraît bien moins embêtant). Donc un grand merci, plus particulièrement à toi [Nihil]. Mais merci également à f d'avoir pris la peine de répondre et à Neptune- d'avoir exposé sa méthode.

Je mets donc ce sujet en résolu !

Encore merci pour votre aide ! Smile

xArchange
Nouveau membre

Féminin
Messages : 24
Inscrit(e) le : 11/12/2013

http://xarchange-tests.forumactif.org
xArchange a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum