How to Customize the Top Panel in Elementary OS Luna

October 24, 2013 — 17 Comments

customize elementary os panel

This tutorial shows you how to customize your Elementary OS top panel, including background color and transparency, auto hide panel, and show or hide Applications launcher.

To get started, press Ctrl+Alt+T on your keyboard to open terminal. When it opens, run command to edit the /usr/share/themes/elementary/gtk-3.0/app.css:

sudo scratch-text-editor /usr/share/themes/elementary/gtk-3.0/apps.css

eos panel config file

There you can change the value of panel background color and transparency as well as other colors, include Noise, Terminal, Notify, and more.

To apply changes, run:

pkill wingpanel

elementary os panel

To get slim wingpanel, run command below in terminal:

sudo apt-get install wingpanel-slim elementary-tweaks

Then go to System Settings -> Tweaks -> Wingpanel Slim, there you can enable slim wingpanel, auto-hide panel, show / hide launcher.

elementary tweak slim wingpanel

Finally, my panel looks like:

elementary os slim panel

I'm a freelance blogger who started using Ubuntu 5+ years ago and wishes to share my experiences and some useful tips with Ubuntu beginners and lovers. Please notify me if you find any typo/grammar/language mistakes. English is not my native language. Contact me on Google Plus or email to

17 responses to How to Customize the Top Panel in Elementary OS Luna

  1. I’ve installed the wingpanel-slim addon for elementary-tweaks but it doesn’t work. neither does it when i log off and in. the panel just remains original.

    • Do you have Elementary Tweaks installed? If not, please do so. Open Elementary Tweaks and click the Cerbere tab in the sidebar. You should see 3 entries in the main area plank, slingshot-launcher and wingpanel-slim. If the last (wingpanel-slim) is missing and you only have wingpanel, replace it with slim. You could just edit the wingpanel entry by adding “-slim”. Another way is to delete it completly and add a new entry… Just relog (log out and back in) after that.

      • Ha thank you! I had to rename wingpanel into wingpanel-slim in cerbere. I had two times wingpanel there, don’t know why…

  2. Thanks,

    Had to wingpanels in cerbere…Now it works fine!

  3. Hi,

    How can i change the name APPLICATIONS to something else ??? and its possible to had an icon like the E logo for elementary instead of having the name Applications there ??


  4. There is any way to create delay when autohide is enabled? I don`t want to show wingpanel immediately.

  5. Thanks Ji m.

    Your tutorials are very useful and easy to follow.

  6. Can I add:

    .panel {
    background-color: alpha (#ddd, 0.9);
    color: #000;
    font-weight: bold;

    Doesn’t seem to do anything to the text colour. The background goes light grey but text is still white.

    • Can I add that the font colour can be change in the same file, but here:

      .composited-indicator {
      background-color: @transparent;
      color: #fff; —this changes the font color of applications, the clock, and other text in the panel
      padding: 0px 0px 0px 2px; —this changes the padding around the top panel, you can make it look bigger or spread out the tray icons to your liking


  7. is it possible apply a gradient colour to the top panel?

  8. I’ve beena able to edit the apps.css but I see no change. The panel still remians as it is..

  9. It’s working now guys.. the instructions above is meant for default elementary theme but I was using a theme called ” Champagne” and so I had to edit ” apps.css” in Champagne folder to see the effect.. Thank you so much :)

  10. Can you move The Panel to a secondary monitor ?

  11. I too have the same question: Can you move The Panel to a secondary monitor ?

  12. Thank you.
    It would be awesome if you update this article for elementary os 3.1

  13. I added the repo, did an update and installed elementary-tweaks but apt-get won’t find wingpanel-slim.
    What did I miss?
    asim@deosai:~$ sudo apt-get install wingpanel-slim
    Reading package lists… Done
    Building dependency tree
    Reading state information… Done
    E: Unable to locate package wingpanel-slim

Leave a Reply


Text formatting is available via select HTML.

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>