After recently installing Lubuntu 16.04 with gnome-terminal, I noticed that the terminal takes up more space on my monitor due to two unnecessary buttons in the top right corner. For avid terminal users like myself, these buttons only add bulk to the tabs bar and hinder efficiency as we tend to rely on keyboard shortcuts for tab operations. Can someone please assist me in removing these extra buttons from the gnome-terminal window? View Screenshot Here
Thank you in Advance
Madhusudhan
While I am currently using gnome shell 3.22.2 (same as izy) with gnome-terminal 3.22.1 on Arch Linux, the solution provided by Lari Hotari does not seem to work for me. It appears that the CSS class name has been updated according to bug report #765590. The new class name is now terminal-window instead of TerminalWindow and this change has been implemented since gnome version 3.20.2-ish.
The snippet below for ~/.config/gtk-3.0/gtk.css helps reduce the vertical size of gnome-terminal by 10px in my case. However, attempting to hide the two buttons by setting display: none did not have any effect. It seems that gtk-3.0 may not allow hiding UI elements but this is only speculation on my part.
/* Decrease the tabs bar height in gnome-terminal
* See:
* https://stackoverflow.com/questions/36869701/decrease-the-tabs-bar-height-in-gnome-terminal
*/
terminal-window notebook > header.top button {
padding: 0 0 0 0;
background-image: none;
border: 0;
margin-right: 10px;
}
terminal-window notebook > header.top > tabs > tab {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
terminal-window notebook > header.top > tabs > tab label {
padding: 0 0 0 0;
margin: 0 0 0 0;
}Remember to log out and back into your gnome-session after making changes to the css file.
Before: https://i.sstatic.net/m7jPB.png
After: https://i.sstatic.net/17sd7.png
Update: To actually remove the two buttons from the tabs menu bar in the top right corner (as requested by the OP), you will need to recompile gnome-terminal (which can be done relatively easily with apt source under Ubuntu). Simply remove the terminal_window_fill_notebook_action_box call on line 2792 in src/terminal-window.c: https://github.com/GNOME/gnome-terminal/blob/8975986d51639040ceb6ba1c0dc78f6a3fa9da45/src/terminal-window.c#L2792
If you want to enhance the appearance of your buttons on a dark theme while reducing vertical space usage, try adding the following code snippet to your ~/.config/gtk-3.0/gtk.css:
TerminalWindow .notebook .button,
TerminalWindow .notebook .button:active {
padding: 2 2 2 10;
background-image: none;
border: 0;
}
A customization that complements dark themes effectively can be achieved with the following code:
@define-color bg-grey #222;
@define-color active-grey #333;
@define-color border-grey #555;
TerminalWindow .notebook {
border: 0;
padding: 0;
color: #eee;
background-color: shade(@active-grey, 1);
}
TerminalWindow .notebook tab:active {
border: 1px solid @border-grey;
background-color: shade(@active-grey, 1);
}
TerminalWindow .notebook tab {
background-color: shade(@bg-grey, 1);
}
TerminalWindow .notebook .button,
TerminalWindow .notebook .button:active {
padding: 2 2 2 10;
background-image: none;
border: 0;
}
Customizing Xfce4 on Xubuntu 17.10
tee --append ~/.config/gtk-3.0/gtk.css <<SMALLERTABS
notebook tab {
min-height: 0;
padding-top: 0px;
padding-bottom: 0px;
}
notebook tab button {
min-height: 0;
min-width: 0;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
notebook button {
min-height: 0;
min-width: 0;
padding: 0px;
}
SMALLERTABS
After making changes, remember to close the terminal and reopen it.
For more information, check out:
Running Gnome 3.28.3 on Ubuntu 18.04
I found that by adding the following code, I was able to remove the button successfully. See the result here
notebook.terminal-notebook > header > box button,
notebook.terminal-notebook > header > box button:hover,
notebook.terminal-notebook > header > box button:hover:backdrop {
margin-top: -100px; /*This style rule hides the buttons.*/
background: inherit;
border: inherit;
padding: inherit;
}
If you want to get rid of them quickly, just go into the dconf editor and navigate to /io/elementary/terminal/settings/
Look for tab-bar-behavior and choose between "hide when single tab" or never show tabs...
I am tasked with changing the color of a specific table row based on user interaction. The table consists of multiple rows, each containing a button or image. When the user clicks on one of these buttons or images, a popup appears. Upon successful data sub ...
Recently, I decided to challenge myself by learning pure CSS and moving away from relying on Bootstrap for my layouts. The only aspect of Bootstrap I really used was the container class, so I created a basic project to experiment with pure CSS. In this pro ...
Which element is necessary to generate black lines within the image ? [![enter image description here][1]][1] I have already coded but I'm seeking to produce lines similar to the image (between images). What's the process for achieving this? Kin ...
.list-group-item{ width: 165px; height: 32px; line-height: 1px; text-align: center; margin-bottom: 1px; margin-top: 58px; margin-left: 20px; } <ul class="list-group" v-if="showSearchHistory"> <li class="list-g ...
Can anyone help me figure out how to properly format a table using HTML and CSS? I've been struggling with this task for hours... I'm having trouble organizing the rows in the table to match the layout shown in the image below. All items should b ...
Explanation I am attempting to display an image and hide the others based on a radio input selection. It works without using label, but when I add label, it does not work properly. The issue may be with eq($(this).index()) as it ends up selecting a differ ...
After retrieving a single record from the database for my detail view, I need to assign data to controls. Take a look at my code snippet below: var app = angular.module("MyProductApp", []); app.controller("ProductsController", function ($scope, ...
After creating a ThreeJS application designed for a 4:3 layout with multiple buttons and features, I decided to enable Fullscreen mode using THREEx.Fullscreen.js. Although the Fullscreen mode is functioning properly, a new issue arose - the renderer size(x ...
Currently, I am practicing JavaFX 2.0 and working on creating an XYChart with 2 line series while also customizing colors, strokes, etc. through a CSS file. In order to guide me through this process, I decided to refer to the following link: http://docs. ...
I'm looking to add an automatic image effect when the page is loaded. I currently have this code in my js file: $(window).ready(function(){ $(pin).click(function(){ $("#pin01").show().animate({left: '650px'}); }) }); Here is the HTML wit ...
Let's talk about an element that already has an animation set to trigger at a specific time: .element { width: 100%; height: 87.5%; background: #DDD; position: absolute; top: 12.5%; left: 0%; -webkit-animation: load 0.5s ease-out 5s bac ...
I regret to inform you that I am unable to provide an answer at this time. Below is the code snippet provided: #wrapper { width: 844px; display: block; margin-left: auto; margin-right: auto; text-align: left; } #posts { width: 844px; float: left; } .en ...
Looking to achieve an underline effect with a bottom border that is narrower than the width of the h2 title. Though I typically avoid uploading images, here is one to provide further clarification of my question: ...
Seeking a way to position a component within a .jsx-file, rather than a .css-file, to accommodate multiple instances of the same component performing various tasks on different parts of the page. Avoiding duplication of files with minor CSS class changes, ...
I've been working on creating an animation that switches between 2 images used as the background image of a div. Here's the code snippet I've been using: var spacecraftInterval = setInterval(function() { if (access == true) { var image ...
I have encountered a strange issue with one of my Div elements. When I add text inside the div, the background color sticks to the text. However, if there is no text present, the background color disappears. Image with Text: https://i.stack.imgur.com/oYK ...
Is there a way to conditionally display my navbar in react only when a specific section is reached? Currently, I am monitoring scroll position but this method becomes unreliable on larger screens due to varying scroll positions. I need the navbar to beco ...
I am facing an issue with an element where I set top: -100%. My requirement is to translate top: -100% to top: -{height-of-the-element}. Unfortunately, instead of getting top: -{height-of-the-element}, I am getting top: -{height-of-another-element-wrapping ...
I'm having trouble centering the contents of a div with my code. The properties I am applying don't seem to work. Any idea why this is happening? <div class='center'> <form (ngSubmit)="loginUser()" style="background: steel ...
I'm currently facing a challenge with my project - I am trying to create a submenu that includes all sub-pages within a single HTML file. However, whenever I attempt to use both href and onclick, the functionality fails to work as intended. The only ...