Xfce Forum

placept

Member

Registered: 2023-11-08

Posts: 3

Draw border around an entire row in Thunar list view?

I've been spending the last couple days endlessly trying different things to find the correct CSS selector to use for drawing a border around an entire row in Thunar's list view. The goal is to have the border around the row that is selected. There should be some way I can do this because Thunar can draw an outline when the row is focused and can also draw a border when the row is a target for drag and drop. However when I try, a border is drawn around every cell in the row. How can I do this? Thank you!

Border is drawn correctly around drag and drop target:

treeview.view:drop(active) {
  border-style: solid;
  border-width: 5px;
  border-color: red;
}

Border is drawn incorrectly around selected row (border is around every cell in the row):

treeview.view:selected {
  border-style: solid;
  border-width: 5px;
  border-color: red;
}

This correctly draws an outline around whatever is focused using the keyboard. This would be acceptable for the selected row too, but I can't get it to show when I select a row by clicking on it. It seems to be only for keyboard:

.thunar :not(decoration):not(window):focus {
  background-color: black;
  outline-color: #ff0000;
}

This causes a border to be drawn around every cell in the row, but it is drawn for both selections using the keyboard and the mouse:

.thunar :not(decoration):not(window):focus {
  background-color: black;
  color: #00ff00;
  border: 2px solid #ff0000;
}

I've also tried using .row and .cell, and various different ":child" selectors

ToZ

Administrator

From: Canada

Registered: 2011-06-02

Posts: 11,485

Re: Draw border around an entire row in Thunar list view?

Hello and welcome.

What GTK theme are you using?

I can get this:

...with this:

treeview.view :selected{
  background: none;
  border-style: solid;
  border-top-width: 2px;
  border-bottom-width: 2px;
  border-top-color: red;
  border-bottom-color: red;
}

But as you can see, I haven't specified the start left and end right border. If specify that, I get them for each cell item.

---

Please remember to mark your thread [SOLVED] to make it easier for others to find
--- How To Ask For Help | FAQ | Developer Wiki  |  Community | Contribute ---

placept

Member

Registered: 2023-11-08

Posts: 3

Re: Draw border around an entire row in Thunar list view?

Hello ToZ! Really appreciate your help on here. I've been making my own theme using the gtk.css file and it's been coming along pretty well thanks to you. I am using the Adwaita theme. The problem persists even with nothing in gtk.css except for the relevant thunar block.

And yes that is the issue I am talking about. Damn, I think there really is no way to draw an actual border then since only drag and drop targets would have a valid selector for it.

As a workaround, is it possible then to have the outline appear on selection (with either mouse or keyboard) instead of focus? I think this would just involve setting the has-focus and is-focus properties to true somehow but I can't find any method that sets. Also, using the interactive debugger only lets me select the entire pane and not anything inside it. This happens for other things too and sometimes it's kinda frustrating when I have to guess. Like how I found out each row uses cells.

ToZ

Administrator

From: Canada

Registered: 2011-06-02

Posts: 11,485

Re: Draw border around an entire row in Thunar list view?

What I find helpful sometimes is to look at the Adwaita source for ideas. If you search for "treeview" at that link you'll see a breadth of options available for that widget.

As for your workaround, I'm not sure I understand the difference between "focus" and "selection", because as I understand it, every focus event is a selection.

---

Please remember to mark your thread [SOLVED] to make it easier for others to find
--- How To Ask For Help | FAQ | Developer Wiki  |  Community | Contribute ---

placept

Member

Registered: 2023-11-08

Posts: 3

Re: Draw border around an entire row in Thunar list view?

That's what I thought too. I mean, that's how it is in pretty much all the other applications. Thanks anyway, and for the link too.

CwF

Member

Registered: 2018-01-28

Posts: 305

Re: Draw border around an entire row in Thunar list view?

Don't forget hover! This lights up the row as you mouse over it, any color outline shaded

.thunar notebook treeview.view {
 border-bottom: 0.1rem  solid shade (#colors, 0.5);}
.thunar .standard-view .view:hover {
 border-top: 0.1rem  solid shade (#colors, 1.3);
 border-bottom: 0.1rem  solid shade (#colors, 1.3);}