Home
  Software
    HowTo
      GTK+
        FlatStudio

Language:
  Español

On this page
  GUI
  Client code
  Server code
  Thanks

Temas
  GIOChannel
  FIFO chat
  Socket chat

FlatStudio theme for gtk+

The FlatStudio theme for gtk+ is probably my preferred theme... I love the darkness, it's easy on the eyes, and it shows off the work I'm doing.

Anyway, this page wouldn't be here if there were no issues. It seems there is no support and updating for the theme at the moment. It was last updated for gtk+ 3.8, and, with the continuous changes in gtk, that means several breakages.

The one that most annoyed me was that things with embedded GtkBoxes or GtkGrids (such as notebook tabs, or buttons, with a label and an icon), were broken.

After quite some learning, it turns out that this problem seems to be caused an error in the CSS defined by FlatStudio. (Please correct me if I'm wrong!). FlatStudio defines (as do many themes) a default configuration for all widgets in gtk.css, but then forgets to override it for GtkBoxes and GtkGrids. So these two inherit the gray background, while they should be transparent.

To solve the problem, I defined two mini-files, one each for GtkGrid and GtkBox, with an override for background color. I also added an include in gtk.css to get them included. Et voilà... Nice tabs and buttons again!

Before and after shots


Before After
Notebook tab
Button

What to do?

All this is in the directory where the FlatStudio theme resides. This should be
/usr/share/themes/FlatStudioDark/gtk-3.0.

Here I added two small files with the overrides for GtkGrid and GtkBox. I could have used just one file, but it's just nicer this way. The files are these:

/**********
 * GtkBox *
 **********/

GtkBox {
    background-color:  transparent;
}
Save as box.css
/***********
 * GtkGrid *
 ***********/

GtkGrid {
    background-color:  transparent;
}
Save as grid.css

Then I edited gtk.css to include both files. Near the end, add the two includes for grid and box:

...

@import url("gtk-widgets.css");
@import url("menu_frame.css");
@import url("scrollbar.css");
@import url("sidebar.css");
@import url("grid.css");
@import url("box.css");

@import url("gtk-widgets-assets.css");
@import url("gnome-panel.css");
...

5243


(c) John Coppens ON6JC/LW3HAZ mail