Tuto: Remplacer le mot application par un logo.

[Seb]

Remplacer le mot application par un logo.

 

1. Ouvrir Pantheon-files en admin et mettre votre icone ici. /usr/share/themes/nom de votre theme/gtk-3.0

2. Ouvrir le fichier /usr/share/themes/name-of-your-theme-folder/gtk-3.0/apps.css, trouver .panel-app-button et remplacer comme suit

.panel-app-button > GtkWidget > GtkWidget:first-child { padding: 0px 24px 0px 0px; font-size: 0px; background-image: url("elementary-white.svg"); background-repeat: no-repeat; }

3. Killall wingpanel

 

Icones Elementay

https://heathpaddock.com/wp-content/uploads/2014/01/elementary-white.svg
https://heathpaddock.com/wp-content/uploads/2014/01/elementary-black.svg

 

 

[nettlebay]

Ce n'est pas très explicite, dis-donc... C'est pour Super Wingpanel?

Et tu aurais pu aussi indiquer tes sources... C'est la moindre des choses.

C'est pas https://heathpaddock.com?

[Seb]

https://www.reddit.com/r/elementaryos/comments/3fzd6s/tutorial_how_to_replace_the_applications_text_on/

 

Open file manager up as administrator and go to: /usr/share/themes/name-of-your-theme-folder/gtk-3.0

 

Place the icon you want to use in that folder.

 

Make sure the icon has proper permissions by right clicking on it, choosing properties > more > and making it 644-777 (read, write, and executable by owner, group, everyone) or else wingpanel may not load.

 

Open up /usr/share/themes/name-of-your-theme-folder/gtk-3.0/apps.css in Scratch, scroll down to the panel settings, find .panel-app-button, and change what's in the {brackets} to what's below.

.panel-app-button > GtkWidget > GtkWidget:first-child { padding: 0px 24px 0px 0px; font-size: 0px; background-image: url("icon.svg"); background-repeat: no-repeat; }

 

Change the background image url to the name of the icon that you placed in the gtk-3.0 folder.

 

The padding above is adjusted for a 24x24 icon but you can adjust it to fit something bigger/smaller/wider, just change "24px" to the width of your image.

 

In terminal type: killall wingpanel to see the changes.

[nettlebay]

Merci!

[titou]

Salut !! Merci pour cette astuce

j'ai juste un petit probleme : je n'arrive pas à récupérer l'image svg du logo elementary...

Donc si tu sais comment faire ce serait cool de me débloquer

[Voodoonice]

Bonsoir,

 

Chez moi, ça fonctionne très bien avec le logo noir, en revanche lorsque j'essais le blanc, le wingpanel disparait. Il fonctionne puisque j'ai les notifications mais il est invisible   

Merci pour votre aide précieuse 

[Seb]

Bonsoir,

 

Chez moi, ça fonctionne très bien avec le logo noir, en revanche lorsque j'essais le blanc, le wingpanel disparait. Il fonctionne puisque j'ai les notifications mais il est invisible   

Merci pour votre aide précieuse 

 

Arf, j'ai pareil, du coup j'ai changé la police du mot "Applications" pour le faire disparaitre.

 

En plus j'ai piqué ton post sur Hfr pour le mettre ici

[Voodoonice]

 

 

Arf, j'ai pareil, du coup j'ai changé la police du mot "Applications" pour le faire disparaitre.

 

En plus j'ai piqué ton post sur Hfr pour le mettre ici

[jhnjyii]

c'est vraiment bonne nouvelle ! :D

 

 

 

 

 

 

 

-------------------------------------

etui samsung galaxy s6 edge housse samsung galaxy s6 edge

[Voodoonice]

Bonsoir,

 

Est ce que ce tuto fonctionne toujours avec Loki ?

[Aralis]

Bonjour, Je ressors ce tuto qui date mais est-ce toujours d'actualité pour Juno? J'avoue que ça rendrait le menu application plus sympa.

Merci.

[lafy]

Je reviens sur ce sujet parce que ça ne marche plus comme ça pour Loki et Juno.

Je n'ai rien inventé, j'ai suivi un tuto sur stackexchange : how-to-replace-wingpanels-applications-text-with-a-icon-in-freya, qui est à l'origine de l'exemple plus haut et j'ai juste modifié des petites choses.

1) Modifier le fichier /usr/share/themes/elementary/gtk-3.0/Apps.css comme suit, il faut éditer le fichier en mode sudo par exemple avec code sur Juno :

sudo io.elementary.code apps.css

ATTENTION il y a une erreur dans le tuto d'origine il n'y a pas de point avant menubar

2) Copier une icone elementary de 25*25 dans le répertoire:  /usr/shar/themes/elementary/gtk-3.0/

Par exemple  : 

sudo cp origine/elementaryicon.png /usr/share/themes/elementary/gtk-3.0/elementaryicon.png

3) Relancer le wingpanel

killall wingpanel

On obtient ça :

 

[lafy]

Il y a une autre possibilité c'est de garder Application et le logo à côté comme ça :

Dans ce cas vous le mettez pas les lignes
 

.panel menubar:first-child {
	font-size:0px;
}

 

[Aris]

Merci !

Par contre je pense qu'il faut sauvegarder quelque part la feuille de styles CSS modifiée, car le hack a de fortes chances de sauter à la première mise à jour officielle de l'interface elementary, en tout cas si celle-ci met à jour les feuilles de styles.

[Wolfy]

Par contre, y a la loupe en surposition du logo, y a pas moyen de décaler ?

[lafy]

@Aris, tu as carrément raison, il faudra certainement le refaire si les feuilles de style sont mises à jour

@Wolf117Warrior, je me demande si cette petite loupe  est une référence à" Elementary, mon cher Watson " mais c'est une pure supposition de ma part.

Je vais chercher où elle est définie, en attendant on peut décaler notre logo pour qu'il colle moins à la loupe

background-position: 5px 0px;

ici 5 pixels vers la droite, 0 vers le bas

[Wolfy]

@lafy

La loupe, c'est pour faire une recherche à la Finder de macOS.

[lafy]

Pour avoir un logo de votre choix mais pas de loupe ça devient un peu confus, je vous renvoie ici :

https://github.com/Lafydev/Kindypanel

ainsi vous ne modifiez plus vos sources et vous pouvez customiser ou revenir au wingpanel d' elementary à volonté.