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
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
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.
Finally, my panel looks like:
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…
Thanks,
Had to wingpanels in cerbere…Now it works fine!
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 ??
Thanks.
There is any way to create delay when autohide is enabled? I don`t want to show wingpanel immediately.
Thanks Ji m.
Your tutorials are very useful and easy to follow.
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
}
Sam.
is it possible apply a gradient colour to the top panel?
@marco, I’ve been trying for the past hour or so, so many combinations for gtk3 gradient but nothing works. Then I found this:
https://bugs.launchpad.net/wingpanel/+bug/1163906?comments=all
I’ve beena able to edit the apps.css but I see no change. The panel still remians as it is..
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 :)
Can you move The Panel to a secondary monitor ?
I too have the same question: Can you move The Panel to a secondary monitor ?
Thank you.
It would be awesome if you update this article for elementary os 3.1
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
asim@deosai:~