CODEWITHSUNDEEP
c++cssgtk
Daniel P
Daniel P

Reputation: 461

GTK and CSS : Rounded buttons

I am trying to create a rounded button by calling a external CSS file in my C++ application.

I manage to get a round button but some rectangular border remains and I cannot find how to get rid of that border.

Content of CSS file :

GtkButton  {
    -GtkWidget-focus-line-width: 1px; 
    border-width: 1px;
    border-radius: 30px;
    background-image: -gtk-gradient (linear,
        left top,
        left bottom,
        from (@win_bg),
        color-stop (0.5, @win_dark),
        to (@win_bg));
}

PS : I left out the color definitions to keep it shorter.

Upvotes: 3

Views: 5669

Answers (2)

underscore_d
underscore_d

Reputation: 6797

Manual CSS hackery might be (fun, but!) unnecessary now, at least for users targeting the standard themes (or rather, only those, since we should always use them as our baseline):

https://developer.gnome.org/gtk3/stable/GtkButton.html

In special cases, buttons can be made round by adding the .circular style class.

So, e.g.:

gtk_style_context_add_class(
    gtk_widget_get_style_context( GTK_WIDGET(button) ),
    "circular"
);

This works using both of the standard themes, Adwaita and HighContrast.

For buttons where one dimension is longer than another, only the corners will be rounded to the radius of the shorter dimension, and the rest of the button will be flat (i.e. you get a rounded rectangle, not an oval).

Upvotes: 1

Daniel P
Daniel P

Reputation: 461

I am running Debian Wheezy (currently testing), after installing the gtk unico engine (apt-get install gtk3-engines-unico) and modifying my css it worked (rectangular borders are gone)

GtkButton  {
    engine: unico;
    -GtkWidget-focus-line-width: 1px; 
    border-width: 1px;
    border-radius: 30px;
    background-image: -gtk-gradient (linear,
        left top,
        left bottom,
        from (@win_bg),
        color-stop (0.5, @win_dark),
        to (@win_bg));
}

Upvotes: 2

Related Questions