Jump to content
ElementaryOS France

Tuto: Remplacer le mot application par un logo.


Recommended Posts

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

 

mexSh3a.png

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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  :blink: 

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 :D

Link to comment
Share on other sites

  • 1 year later...
  • 2 years later...
  • 8 months later...

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

Modifs.png.18d3aa2bf39c774d08f7b94e9a15e265.png

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 :

473215299_LogosansApplication.png.bcef4b45108def3a54e665b2adb95fb7.png

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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

Link to comment
Share on other sites

  • 4 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...