You are not logged in.

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

veeti
Member
Registered: 2009-10-01
Posts: 7

[SOLVED] GNOME 3.16 bottom border on title bars

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:

noxEnD4.png

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)

Offline

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

gnunn
Member
Registered: 2013-10-21
Posts: 78

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

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)

Offline

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

sosu
Member
Registered: 2015-04-10
Posts: 1

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

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 ?

Offline

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

johnpatcher
Member
Registered: 2009-08-23
Posts: 70

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

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:
83kRWMF.png
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)

Offline

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

johnpatcher
Member
Registered: 2009-08-23
Posts: 70

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

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

Offline

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

gnunn
Member
Registered: 2013-10-21
Posts: 78

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

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.

Offline

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

gnunn
Member
Registered: 2013-10-21
Posts: 78

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

johnpatcher wrote:

Do you experience this too?

Same issue for me as well.

Offline

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

johnpatcher
Member
Registered: 2009-08-23
Posts: 70

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

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

Offline

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

horst3180
Member
Registered: 2015-04-11
Posts: 3

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

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.

Offline

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

xgdgsc
Member
Registered: 2012-02-03
Posts: 125

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

This is indeed so ugly.

Offline

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

-MacNuke-
Member
Registered: 2013-01-29
Posts: 14

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

horst3180 wrote:

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

THANK YOU! smile

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

Offline

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

veeti
Member
Registered: 2009-10-01
Posts: 7

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

Thank you so much!

Offline

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

albertgasset
Member
Registered: 2015-04-11
Posts: 4

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

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)

Offline

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

stee1rat
Member
Registered: 2013-10-22
Posts: 34

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

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

Offline

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

Tomin
Member
Registered: 2012-10-21
Posts: 15

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

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

Offline

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

drakkan
Member
Registered: 2007-02-24
Posts: 27

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

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

Offline

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

albertgasset
Member
Registered: 2015-04-11
Posts: 4

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

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.

Offline

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

akanski
Member
Registered: 2011-09-30
Posts: 31

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

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)

Offline

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

and-bnk
Member
Registered: 2013-04-10
Posts: 49

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

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?

Offline

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

akanski
Member
Registered: 2011-09-30
Posts: 31

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

@and-bnk,

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

Offline

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

and-bnk
Member
Registered: 2013-04-10
Posts: 49

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

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

Offline

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

cheflo
Member
Registered: 2015-12-31
Posts: 3

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

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?

Offline

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

WorMzy
Forum Moderator
From: Scotland
Registered: 2010-06-16
Posts: 6,792
Website

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

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.


Sakura:-
Mobo: ASUS P8Z77-V PRO // Processor: Intel Core i7-3770K 3.4GHz // GFX: nVidia GeForce GTX 970 Ti // RAM: 32GB (4x 8GB) Corsair DDR3 (@ 2133MHz) // Storage: 1x 3TB Seagate SATAII 5x 1TB Samsung SATAII, 2x 120GB Corsair SSD

Making lemonade from lemons since 2015.

Offline

Board footer

Powered by FluxBB