Add a custom css example

This commit is contained in:
Matthias Clasen 2012-05-25 22:03:47 -04:00
parent ebe4595cdb
commit 46cc815829
3 changed files with 93 additions and 1 deletions

View File

@ -44,6 +44,7 @@ demos = \
textview.c \
textscroll.c \
theming_style_classes.c \
theming_custom_css.c \
toolpalette.c \
transparent.c \
tree_store.c \
@ -78,6 +79,7 @@ EXTRA_DIST += \
application.ui \
menus.ui \
theming.ui \
fancy.css \
gtk-logo-24.png \
gtk-logo-48.png \
org.gtk.Demo.gschema.xml
@ -130,7 +132,8 @@ democode_DATA = \
demo.ui \
menus.ui \
application.ui \
theming.ui
theming.ui \
fancy.css
DISTCLEANFILES = demos.h

24
demos/gtk-demo/fancy.css Normal file
View File

@ -0,0 +1,24 @@
GtkButton#fancy {
font-weight: bold;
background-image: linear-gradient(135deg, yellow, blue);
border-radius: 20px;
color: white;
}
GtkButton#fancy:hover {
font-weight: bold;
background-image: linear-gradient(135deg, blue, yellow);
border-radius: 20px;
color: white;
}
GtkButton#fancy:active {
font-weight: bold;
background-image: linear-gradient(yellow, yellow);
border-radius: 20px;
color: black;
}
GtkButton#fancy * {
color: inherit;
}

View File

@ -0,0 +1,65 @@
/* Theming/Custom CSS :: fancy.css
*
* GTK+ uses CSS for theming. If required, applications can
* install their own custom CSS style provider to achieve
* special effects.
*
* Doing this has the downside that your application will no
* longer react to the users theme preferences, so this should
* be used sparingly.
*/
#include <gtk/gtk.h>
#include "demo-common.h"
static GtkWidget *window = NULL;
GtkWidget *
do_theming_custom_css (GtkWidget *do_widget)
{
GtkWidget *box;
GtkWidget *button;
GtkCssProvider *provider;
gchar *filename;
if (!window)
{
window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
gtk_window_set_screen (GTK_WINDOW (window),
gtk_widget_get_screen (do_widget));
gtk_window_set_title (GTK_WINDOW (window), "Custom CSS");
gtk_container_set_border_width (GTK_CONTAINER (window), 18);
g_signal_connect (window, "destroy",
G_CALLBACK (gtk_widget_destroyed), &window);
box = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 6);
gtk_container_add (GTK_CONTAINER (window), box);
button = gtk_button_new_with_label ("Plain");
gtk_box_pack_start (GTK_BOX (box), button, TRUE, TRUE, 0);
button = gtk_button_new_with_label ("Fancy");
gtk_box_pack_start (GTK_BOX (box), button, TRUE, TRUE, 0);
gtk_widget_set_name (button, "fancy");
provider = gtk_css_provider_new ();
filename = demo_find_file ("fancy.css", NULL);
gtk_css_provider_load_from_path (provider, filename, NULL);
gtk_style_context_add_provider_for_screen (gtk_widget_get_screen (do_widget),
GTK_STYLE_PROVIDER (provider),
GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
g_object_unref (provider);
g_free (filename);
gtk_widget_show_all (box);
}
if (!gtk_widget_get_visible (window))
{
gtk_widget_show (window);
}
else
{
gtk_widget_destroy (window);
window = NULL;
}
return window;
}