Re: How to replace gtk_widget_modify_text() with CSS?

[Nate Bargmann]

Thank you very much for this comprehensive reply, Luca.  This gives me a
lot to work with and many good ideas.

- Nate

-- 

"The optimist proclaims that we live in the best of all
possible worlds.  The pessimist fears this is true."

Web: http://www.n0nb.us  GPG key: D55A8819  GitHub: N0NB
___
gtk-app-devel-list mailing list
gtk-app-devel-list@gnome.org
https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list

Re: How to replace gtk_widget_modify_text() with CSS?

[Luca Bacci via gtk-app-devel-list]

Hi Nate,
based on my experience, you have 3 ways:

1) First, see if there are standard CSS classes provided by the theme for
your use case. For example, GtkButton
 has the
*.suggegsted-action* and *.destructive-action* CSS classes, which all
themes shall provide. GtkEntry has *.warning* and *.error* CSS classes.
This blends nicely with every theme you may use.

You use gtk_widget_get_style_context() and gtk_style_context_add_class().
In one line it is:
gtk_style_context_add_class(gtk_widget_get_style_context(button),
"suggested-action");

See:
https://stackoverflow.com/a/37628324
https://wiki.gnome.org/HowDoI/Buttons.

2) Create one CSS where you define *your own* CSS classes. It can be either
a string in your source file, an external .css file that you load at
runtime, or a .css file embedded as a GResource
). Load your custom
CSS at startup:

void setup_application_css() {
  const gchar *css_string = ".red_text { color: red; }";

  GtkCssProvider *css = gtk_css_provider_new();
  gtk_css_provider_load_from_data(css, css_string, -1, NULL);
  gtk_style_context_add_provider_for_screen(gdk_screen_get_default(),
GTK_STYLE_PROVIDER(css),

GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
  g_object_unref(css);
}

int main(int argc, char **argv) {
  gtk_init(, );
  setup_application_css();

  init();
  gtk_main();
  return 0;
}

then apply the class to any widget you want:
GtkEntry *entry = gtk_entry_new();
gtk_style_context_add_class(gtk_widget_get_style_context(entry),
"red_text");

NOTE: if you want to work with CSS id, just change the css string to:

const gchar *css_string = "#myentry1 { color: red; }";

then set the CSS id to the entry:
GtkEntry *entry = gtk_entry_new();
gtk_widget_set_name(entry, "myentry1");

3) If you have to style just a few widgets, it's best to style them
directly at creation site, without loading a CSS globally:

GtkEntry* create_entry() {
  GtkEntry *entry = gtk_entry_new();

  const gchar *css_string = "entry { color: red; }";
  GtkCssProvider *css = gtk_css_provider_new();
  gtk_css_provider_load_from_data(css, css_string, -1, NULL);
  gtk_style_context_add_provider(gtk_widget_get_style_context(entry),
 GTK_STYLE_PROVIDER(css),
 GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
  g_object_unref(css);

  return entry;
}

I suggest you use the Gtk Inspector
 to
experiment with all that at runtime. You can write live CSS and you can
also set properties of your widgets like name, classes. See also
https://blog.gtk.org/2017/04/05/the-gtk-inspector/

I have attached examples for all three points.
Luca

Il giorno lun 17 dic 2018 alle ore 15:46 Nate Bargmann  ha
scritto:

> Greetings to the list.
>
> Several years ago I took over maintainership of a useful amateur radio
> application written for GTK+ 2.  As a winter project I've decided to
> port it to GTK+ 3 and have used the transition guide to accomplish
> much.  I set the build system to generate warnings for deprecated
> constructs and one of the things that has me stumped is how to replace a
> call to GTK+ 2's gtk_widget_modify_text() with CSS in GTK+ 3.  Now, I'm
> not a complete newcomer to CSS having used it with HTML years back so
> that is not the issue.
>
> In the program source there are lines like this which merely set the
> foreground color of some text based on a default or some later user
> preference:
>
> gtk_widget_modify_text(highentry1, GTK_STATE_NORMAL,
> );
>
> Building now generates this warning (I have a lot of these):
>
>   CC   main.o
> ../../xdx/src/main.c: In function ‘main’:
> ../../xdx/src/main.c:332:5: warning: ‘gtk_widget_modify_text’ is
> deprecated: Use 'CSS style classes' instead [-Wdeprecated-declarations]
>  gtk_widget_modify_text(highentry1, GTK_STATE_NORMAL,
> );
>  ^~
>
> I have been looking through the reference documentation and various
> examples to find something relatively simple to change the foreground
> color of the text.  Right now what I am looking for is a clue of how to
> get from "here" to "there".  What I am finding seems to be rather
> complicated and involved.  Hopefully my impression is incorrect.
>
> Is there a function that I've missed that can apply CSS inline similar
> to this deprecated function?
>
> TIA
>
> - Nate
>
> --
>
> "The optimist proclaims that we live in the best of all
> possible worlds.  The pessimist fears this is true."
>
> Web: http://www.n0nb.us  GPG key: D55A8819  GitHub: N0NB
> ___
> gtk-app-devel-list mailing list
> gtk-app-devel-list@gnome.org
> https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list
#include 

void load_application_css() {
  const gchar *css_string = ".red_text { color: red; }";

  

How to replace gtk_widget_modify_text() with CSS?

[Nate Bargmann]

Greetings to the list.

Several years ago I took over maintainership of a useful amateur radio
application written for GTK+ 2.  As a winter project I've decided to
port it to GTK+ 3 and have used the transition guide to accomplish
much.  I set the build system to generate warnings for deprecated
constructs and one of the things that has me stumped is how to replace a
call to GTK+ 2's gtk_widget_modify_text() with CSS in GTK+ 3.  Now, I'm
not a complete newcomer to CSS having used it with HTML years back so
that is not the issue.

In the program source there are lines like this which merely set the
foreground color of some text based on a default or some later user
preference:

gtk_widget_modify_text(highentry1, GTK_STATE_NORMAL, );

Building now generates this warning (I have a lot of these):

  CC   main.o
../../xdx/src/main.c: In function ‘main’:
../../xdx/src/main.c:332:5: warning: ‘gtk_widget_modify_text’ is deprecated: 
Use 'CSS style classes' instead [-Wdeprecated-declarations]
 gtk_widget_modify_text(highentry1, GTK_STATE_NORMAL, 
);
 ^~

I have been looking through the reference documentation and various
examples to find something relatively simple to change the foreground
color of the text.  Right now what I am looking for is a clue of how to
get from "here" to "there".  What I am finding seems to be rather
complicated and involved.  Hopefully my impression is incorrect.

Is there a function that I've missed that can apply CSS inline similar
to this deprecated function?

TIA

- Nate

-- 

"The optimist proclaims that we live in the best of all
possible worlds.  The pessimist fears this is true."

Web: http://www.n0nb.us  GPG key: D55A8819  GitHub: N0NB
___
gtk-app-devel-list mailing list
gtk-app-devel-list@gnome.org
https://mail.gnome.org/mailman/listinfo/gtk-app-devel-list