1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bonus points: GTK+ 3 Reference Manual</title>
<meta name="generator" content="DocBook XSL Stylesheets Vsnapshot">
<link rel="home" href="index.html" title="GTK+ 3 Reference Manual">
<link rel="up" href="gtk-migrating-GtkStyleContext.html" title="Theming changes">
<link rel="prev" href="gtk-migrating-GtkStyleContext-parsing.html" title="Parsing of custom resources">
<link rel="next" href="gtk-migrating-unique-GtkApplication.html" title="Migrating from libunique to GApplication or GtkApplication">
<meta name="generator" content="GTK-Doc V1.25.1 (XML mode)">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
<table class="navigation" id="top" width="100%" summary="Navigation header" cellpadding="2" cellspacing="5"><tr valign="middle">
<td width="100%" align="left" class="shortcuts"></td>
<td><a accesskey="h" href="index.html"><img src="home.png" width="16" height="16" border="0" alt="Home"></a></td>
<td><a accesskey="u" href="gtk-migrating-GtkStyleContext.html"><img src="up.png" width="16" height="16" border="0" alt="Up"></a></td>
<td><a accesskey="p" href="gtk-migrating-GtkStyleContext-parsing.html"><img src="left.png" width="16" height="16" border="0" alt="Prev"></a></td>
<td><a accesskey="n" href="gtk-migrating-unique-GtkApplication.html"><img src="right.png" width="16" height="16" border="0" alt="Next"></a></td>
</tr></table>
<div class="section">
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
<a name="gtk-migrating-GtkStyleContext-bonus-points"></a>Bonus points</h2></div></div></div>
<p>
There are some features in <a class="link" href="GtkStyleContext.html" title="GtkStyleContext"><span class="type">GtkStyleContext</span></a> that were not available in
<a class="link" href="GtkStyle.html" title="GtkStyle"><span class="type">GtkStyle</span></a>, or were made available over time for certain widgets through
extending the detail string in obscure ways. There is a lot more
information available when rendering UI elements, and it is accessible
in more uniform, less hacky ways. By going through this list you'll
ensure your widget is a good citizen in a fully themable user interface.
</p>
<div class="orderedlist"><ol class="orderedlist" type="1">
<li class="listitem">
If your widget renders a series of similar elements, such as tabs
in a <a class="link" href="GtkNotebook.html" title="GtkNotebook"><span class="type">GtkNotebook</span></a> or rows/column in a <a class="link" href="GtkTreeView.html" title="GtkTreeView"><span class="type">GtkTreeView</span></a>, consider adding
regions through <a class="link" href="GtkStyleContext.html#gtk-style-context-add-region" title="gtk_style_context_add_region ()"><code class="function">gtk_style_context_add_region()</code></a>. These regions can be
referenced in CSS and the :nth-child pseudo-class may be used to match
the elements depending on the flags passed.
<div class="example">
<a name="id-1.6.4.9.3.1.4"></a><p class="title"><b>Example 50. Theming widget regions</b></p>
<div class="example-contents">
<table class="listing_frame" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="listing_lines" align="right"><pre>1
2
3
4
5
6
7</pre></td>
<td class="listing_code"><pre class="programlisting">GtkNotebook tab <span class="gtkdoc opt">{</span>
background<span class="gtkdoc opt">-</span>color<span class="gtkdoc opt">:</span> <span class="gtkdoc ppc">#f3329d;</span>
<span class="gtkdoc opt">}</span>
GtkTreeView row<span class="gtkdoc opt">::</span>nth<span class="gtkdoc opt">-</span><span class="function">child</span> <span class="gtkdoc opt">(</span>even<span class="gtkdoc opt">) {</span>
background<span class="gtkdoc opt">-</span>color<span class="gtkdoc opt">:</span> <span class="gtkdoc ppc">#dddddd;</span>
<span class="gtkdoc opt">}</span></pre></td>
</tr>
</tbody>
</table>
</div>
</div>
<br class="example-break">
</li>
<li class="listitem">
<p>
If your container renders child widgets within different regions,
make it implement <a class="link" href="GtkContainer.html" title="GtkContainer"><span class="type">GtkContainer</span></a> get_path_for_child(). This function
lets containers assign a special <a class="link" href="gtk3-GtkWidgetPath.html#GtkWidgetPath" title="GtkWidgetPath"><span class="type">GtkWidgetPath</span></a> to child widgets
depending on their role/region. This is necessary to extend the
concept above throughout the widget hierarchy.
</p>
<p>
For example, a <a class="link" href="GtkNotebook.html" title="GtkNotebook"><span class="type">GtkNotebook</span></a> modifies the tab labels' <a class="link" href="gtk3-GtkWidgetPath.html#GtkWidgetPath" title="GtkWidgetPath"><span class="type">GtkWidgetPath</span></a>
so the "tab" region is added. This makes it possible to theme tab
labels through:
</p>
<div class="example">
<a name="id-1.6.4.9.3.2.3"></a><p class="title"><b>Example 51. Theming a widget within a parent container region</b></p>
<div class="example-contents">
<table class="listing_frame" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="listing_lines" align="right"><pre>1
2
3</pre></td>
<td class="listing_code"><pre class="programlisting">GtkNotebook tab GtkLabel <span class="gtkdoc opt">{</span>
font<span class="gtkdoc opt">:</span> Sans <span class="number">8</span><span class="gtkdoc opt">;</span>
<span class="gtkdoc opt">}</span></pre></td>
</tr>
</tbody>
</table>
</div>
</div>
<br class="example-break">
</li>
<li class="listitem">
If you intend several visual elements to look interconnected,
make sure you specify rendered elements' connection areas with
<a class="link" href="GtkStyleContext.html#gtk-style-context-set-junction-sides" title="gtk_style_context_set_junction_sides ()"><code class="function">gtk_style_context_set_junction_sides()</code></a>. It is of course up to the
theme to make use of this information or not.
</li>
<li class="listitem">
<p>
<a class="link" href="GtkStyleContext.html" title="GtkStyleContext"><span class="type">GtkStyleContext</span></a> supports implicit animations on state changes for
the most simple case out-of-the-box: widgets with a single animatable
area, whose state is changed with <a class="link" href="GtkWidget.html#gtk-widget-set-state-flags" title="gtk_widget_set_state_flags ()"><code class="function">gtk_widget_set_state_flags()</code></a> or
<a class="link" href="GtkWidget.html#gtk-widget-unset-state-flags" title="gtk_widget_unset_state_flags ()"><code class="function">gtk_widget_unset_state_flags()</code></a>. These functions trigger animated
transitions for the affected state flags. Examples of widgets for
which this kind of animation may be sufficient are <a class="link" href="GtkButton.html" title="GtkButton"><span class="type">GtkButton</span></a> or
<a class="link" href="GtkEntry.html" title="GtkEntry"><span class="type">GtkEntry</span></a>.
</p>
<p>
If your widget consists of more than a simple area, and these areas
may be rendered with different states, make sure to mark the rendered
areas with <a class="link" href="GtkStyleContext.html#gtk-style-context-push-animatable-region" title="gtk_style_context_push_animatable_region ()"><code class="function">gtk_style_context_push_animatable_region()</code></a> and
<a class="link" href="GtkStyleContext.html#gtk-style-context-pop-animatable-region" title="gtk_style_context_pop_animatable_region ()"><code class="function">gtk_style_context_pop_animatable_region()</code></a>.
</p>
<p>
<a class="link" href="GtkStyleContext.html#gtk-style-context-notify-state-change" title="gtk_style_context_notify_state_change ()"><code class="function">gtk_style_context_notify_state_change()</code></a> may be used to trigger a
transition for a given state. The region ID will determine the
animatable region that is affected by this transition.
</p>
</li>
</ol></div>
</div>
<div class="footer">
<hr>Generated by GTK-Doc V1.25.1</div>
</body>
</html>
|
