Re: [ruby-gnome2-devel-en] Frame border style

[cedlemo <ce...@gm...>]

Hey Detlef Reichl,

Good news I find out why it does this.

First the outline that you see is in fact the decoration of the frame. 
If you add a label to the frame, it is more obvious.


     frame = Gtk::Frame.new("frame")


FYI it should be better (IMO) to use a Gtk::box instead of
using a frame without label and hiding the decoration


The solution first and the explications later:

Here is the script with a Css that hide the decoration of the frame

#!/usr/bin/env ruby
require "gtk3"

provider = Gtk::CssProvider.new

css = <<-CSS
@define-color frame_border_tabs rgb(70%, 70%, 70%);
@define-color transparent rgba(0, 0, 0, 0.0);

frame#tabs {
      border-style: solid;
      border-color: @frame_border_tabs @transparent @frame_border_tabs 
@frame_border_tabs;
      border-width: 0.2em 0.32em 0.05em 0.1em;
      border-radius: 1.2em 0.7em 0.7em 1.2em;
      /*padding: 0.25em 0.25em 0.25em 0.25em;*/
}

frame border {
   border-style: none;
   border-color: @transparent @transparent @transparent @transparent;
   box-shadow: none;
   border-width: 10px;
   border-radius: 0px;
   margin: 0px;
   outline-color: @transparent;

}

CSS

provider.load :data => css

screen = Gdk::Display.default.default_screen
Gtk::StyleContext.add_provider_for_screen(screen,
                                            provider,

Gtk::StyleProvider::PRIORITY_USER)

window = Gtk::Window.new
frame = Gtk::Frame.new("frame")
window << frame
label = Gtk::Label.new 'Content'
frame << label

frame.name = 'tabs'
frame.style_context.add_provider provider, GLib::MAXUINT

window.show_all
window.signal_connect "destroy" do
    Gtk.main_quit
end
Gtk.main

The important part of the css is the frame border selector.


look here https://developer.gnome.org/gtk3/stable/GtkFrame.html

they say :


      CSS nodes

frame
├── border

├── <labelwidget>

╰── <child>


GtkFrame has a main CSS node with name frame and a subnode with name 
border. The border node is used to render the visible border. The style 
class .flat can appear with the main node.


For real example here is the arc theme 
https://github.com/horst3180/arc-theme

frame > border, .frame {
   margin: 0;
   padding: 0;
   border-radius: 0;
   border: 1px solid #dcdfe3;
   }
  frame > border.flat, .frame.flat { border-style: none; }

Here is another example from the Zukitre theme 
https://github.com/lassekongo83/zuki-themes

/********** * Frames * **********/
frame > border, .frame {
   box-shadow: none;
   margin: 0;
   padding: 0;
   border-radius: 0;
   border: 1px solid #b0b0b0;
  }
frame > border.flat, .frame.flat {
   border-style: none;
  }
frame > border:backdrop, .frame:backdrop { border-color: #b4b4b4; }

Those new selectors come with Gtk 3.20.

I hope this will help you. Regards

cedlemo

https://github.com/cedlemo