Add a custom css example

diff --git a/demos/gtk-demo/Makefile.am b/demos/gtk-demo/Makefile.am
index 7e90f2d217c38982fd0b4b9334987e33255009c5..97fe9dbc15a5315d2a57879b35669d0e6714b402 100644 (file)
--- a/demos/gtk-demo/Makefile.am
+++ b/demos/gtk-demo/Makefile.am
@@ -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
 

diff --git a/demos/gtk-demo/fancy.css b/demos/gtk-demo/fancy.css
new file mode 100644 (file)
index 0000000..a3d2ac3
--- /dev/null
+++ b/demos/gtk-demo/fancy.css
@@ -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;
+}

diff --git a/demos/gtk-demo/theming_custom_css.c b/demos/gtk-demo/theming_custom_css.c
new file mode 100644 (file)
index 0000000..00cb22a
--- /dev/null
+++ b/demos/gtk-demo/theming_custom_css.c
@@ -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;
+}