I’ve seen this tweak requested a few times in the G+ community so here is the answer. This modification will affect both the standard wingpanel as well as wingpanel-slim.
Disclaimer: This method will alter the theme for all users of your computer.
First we need to launch Files in administrator mode. If Files is in your dock, you can simply right-click it and select “New Window as Administrator”.
pantheon-files as admin
In the left-hand pane, click on File System then navigate to the folder /usr/share/themes/elementary/gtk-3.0/
Locate /usr/share/themes/elementary/gtk-3.0/apps.css
Click on the file named apps.css. This should launch your text editor.
Scroll down to the section that looks like this:
/*********
* Panel *
********/
Edit apps.css
The line we are interested in is just below that where it says something like “background-color: alpha(#333, 0.7).
- The first value inside the parenthesis represents the hexidecimal color of the panel. If you are not familiar with how hexidecimal colors work, you can use http://www.colorpicker.com/ to select the color.
- The second value represents how transparent the panel is on a scale from 0.0 (transparent) to 1.0 (opaque).
IT’S NOT WORKING!
The changes will not take effect immediately; you’ll have to restart the panel. You can do so in one of two ways:
- Log out and log back in.
- Open the terminal application and type one of the following (depending on which you are currently using):
killall wingpanel killall wingpanel-slim
The panel will automatically restart with your new settings.
Bonus: You’ll notice the shadow is unaffected by the changes we’ve made above. Hopefully you also noticed the next section in the file starts with “.panel-shadow”. The shadow is slightly more complicated as it is a gradient and as such, has two separate alpha colors to specify. By default, the shadow starts at 30% opaque and goes to 0% (completely transparent).
I’have installed elementary OS just recently and I’m impressed. Thanks for the hack, looks great !
but how to apply that to gtk3 themes that have a different structure than the one presented at that link? for example this (http://nale12.deviantart.com/art/1-25032013-358336961) theme, which does not seem to have the `apps.css` file in `/usr/share/themes/elementary/gtk-3.0/`.
sorry for the improper form: please ignore the words “at that link”
I would also like to know this. I have many themes but only the deafault eOS theme uses that apps.css file. I have messed with adjusting a similar line in gnome-panel.css, gtk.css, unity.css and gnome-applications.css with no luck.
To add full transparency, while editing “apps.css” panel transparency just below it there is a “.panel-shadow” and change:
“from (alpha (#000, 0.3)),” to “from (alpha (#000, 0.0)),”