6

I was previously wondering how I go about replacing the text at the top left of the from 'Applications' to the official Elementary OS logo. I found a solution to this question posted on Reddit which I have posted below. I hope this helps anyone who hasn't previously found this answer.

  • this is not working or i am not able to change this! eOS Loki – tSrH Oct 5 '16 at 13:31
  • I haven't tested this out with Loki only for Freya – Mark O'Sullivan Oct 5 '16 at 13:47
7

According to elementaryosnewbie's answer on Reddit. Thought it'd be best to have this on the Elementary OS Stack Exchange. Big thanks to him for sharing it. If this has already been posted I apologies for the double post.

Here is how it looks:

Image 1

Image 2

Image 3

  • 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. (Alternatively you could issue chmod 777 <icon name>.svg)

  • 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. (Default theme: /usr/share/themes/elementary/gtk-3.0 )

.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.

    Some icons you may like

  • - bulls-eye icon

  • - apple icon (Image may not be visible here because its color matches the background here.)

Search google for more

https://www.google.com/search?q=menu&tbs=isz:ex,iszw:24,iszh:24,ic:trans&tbm=isch&cad=h

  • Doesn't seem to work any more in Loki. – user6541 Sep 23 '16 at 8:51
  • will it work on Loki? – Jaime Sangcap Oct 25 '16 at 18:07
  • When you are referencing someone's material, please use blockquote and Do mention the author's name first including the source link. Please read, How to reference material written by others. Thank you! – S M Mahmudul Hasan Jan 15 at 17:05
  • Excuse me @Hasan? I had already mentioned the author's name and included a link to their original post. – Mark O'Sullivan Jan 16 at 10:13
  • @Hasan you cannot just wrap the entire answer in a blockquote. The first paragraph are his own words. I think you did this to mimic the example in your link, but keep in mind that that example answer (that contains the quote) itself is treated as a quote on that page, hence it is wrapped in another quote there. – Tim Castelijns Jan 16 at 10:46
1

For ElementaryOS Loki users to replace the "Applications" text in the wingpanel with an icon:

open /usr/share/themes/yourtheme/gtk.css or /home/username/.themes/yourtheme/gtk.css

copy desired icon (icon.svg in this example) to this folder and add:

.panel {
  background-color: transparent;
  background-image: url("icon.svg"); 
  background-repeat: no-repeat;
}

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

If you selected "prefer dark variant" in elementary-tweaks, you may need to change gtk-dark.css instead of gtk.css

1

Place the logo file on /usr/share/themes/yourtheme location.

Now open the app.css file, remove the existing code and add this code:

/*********
 * Panel *
 ********/

.panel {
    background-color: transparent;
    transition: all 100ms ease-in-out;
    background-image: url("elem.png");
    background-repeat: no-repeat;
}

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

Now, kill the panel:

killall wingpanel

the rest of things will handled by cerbere.

Have fun!

0

I'm trying to add icon instead the name applications.

enter image description here

Edit /usr/share/themes/yourtheme/gtk.css and add:

 /*********
 * Panel *
 ********/

.panel {
    /*background-color: transparent;*/
    background-color: #000;
    background-image: url("elementaryicon.png"); 
    background-repeat: no-repeat;
    font-size:0px !important;
    transition: all 100ms ease-in-out;
}

I search now to remove the name applications.

0

I also added:

background-position: 6px 0;

so the icon would line up with the icons in the dock (assuming you have the dock on the left). You might have to tweak it depending on the size of the icon you use.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.