You Got A Question? Ask    GNOME Community!

Making GTK3 themes – Part 4: Porting GTK2 themes

This post was made with an older stylesheet

Here I have a portion from a GTK2 theme which styles buttons. Then I do that for GTK3…

style “button”
fg[NORMAL] = @fg_color
fg[PRELIGHT] = @fg_color
fg[ACTIVE] = @fg_color
fg[INSENSITIVE] = mix (0.4, @fg_color, @bg_color)

bg[NORMAL] = shade (1.02, @bg_color)
bg[PRELIGHT] = shade (1.07, @bg_color)
bg[ACTIVE] = shade (0.85, @bg_color)
bg[INSENSITIVE] = shade (0.95, @bg_color)

engine “murrine”
gradient_shades = {1.05,1.0,0.97,0.97}
border_shades = { 0.8, 0.8 }
roundness = 2

When I write that in GTK3,

.button {
background-image: -gtk-gradient(linear, left top, left bottom,
from (shade(shade(@theme_bg_color, 1.02), 1.05)),
to (shade(shade(@theme_bg_color, 1.02), 0.97)));

border-radius: 2px;
border-color: shade(shade(@theme_bg_color, 1.02), 0.8);
border-style: solid;
color: @theme_fg_color;

.button:active {
background-image: -gtk-gradient(linear, left top, left bottom,
from (shade(shade(@theme_bg_color, 0.85), 1.05)),
to (shade(shade(@theme_bg_color, 0.85), 0.97)));

border-color: shade(shade(@theme_bg_color, 0.85), 0.8);

.button:active:hover {
background-image: -gtk-gradient(linear, left top, left bottom,
from (shade(shade(@theme_bg_color, 1.07), 1.05)),
to (shade(shade(@theme_bg_color, 1.07), 0.97)));

border-color: shade(shade(@theme_bg_color, 1.07), 0.8);

.button:insensitive {
background-image: -gtk-gradient(linear, left top, left bottom,
from (shade(shade(@theme_bg_color, 0.95), 1.05)),
to (shade(shade(@theme_bg_color, 0.95), 0.97)));

border-color: shade(shade(@theme_bg_color, 0.95), 0.8);

color: mix(@theme_fg_color, @theme_bg_color, 0.4);

See what I did here? You can just have a look at the numbers, compare both codes and you’ll understand. While this cannot be done for everything, this little trick will come handy in many places. Sometimes you also have to consider other factors like contrast etc. Have a try and let us know how did it work for you.

Part 1 | Part 2 | Part 3

  We can't watch comments unless G+ provides an API or if you send a notification, e.g +World Of Gnome
     Sometimes is better to place your questions on GNOME Community
  • hellzou

    I think you should add links on older parts to the newers.
    It would be easier to navigate within your (good) tutorial.

    • Satyajit Sahoo

      Done :)

      • hellzou

        Way better, thanks ;)

  • Pingback: Making GTK3 themes – Part 3: The dark side | woGue()

  • dogsolitude_uk

    Is there a list of the GTK+3 CSS classes (and what they refer to) anywhere?
    We’ve got .button, that’s a start, but trying to guess whether to use .progressBar, .progress-bar, .slider and so on could potentially take *ages*…
    Are there any resources available anywhere that list these things?

    • Satyajit Sahoo

      And better to base on another theme.

      • dogsolitude_uk

        Strewth, there’s a lot of stuff there! Thanks :)

        For anyone else who’s looking , I found some useful info here:

        In particular the note that the classnames of the widgets can be used as CSS selectors. I’ll tinker about and see how I get on.

        Thanks ever so much for this tutorial and the link Satya. I think I have everything I need to start sorting my own themes out, but like you suggest I think I’ll start by pulling apart existing themes… :)

  • Tal Ben-Ari

    Is it possible to blur the background of an element/widget using this CSS? If so, how? Thanks in advance for any response.

    Post scriptum: I know this page has been dead for a while, but I feel like I can get a good answer if I ask here.

    • Satyajit Sahoo

      No. Blurring the background is currently not possible in CSS. Sorry :(

      • Tal Ben-Ari

        Aw… that sucks. Well thanks for the speedy response, I appreciate it.

  • Roman Vottner

    Although this post has already celebrated its first anniversary I hope someone can point me to a source that showcases how to theme the close-button of the application (I’m currently theming nautilus and figured a tree-structure based on 2 other themes and the source code itself) and on how to soften the selection-color in the notepad area. On loosing focus colors are fine, but while Nautilus is the active application the icon in the back is hardly visible as the selection itself is dark-blue – I’ve tried to set the alpha value therefore but it just ignores it – but the alpha or shaded (with a value >1) color is accepted if the app lost focus.

    Furthermore it is interesting to see that between Nautilus having the focus and losing focus, the colors of the selection are swapped – this means the icon-color gets assigned to the caption-background-color, while the caption color is assigned to the image. .css path used for both are:

    NautilusWindow > GtkGrid > GtkPaned > GtkBox > NautilusNotebook > NautilusWindowSlot > GtkContainer:nth-child(2) > GtkScrolledWindow > GtkLayout:selected


    NautilusWindow > GtkGrid > GtkPaned > GtkBox > NautilusNotebook > NautilusWindowSlot > GtkContainer:nth-child(2) > GtkScrolledWindow > GtkLayout:selected:focused

    I’ve even tried to work with .image and other combinations but then the rule would not have been applied.

    Concerning the application’s close button the main issue I’m having is, that the default value of the button can’t be modified – hover and active states are fine. The .css “path” I am using to theme the close button on activate or on hover does look like this:

    NautilusWindow > NautilusToolbar > GtkBox > GtkContainer:nth-child(7).button:active

    However, the default button (omitting :active – or using .default) does not change anything. The interesting thing now is that I managed to modify a portion of the close button with the following path structure:

    NautilusWindow > NautilusToolbar.header-bar > GtkBox > GtkButton:nth-child(7).button > GtkContainer > GtkBox > GtkWidget

    Note that I currently use strict definition to get a feeling for the tree-structure (almost complete) for theming Nautilus. For the GtkWidget I’m a bit unsure what is used here, have tried all kinds of GtkButtons or GtkContainers but none worked for me – so I currently took GtkWidget. The issue here is now, that on using the last statement I’m able to theme the close button. However, this button is visible even if I’ll hover over the close button (where the hover effect is working as supposed) – but as the first definition uses the whole space, the latter one uses only a fraction – I’d like all buttons of the header panel to be roughly the same size. So I added a padding to the latter approach – works – but the primer approach can’t be reduced in size – so looks a bit … funny with half the hover-state button present in the back while the other half of the default layout is being in the front.