Thunar: edit/change tabs close buttons with CSS

D.dave · 2021-03-01 09:32:03

Hi, first of all let's see how the close buttons on tabs appears on Gedit (as well on Xfce Terminal)

They are clearly visible, in terms of dimension and also by the mouse hovering.

In Thunar, instead, they are very small and there isn't the color change with mouse hovering:

What I have to insert in ~/.config/gtk-3.0/gtk.css to have the same appearance, to have these buttons bigger and red on mouse hovering?
And maybe I'd like to have them more clear instead of gray (so, on Gedit and Thunar and on every other aplication which have these buttons)

Thanks.

Last edited by D.dave (2021-03-01 09:33:12)

ToZ · 2021-03-01 11:39:41

Which GTK (Appearance) theme are you using?

Maybe try something like:

.thunar .reorderable-page image { padding: 0;  }
.thunar .reorderable-page:hover image { color: rgba(255,0,0,1.0); }

D.dave · 2021-03-01 11:54:24

I'm using Sweet-Dark, edited by myself to have more darker and different colors, you can find it here:
https://pastebin.com/tzUQE2XY

I tried

.thunar .reorderable-page image { padding: 0;  }
.thunar .reorderable-page:hover image { color: rgba(255,0,0,1.0); }

But doesn't have any effect; maybe I have something to change in the theme's CSS?

ToZ · 2021-03-01 23:44:40

Hmmm. This is strange.

.thunar .reorderable-page:hover label {color: rgba(237, 37, 78, 0.9);}

...will change the color of the label on hover to red.

.thunar .reorderable-page:hover image {background-color: rgba(237, 37, 78, 0.9);}

...changes the button background on hover.

BUT:

.thunar .reorderable-page:hover image {color: rgba(237, 37, 78, 0.9);}

...doesn't change the close button color even though the inspector is showing that it should.

Not sure why that is happening.

D.dave · 2021-03-02 01:08:46

Well, I booted a ISO of the distro which I'm using (Manjaro) in VirtualBox, and there these buttons are OK; are bigger; so something could be broken in my installation; I tried to move the folder ~/.config/Thunar and restart Thunar but without luck...
What could I check?

EDIT:
I also made another user and also there, these buttons are ok...
So, for my user, I tried to move the entire ~/.config folder, but I only faced a mess :-D
Luckily I have been able to restore my settings, quickly, but the thunar's buttons are still small.

Last edited by D.dave (2021-03-02 01:40:37)

ToZ · 2021-03-02 12:04:49

What was in your ~/.confg/gtk-3.0/gtk.css file? Was it the full content of what you posted above?

D.dave · 2021-03-02 12:39:32

Full content of my ~/.config/gtk-3.0/gtk.css

.thunar .reorderable-page image { padding: 0;  }
.thunar .reorderable-page:hover image { color: rgba(255,0,0,1.0); }

VteTerminal, vte-terminal {
    /*padding: 10px;*/
	padding-top: 10px;
	padding-left: 12px;
}

undershoot.top, undershoot.right, undershoot.bottom, undershoot.left { background-image: none; }

window.ssd headerbar.titlebar {
    padding-top: 1px;
    padding-bottom: 1px;
    min-height: 0;
}

window.ssd headerbar.titlebar button.titlebutton {
    padding-top: 1px;
    padding-bottom: 1px;
    min-height: 0;
}

headerbar {
    min-height: 38px;
    padding-left: 2px; /* same as childrens vertical margins for nicer proportions */
    padding-right: 2px;
}

headerbar entry,
headerbar spinbutton,
headerbar button,
headerbar separator {
    margin-top: 2px; /* same as headerbar side padding for nicer proportions */
    margin-bottom: 2px;
}

.default-decoration {
    min-height: 0; /* let the entry and button drive the titlebar size */ 
    padding: 2px
}

.default-decoration .titlebutton {
    min-height: 22px; /* tweak these two props to reduce button size */
    min-width: 22px;
}

.window-frame, .window-frame:backdrop {
   box-shadow: 0 0 0 black;
   border-style: none;
   margin: 0;
   border-radius: 0;
}
.titlebar { border-radius: 0; }
   window.background.csd decoration { box-shadow: none; margin: 0;}

decoration:backdrop {
  box-shadow: 0 0 0 black;
}

/* edit panel items, find them by using xfconf-query -c xfce4-panel -p /plugins -lv */


#launcher-14* /* Disk Unmounter*/
{
    -gtk-icon-transform: scale(0.49);
    padding: 0 0px;
}

#launcher-11* /* Skippy*/
{
    -gtk-icon-transform: scale(0.70);
    padding: 0 0px;
}

#launcher-2* /* Launcher Conky */
{
    -gtk-icon-transform: scale(0.54);
    padding: 0 0px;
}

#launcher-8* /* Launcher Sleep*/
{
    -gtk-icon-transform: scale(0.56);
    padding: 0 0px;
}

#xfce4-power-manager-plugin image {
	-gtk-icon-theme: 'Papirus-Dark';
	-gtk-icon-transform: scale(0.53);
	background-color: transparent;
}

#launcher-16* /* Launcher DND do not disturb */
{
    -gtk-icon-transform: scale(0.60);
    padding: 0 0px;
}

.tasklist* { /* icone applicazioni */ 
    -gtk-icon-transform: scale(0.80);
}

#showdesktop-7* /* show desktop icon - original 0.88 */
{
    -gtk-icon-transform: scale(0.85);
}

#whiskermenu-4* /* Whisker Menu icon */
{
    -gtk-icon-transform: scale(0.50);
}

/*Desktop Icon Grid*/
* {
  -XfdesktopIconView-ellipsize-icon-labels:1;
  -XfdesktopIconView-cell-spacing:1;
  -XfdesktopIconView-cell-padding:1;
  }

/*
.xfce4-panel {
	border-radius: 15px;
}

*/

#whiskermenu-window entry { 
 	background: transparent;
}

#whiskermenu-window treeview {
	background: transparent;
}

#whiskermenu-window>frame>stack>box>box * { 
	background: transparent;

}

/* search entry box */
#whiskermenu-window>frame>stack>box>box>entry {
background: #232323;
border-color: #ff9800;
border-radius: 0;
border-width: 2px;
}

/* transparent grip image - also makes the name transparent - they are tied together */
#whiskermenu-window {
color: transparent;
background-color: #181b28;

}


#whiskermenu-window scrolledwindow.frame treeview:hover, #whiskermenu-window scrolledwindow.frame treeview:active, #whiskermenu-window scrolledwindow.frame treeview:selected {
      background-color: transparent;
      color: #E84E00; 
}
      
#whiskermenu-window button:hover {
	background-color: transparent;
	color: #E84E00;
}

.xfce4-panel {
  -XfcePanelWindow-popup-delay: 0;
  -XfcePanelWindow-popdown-delay: 0;
}

#whiskermenu-window button {
  background-color: transparent;
  border: none;
  border-radius: 0;
  font-weight: normal;
  padding: 2px;
  margin: 1px 0px; }

#whiskermenu-window button:hover, #whiskermenu-window button:checked {
    /*edited by me*/
    /*background-color: #144dff; }*/
    background-color: transparent; }

/* smaller toolbar widgets and area */
#whiskermenu-window box>box>button { padding-left: 10px; padding-right: 10px; }

#whiskermenu-window .frame { 
border: 0px; 
}

/* global text boxes */
entry {
    background: #232323;
    border-color: #0151c7;
    border-radius: 0;
    border-width: 1px;
}

/*********
 * gedit *
 *********/
/* Only normal state is handle */
.open-document-selector-name-label {
  color: #00B1EE;
  font-weight: bold; }

/* Only normal state is handle */
.open-document-selector-path-label {
  color: #A2AEB2;
  font-size: 15px; }

Xfce Forum

Sub domains

#1 2021-03-01 09:32:03

Thunar: edit/change tabs close buttons with CSS

#2 2021-03-01 11:39:41

Re: Thunar: edit/change tabs close buttons with CSS

#3 2021-03-01 11:54:24

Re: Thunar: edit/change tabs close buttons with CSS

#4 2021-03-01 23:44:40

Re: Thunar: edit/change tabs close buttons with CSS

#5 2021-03-02 01:08:46

Re: Thunar: edit/change tabs close buttons with CSS

#6 2021-03-02 12:04:49

Re: Thunar: edit/change tabs close buttons with CSS

#7 2021-03-02 12:39:32

Re: Thunar: edit/change tabs close buttons with CSS

Board footer