Creating a Transparent Panel with Grouped Buttons in the GNOME DE

⚠️ This guide uses the apt package manager, if you are using another package manager, please follow the related package installation guide according to the one you are using.

Overview

There is a short tutorial how to make your GNOME panel like the image below

Requirements

1. First, you need to install GNOME Tweaks & GNOME Shell Extensions

   apt install gnome-tweaks gnome-shell-extensions
   

2. Also make sure you have extensions enabled. You can open Extensions by opening Extensions in your installed application list You can also enable extensions by running the following command

   gsettings set org.gnome.shell disable-user-extensions false
   

3. This step actually depends on what browser you are using, with Google Chrome you can install the GNOME Shell Integration Extension and install the chrome-gnome-shell package

   apt install chrome-gnome-shell
   

4. You also need to install and enable User Themes GNOME Extension

Configuration

1. You should know what theme you are using now. Usually your theme is located in ~/.themes/ or /usr/share/themes/ directory

2. For example, since I used Nordic Darker in home directory so the theme directory should be in ~/.themes/Nordic-darker-v40/

3. Then you can open gnome-shell/gnome-shell.css in your theme directory with your favorite text editor.

4. In gnome-shell.css try to find text with #panel keyword. For example, the result will be like the following code

   #panel {
     background-gradient-direction: none;
     background-color: #1d2128;
   
     /* transition from solid to transparent */
     transition-duration: 500ms;
     font-weight: bold;
     height: 2.1em;
     padding: 0px 0px
   }

5. Then you can change the background-color property of #panel to transparent

   #panel {
     background-gradient-direction: none;
   -  background-color: #1d2128;
   +  background-color: transparent;
   
     /* transition from solid to transparent */
     transition-duration: 500ms;
     font-weight: bold;
     height: 2.1em;
     padding: 0px 0px
   }

6. After that, try to find the #panel .panel-button selector. For example, the result will be like the following code

   #panel .panel-button {
     -natural-hpadding: 12px;
     -minimum-hpadding: 6px;
     font-weight: bold;
     color: #d8dee9;
     transition-duration: 100ms;
   }

7. Add box-shadow and border-radius to the #panel .panel-button selector

   #panel .panel-button {
   +  box-shadow: inset 0 0 0 100px #4C566A;
   +  border-radius: 13px;
   
     -natural-hpadding: 12px;
     -minimum-hpadding: 6px;
     font-weight: bold;
     color: #d8dee9;
     transition-duration: 100ms;
   }

8. Save the file, then try searching for Tweaks in your installed application list and open it. Or you can also open GNOME Tweaks application with following command line

   gnome-tweaks
   

9. Finally go to the Appearance tab, and change your Shell configuration with the theme you have edited. Of course if you prefer to use the command line, you can use the code below to change your shell configuration

   gsettings set org.gnome.shell.extensions.user-theme name 'YOUR_THEME_NAME'
   

10. For reference, here is the final result of the modified Nordic theme gnome-shell.css