Default page

Edit File: gtk-migrating-GtkStyleContext-css.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Using the CSS file format: GTK+ 3 Reference Manual</title>
<meta name="generator" content="DocBook XSL Stylesheets V1.79.1">
<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-parser-extensions.html" title="Extending the CSS parser">
<link rel="next" href="gtk-migrating-GtkStyleContext-checklist.html" title="A checklist for widgets">
<meta name="generator" content="GTK-Doc V1.32 (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-parser-extensions.html"><img src="left.png" width="16" height="16" border="0" alt="Prev"></a></td>
<td><a accesskey="n" href="gtk-migrating-GtkStyleContext-checklist.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-css"></a>Using the CSS file format</h2></div></div></div>

 The syntax of RC and CSS files formats is obviously different.
 The CSS-like syntax will hopefully be much more familiar to many
 people, lowering the barrier for custom theming.
 

 Instead of going through the syntax differences one-by-one, we
 will present a more or less comprehensive example and discuss
 how it can be translated into CSS:
 
<div class="example">
<a name="id-1.6.4.6.4"></a>Example 44. Sample RC code
<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
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</pre></td>
 <td class="listing_code"><pre class="programlisting">style "default" {
 xthickness = 1
 ythickness = 1

GtkButton::child-displacement-x = 1
 GtkButton::child-displacement-y = 1
 GtkCheckButton::indicator-size = 14

bg[NORMAL] = @bg_color
 bg[PRELIGHT] = shade (1.02, @bg_color)
 bg[SELECTED] = @selected_bg_color
 bg[INSENSITIVE] = @bg_color
 bg[ACTIVE] = shade (0.9, @bg_color)

fg[NORMAL] = @fg_color
 fg[PRELIGHT] = @fg_color
 fg[SELECTED] = @selected_fg_color
 fg[INSENSITIVE] = darker (@bg_color)
 fg[ACTIVE] = @fg_color

text[NORMAL] = @text_color
 text[PRELIGHT] = @text_color
 text[SELECTED] = @selected_fg_color
 text[INSENSITIVE] = darker (@bg_color)
 text[ACTIVE] = @selected_fg_color

base[NORMAL] = @base_color
 base[PRELIGHT] = shade (0.95, @bg_color)
 base[SELECTED] = @selected_bg_color
 base[INSENSITIVE] = @bg_color
 base[ACTIVE] = shade (0.9, @selected_bg_color)

engine "clearlooks" {
 colorize_scrollbar = TRUE
 style = CLASSIC
 }
}

style "tooltips" {
 xthickness = 4
 ythickness = 4

style "button" {
 xthickness = 3
 ythickness = 3

bg[NORMAL] = shade (1.04, @bg_color)
 bg[PRELIGHT] = shade (1.06, @bg_color)
 bg[ACTIVE] = shade (0.85, @bg_color)
}

style "entry" {
 xthickness = 3
 ythickness = 3

bg[SELECTED] = mix (0.4, @selected_bg_color, @base_color)
 fg[SELECTED] = @text_color

engine "clearlooks" {
 focus_color = shade (0.65, @selected_bg_color)
 }
}

style "other" {
 bg[NORMAL] = #fff;
}

class "GtkWidget" style "default"
class "GtkEntry" style "entry"
widget_class "*<GtkButton>" style "button"
widget "gtk-tooltip*" style "tooltips"
widget_class "window-name.*.GtkButton" style "other"</pre></td>
 </tr>
 </tbody>
 </table>
</div>

</div>
 
 would roughly translate to this CSS:
 
<div class="example">
<a name="id-1.6.4.6.6"></a>Example 45. CSS translation
<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
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</pre></td>
 <td class="listing_code"><pre class="programlisting">* {
 padding: 1;
 -GtkButton-child-displacement-x: 1;
 -GtkButton-child-displacement-y: 1;
 -GtkCheckButton-indicator-size: 14;

background-color: @bg_color;
 color: @fg_color;

-Clearlooks-colorize-scrollbar: true;
 -Clearlooks-style: classic;
}

*:hover {
 background-color: shade (@bg_color, 1.02);
}

*:selected {
 background-color: @selected_bg_color;
 color: @selected_fg_color;
}

*:insensitive {
 color: shade (@bg_color, 0.7);
}

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

.tooltip {
 padding: 4;

background-color: @tooltip_bg_color;
 color: @tooltip_fg_color;
}

.button {
 padding: 3;
 background-color: shade (@bg_color, 1.04);
}

.button:hover {
 background-color: shade (@bg_color, 1.06);
}

.button:active {
 background-color: shade (@bg_color, 0.85);
}

.entry {
 padding: 3;

background-color: @base_color;
 color: @text_color;
}

.entry:selected {
 background-color: mix (@selected_bg_color, @base_color, 0.4);
 -Clearlooks-focus-color: shade (0.65, @selected_bg_color)
}

/* The latter selector is an specification of the first,
 since any widget may use the same classes or names */
#window-name .button,
GtkWindow#window-name GtkButton.button {
 background-color: #fff;
}</pre></td>
 </tr>
 </tbody>
 </table>
</div>

</div>
 
 One notable difference is the reduction from fg/bg/text/base colors
 to only foreground/background, in exchange the widget is able to render
 its various elements with different CSS classes, which can be themed
 independently.
 

 In the same vein, the light, dark and mid color variants that
 were available in GtkStyle should be replaced by a combination of
 symbolic colors and custom CSS, where necessary. text_aa should
 really not be used anywhere, anyway, and the white and black colors
 that were available in GtkStyle can just be replaced by literal
 GdkRGBA structs.
 

 Access to colors has also changed a bit. With <a class="link" href="GtkStyle.html" title="GtkStyle">GtkStyle</a>, the common
 way to access colors is:
 
<div class="informalexample">
 <table class="listing_frame" border="0" cellpadding="0" cellspacing="0">
 <tbody>
 <tr>
 <td class="listing_lines" align="right"><pre>1
2
3
4
5</pre></td>
 <td class="listing_code"><pre class="programlisting">GdkColor *color1;
GdkColor color2;

color1 = &style->bg[GTK_STATE_PRELIGHT];
gtk_style_lookup_color (style, "focus_color", &color2);</pre></td>
 </tr>
 </tbody>
 </table>
</div>

With <a class="link" href="GtkStyleContext.html" title="GtkStyleContext">GtkStyleContext</a>, you generally use <a href="../html/gdk3-RGBA-Colors.html#GdkRGBA">GdkRGBA</a> instead of <a href="../html/gdk3-Colors.html#GdkColor">GdkColor</a>
 and the code looks like this:
 
<div class="informalexample">
 <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
8
9
10
11</pre></td>
 <td class="listing_code"><pre class="programlisting">GdkRGBA *color1;
GdkRGBA color2;

gtk_style_context_get (context, GTK_STATE_FLAG_PRELIGHT,
 "background-color", &color1,
 NULL);
gtk_style_context_lookup_color (context, "focus_color", &color2);

...

gdk_rgba_free (color1);</pre></td>
 </tr>
 </tbody>
 </table>
</div>

Note that the memory handling here is different: <a class="link" href="GtkStyleContext.html#gtk-style-context-get" title="gtk_style_context_get ()"><code class="function">gtk_style_context_get()</code></a>
 expects the address of a GdkRGBA* and returns a newly allocated struct,
 <a class="link" href="GtkStyleContext.html#gtk-style-context-lookup-color" title="gtk_style_context_lookup_color ()"><code class="function">gtk_style_context_lookup_color()</code></a> expects the address of an existing
 struct, and fills it.
 

 It is worth mentioning that the new file format does not support
 stock icon mappings as the RC format did.
 
</div>
<div class="footer">
<hr>Generated by GTK-Doc V1.32</div>
</body>
</html>