[SOLVED] GNOME 3.16 bottom border on title bars

veeti · 2015-04-10 16:30:37

GNOME 3.16 seems to have added a border below the window title bar for every application. While this looks fine with their CSD applications, IMO it's really ugly elsewhere.

Screenshot of what I'm talking about:

Previously the title bar would fade nicely into the application window itself. Is there a way to get the old look back?

Last edited by veeti (2015-04-11 15:20:47)

gnunn · 2015-04-10 18:38:44

I hated that as well, the only way I was able to get rid of it was by creating a new theme and injecting a new CSS file to override the relevant classes. I was hoping there would be a way to package it up in a way that wouldn't involve duplicating the existing theme but haven't found it yet. Here's the CSS, it would need to go in a new file and imported after the gtk-container.css to override the relevant classes:

.titlebar {
    border: 0px;
    box-shadow: none;
}

.csd .header-bar {
  border-width: 0 0 1px;
  border-style: solid;
  border-color: #a3a3a3;
  box-shadow: inset 0 -1px #dbdbdb, inset 0 1px white;
}

.menubar {
    box-shadow: none;
    background-color: #ededed;
}

Last edited by gnunn (2015-04-10 18:38:59)

sosu · 2015-04-10 20:11:41

So far I have done:
git clone git://git.gnome.org/gtk+
then I have create file some.css in gtk/theme/Adwaita with yours code in it and then I've append to gtk.css:
@import url("resource:///org/gtk/libgtk/theme/Adwaita/some.css");
What I need to do now to remove the bottom border on title bars ?

johnpatcher · 2015-04-10 20:31:21

For me there seems to come along another bug: The "x" button in the upper right corner of any active window is highlighted, i.e. it looks like I was hovering over it all of the time:

Do you experience this too?

I just filed a bug report [1] in the GNOME Bugzilla. I guess we will figure out if this is intended or not soon enough.

[1]: https://bugzilla.gnome.org/show_bug.cgi?id=747650

Last edited by johnpatcher (2015-04-10 20:37:06)

johnpatcher · 2015-04-10 20:45:56

Just for the sake of completeness: I've also filed a bug [1] for the original complain in this thread here. Hopefully this will get tackled upstream, because I don't like the idea to fiddle around with my theme for something that trivial.

[1]: https://bugzilla.gnome.org/show_bug.cgi?id=747651

gnunn · 2015-04-10 21:08:19

sosu wrote:

So far I have done:
git clone git://git.gnome.org/gtk+
then I have create file some.css in gtk/theme/Adwaita with yours code in it and then I've append to gtk.css:
@import url("resource:///org/gtk/libgtk/theme/Adwaita/some.css");
What I need to do now to remove the bottom border on title bars ?

You need to install sass and then run parse-sass.sh to generate the css files. After that, create an index.theme file and install into ~/.local/share/themes with the modified Adwaita theme under the folder gtk-3.0.

gnunn · 2015-04-10 21:08:59

johnpatcher wrote:

Do you experience this too?

Same issue for me as well.

johnpatcher · 2015-04-10 22:59:22

Doesn't sound that this is going to change anytime soon :'(. [1]:

This is a matter of taste issue, to me it's more consistent to have csd and ssd windows decoration sharing the same look, also the "open" titlebar created quite a bit of problems themewise, sorry guys I don't really feel like going back to what we used to have.
Regarding the terminal it looks ok to me with the new style menubar (the terminal has style problems which can't be solved by the theme tho, like a missing frame around the vte window... but this is another story), gtk+2 apps looks pretty bad since the old menubar design and old notebook design, I'm working on fixing gtk+2 Adwaita (well at least I'm trying to, my brain discarded all the old theming stuff infos unfortunatelly) .

[1]: https://bugzilla.gnome.org/show_bug.cgi?id=747651#c6

horst3180 · 2015-04-11 00:22:19

You can create ~/.config/gtk-3.0/gtk.css with the following content and restart the shell.

.header-bar.default-decoration {
    padding-top: 3px;
    padding-bottom: 3px;
    border: none;
    background-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 1.05),
                                      shade(@theme_bg_color, 0.99));
    box-shadow: inset 0 1px shade(@theme_bg_color, 1.4);
}

.header-bar.default-decoration .button.titlebutton {
    padding-top: 2px;
    padding-bottom: 2px;
}

This will more or less recreate the old window decoration style for non csd windows.

Note: I removed some padding to make the window decorations smaller, which looks better imo. You can tweak the padding to your liking or remove the according lines altogether.

johnpatcher wrote:

Do you experience this too?

I have the same problem under X. It doesn't happen under wayland for some reason. Also this seems Arch specific, because I don't have this issue under Fedora 22 with Gnome 3.16.

xgdgsc · 2015-04-11 04:35:28

This is indeed so ugly.

-MacNuke- · 2015-04-11 08:08:06

horst3180 wrote:

You can create ~/.config/gtk-3.0/gtk.css with the following content and restart the shell

THANK YOU!

Last edited by -MacNuke- (2015-04-11 08:08:19)

veeti · 2015-04-11 15:20:37

Thank you so much!

albertgasset · 2015-04-11 21:37:51

I've been trying to make it look good under different conditions (light / dark theme, with / without menu bar), and I've ended with this ~/.config/gtk-3.0/gtk.css :

/* Flat close button */
.ssd .titlebar .button.close:not(:hover):not(:active) {
    border-width: 0;
    background-image: none;
    box-shadow: none;
}

/* No line below the title bar */
.ssd .titlebar {
    border-width: 0;
    box-shadow: none;
}

/* Menu bar with same color as the title bar */
.menubar {
    background-color: @theme_bg_color;
}

EDIT: Small fix for the button when pressed.

Last edited by albertgasset (2015-04-12 10:47:58)

stee1rat · 2015-04-11 22:43:59

Thank you so much! This default style looks awful. I wonder how and why they allowed it in the release.

Tomin · 2015-04-12 04:51:52

albertgasset wrote:

I've been trying to make it look good under different conditions (light / dark theme, with / without menu bar), and I've ended with this ~/.config/gtk-3.0/gtk.css :
/* Flat close button */
.ssd .titlebar .button.close:not(:hover) {
    border-width: 0;
    background-image: none;
    box-shadow: none;
}

My close button has still borders when the window is active. The line is removed though.
https://dl.dropboxusercontent.com/u/430 … -51-20.png

drakkan · 2015-04-12 07:47:53

Hi all,

if you think the new theme is ugly for non gnome3 apps let know to gnome developers on bugzilla

https://bugzilla.gnome.org/show_bug.cgi?id=747650
https://bugzilla.gnome.org/show_bug.cgi?id=747651

or we have to externally mantain the css changes posted above

albertgasset · 2015-04-12 10:42:44

Tomin wrote:

My close button has still borders when the window is active. The line is removed though.
https://dl.dropboxusercontent.com/u/430 … -51-20.png

Also, the menu bar in your screenshot has the wrong color. I don't know why it doesn't apply all the styles.

akanski · 2015-04-13 01:11:13

Even if beauty is in the eye of the beholder, that's as ugly as sin. IMHO a linear gradient from the beginning of the title bar to the end of the menu bar along with a smooth border under the latter would be enough to get a visual appearance in ssd apps more or less on a par with csd ones.

/* Get rid of unsightly line in ssd title bar and reduce button padding */

.ssd .titlebar {
    border: none;
    background-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 1.042),
                                      shade(@theme_bg_color, 0.999));
    box-shadow: none;
    border-top: 1px solid shade(@theme_bg_color, 1.072);
}

.ssd .titlebar:backdrop {
    background-image: linear-gradient(to bottom, @theme_bg_color);
}

.ssd .titlebar .button.titlebutton {
    padding: 3px;
}

.menubar {
    background-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 0.999),
                                      shade(@theme_bg_color, 0.985));
    border-bottom: 1px solid shade(@theme_bg_color, 0.679);
}

.menubar:backdrop {
    background-image: linear-gradient(to bottom, @theme_bg_color);
}

Thank you all for giving some valuable ideas and concerning yourselves with this stuff, that way people who can't stand it are not bound to look at it.
___

N.B. Some slight changes were made to get the same top border and backdrop as in csd apps.

Last edited by akanski (2015-04-15 18:40:07)

and-bnk · 2015-04-15 19:15:26

Hi guys, concerning the border, I recall that with gnome 3.14 you could even remove completely the top bar.
One could have done that by customizing the file metacity-theme-3.xml inside the directory Adwaita in /usr/share/themes.
Since 3.16, this is not possibile since there is no such file.
Can you advise me on how to achieve the same effect now?

akanski · 2015-04-15 19:47:19

@and-bnk,

Could you install metacity package first and see what happens by customizing that file again?

and-bnk · 2015-04-16 16:11:16

I installed the package, but even if the xml files are back again, nothing has changed after the customization.

cheflo · 2016-04-18 20:49:35

In Gnome 3.20, I can no longer remove the small border under the titlebar using this snippet.

.ssd .titlebar {
    border-width: 0;
    box-shadow: none;
}

Does anyone know what the equivalent would be in Gnome 3.20?

WorMzy · 2016-04-18 20:53:00

Please don't necrobump old topics, especially when they are marked as solved. Open a new thread and link back to this one if it is still relevant.

https://wiki.archlinux.org/index.php/Fo … bumping.22

Closing.

Arch Linux

#1 2015-04-10 16:30:37

[SOLVED] GNOME 3.16 bottom border on title bars

#2 2015-04-10 18:38:44

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#3 2015-04-10 20:11:41

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#4 2015-04-10 20:31:21

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#5 2015-04-10 20:45:56

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#6 2015-04-10 21:08:19

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#7 2015-04-10 21:08:59

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#8 2015-04-10 22:59:22

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#9 2015-04-11 00:22:19

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#10 2015-04-11 04:35:28

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#11 2015-04-11 08:08:06

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#12 2015-04-11 15:20:37

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#13 2015-04-11 21:37:51

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#14 2015-04-11 22:43:59

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#15 2015-04-12 04:51:52

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#16 2015-04-12 07:47:53

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#17 2015-04-12 10:42:44

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#18 2015-04-13 01:11:13

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#19 2015-04-15 19:15:26

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#20 2015-04-15 19:47:19

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#21 2015-04-16 16:11:16

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#22 2016-04-18 20:49:35

Re: [SOLVED] GNOME 3.16 bottom border on title bars

#23 2016-04-18 20:53:00

Re: [SOLVED] GNOME 3.16 bottom border on title bars

Board footer