248 lines
9.3 KiB
HTML
248 lines
9.3 KiB
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.25 (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>
|
||
<p>
|
||
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.
|
||
</p>
|
||
<p>
|
||
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:
|
||
</p>
|
||
<div class="example">
|
||
<a name="id-1.6.4.6.4"></a><p class="title"><b>Example 44. Sample RC code</b></p>
|
||
<div class="example-contents"><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
|
||
|
||
bg[NORMAL] = @tooltip_bg_color
|
||
fg[NORMAL] = @tooltip_fg_color
|
||
}
|
||
|
||
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></div>
|
||
</div>
|
||
<br class="example-break"><p>
|
||
would roughly translate to this CSS:
|
||
</p>
|
||
<div class="example">
|
||
<a name="id-1.6.4.6.6"></a><p class="title"><b>Example 45. CSS translation</b></p>
|
||
<div class="example-contents"><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></div>
|
||
</div>
|
||
<br class="example-break"><p>
|
||
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.
|
||
</p>
|
||
<p>
|
||
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.
|
||
</p>
|
||
<p>
|
||
Access to colors has also changed a bit. With <a class="link" href="GtkStyle.html" title="GtkStyle"><span class="type">GtkStyle</span></a>, the common
|
||
way to access colors is:
|
||
</p>
|
||
<div class="informalexample"><pre class="programlisting">
|
||
GdkColor *color1;
|
||
GdkColor color2;
|
||
|
||
color1 = &style->bg[GTK_STATE_PRELIGHT];
|
||
gtk_style_lookup_color (style, "focus_color", &color2);
|
||
</pre></div>
|
||
<p>
|
||
With <a class="link" href="GtkStyleContext.html" title="GtkStyleContext"><span class="type">GtkStyleContext</span></a>, you generally use <span class="type">GdkRGBA</span> instead of <span class="type">GdkColor</span>
|
||
and the code looks like this:
|
||
</p>
|
||
<div class="informalexample"><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></div>
|
||
<p>
|
||
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.
|
||
</p>
|
||
<p>
|
||
It is worth mentioning that the new file format does not support
|
||
stock icon mappings as the RC format did.
|
||
</p>
|
||
</div>
|
||
<div class="footer">
|
||
<hr>Generated by GTK-Doc V1.25</div>
|
||
</body>
|
||
</html> |