Skip to content
This repository has been archived by the owner on Jul 15, 2021. It is now read-only.

[FR] 1.2 Les icônes : création de thème

Faymoon edited this page May 8, 2018 · 12 revisions

Création de thème : les icônes

La chose la plus évidente que permet les thèmes, c'est la possibilité d'avoir ses propres icônes. Il existe deux manières de faire, soit en aillant des icônes pour le thème quand il est "claire" et leur variante quand le thème est "sombre", soit en aillant une seul fois les icônes ignorant si le thème est sombre ou foncé.

Les différentes approches

L'approche "foncé/claire"

Si votre thème supporte la possibilité de laisser l'utilisateur choisir ses couleurs, il peut être intéressant de modifier les icônes si elles sont affichés sur un fond sombre ou sur un fond clair. Pour cela c'est très simple, vous devrez avoir à à la racine de votre thème deux dossiers :

  • un dossier light ou vous mettrez les icônes qui s'affichent sur fond clair,
  • un dossier dark ou vous mettrez les icônes qui s'affichent sur fond sombre.

Vous devrez ainsi avoir un fichier index.theme dans chacun de ces deux dossiers.

L'approche classique

Vous pouvez aussi n'avoir qu'un seul jeu d'icônes pour tous le thème. Dans ce cas, vous êtes libre de les mettre où vous souhaitez, mais le fichier index.theme devra se trouver à la racine du thème.

Le fichier index.theme

C'est le fichier qui indiquera à Sielo où chercher vos icônes. Il devra obligatoirement commencer comme ceci :

[Icon Theme]
Name=...
Comment=...
Directories=...

Par exemple, pour le thème firefox-light le fichier commence comme ceci :

[Icon Theme]
Name=Firefox
Comment=FF like theme
Directories=images/edit,images/other,images/preferences,images/tabs,images/titlebar

Le chemin indiqué dans Directories commence la où se trouve le fichier index.theme.

Liste des icônes

Les images utilisés dans la suite de cette partie sont les images du thème par défaut. Les dossiers cités ci dessous ne sont pas fixés mais ce sont ceux utilisés par le thème par défaut (et la plupart des thèmes jusqu'à maintenant), ils sont bien sur configurable dans le index.theme.

Dans le dossier racine de votre thème, il vous faut mettre des images qui correspondront aux parties du bouton flottant :

Nom de l'icône Icône
add-bookmark.png add-bookmark.png
back.png back.png
history.png history.png
home.png home.png
icon.png icon.png
new-tab.png new-tab.png
new-window.png new-window.png
next.png next.png
view-bookmarks.png view-bookmarks.png

Dans le dossier edit il vous faudra mettre les images correspondant aux commandes pour éditer (copier, coller ...) :

Nom de l'icône Icône
edit-clear.png edit-clear.png
edit-copy.png edit-copy.png
edit-cut.png edit-cut.png
edit-delete.png edit-delete.png
edit-past.png edit-past.png
edit-redo.png edit-redo.png
edit-select-all.png edit-select-all.png
edit-undo.png edit-undo.png

Dans le dossier other il y vous faudra mettre toutes les images autres :

Nom de l'icône Icône
aboutsielo.png aboutsielo.png
add-bookmark.png add-bookmark.png
arrow-down.png arrow-down.png
arrow-left.png arrow-left.png
arrow-right.png arrow-right.png
arrow-up.png arrow-up.png
audiocapture.png audiocapture.png
bookmarks.png bookmarks.png
check.png check.png
close.png close.png
downloads.png downloads.png
exit.png exit.png
geolocation.png geolocation.png
go.png go.png
google.png google.png
heart.png heart.png
history.png history.png
home.png home.png
ic_sielo.png ic_sielo.png
login.png login.png
mouselock.png mouselock.png
new-window.png new-window.png
notification.png notification.png
open-file.png open-file.png
reload.png reload.png
round.png round.png
search.png search.png
stop.png stop.png
webcam.png webpage.png
webpage.png webpage.png