After I read everything what I found about CSS on its Documentation, I realized that I still cannot figure out how to access the scale of a ScaleButton.
I have a Demo program which includes two widgets:
GtkScale
GtkScaleButton
I need to style only the GtkScaleButton and even if I set a name for both with:
gtk_widget_set_name()
Still no succed.
Here is a Picture of the program:
And here is the Code:
#include <gtk/gtk.h>
void load_css ( void );
GtkWidget *createWindow ( const gint width, const gint height, const gchar *const title );
int main ( void )
{
GtkWidget *window;
GtkWidget *grid;
GtkAdjustment *adjustment;
GtkWidget *scale;
GtkWidget *scaleButton;
/// *** Initialize GTK and load CSS
gtk_init ( NULL, NULL );
load_css();
/// *** Create a Window
window = createWindow ( 300, 300, "ScaleButton" );
/// *** Create a Grid
grid = gtk_grid_new();
gtk_container_add ( GTK_CONTAINER ( window ), grid );
/// *** Create an Adjustment
adjustment = gtk_adjustment_new ( 0, 0, 10, 1, 2, 0 );
/// *** Create a Scale
scale = gtk_scale_new ( GTK_ORIENTATION_HORIZONTAL, adjustment );
gtk_widget_set_name ( scale, "myScale" );
gtk_widget_set_size_request ( scale, 150, 40 );
g_object_set ( scale, "margin", 25, NULL );
/// *** Create a ScaleButton
scaleButton = gtk_scale_button_new ( GTK_ICON_SIZE_DIALOG, 0, 5, 1, NULL );
gtk_widget_set_name ( scaleButton, "myScaleButton" );
gtk_widget_set_size_request ( scaleButton, 50, 50 );
g_object_set ( scaleButton, "margin", 25, NULL );
/// *** attach...
gtk_grid_attach ( GTK_GRID ( grid ), scale, 0, 0, 1, 1 );
gtk_grid_attach ( GTK_GRID ( grid ), scaleButton, 0, 1, 1, 1 );
/// ***
gtk_widget_show_all ( window );
gtk_main ();
}
void load_css ( void )
{
GtkCssProvider *provider;
GdkDisplay *display;
GdkScreen *screen;
/// ***
const gchar *css_style_file = "style.css";
GFile *css_fp = g_file_new_for_path ( css_style_file );
GError *error = 0;
/// ***
provider = gtk_css_provider_new ();
display = gdk_display_get_default ();
screen = gdk_display_get_default_screen ( display );
/// ***
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 );
/// ***
}
GtkWidget *createWindow ( const gint width, const gint height, const gchar *const title )
{
GtkWidget *window;
window = gtk_window_new ( GTK_WINDOW_TOPLEVEL );
gtk_window_set_title ( GTK_WINDOW ( window ), title );
g_signal_connect ( window, "destroy", gtk_main_quit, window );
gtk_window_set_default_size ( GTK_WINDOW ( window ), width, height );
gtk_container_set_border_width ( GTK_CONTAINER ( window ), 25 );
return window;
}
And the CSS File:
window
{
background-color: orange;
}
#myScaleButton
{
background-color: red;
border: 2px solid black;
}
#myScaleButton:hover
{
background-color: green;
border: 2px solid black;
}
scale
{
background-color: black;
color: yellow;
}
scale slider
{
background-color: red;
color: yellow;
}
scale > contents > trough
{
background-color: blue;
}
scale > contents > trough > highlight
{
background-color: red;
}
.flat
{
background-color: magenta;
color: yellow;
}
.image-button
{
background-color: yellow;
color: red;
}
As you can see I also marked in the Picture :
.flat
.image-button
Both has same effect on the scale buttons ( + and - Buttons) and I am confused about those as well.
I need to know how to style only the scale of the GtkScaleButton and leave the scale unchanged.