GTK3: gtkdialog styling with CSS
Note that this is for gtkdialog built with GTK3.
With GTK2 we could use e.g. GTK2_RC_FILES=/path/gtkrc-file, but doesn't work with GTK3 (as GTK3 themes use CSS for styling).
I've been searching for an equivalent for GTK3 and found that it's a bit more complex. Here's how (examples matching with below splash window code):
- Export variable GTK_DATA_PREFIX
This can be any existing directory, let's say: GTK_DATA_PREFIX=/tmp/gtk3-splash
- Export (custom) theme name GTK_THEME
e.g. GTK_THEME=gtk-splash_gtkrc
- Setup a directory structure: GTK_DATA_PREFIX/share/themes/GTK_THEME/gtk-3.0
So then: mkdir -p /tmp/gtk3-splash/share/themes/gtk-splash_gtkrc/gtk-3.0
- Write gtk.css inside, so becomes: /tmp/gtk3-splash/share/themes/gtk-splash_gtkrc/gtk-3.0/gtk.css
Simple example creating CSS style sheet: (the splash code further below is more advanced);
(some gtk3 css examples: https://docs.gtk.org/gtk3/css-overview.html)
Code: Select all
mkdir -p /tmp/gtk3-splash/share/themes/gtk-splash_gtkrc/gtk-3.0
echo '* {
font: 15px "DejaVu Sans";
background-color: blue;
color: yellow;
padding: 0;
}
' > /tmp/gtk3-splash/share/themes/gtk-splash_gtkrc/gtk-3.0/gtk.css
export GTK_DATA_PREFIX=/tmp/gtk3-splash # gtk3 prefix, can be any folder name
export GTK_THEME=gtk-splash_gtkrc # gtk3 theme name
# gtkdialog code below:
# .....................Here's more advanced example code for styled splash window (gradient color 
) (below pic):
(GTK3 gtkdialog required)
Code: Select all
#!/bin/bash
#set -x
# splash window example for GTK3 gtkdialog
# equivalent of GTK2_RC_FILES= (gtk2)
# some gtk3 css examples: https://docs.gtk.org/gtk3/css-overview.html
# text to display
msg="`echo -e "Besides being able to define color names,
the CSS parser is also able to read
different color expressions, which can
also be nested, providing a rich language
to define colors which are derived from a
set of base colors."`"
########################## gtk3 style theme css ############################
# create dir structure for write gtk.css inside
mkdir -p /tmp/gtk3-splash/share/themes/gtk-splash_gtkrc/gtk-3.0
# write gtk.css
echo '* {
/* for border (gradient) */
background-image: -gtk-gradient (linear, center top, center bottom,
from (shade (#4e9a06, 1.0)),
to (shade (#4e9a06, 1.3)));
padding: 0;
}
box * {
font: 15px "DejaVu Sans";
font-style: italic;
font-weight: bold;
/* background (gradient) */
background-image: -gtk-gradient (linear, center top, center bottom,
from (shade (#4e9a06, 1.6)),
to (shade (#4e9a06, 0.8)));
/* or use solid background instead of above */
/* background-color: green; */
/* foreground (font) color */
color: #fce94f;
padding: 0;
}
' > /tmp/gtk3-splash/share/themes/gtk-splash_gtkrc/gtk-3.0/gtk.css
export GTK_DATA_PREFIX=/tmp/gtk3-splash # gtk3 prefix, can be any folder name
export GTK_THEME=gtk-splash_gtkrc # gtk3 theme name
##################################################################
export GTKDIALOG_SPLASH='
<window title="box_splash" type-hint="6" focus-on-map="false" skip-taskbar-hint="true" icon-name="gtk-preferences" resizable="false" decorated="false" >
<vbox>
<notebook show-tabs="false" show-border="true" space-expand="true" space-fill="true">
<hbox>
<vbox>
<pixmap width-request="-1" space-expand="true" space-fill="true">
<width>-1</width>
<input file stock="gtk-info"></input>
</pixmap>
</vbox>
<text justify="0" width-chars="0" wrap="false" space-expand="true" space-fill="true">
<label>"'$msg'"</label>
</text>
<vbox><button><input file stock="gtk-quit"></input> <height>20</height><action type="exit">Exit on click close-box</action></button></vbox>
</hbox>
</notebook>
</vbox>
</window>'
exec gtkdialog --class=gtkdialog-splash -p GTKDIALOG_SPLASH --center --geometry=493x198
- gtk3 gtkdialog splash
- 2022-03-04_09-07-25.png (25.19 KiB) Viewed 1002 times