joplin-notes/joplin notion extension/Web Development/C_C++/GTK/GTK with CSS.md

GTK with CSS

#include <gtk/gtk.h>
#include <stdio.h>

static void load_css() {

  const gchar *css_style_file = "style.css";
  GFile *css_fp = g_file_new_for_path(css_style_file);
  GError *error = 0;

  GtkCssProvider *provider;
  //  GtkStyleContext *context;
  GdkDisplay *display;
  GdkScreen *screen;

  provider = gtk_css_provider_new();
  display = gdk_display_get_default();
  screen = gdk_display_get_default_screen(display);
  // context = gtk_widget_get_style_context(widget);

  gtk_style_context_add_provider_for_screen(
      screen, GTK_STYLE_PROVIDER(provider),
      GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

  gtk_css_provider_load_from_file(provider, css_fp, &error);

  g_object_unref(provider);
}

int main(int argc, char *argv[]) {
  gtk_init(&argc, &argv);

  GtkWidget *widgets[10];
  int n = 0;

  GtkWidget *window;
  GtkWidget *button;

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);

  load_css();

  //  GtkWidget *view;
  //  GtkTextBuffer *buffer;

  //  GtkCssProvider *provider;
  //  GtkStyleContext *context;

  //   view = gtk_text_view_new();

  //  buffer = gtk_text_view_get_buffer(GTK_TEXT_VIEW(view));

  //  gtk_text_buffer_set_text(buffer, "hello, some text", -1);

  //   provider = gtk_css_provider_new();

  //  gtk_css_provider_load_from_data(provider,
  //                              "textview { font : 15 serif; "
  //                          "background-color: blue; margin: 10px; "
  //                      "text-decoration-line : underline;}",
  //                  -1, NULL);

  //   context = gtk_widget_get_style_context(view);

  //  gtk_style_context_add_provider(context, GTK_STYLE_PROVIDER(provider),
  //                GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

  //  gtk_text_view_set_left_margin(GTK_TEXT_VIEW(view), 30);
  button = gtk_button_new_with_label("click_me");
	
	// to set id of element
	gtk_widget_set_name(button, "btn");
	
	// to add class to element
	gtk_style_context_add_class(gtk_widget_get_style_context(button), "circular");



  gtk_container_add(GTK_CONTAINER(window), button);

  g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
  gtk_widget_show_all(window);

  gtk_main();
  return EXIT_SUCCESS;
}

style.css

window{
  background-color: yellow;
}

button {
  background-color: green;
  border: 10px solid #000;
 
}

#btn{
	background-color: red;
}

.circular{
	 border-radius : 100%;
}