GtkInspector CSS allows unusable code

Hi, I’m migrating code from gtk3 to gtk4.
I achieved the results I want using the GtkInspector CSS tab.
I was pleased to see great additions such as undo, redo, and remembering code from last run. This is a great tool!
However, when I save it to a file and try to load it, the are exceptions, and some attributed aren’t applied at all.
How come there is such inconsistency between the GtkInspector and the actual Gtk code?
the exception I get is: “Expected a valid selector”

I tried using a css from gtk demo with same results: succeeded with GtkInspector but fails to load the same code from a css file:
Glib::RefPtrGtk::CssProvider cssProvider = Gtk::CssProvider::create();
cssProvider->load_from_path(STYLE_FILE_NAME);
Glib::RefPtrGtk::StyleContext styleContext = _box.get_style_context();
styleContext->add_provider(cssProvider, GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

Theme parsing error: expected ‘;’ at end of block

Could this be related to this?

You will have to show us the problematic css.

This is the entire css file, the first block already causes failure

@define-color bgView rgba(5, 23, 45, 255);
@define-color bgFrame rgba(7, 46, 79, 255);
@define-color bgButton rgba(7, 61, 100, 255);
@define-color bgCombo rgba(28, 48, 70, 255);
@define-color bgSwitch rgba(60, 70, 80, 255);
@define-color fgSwitch rgba(5, 137, 16, 255);
@define-color fontColor #FFFFFF;

*{
            border: none;
}

#gridTouchPanel
{
            padding: 15px;
            padding-bottom: 45px;
            background-color: @bgFrame;
}

#gridTouchPanel > box
{
            margin: 5px;
}
            
#notebookTouchPanel > header
{
            background-color: @bgView;
            padding-left: 200px; 
}

#notebookTouchPanel > header *
{
            background-image: image(transparent);
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
}

#notebookTouchPanel > header.top > tabs > tab:checked 
{ 
            box-shadow: inset 0 -3px @fontColor;
}

#boxNotebook
{
            font: 20px Sans;
            color: @fontColor;
            background-color: @bgView;
}

#buttonManage
{
            color: @fontcolor;
            background-image: image(@bgButton);  
            font: 14px Sans;
           font-weight: bold;
            padding-right: 20px;
            padding-left: 20px;
}

#buttonManage > label
{
            background-image: image(@bgButton); 
}

#comboTouchPanel, scale
{
            font: 26px Sans;
            padding-right: 80px;
}

#comboProfile, #comboProfile > menu
{
            padding-left: 5px;
            padding-right: 5px;        
            margin-right: 1px;
            font: 20px Sans;
    background-color: @bgCombo;
}

button.combo
{  
            color: @fontColor;
            background-image: image(transparent);
            font: 26px Sans;
}

arrow
{
            color: @fontColor;
}

#boxNotebook > label , #boxHeader > label
{
            color: @fontColor;
            background-color: @bgView;
            padding-left: 10px;
            padding-right: 10px;
}

#boxHeader 
{
            background-image: image(@bgView);
            margin: 10px;
}

#boxNotebook > scale, label
{
            padding-top: 10px;
            padding-bottom: 5px;
}

scale slider 
{                                                                          
    background-image: image(transparent);   
            border-color: transparent; 
            border-style: none;                                             
    min-height: 25px; 
}

scale
{
            padding-top: 15px;
            padding-left: 10px;
    min-height: 30px;  
            border-radius: 20px; 
}

switch
{ 
            color: @fontColor;
            background-color: green;   
            margin-left: 10px;
            margin-right: 140px;
            margin-top: 5px;
            margin-bottom: 5px;
    min-height: 35px; 
}

switch > slider:focus:focus-visible
{
            color: green;   
}

switch > slider 
{
            color: @fontColor;
            background-image: image(@bgSwitch); 
}

scale trough
{
    background-image: image(@bgFrame); 
}

scale marks
{
            border-radius: 20px;   
}

Adding the code for applying the style:

Glib::RefPtr<Gtk::CssProvider> cssProvider = Gtk::CssProvider::create();
g_signal_connect (G_OBJECT(cssProvider->gobj()), "parsing-error", G_CALLBACK (parsing_error), NULL);
cssProvider->load_from_path(STYLE_FILE_NAME);
Glib::RefPtr<Gtk::StyleContext> styleContext = _box.get_style_context();
styleContext->add_provider(cssProvider, GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

I loaded Adwaita.css using load_from_path(), there were no errors but the theme was not applied.

The following code loads “Adwaita” theme, it also has no affect on the app looks:
Glib::RefPtrGtk::CssProvider cssProvider = Gtk::CssProvider::create();
g_signal_connect (G_OBJECT(cssProvider->gobj()), “parsing-error”, G_CALLBACK (parsing_error), NULL);
cssProvider->load_named(“Adwaita”, “dark”);
Glib::RefPtrGtk::StyleContext styleContext = _box.get_style_context();
styleContext->add_provider(cssProvider, GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
_box.show();

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.