Software & AppsOperating SystemLinux

How To reduce GNOME titlebar height in Ubuntu 20.04 without extensions or themes

Ubuntu 5

In this guide, we will walk you through a step-by-step process on how to reduce the height of the GNOME titlebar in Ubuntu 20.04 without using any extensions or themes. This can be particularly useful if you’re looking to maximize your screen real estate or simply prefer a more minimalist look.

Quick Answer

To reduce the GNOME titlebar height in Ubuntu 20.04 without using extensions or themes, you can manually edit the CSS file. By following the step-by-step guide in this post, you can adjust the height to your preference and achieve a more minimalist look on your desktop.

Understanding the GNOME Titlebar

The GNOME titlebar, also known as the headerbar, is the topmost part of windows in the GNOME desktop environment. It typically contains the window title and controls such as minimize, maximize, and close buttons.

In Ubuntu 20.04, the default height of the titlebar can sometimes be larger than some users prefer. While there are many themes and extensions available that can adjust this, they often come with additional changes that you might not want.

Fortunately, there’s a way to reduce the titlebar height manually by editing a Cascading Style Sheets (CSS) file.

Prerequisites

Before we begin, ensure that you have administrative access to your Ubuntu 20.04 system. You will need to use the terminal for this guide, so familiarity with basic terminal commands is recommended.

Step-by-Step Guide

Step 1: Open Terminal

You can open the terminal by pressing Ctrl+Alt+T on your keyboard or by searching for ‘terminal’ in your applications menu.

Step 2: Create the CSS File

In the terminal, type the following command:

touch ~/.config/gtk-3.0/gtk.css

The touch command is used to create a new file if it doesn’t already exist. ~/.config/gtk-3.0/gtk.css is the path where the file will be created. The ~ symbol represents your home directory, .config is a hidden directory where configuration files are stored, gtk-3.0 is the directory for GTK3 configuration files, and gtk.css is the CSS file we will be editing.

Step 3: Open the CSS File in a Text Editor

Next, open the CSS file in a text editor. For this guide, we’ll use nano, a simple and intuitive text editor. Type the following command:

nano ~/.config/gtk-3.0/gtk.css

Step 4: Edit the CSS File

In the text editor, add the following CSS code:

headerbar {
 min-height: 24px;
 padding-top: 0px;
 padding-bottom: 0px;
}

Here’s what each line does:

  • headerbar: This is the selector that targets the titlebar of GTK3 apps.
  • min-height: 24px;: This sets the minimum height of the titlebar to 24 pixels.
  • padding-top: 0px; and padding-bottom: 0px;: These remove any padding at the top and bottom of the titlebar.

Step 5: Save and Exit

After adding the code, press Ctrl+O to save the file, then Ctrl+X to exit nano.

Step 6: Restart GNOME Shell

Finally, you need to restart GNOME Shell for the changes to take effect. You can do this by logging out and logging back in, or by pressing Alt+F2, typing r, and pressing Enter.

Conclusion

And there you have it! You’ve successfully reduced the height of the GNOME titlebar in Ubuntu 20.04 without using any extensions or themes. Please note that this method may not work for all GTK3 apps, especially those installed as snaps or flatpaks. Additionally, the size of the controls in the headerbar may affect the effectiveness of this method.

If you prefer a more user-friendly approach, you can also install Gnome Tweaks, which provides a graphical interface for customizing various aspects of the GNOME desktop environment, including the headerbar height. However, this falls outside the scope of this guide as it involves installing an additional tool.

We hope you found this guide helpful. If you have any questions or run into any issues, feel free to leave a comment below. Happy tweaking!

Can I use this method to reduce the height of the titlebar in other versions of Ubuntu or other Linux distributions?

Yes, you can use this method to reduce the height of the titlebar in other versions of Ubuntu or other Linux distributions that use the GNOME desktop environment.

Will this method work for all applications?

This method will work for most GTK3 applications. However, please note that some applications installed as snaps or flatpaks may have their own styling and may not be affected by these changes.

Can I customize the height of the titlebar to a value other than 24 pixels?

Yes, you can customize the height of the titlebar by modifying the min-height value in the CSS code. Simply change 24px to your desired height in pixels.

What if I want to revert the changes and revert back to the default titlebar height?

To revert the changes and revert back to the default titlebar height, simply delete or comment out the CSS code you added in the gtk.css file. Save the file and restart GNOME Shell for the changes to take effect.

Will this method affect the functionality of the titlebar buttons?

No, this method will not affect the functionality of the titlebar buttons. The buttons will remain in their default positions and function as usual. The only change will be the reduced height of the titlebar itself.

Leave a Comment

Your email address will not be published. Required fields are marked *