Difference between revisions of "GTK3"

Revision as of 17:19, 3 August 2018

With version 3.0, GnuCash has upgraded to the GTK3 library from GTK2.

This page contains instructions on how to customize GTK3 appearance and behaviour.

For more background information about the location of the configuration files, see Configuration Locations.

Introduction

GnuCash version 3 uses a new version of the Gtk framework with a completely new styling mechanism based on Cascading Style Sheets (CSS). For Windows users this has unfortunately rendered the theming tool that we used to distribute useless and sadly there isn't a replacement available that works with Gtk3.

Fortunately, Gtk's CSS is fairly simple. This page will explain the basics and provide some examples for commonly-requested changes.

Some theme information is kept in gsettings and can be queried with gtk-query-settings. For example

gtk-query-settings theme

will return all of the settings whose name includes the word "theme". It is usually in a package gtk3-tools.

Gtk has a built in Inspector that you can enable by launching GnuCash from the command line with

GTK_DEBUG=interactive path/to/gnucash

It's quite useful for poking and prodding various bits of GnuCash to see what styles apply to which controls and to allow you to change things and to see the results immediately.

If you're using the Gnome desktop you may also find the Gnome Tweak Tool useful, though its settings apply globally rather than only to GnuCash.

Visual Styling

As GTK3 uses Cascading Style Sheets (CSS) for themes this is fairly easy to resolve by styling the GTK applications manually or using one of myriad available graphical themes. This is easily done by placing a custom CSS file at the correct location, depending on your system, or downloading and using a custom-made theme.

Manual Styling using CSS file

The comprehensive GTK+ CSS Overview, as it relates to GTK, is available at Gnome Developer web site.

Configuration tools

Various Linux distributions provide custom tools for managing themes. There is a nice overview of graphical tools available, depending on the desktop environment at archlinux.

A sample GnuCash CSS file can be found below:

• GTK 3 CSS

For extra info, you can also check these low-level customizations:

• gnucash-310
• gnucash-320

Note that these contain the @ variables, as explained in the CSS customization overview, Colors section.

To precisely locate the UI elements for customization, you can use the GTK Inspector tool.

CSS rules to customize the GnuCash appearance should be stored in GNC_CONFIG_HOME/gtk-3.0.css.

Note that GnuCash will never create this file for you but you can to create it yourself as a plain text file. You can write your own css rules or copy them from existing themes. The #Themes section below has a few links to websites where you can find sample themes.

Related wiki entries:

• FAQ#Q: How do I change the register colors?
• FAQ#Q: Where can I find the gtk resource file?

Custom GnuCash Styles

To style the register you can use css rules like below:

*.register-primary {
  color: red;
}

where

*.register-primary => primary (dark-background) lines

*.register-secondary => secondary (light-background) lines

cursor entry => the cell containing the cursor

*.register-foreground => setting the colour for this selector will paint all the register text in that colour.

*.register-cursor => the currently selected row in the register

Sample Style Properties

This is a list of the most likely desired properties you can change in GnuCash with Gtk+3 as of version 3.22. Note, not all properties apply to all selectors (nodes). Properties may also not apply as expected compared to web CSS and may or may not cascade to child nodes.

• background-blend-mode
• background-clip
• background-color
• background-image
• background-position
• background-repeat
• background-size

• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width

• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width

• border-left-color
• border-left-style
• border-left-width

• border-right-color
• border-right-style
• border-right-width

• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width

• box-shadow

• color

• font-family
• font-size
• font-stretch
• font-style
• font-variant
• font-weight

• letter-spacing

• margin-bottom
• margin-left
• margin-right
• margin-top

• min-height
• min-width

• opacity

• outline-color
• outline-offset
• outline-style
• outline-width

• padding-bottom
• padding-left
• padding-right
• padding-top

• text-decoration-color
• text-decoration-line
• text-decoration-style

• text-shadow

Sample GnuCash Selectors (CSS Nodes)

Chart of Accounts Tab:

This sheet has an ID of #account_tab which affects the entire sheet below the column headers.

Thus:

#account_tree {
  font-size: 1.2em;
}

will increase the font size by 20% for all of the account names and their related right-hand columns.

If you want to style the column headers, use the following selector for the full header bar:

#account_tree header button{
}

If you just want to apply font/text rules to the header labels themselves, use:

#account_tree header label {
}

Themes

You can use a predefined GTK3 theme. Note that applying a custom theme will affect all the gtk3-based applications on your system!

Short summary:

1. download an appropriate gtk3 theme from www.gnome-look.org or other sites
2. copy the theme into a directory where gtk3 looks for themes (see below)
3. create or adjust a settings.ini file to instruct gtk3 to use this theme

Some sites which host custom GTK3 themes:

• Gnome Look
• Deviant Art

Below is a slightly longer explanation with platform dependent remarks:

1. Go to the gnome-look.org website.
2. Click the Gtk3 Themes link, not the Gtk2 one.
3. Select a theme you like. Alternatively you can search for keywords (like "dark") in the top right corner and then filter on "Gtk3 Theme category".
4. If you have found a theme you like, download the proper file (in the files section of the theme page). Note depending on your operating system you may not be able to open all theme files. There are, for example, .deb archives which are specifically targeted at the Debian linux distribution and derivates such as Ubuntu. While Ubuntu and Debian users can install those themes via their package manager these themes are not useful for other platforms.
   Theme files ending with .zip, .tar.gz or tar.xz are likely installable on all platforms, although you may have to find a proper application to extract them.
   On Windows 7-Zip is a good candiate, linux users can probably extract the files directly from their file manager.
   Let's take the theme "Eye-friendly Dark RBC" as an example (it's not the best theme but it can serve as an example). The file to download is Eye-friendly-Dark-RBC.tar.gz.
5. Extract this file using an appropriate tool. This should give you a directory named Eye-friendly-Dark-RBC.
6. Move this directory to USER_CONFIG_HOME/themes. Note on Windows you'll need to use the %LOCALAPPDATA% variant as we're adjusting Gtk3's configuration.
7. Next tell gtk to load this theme.

Linux users can probably most easily do this by install the "Gnome Tweak Tool" on their platform and select the new theme there. The manual method is this: Create a file named GTK_CONFIG_HOME/settings.ini.

The contents of this file should be

[Settings]
gtk-theme-name=Eye-friendly-Dark-RBC

And that's it. Note the name is the name of the directory as you put in the themes directory. The next time you start gnucash it should pick up this theme.

A few extra notes:

• The default gtk3 theme is called "Adwaita".
• On linux there's a second default theme called "Adwaita-dark" which should also give you a dark themed gnucash. Unfortunately this doesn't work on Windows out-of-the-box but there is a workaround. See under #Dark Themes below.
• If you're adventurous you can probably also play with customized icon themes which you find on the gnome-look.org website. These themes should be installed in the icons directory next to the themes directory. And to activate them you can add gtk-icon-theme-name=<directory name> in settings.ini.
• A list of Gtk settings that can be adjusted via settings.ini can be found at Gtk Settings page.

Dark Themes

It may be possible to get the default dark theme on Windows using the following technique:

• Create/modify GTK_CONFIG_HOME/settings.ini.
• Add this contents:

[Settings]
gtk-application-prefer-dark-theme=true

If this doesn't work an alternative option is to install a suitable theme as described above. A couple of suggestions for decent dark themes that may apply well to GnuCash:

• Leather-Dark theme,
• Eye-friendly Dark RBC Theme - fully-working pleasant dark theme.

The adventurous could of course also try and create such a theme from scratch. Below are a few pointers to get started:

• gtk-3.0.css Black Theme,
• gtk-3.0.css settings that go well with a dark theme (i.e. Leather Dark).

Font Size in Documents

There are two ways of setting a default font for GnuCash. The first sets an option in Gtk's settings.ini, the other uses css to accomplish the same. The examples below with both set the default font to Arial and font size to 14.

Via settings.ini

Add the following line to the Settings section in GTK_CONFIG_HOME/settings.ini:

[Settings]
gtk-font-name=Arial 14

Note: In settings.ini, lines beginning with a '#' and blank lines are considered comments.

Via css

Use the following style in your GNC_CONFIG_HOME/gtk-3.0.css<tt> file:

* {
  font: 14px arial, sans-serif;
}

With GnuCash *not running* open <tt>GNC_DATA_HOME/accelerator-map in any text editor and find the line with the desired command, i.e. for double-line in the register view use

 ;(gtk_accel_path "<Actions>/GncPluginPageRegisterActions/ViewStyleDoubleLineAction" "")

If, for some reason, the line is missing in the accelerator-map file, simply copy the line above into the file. Remove the ';' at the beginning and insert whatever shortcut you like between the last set of double quotes. Save the file.

The Ctrl key is referenced as <Primary>. For example, if you want to use Ctrl+2 for a shortcut, set the value to "<Primary>2".

The next time you open GnuCash, you will be able to use the shortcut key to trigger the desired functionality. The relevant menu item will reflect this fact by displaying the shortcut key next to the assigned action's name.

Key Bindings

Customizing key bindings is done by editing (or creating if needed) the file GNC_CONFIG_HOME/gtk-3.0.css in the GnuCash configuration directory.

For example, to add a new binding so that the F11 key is bound to the copy-clipboard action and the F12 key is bound to the paste-clipboard action and existing keybindings for these actions remain unchanged, add something like this to gtk-3.0.css:

/* Bind F11 to Copy, F12 to Paste */
@binding-set F11CopyF12Paste
{
  bind "F11" { "copy-clipboard" () };
  bind "F12" { "paste-clipboard" () };
}

entry
{
  -gtk-key-bindings: F11CopyF12Paste;
}

If you like Emacs-style keybindings you can add,

gtk-key-theme-name = Emacs

to your settings.ini. Unfortunately for MacOS users that setting is hard-coded to the Mac keybindings theme for Quartz (MacOS Native) screens. Fortunately there's a fairly painless workaround (and this way you get both the emacs and the Mac bindings which is how most native apps actually work): Copy GnuCash.app/Contents/share/themes/Emacs/gtk-3.0/gtk-keys.css to ~/Library/Application Support/Gnucash/config/gtk-3.0. If you have no other customizations just name it gtk.css. If you already have a gtk.css there, add to it

@import url("gtk-keys.css");

Scrollbars

The behaviour of the scrollbars can be customized. Compared to GTK2, if you now click above (or below) the current position bar in the scrollbar, it takes you to the place in the window which is proportional to where in the scroll bar you click, rather than up (or down) 1 screen full. This can be adjusted by using below instruction in the GTK settings file GTK_CONFIG_HOME/settings.ini:

[Settings]
# Use Windows style scrollbars
gtk-primary-button-warps-slider=false

Additional Links

• Windows page contains some instructions on customization of visual appearance.