GtkEventBox or another way to change some widget background color

[loicspace]

Hiiii.

Hi!

We are building a GUI with Gtk.jl and we are using Notebook widgets to organize pages, and we have a couple nested Notebooks in there. To help track which tab/page is active, I would like to color the background of the notebook pages with different colors, or at least the border, or at the very least the font of the label of the page.

I’ve had some very limited success, drawing inspiration from this to change the font color, but one issue that changing the font color for the Notebook page label seems to also change the color of the font of its children, even doing something like:

using Gtk, Gtk.ShortNames

win = Window("Test")
lbl = Label("Some text")
a = GtkFrame("test")
push!(win, a)
push!(a, lbl)
sc = Gtk.GAccessor.style_context(lbl)
sc1 = Gtk.GAccessor.style_context(a) 
pr = CssProviderLeaf(data="label {color:red;}")
pr1 = CssProviderLeaf(data="frame {color:green;}")
push!(sc1, StyleProvider(pr1), 600)
push!(sc, StyleProvider(pr), 600)
showall(win)

but I'm pbly missing something. For changing the background color, as far as I understand, it may not be possible for some widget types who do not own their own window, which apparently can be remedied by adding them to a GtkEventBox, at least in Python, but I didn’t find an equivalent in Gtk.jl. I might be missing something here, too…

Any thoughts? I also posted on Discourse about this problem of mine. Thanks, Loic

[Kelvyn88]

Any solution?? I also want to change color for different widgets.

Thanks

[lobingera]

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

[Kelvyn88]

@loicspace

Please check the following code.

1. Julia code (create a .jl file)

using Gtk.ShortNames

style_file = joinpath(dirname(Base.source_path()), "style.css")
provider = CssProviderLeaf(filename = style_file)

w = Window("CSS Test")

nb = Notebook()
screen = Gtk.GAccessor.style_context(nb)
push!(screen, StyleProvider(provider), 600)

f1 = Frame()
set_gtk_property!(f1, :name, "frame1")
screen = Gtk.GAccessor.style_context(f1)
push!(screen, StyleProvider(provider), 600)

f2 = Frame()
set_gtk_property!(f2, :name, "frame2")
screen = Gtk.GAccessor.style_context(f2)
push!(screen, StyleProvider(provider), 600)

f3 = Frame()
f4 = Frame()

push!(nb, f1, "Tab 1")
push!(nb, f2, "Tab 2")
push!(nb, f3, "Tab 3")
push!(nb, f4, "Tab 4")

push!(w, nb)

Gtk.showall(w)

2. CSS file (save it as .css in the same folder)

notebook header tabs tab {
	font-size: 15px;
	font-weight: bold;
	color: white;
	background: #614185;
	border-width: 1px;
	border-style: solid;
	border-color: black;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}

notebook header tabs tab:checked{
	font-size: 15px;
	font-weight: bold;
	color: white;
	background: #7FB8CA;
	border-width: 1px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}

notebook header tabs tab:hover{
	font-size: 15px;
	font-weight: bold;
	color: white;
	background-color: #E67315;
	border-width: 1px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}

frame#frame1 {
	border-color: gray;
	background-color: green;
	border-width: 1px;
	border-style: solid;
}

frame#frame2 {
	border-color: gray;
	background-color: red;
	border-width: 1px;
	border-style: solid;
}

[itsdfish]

Hello,

@Kelvyn88, I've been struggling to change the color of a button based on the code above. As a simple example, the following code changes the color of a label:

using Gtk, Gtk.ShortNames

win = Window("Test")

label = Label("Some text")

sc = Gtk.GAccessor.style_context(label)

pr = CssProviderLeaf(data="#blue_text {color:blue;}")

push!(sc, StyleProvider(pr), 600)

set_gtk_property!(label, :name, "blue_text")

push!(win, label)

showall(win)

However, it does not work for buttons for some reason. It almost seems like a bug. Am I doing something incorrectly?

using Gtk, Gtk.ShortNames

w = Window("")

button = GtkButton("")

sc = Gtk.GAccessor.style_context(button)

pr = CssProviderLeaf(data="#green_button {color:green;}")

push!(sc, StyleProvider(pr), 600)

set_gtk_property!(button, :name, "green_button")

push!(w, button)

Gtk.showall(w)

[StefanMathis]

Do you want to change the background color? Your problem is that "color" affects the button text, not the button background. Your code is working if you use "background" instead:

using Gtk, Gtk.ShortNames

w = Window("")

button = GtkButton("")

sc = Gtk.GAccessor.style_context(button)

pr = CssProviderLeaf(data="#green_button {background:green;}")

push!(sc, StyleProvider(pr), 600)

set_gtk_property!(button, :name, "green_button")

push!(w, button)

Gtk.showall(w)

[itsdfish]

Thank you. That works. I eventually found the answer but forgot to report back.