Enable Top Panel Dynamic Transparency in Ubuntu 20.04

Last updated: January 26, 2021

gnome shell

Miss Ubuntu 18.04 style dynamic top panel transparency? Here’s how to get this function in Ubuntu 20.04 gnome shell.

Although top panel transparency was removed since Gnome 3.32, you can get the feature back via ‘Dynamic Panel Transparency‘ gnome shell extension.

The extension fades your top panel to nothingness when there are no maximized windows present. With extension settings, you can also:

  • change transition speed.
  • set custom panel opacity.
  • change foreground text color.
  • per-app basis settings.

If you’re first time installing gnome shell extension in Ubuntu 20.04, you may need to do the first two steps to setup GNOME Shell extensions integration for web browsers.

1. Open Firefox or Google Chrome and go to https://extensions.gnome.org:

Click the link text “click here to install browser extension” and follow the pop-ups to install the browser extension:

shell browser extension

2. Then open terminal via Ctrl+Alt+T and run command:

sudo apt install chrome-gnome-shell

3. Go to dynamic-panel-transparency/ page, and click the toggle to install the extension.

4. The extension is not updated for Gnome 3.36 at the moment. If you see an error, run command in terminal:

gedit ~/.local/share/gnome-shell/extensions/[email protected]/intellifade.js

And in pop-up text editor, find out and change following lines:

let anchor_y = -Main.layoutManager.panelBox.get_anchor_point()[1];
let pivot_y = -Main.layoutManager.panelBox.get_pivot_point()[1];

// Adjust for bottom panel.
if (anchor_y > 0) {
this.panel_bounds.y = anchor_y;
this.panel_bounds.is_top = false;
} else if (pivot_y > 0) {
this.panel_bounds.y = pivot_y;
this.panel_bounds.is_top = false;
}

into:

let pivot_y = -Main.layoutManager.panelBox.get_pivot_point()[1];

// Adjust for bottom panel.
if (pivot_y > 0) {
this.panel_bounds.y = pivot_y;
this.panel_bounds.is_top = false;
}

Save the file. And restart Gnome Shell by pressing Alt+F2 on keyboard, typing “r” (without quotes) and hit Enter.

Finally, launch “Extensions” utility, turn on ‘Dynamic Panel Transparency’ extension and change its settings and enjoy!

In addition, you may also adjust the left dock panel opacity by running command (change 0.2 in the code):

gsettings set org.gnome.shell.extensions.dash-to-dock background-opacity 0.2

Twitter

I'm a freelance blogger who started using Ubuntu in 2007 and wishes to share my experiences and some useful tips with Ubuntu beginners and lovers. Please comment to let me know if the tutorial is outdated! And, notify me if you find any typo/grammar/language mistakes. English is not my native language. Contact me via [email protected] Buy me a coffee: https://ko-fi.com/ubuntuhandbook1 |

13 responses to Enable Top Panel Dynamic Transparency in Ubuntu 20.04

  1. Thanks! It works!

  2. Awesome! Appreciate it!

  3. Thanks! It works! Ubuntu 20.04

  4. Yeah! thanks a lot!

  5. Thanks! it works

  6. Bingo.
    Finally works for me on 20.04 LTS

    I was scared shitless, through the whole thing, and every time I get started I wish that the author would have discussed the “recovery plan” for me if their plan disn’t actually work for me on my hardware – just saying.
    Virgins need handholding.

    Anyway, you nailed it, your “How To” not only worked but was confidence inspiring enough for me to risk it if I bricked it. ;)
    SIncerely.
    Tom

  7. Mohamed Bendaoud May 11, 2020 at 9:54 pm

    Thank you. It worked perfectly on ubuntu 20.04.

  8. Thanks,It works on manjaro 20.0

  9. Volnei Batista May 15, 2020 at 5:10 pm

    Mr. Ji, a big “THANK YOU” from Brazil! So much happy now with my Pop! OS desktop!

  10. Himanshu Sharma May 25, 2020 at 3:44 pm

    Thank you so much

  11. Thanks.

  12. Great! Thanks a bunch

  13. Thanks works in 20.10 as well.