You Got A Question? Ask    GNOME Community!

gtk-theme2
 11322   |  Oct 25
gtk_logo2
 9458   |  Mar 17
arch
 7765   |  Mar 28

Making GTK3 themes – Part 2: The gtk.css and gtk-widgets.css files

This post was made with an older stylesheet

 

Now we will make a gtk.css file for our theme. This file is read by GTK and it can import additional CSS files. Commonly, the gtk.css file defines common colors used throughout the theme.

The colors can be defined with the @define-color rule. The colors defined like this are called symbolic colors. Defining symbolic colors has the advantage that if you want to change a color, you need to change it once, and the whole theme can adapt to it. Symbolic colors can be defined as rgb, hex etc. For example, if we want to define a symbolic color named @bg_color to be light grey, we can define it as follows,

@define-color bg_color #eee;

We can also have comments just like in CSS. Comments are ignored, but may be helpful to remember or explain things.

/* this is a comment */

So we will now define some symbolic colors which we can use throughout the theme.

/* default color scheme */
@define-color bg_color #cecece;
@define-color fg_color #3c3c3c;
@define-color base_color #fcfcfc;
@define-color text_color #000;
@define-color selected_bg_color #398ee7;
@define-color selected_fg_color #fff;
@define-color tooltip_bg_color #000;
@define-color tooltip_fg_color #e1e1e1;

/* colormap actually used by the theme, to be overridden in other css files */
@define-color theme_bg_color @bg_color;
@define-color theme_fg_color @fg_color;
@define-color theme_base_color @base_color;
@define-color theme_text_color @text_color;
@define-color theme_selected_bg_color @selected_bg_color;
@define-color theme_selected_fg_color @selected_fg_color;
@define-color theme_tooltip_bg_color @tooltip_bg_color;
@define-color theme_tooltip_fg_color @tooltip_fg_color;

/* misc colors used by gtk+ */
@define-color info_fg_color rgb (80, 80, 80);
@define-color info_bg_color rgb (250, 250, 130);
@define-color warning_fg_color rgb (255, 255, 255);
@define-color warning_bg_color rgb (255, 150, 80);
@define-color question_fg_color rgb (80, 80, 80);
@define-color question_bg_color rgb (150, 180, 230);
@define-color error_fg_color rgb (255, 255, 255);
@define-color error_bg_color rgb (200, 70, 50);
@define-color link_color #2c82dd;
@define-color error_color #cc0000;

As you can see, we have defined some colors with the theme prefix. This will make it easy to override the colors if we want to make a dark counterpart. More about that later.

Now save the file as gtk.css. Next we need to make another file which will contain all the widget styling. The reason is to keep separate types of things separate. We will create a new file named gtk-widgets.css. Then add the following line in gtk.css to import the file.

@import url(“gtk-widgets.css”);

First, we need to add some default styling, such as the theme engine, some GTK properties and basic styles.

/* default */
* {
engine: none;

border-width: 1px;
background-clip: padding-box;

-GtkArrow-arrow-scaling: 0.5;
-GtkButton-child-displacement-x: 1;
-GtkButton-child-displacement-y: 1;
-GtkButton-default-border: 0;
-GtkButton-image-spacing: 0;
-GtkButton-interior-focus: true;
-GtkButton-inner-border: 1;
-GtkCheckButton-indicator-size: 15;
-GtkCheckMenuItem-indicator-size: 12;
-GtkEntry-inner-border: 1;
-GtkEntry-progress-border: 0;
-GtkExpander-expander-size: 12;
-GtkHTML-link-color: @link_color;
-GtkIMHtml-hyperlink-color: @link_color;
-GtkMenu-horizontal-padding: 0;
-GtkMenu-vertical-padding: 0;
-GtkMenuBar-internal-padding: 0;
-GtkMenuItem-arrow-scaling: 0.4;
-GtkNotebook-initial-gap: 0;
-GtkNotebook-tab-overlap: -2;
-GtkPaned-handle-size: 1;
-GtkProgressBar-min-horizontal-bar-height: 10;
-GtkProgressBar-min-vertical-bar-width: 10;
-GtkRange-slider-width: 9;
-GtkRange-stepper-size: 0;
-GtkRange-stepper-spacing: 0;
-GtkRange-trough-border: 3;
-GtkRange-trough-under-steppers: 1;
-GtkScale-trough-border: 1;
-GtkScrollbar-activate-slider: 1;
-GtkScrollbar-trough-border: 1;
-GtkScrollbar-slider-width: 15;
-GtkScrollbar-min-slider-length: 50;
-GtkScrolledWindow-scrollbar-spacing: 0;
-GtkScrolledWindow-scrollbars-within-bevel: 1;
-GtkSeparatorMenuItem-horizontal-padding: 0;
-GtkStatusbar-shadow-type: none;
-GtkTextView-error-underline-color: @error_color;
-GtkToolButton-icon-spacing: 6;
-GtkToolItemGroup-expander-size: 11;
-GtkToolbar-internal-padding: 0;
-GtkTreeView-expander-size: 11;
-GtkTreeView-vertical-separator: 0;
-GtkWidget-wide-separators: true;
-GtkWidget-separator-width: 1;
-GtkWidget-separator-height: 1;
-GtkWidget-focus-padding: 0;
-GtkWidget-focus-line-width: 1;
-GtkWidget-link-color: @link_color;
-GtkWidget-visited-link-color: @link_color;
-GtkWindow-resize-grip-width: 13;
-GtkWindow-resize-grip-height: 13;
-WnckTasklist-fade-overlay-rect: 0;
}

GtkWindow {
color: @theme_fg_color;
}

* {
/* inherit the color from parent by default */
color: inherit;
background-color: @theme_bg_color;
}

/**********
* states *
**********/
*:insensitive {
color: mix (@theme_fg_color, @theme_bg_color, 0.4);
text-shadow: 1 1 alpha (@theme_base_color, 0.4);
}

*:active {
background-color: shade (@theme_bg_color, 0.9);
}

*:active:hover:insensitive {
}

*:active:insensitive {
}

*:hover {
}

*:hover:insensitive {
}

*:selected,
*:selected:focus {
background-color: alpha (@theme_selected_bg_color, 0.9);
color: @theme_selected_fg_color;
}

The first block of style is applied to *, which means it is universal and every other widgets will inherit the properties.

As you can see, we have specified the engine as none, that means we want to use the built-in theme engine. Of course, you can use another engine like adwaita. But if we start with the default engine, we can easily extend it to use any other engine easily.

Then there are some basic properties for all widgets like border-width and background-clip. We have border-width as 1px, which means, if you want a widget to have a border different than 1px, then you’ll have to specify that.

Next are some GTK properties which control the appearance of some widgets, similar to in GTK2. Most are self explanatory. You can experiment with different values and see the results.

Then we have some basic styling, like the text color for the GtkWindow widget, and styles for different states.

Here is what we have till now,

Widget Factory

Not pretty, but we will surely make it pretty :D Let’s stop it here today, and we will continue in the next post.

In case you are wondering about the theme we are using in this example, it is Greybird.

Part 1 | Part 3 | Part 4


 
  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
  • http://www.facebook.com/profile.php?id=100002633224560 Moez Bouhlel

    please more details about “gtk+ Widget Factory”, it looks not updated since 2000-07-14, and i didn’t find it on USC

    • http://funsurf-blog.blogspot.com/ Satyajit Sahoo

      Hi. You can install GTK Widget Factory by installing the package gtk-3-examples from USC.

  • Pingback: Links 25/7/2012: Dell Has Red Hat Enterprise Linux Loaded | Techrights

  • Skotlex

    It would be highly appreciated if there was a Gtk-3.0 application that could be used to test themes. The “Gtk+ Widget Factory” screenshot is a good example, but as the previous comment mentioned, it is an unmaintained application for which the source code is no longer available in Sourceforge.

    • http://funsurf-blog.blogspot.com/ Satyajit Sahoo

      The package is available in USC as the reply to the previous comment mentions. If you use another distro, I think I may make a post about it.

  • Hitesh Shah

    Satya, I’ve installed the Greybird theme but there’s one thing I hope you can help me with. In the Gnome Sudoku game, can the squares that have to be filled be made a different color, say #777777 instead of white? Can that be done editing any css in Greybird? Or is it “baked” into the program itself?

    • http://funsurf-blog.blogspot.com/ Satyajit Sahoo

      It seems to use the base-color value. To change the background color specifically for the sudoku game, we need to find out what are the class names and widgets used.

      • Hitesh Shah

        In ~/.themes/Greybird/gtk-3.0/gtk.css, right near the top of the file, I have:
        @define-color base_color #909090; /*was #fcfcfc*/

        I’ve even edited ~/.themes/Greybird/gtk-3.0/settings.ini to have the same value.

        But the white color of the fillable squares stays white.

        As you suggest, it may be overridden by some Sudoku-specific settings.

        As for the “the class names and widgets”, I’ve no idea how to proceed. Anyway, if you do happen to know an easy way fix it, I’ll be very grateful.

        • http://funsurf-blog.blogspot.com/ Satyajit Sahoo

          Oh, you are talking about fillable squares, I think they are hardcoded into the game.

          And yes, may be overridden by sudoku specific theming, but may be, and to know the class names you need to look at the source code (though not sure it may help or not), some parts don’t just support theming,

      • Hitesh Shah

        BTW, are you the same Satya over at Superusers? I’ve offered a bounty on this topic :)

        • http://funsurf-blog.blogspot.com/ Satyajit Sahoo

          Nope!

  • Pingback: Making GTK3 themes | kepica Blog

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

  • Pingback: Making GTK3 themes – Part 4: Porting GTK2 themes | woGue

  • Pingback: Making GTK3 themes – Part 1: Basics | woGue

  • Anonymous

    Um….. When I test my theme through awf, I get a black background… And the theme isn’t displayed in gnome tweak tool…?

  • Pingback: Is there any application available to test GTK3 themes?