Difference between revisions of "GTK3"
(→Font size in documents: from https://lists.gnucash.org/pipermail/gnucash-user/2018-April/076115.html) |
m (adjusting the narrative) |
||
Line 24: | Line 24: | ||
== Visual Styling == | == Visual Styling == | ||
− | As | + | As noted in [https://bugzilla.gnome.org/show_bug.cgi?id=791823 bug 791823], the GTK theming tool is not being distributed with GTK3 any more, compared to GTK2. This, due to the fact that GTK3 uses Cascading Style Sheets (CSS) for themes, 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. | ||
− | The comprehensive [https://developer.gnome.org/gtk3/stable/chap-css-overview.html GTK+ CSS Overview] is available at Gnome Developer web site. | + | === Manual Styling using CSS file === |
+ | |||
+ | The comprehensive [https://developer.gnome.org/gtk3/stable/chap-css-overview.html 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 [https://wiki.archlinux.org/index.php/GTK+#Configuration_tools archlinux]. | ;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 [https://wiki.archlinux.org/index.php/GTK+#Configuration_tools archlinux]. | ||
− | + | A sample GnuCash CSS file can be found below: | |
* [https://github.com/Gnucash/gnucash/blob/master/doc/gtk-3.0.css GTK 3 CSS] | * [https://github.com/Gnucash/gnucash/blob/master/doc/gtk-3.0.css GTK 3 CSS] | ||
− | For extra info, you can also | + | For extra info, you can also check these low-level customizations: |
* [https://github.com/Gnucash/gnucash/blob/master/gnucash/gnucash-310.css gnucash-310] | * [https://github.com/Gnucash/gnucash/blob/master/gnucash/gnucash-310.css gnucash-310] | ||
* [https://github.com/Gnucash/gnucash/blob/master/gnucash/gnucash-320.css gnucash-320] | * [https://github.com/Gnucash/gnucash/blob/master/gnucash/gnucash-320.css gnucash-320] | ||
− | Note that these contain the variables, as explained in the CSS customization overview, | + | Note that these contain the @ variables, as explained in the CSS customization overview, Colors section. |
− | To locate the UI elements for customization, you can use the [https://wiki.gnome.org/Projects/GTK%2B/Inspector GTK Inspector] tool. | + | To precisely locate the UI elements for customization, you can use the [https://wiki.gnome.org/Projects/GTK%2B/Inspector GTK Inspector] tool. |
− | To customize the GnuCash | + | To customize the way GnuCash looks, create or modify an existing Cascading Style Sheets (CSS) file at the appropriate location. The correct location on different operating systems is explained in the following FAQ answer: [https://wiki.gnucash.org/wiki/FAQ#Q:_Where_can_I_find_the_gtk_resource_file.3F Where can I find the GTK resource file?] |
− | Note that, by default, no gtk-3.0.css file will be created by GnuCash | + | Note that, by default, no gtk-3.0.css file will be created by GnuCash application. Once you add the file, add the desired CSS rules or copy values from an existing theme. |
There are plenty of GTK3 theme resources caused by the fact that CSS is a widely-adopted standard for UI styling and many people are familiar with it. | There are plenty of GTK3 theme resources caused by the fact that CSS is a widely-adopted standard for UI styling and many people are familiar with it. | ||
Line 54: | Line 57: | ||
=== Themes === | === Themes === | ||
− | You can use predefined GTK3 | + | 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: | Short summary: | ||
− | # | + | # download an appropriate gtk3 theme from www.gnome-look.org or other sites |
− | # | + | # copy the theme into a directory where gtk3 looks for themes (see below) |
− | # create or adjust a settings.ini file to | + | # create or adjust a settings.ini file to instruct gtk3 to use this theme |
− | Some sites | + | Some sites which host custom GTK3 themes: |
* [https://www.gnome-look.org/browse/cat/135/ Gnome Look] | * [https://www.gnome-look.org/browse/cat/135/ Gnome Look] | ||
Line 81: | Line 84: | ||
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" | 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 | + | 5. Extract this file using an appropriate tool. This should give you a directory named "Eye-friendly-Dark-RBC" |
− | directory named "Eye-friendly-Dark-RBC" | ||
6. Move this directory to a location on your system that's parsed by gtk. This is platform dependent: | 6. Move this directory to a location on your system that's parsed by gtk. This is platform dependent: | ||
− | + | ;Linux: | |
− | + | $HOME/.local/share/themes/ | |
− | + | ;OS X: | |
+ | $HOME/.local/share/themes/ | ||
+ | ;Windows: | ||
+ | %LOCALAPPDATA%\themes\ | ||
7. Next tell gtk to load this theme. | 7. Next tell gtk to load this theme. | ||
Line 95: | Line 100: | ||
Create a file named "settings.ini" in the appropriate location. Again this | Create a file named "settings.ini" in the appropriate location. Again this | ||
depends on your platform: | depends on your platform: | ||
− | + | ;Linux: | |
− | + | $HOME/.config/gtk-3.0/ | |
− | + | ;OS X: | |
− | + | Either $HOME/.config/gtk-3.0/ (like on linux) or $HOME/Library/Application Support/Gnucash/config/gtk-3.0 | |
+ | I suspect the latter in this case because gnucash overrides the XDG_CONFIG_HOME environment variable on OS X | ||
+ | ;Windows: | ||
+ | %LOCALAPPDATA%\gtk-3.0\ | ||
The contents of this file should be | The contents of this file should be |
Revision as of 09:24, 12 April 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.
Contents
Keyboard Shortcuts
Keyboard shortcuts can be assigned to actions in GnuCash application. To assign a custom shortcut, do the following:
With GnuCash *not running* open $GNC_DOC_PATH/Gnucash/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.
GNC_DOC_PATH defaults to:
- Linux
- FIXME
- MacOS
- FIXME
- Windows
- CSIDL_APPDATA, which is referenced via %APPDATA% variable and normally points to C:\Users\<userid>\AppData\Roaming.
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 the shortcut 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.
Visual Styling
As noted in bug 791823, the GTK theming tool is not being distributed with GTK3 any more, compared to GTK2. This, due to the fact that GTK3 uses Cascading Style Sheets (CSS) for themes, 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:
For extra info, you can also check these low-level customizations:
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.
To customize the way GnuCash looks, create or modify an existing Cascading Style Sheets (CSS) file at the appropriate location. The correct location on different operating systems is explained in the following FAQ answer: Where can I find the GTK resource file? Note that, by default, no gtk-3.0.css file will be created by GnuCash application. Once you add the file, add the desired CSS rules or copy values from an existing theme. There are plenty of GTK3 theme resources caused by the fact that CSS is a widely-adopted standard for UI styling and many people are familiar with it.
Related wiki entries:
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:
- download an appropriate gtk3 theme from www.gnome-look.org or other sites
- copy the theme into a directory where gtk3 looks for themes (see below)
- create or adjust a settings.ini file to instruct gtk3 to use this theme
Some sites which host custom GTK3 themes:
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 a location on your system that's parsed by gtk. This is platform dependent:
- Linux
$HOME/.local/share/themes/
- OS X
$HOME/.local/share/themes/
- Windows
%LOCALAPPDATA%\themes\
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 "settings.ini" in the appropriate location. Again this depends on your platform:
- Linux
$HOME/.config/gtk-3.0/
- OS X
Either $HOME/.config/gtk-3.0/ (like on linux) or $HOME/Library/Application Support/Gnucash/config/gtk-3.0 I suspect the latter in this case because gnucash overrides the XDG_CONFIG_HOME environment variable on OS X
- Windows
%LOCALAPPDATA%\gtk-3.0\
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.
- 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 ot the themese directory. And to activate them you can add gtk-icon-theme-name=<directory name> in settings.ini.
- Another setting some of you will be interested in is gtk-font-name=<a font description>
for example gtk-font-name=Abyssinica SIL Regular 10
- More gtk settings one can override can be found here: //developer.gnome.org/gtk3/stable/GtkSettings.html
Dark Themes
Due to the lack of a dark theme on Windows, a guide could be a ready-made custom theme to which GnuCash-specific style rules would be added.
Here is an example of a dark theme for GnuCash 3. Note that this is still a work in progress, though.
- GnuCash 3 Black Theme gtk-3.0.css
Ready-made Themes
Here are some ready-made themes that may apply well to GnuCash.
- Leather-Dark theme
- Eye-friendly Dark RBC Theme - fully-working pleasant dark theme
- Adwaita Dark GTK2 - not 100% correct (on Windows)
Font Size in Documents
Creating
- Linux
- FIXME
- MacOs
- ~/Library/Application Support/Gnucash/gtk-3.0.css
- Windows
- FIXME
with this content:
* {
font: 14px arial, sans-serif;
}
Will adjust the fontsize, also of the register to 14 pixel.