[Réglé] Modifier proprement les icônes de forum

Pour les recherches et les demandes de modifications de styles concernant votre forum phpBB 3.3

Modérateur: Equipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com - Conditions générales de support graphique

Attention : pour éviter les bogues, votre style doit être mis à jour en même temps que votre forum, et ce, dans la dernière version disponible de phpBB !

[Réglé] Modifier proprement les icônes de forum

Messagepar Lomic » 28 Jan 2020 à 09:59

Bonjour à tous,

Je suis en PhpBB 3.3, avec un style perso bâti selon cette méthode : documentation/styles/creer-un-style-phpbb-32-ou-33-a223-view.html

J'ai fouillé partout dans la doc et le forum sans trouver mon bonheur.

Je veux modifier les icônes de forum (lu, non-lu, chaud...), idéalement je voudrais pouvoir utiliser autre chose que du gif, du PNG notamment (et dans mes rêves les plus fous du svg :mrgreen: ).

Elles semblent définies dans colours.css.

Du coup dois-je reprendre ces classes dans le CSS de mon style perso et modifier les noms des fichiers, et mettre mes icônes dans le répertoire /images de mon style perso ?
Code: Tout sélectionner
/* Forum icons & Topic icons */
.global_read						{ background-image: url("./images/announce_read.gif"); }
.global_read_mine					{ background-image: url("./images/announce_read_mine.gif"); }
.global_read_locked					{ background-image: url("./images/announce_read_locked.gif"); }
.global_read_locked_mine			{ background-image: url("./images/announce_read_locked_mine.gif"); }
.global_unread						{ background-image: url("./images/announce_unread.gif"); }
.global_unread_mine					{ background-image: url("./images/announce_unread_mine.gif"); }
.global_unread_locked				{ background-image: url("./images/announce_unread_locked.gif"); }
.global_unread_locked_mine			{ background-image: url("./images/announce_unread_locked_mine.gif"); }

.announce_read						{ background-image: url("./images/announce_read.gif"); }
.announce_read_mine					{ background-image: url("./images/announce_read_mine.gif"); }
.announce_read_locked				{ background-image: url("./images/announce_read_locked.gif"); }
.announce_read_locked_mine			{ background-image: url("./images/announce_read_locked_mine.gif"); }
.announce_unread					{ background-image: url("./images/announce_unread.gif"); }
.announce_unread_mine				{ background-image: url("./images/announce_unread_mine.gif"); }
.announce_unread_locked				{ background-image: url("./images/announce_unread_locked.gif"); }
.announce_unread_locked_mine		{ background-image: url("./images/announce_unread_locked_mine.gif"); }

.forum_link							{ background-image: url("./images/forum_link.gif"); }
.forum_read							{ background-image: url("./images/forum_read.gif"); }
.forum_read_locked					{ background-image: url("./images/forum_read_locked.gif"); }
.forum_read_subforum				{ background-image: url("./images/forum_read_subforum.gif"); }
.forum_unread						{ background-image: url("./images/forum_unread.gif"); }
.forum_unread_locked				{ background-image: url("./images/forum_unread_locked.gif"); }
.forum_unread_subforum				{ background-image: url("./images/forum_unread_subforum.gif"); }

.sticky_read						{ background-image: url("./images/sticky_read.gif"); }
.sticky_read_mine					{ background-image: url("./images/sticky_read_mine.gif"); }
.sticky_read_locked					{ background-image: url("./images/sticky_read_locked.gif"); }
.sticky_read_locked_mine			{ background-image: url("./images/sticky_read_locked_mine.gif"); }
.sticky_unread						{ background-image: url("./images/sticky_unread.gif"); }
.sticky_unread_mine					{ background-image: url("./images/sticky_unread_mine.gif"); }
.sticky_unread_locked				{ background-image: url("./images/sticky_unread_locked.gif"); }
.sticky_unread_locked_mine			{ background-image: url("./images/sticky_unread_locked_mine.gif"); }

.topic_moved						{ background-image: url("./images/topic_moved.gif"); }
.pm_read,
.topic_read							{ background-image: url("./images/topic_read.gif"); }
.topic_read_mine					{ background-image: url("./images/topic_read_mine.gif"); }
.topic_read_hot						{ background-image: url("./images/topic_read_hot.gif"); }
.topic_read_hot_mine				{ background-image: url("./images/topic_read_hot_mine.gif"); }
.topic_read_locked					{ background-image: url("./images/topic_read_locked.gif"); }
.topic_read_locked_mine				{ background-image: url("./images/topic_read_locked_mine.gif"); }
.pm_unread,
.topic_unread						{ background-image: url("./images/topic_unread.gif"); }
.topic_unread_mine					{ background-image: url("./images/topic_unread_mine.gif"); }
.topic_unread_hot					{ background-image: url("./images/topic_unread_hot.gif"); }
.topic_unread_hot_mine				{ background-image: url("./images/topic_unread_hot_mine.gif"); }
.topic_unread_locked				{ background-image: url("./images/topic_unread_locked.gif"); }
.topic_unread_locked_mine			{ background-image: url("./images/topic_unread_locked_mine.gif"); }

Tout en conservant des dimensions identiques afin qu'elles soit bien calées ?

Je ne vois pas trop où le positionnement des images est fait.

Ce topic parle des dimensions de ces icônes cependant il me parait obsolète : documentation/styles/mettre-des-icones-de-forums-plus-grandes-a52-view.html. Je ne vois plus de traces du fichier imageset.cfg par exemple.

[Edit]Le lien vers le forum, ça peut servir : https://cow29.fr/forum/index.php
Lomic
Posteur néophyte
Posteur néophyte
 
Messages: 28
Enregistré le: 20 Fév 2012 à 11:57

Re: Modifier proprement les icônes de forum

Messagepar Sylveretour » 28 Jan 2020 à 11:00

Bonjour,

Pour ce faire je vais t'indiquer une méthode qui fonctionne pour toutes les modifications HTML et CSS que tu souhaites faire à l'avenir.
Je te conseille d'utiliser Firefox qui est le meilleur pour ce faire.
Tu clique droit dans la partie que tu souhaite modifier puis tu choisi "Examiner l'élément", cela ouvre un panneau qui par défaut est sur inspecteur et règles css.
A gauche tu peut choisir plus finement la partie voulue et à droite tu voit les règles css en cours, tu voit le fichier concerné et les lignes.
Tu peut faire des tests en live pour voir ce que cela donnera avant d'appliquer les changement dans les fichiers...
Avatar de l’utilisateur
Sylveretour
Apprenti-floodeur
Apprenti-floodeur
 
Messages: 1243
Enregistré le: 21 Nov 2017 à 18:24
Localisation: West Coast

Re: Modifier proprement les icônes de forum

Messagepar Lomic » 28 Jan 2020 à 11:15

Merci Sylveretour, j'utilise l'examen du code tous les jours, ça n'est pas ça qui me pose problème.

Il me semble que modifier directement le fichier colours.css n'est pas la bonne méthode.

Est-ce que la méthode que je propose est correcte :
dois-je reprendre ces classes dans le CSS de mon style perso et modifier les noms des fichiers, et mettre mes icônes dans le répertoire /images de mon style perso ?
Lomic
Posteur néophyte
Posteur néophyte
 
Messages: 28
Enregistré le: 20 Fév 2012 à 11:57

Re: Modifier proprement les icônes de forum

Messagepar Sylveretour » 28 Jan 2020 à 11:20

Oui tout à fait, en ne changeant que la source de l'image tout le reste du CSS dont les dimensions est conservé et appliqué.
Avatar de l’utilisateur
Sylveretour
Apprenti-floodeur
Apprenti-floodeur
 
Messages: 1243
Enregistré le: 21 Nov 2017 à 18:24
Localisation: West Coast

Re: Modifier proprement les icônes de forum

Messagepar Mazeltof » 28 Jan 2020 à 11:22

'jour ici

Lomic a écrit:Du coup dois-je reprendre ces classes dans le CSS de mon style perso et modifier les noms des fichiers, et mettre mes icônes dans le répertoire /images de mon style perso ?


Oui, c'est exactement ça. :wink:
A partir du moment ou tu utilises un style hérité (personnalisé) toutes modifications concernant ton style doivent être faites dans celui-ci.
Le ou les styles parents ne doivent en aucun cas être modifiés sous peine de rencontrer quelques difficultés lors des Màj à venir.

La méthode indiquée par Sylveretour est en effet très pratique pour situer rapidement les modifications à apporter.
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 3579
Enregistré le: 09 Mar 2009 à 22:02
Localisation: Arras

Re: Modifier proprement les icônes de forum

Messagepar Lomic » 28 Jan 2020 à 12:15

Mazeltof a écrit:Oui, c'est exactement ça. :wink:
Cool merci, je ne voulais pas partir sur une méthode au feeling et me rendre compte ensuite que je ne fais pas comme il faut faire ;)
La méthode indiquée par Sylveretour est en effet très pratique pour situer rapidement les modifications à apporter.
Je développe des sites internet au quotidien donc j'y passe ma vie dans cet inspecteur de code :mrgreen:

Je vais tester tout ça. Mon petit forum me sert au passage de cobaye pour m'attaquer aux modifs d'un bien plus gros :wink:

Merci pour vos retours.
Lomic
Posteur néophyte
Posteur néophyte
 
Messages: 28
Enregistré le: 20 Fév 2012 à 11:57


Retourner vers [3.3.x] Modifications et recherche de styles

 


  • Articles en relation
    Réponses
    Vues
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité