6

I'm here to ask you how to change background of a treeview, I tried that

ttk.Style().configure("Treeview", background="#383838")

It's work perfectly just for the cell, but the rest of the Treeview stay white.

I tried to change the background of the window, the frame too, but it does not work.

So, how to do that, i'm sure that you know.

Bye and thanks in advance :)

The code

from tkinter import *
from tkinter import ttk

p=Tk()

separator = PanedWindow(p,bd=0,bg="#202322",sashwidth=2)

separator.pack(fill=BOTH, expand=1)

_frame = Frame(p,bg="#383838")

t=ttk.Treeview(_frame)

t["columns"]=("first","second")
t.column("first",anchor="center" )
t.column("second")
t.heading("first",text="first column")
t.heading("second",text="second column")
t.insert("",0,"dir1",text="directory 1")
t.insert("dir1","end","dir 1",text="file 1 1",values=("file 1 A","file 1 B"))
id=t.insert("","end","dir2",text="directory 2")
t.insert("dir2","end",text="dir 2",values=("file 2 A","file 2 B"))
t.insert(id,"end",text="dir 3",values=("val 1 ","val 2"))
t.insert("",0,text="first line",values=("first line 1","first line 2"))
t.tag_configure("ttk",foreground="black")

ysb = ttk.Scrollbar(orient=VERTICAL, command= t.yview)
xsb = ttk.Scrollbar(orient=HORIZONTAL, command= t.xview)
t['yscroll'] = ysb.set
t['xscroll'] = xsb.set

ttk.Style().configure("Treeview", background="#383838",foreground="white")
p.configure(background='black')

t.grid(in_=_frame, row=0, column=0, sticky=NSEW)
ysb.grid(in_=_frame, row=0, column=1, sticky=NS)
xsb.grid(in_=_frame, row=1, column=0, sticky=EW)
_frame.rowconfigure(0, weight=1)
_frame.columnconfigure(0, weight=1)

separator.add(_frame)

w = Text(separator)
separator.add(w)

p.mainloop()
msw
  • 42,753
  • 9
  • 87
  • 112
user2650746
  • 61
  • 1
  • 1
  • 3
  • 1
    You said "I tried to change the background of the window, the frame too, but it does not work". Show us the code so that we might be able to help you. – msw Aug 04 '13 at 16:41
  • 1
    Yes sorry, the "styling code" :_frame = Frame(p,bg="#383838") p.configure(background='black') – user2650746 Aug 04 '13 at 17:20

3 Answers3

3

The missing option is fieldbackground which I only found by accident in an example. So if you add it to the style declaration

ttk.Style().configure("Treeview", background="#383838", 
 foreground="white", fieldbackground="red")

it works as you'd like. I used red to make the change very visible; obviously you'll want to change that for greater color harmony.

msw
  • 42,753
  • 9
  • 87
  • 112
  • Thank you for your answer but that doesn't work: http://image.noelshack.com/fichiers/2013/32/1375729684-capture.png As you can see, it's still white, in addition I see no difference with or without "fieldbackground". It's strange :( Why that doesn't work ? I precise that I want to change the white background between the begin of the tree view and the horizontal scroll bar. – user2650746 Aug 05 '13 at 19:17
  • Sorry I can't help you. I did test it with your code on my installation and it was red as red gets. Dunno. – msw Aug 06 '13 at 02:54
  • So, the issue is caused by python ? Anybody could test this code, and say to me if he works ? I use the last version of python (3.3.2), and i running on Windows 8. It doesn't work on Windows 7 too. What's your version ? – user2650746 Aug 07 '13 at 21:11
  • I tested on pure Python 3.3.1 on Linux. I'm not terribly surprised that it doesn't work under Windows as Tkinter is a relatively old module and may not have as much testing for an obscure feature on a secondary platform. – msw Aug 07 '13 at 21:43
  • Maybe a more recent version exists (beta) ? Else I should to use Qt ? – user2650746 Aug 08 '13 at 16:00
  • 2
    `tk` was the only game around when it was introduced and its design principles have inspired Qt, GTK, etc. If you are just starting on a project that does not have legacy attachment to tkinter I'd suggest Qt (even though it makes me a little sad to say that). If this is for business use, be aware that Tkinter and Qt have different licenses (BSD and LGPL respectively); I'm not qualified to interpret the differences. – msw Aug 08 '13 at 17:46
1
if flag == False:
    tree.insert('', 'end', values=(valx[0], valx[1], valx[2], valx[3]),tags=('odd',))
else:
    tree.insert('', 'end', values=(valx[0], valx[1], valx[2], valx[3]),tags=('even',))

tree.tag_configure('odd', background='#008001')
tree.tag_configure('even', background='#FFFF00')
yudhiesh
  • 6,383
  • 3
  • 16
  • 49
Arnab Das
  • 149
  • 3
  • 3
0

This is a possible solution if the suggested answer by @msw does not work for you.

For folks, who are not able to see any changes in terms of coloring the Treeview even after configuring the Style and/or tags, Please refer this video: Youtube link

Easy Fix: Found from @Durai comment on this article

Add this line to edit the map configuration in your code:

# set backgound and foreground color when selected
style.map('Treeview', background=[('selected', '#BFBFBF'), foreground=[('selected', 'black')])

Another Hardcode way:

Theme files for ttk are present in C:/< Python installation folder>/tcl/tk8.6/ttk/

vistaTheme.tcl is the default theme that ttk uses.

You need to change/add the below code to the theme file under Treeview(end of file) in order for it to work:

ttk::style map Treeview \
        -background {disabled $colors(-frame)\
                        selected lightblue\
                        selected $colors(-selectbg)} \
        -foreground {disabled $colors(-disabledfg)\
                        selected black\
                        selected $colors(-selectfg)}

In my case, I had these lines missing from the theme file so I added them below Treeview and then ran my code, I can finally see colors on my Treeview

Parvez Nadvi
  • 21
  • 2