I'm new in the gtk's world and I cannot find a solution to this little problem.
I have this button :
But I would like that the small shadow behind the button can be removed.
I'd like this result :
How can I solve it?
Button's code:
sum_button = gtk_button_new_from_stock(GTK_STOCK_ADD);
/**/
style = gtk_widget_get_style(sum_button);
style->bg[GTK_STATE_PRELIGHT] = style->bg[GTK_STATE_NORMAL];
gtk_widget_set_style(sum_button, style);
/**/
gtk_widget_modify_bg(sum_button, GTK_STATE_NORMAL, &color2);
gtk_button_set_relief(GTK_BUTTON(sum_button), GTK_RELIEF_HALF);
g_signal_connect(G_OBJECT(sum_button), "clicked", G_CALLBACK(PrintNumber),&t_data);
gtk_box_pack_start(GTK_BOX (hbox3), sum_button, TRUE, TRUE, 0);
Try
gtk_button_set_relief(GTK_BUTTON(sum_button), GTK_RELIEF_NONE);
But then you can not set the background color:
When the button's border relief is set to none, it acts like a label as in it is "transparent", it has the same bg color as its parent container.
Take a look to this thread: https://stackoverflow.com/a/1709648/1606345
If you are writing new code, consider using GTK 3, where you can do this with CSS directly:
GtkCssProvider *provider = gtk_css_provider_new();
gtk_css_provider_load_from_data(provider,
"button {"
" border: 0px;"
" background-color: green;"
" color: white;"
"}", -1, &error);
GtkStyleContext *context = gtk_widget_get_style_context(button);
gtk_style_context_add_provider(context, provider,
GTK_STYLE_PROVIDER_PRIORITY_USER);
Related
I have managed to figure out the basics of the Theme editor and set the basic values for the Components I am interested in.
I am using ComponentSelector Components across the application, so I am able to choose any Component easily.
Now, I want to change the background color of specific Buttons in run time. What would be the best way to do so?
First of all, for a new app, you should use the theme.css file instead of the Theme editor.
Said that, changing the background color of specific Buttons in run time using the ComponentSelector can be done in the following way.
Assume to have a theme.css containing:
#Constants {
includeNativeBool: true;
}
Button {
margin: 0.5mm;
padding: 0.5mm;
color: white;
border: none;
}
Button-Red {
cn1-derive: Button;
background-color: red;
}
Button-Green {
cn1-derive: Button;
background-color: green;
}
Case of only one Button (note that I use the .asComponent() method to select only one Component, even if it's not necessary in this case):
Form hi = new Form("Hi World", BoxLayout.y());
Button myBtn = new Button("My fun button", "Button-Red");
hi.add(FlowLayout.encloseCenter(myBtn));
hi.show();
UITimer.timer(2000, false, hi, () -> {
// this code changes the color of the button after two second
ComponentSelector.$("Button-Red").asComponent().setUIID("Button-Green");
hi.revalidate();
});
Case of multiple Buttons:
Form hi = new Form("Hi World", BoxLayout.y());
Button myBtn1 = new Button("My fun button 1", "Button-Red");
Button myBtn2 = new Button("My fun button 2", "Button-Red");
hi.add(FlowLayout.encloseCenter(myBtn1));
hi.add(FlowLayout.encloseCenter(myBtn2));
hi.show();
UITimer.timer(2000, false, hi, () -> {
// this code changes the color of the buttons after two second
ComponentSelector.$("Button-Red").setUIID("Button-Green");
hi.revalidate();
});
Of course you can use different ways to select the components you are interested to, according to the documentation: https://www.codenameone.com/javadoc/com/codename1/ui/ComponentSelector.html
I'm looking to set the size of a button within a box and row in a listbox to just be the size of a single character. I would like the button to be a small remove button, which is just a small square big enough to hold a single 'X' character.
I'm having trouble getting the button to go any smaller than this:
This is my current code:
GtkWidget *row1;
GtkWidget *box1;
GtkWidget *label1;
GtkWidget *remBox1;
GtkWidget *remBtn1;
GtkWidget *remBtnLbl1;
remBtnLbl1 = gtk_label_new("X");
gtk_widget_set_name(remBtnLbl1,"remBtnLabels");
row1 = gtk_list_box_row_new();
box1 = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 100);
label1 = gtk_label_new("Test");
remBox1 = gtk_button_box_new(GTK_ORIENTATION_HORIZONTAL);
remBtn1 = gtk_button_new();
gtk_widget_set_margin_start(remBtnLbl1, 0);
gtk_widget_set_margin_end(remBtnLbl1, 0);
gtk_container_add(GTK_CONTAINER(remBtn1), remBtnLbl1);
gtk_widget_set_name(remBtn1, "remButtons");
gtk_widget_set_size_request(remBox1, 1, -1);
gtk_widget_set_size_request(remBtn1, 1, 5);
gtk_box_pack_start(GTK_BOX(remBox1), remBtn1, FALSE, FALSE, 0);
gtk_box_pack_start(GTK_BOX(box1), label1, TRUE, TRUE, 0);
gtk_box_pack_start(GTK_BOX(box1), remBox1, FALSE, FALSE, 0);
gtk_container_add(GTK_CONTAINER(row1), box1);
gtk_list_box_insert(GTK_LIST_BOX(hashListBox), row1, -1);
Stylesheet.css:
#remBtnLabels {
padding-left: 0px;
padding-right: 0px;
}
I've been trying all sorts of things to try and get the button smaller, and have been having no luck.
Any help would be greatly appreciated. Thanks.
In your specific example, just set the horizontal alignment of button:
gtk_widget_set_halign(remBtn1, GTK_ALIGN_END);
i want to customize the color of md-switch without writing alot of angular/js if possible
here how i want it
i was able to get the first , mainly becuse the main theme is solid gren and i used this to make the body of the switch light green
<md-switch ng-change="$ctrl.updateAsset($ctrl.asset,
'disabled')" ng-model="$ctrl.asset.disabled"></md-switch>
md-switch.md-checked .md-bar {
background-color: rgb(212, 255, 186); //light green
}
how would i change the head color (round)? how would i change the color of both head and body of the switch when the switch is off?
What you call the "head" is an element with class md-thumb; the bar, as you note, has class md-bar. Both are colored by their background-color property.
The md-checked class is active when the switch is "on".
md-switch .md-thumb {
background-color: darkgrey;
}
md-switch .md-bar {
background-color: lightgray;
}
md-switch.md-checked .md-thumb {
background-color: darkgreen;
}
md-switch.md-checked .md-bar {
background-color: lightgreen'
}
Obviously you should use the exact colors you want.
You could simplify the above if you're using SASS or LESS, and you may want to look at custom theming if you're planning to change more than this one component.
Edited to add:
To reverse the direction, use the transform property, e.g.
md-switch .md-thumb-container {
transform: translate3d(100%, 0, 0);
}
md-switch.md-checked .md-thumb-container {
transform: translate3d(0, 0, 0);
}
Add vendor prefixes as necessary for your browser support requirements.
I am trying to change the background color and text color for combbox and is using following style
.root
{
//-back:#152635;
-darker:#272B30;
-dark:#3A3F44;
-normal:#52575C; // #555
-light:#7A8288; // #999
-lighter:#999; // #eee
-primary:-light;
-success:#62c462;
-info:#5bc0de;
-warning:#f89406;
-danger:#ee5f5b;
-fore-color:#C8C8C8;
-fx-background-color:-darker ;
-focused-color:#64c8c8;
-border-color:derive(-darker,50%);
-fx-text-fill:-fore-color;
-fx-font-size: 14px;
-fx-font-weight:100;
-fx-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.combo-box-base {
-fx-background-color:-dark;
-fx-text-fill:-fore-color;
-fx-min-width:150px; }
.combo-box-base *.arrow-button {
-fx-background-color:derive(-dark,-10%); }
.combo-box-base *.arrow {
-fx-background-color:-normal; }
.combo-box *.list-view {
-fx-background-color:-normal;
-fx-text-fill:-fore-color; }
Design looks good in Scene builder but in my application, font and background color of drop down list is not changed which is little bit surprised to me. Please help me to find out what is wrong in my css.
While #James_D solution works, if you override the background color you won't see hover, filled or selected pseudo classes.
This will give you the chance to define your styling for them too:
.combo-box-popup > .list-view {
-fx-background-color: -normal; // or define other color to highlight the border
}
.combo-box-popup *.list-cell {
-fx-background: -normal;
-fx-selection-bar: -light; // filled:hover
-fx-cell-focus-inner-border: -dark; // filled:selected:hover
-fx-text-fill: -fore-color;
}
You need to apply the style to the list cells, not the list view:
.combo-box *.list-view .list-cell {
-fx-background-color:-normal;
-fx-text-fill:-fore-color; }
I am using gtk_overlay_new () to create an overlay in gtk, is there any way i can add some background color to it? so far i have not been successful in finding anything in the documentation.
Use: void gtk_widget_override_background_color();
https://developer.gnome.org/gtk3/unstable/GtkWidget.html#gtk-widget-override-background-color
In GTK4 gtk_widget_override_background_color is no longer available. The same can be achieved with CSS using a style context.
GtkStyleContext *context = gtk_widget_get_style_context(someGtkWidget);
GtkCssProvider *provider = gtk_css_provider_new();
gtk_css_provider_load_from_data (provider, ".someClass { background: rgba(255,0,0,1)}", -1); //red
gtk_style_context_add_provider (context, GTK_STYLE_PROVIDER (provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
gtk_style_context_add_class (context, "someClass");