Xfce Forum

advice1010

Member

Registered: 2023-02-19

Posts: 103

Customizing xfwm-tabwin using css

I have some questions about customizing the xfwm-tabwin using css if anyone is interested.
I am using this in a list mode
icon | window button name
icon | window button name
icon | window button name

1.) Size of Window
When looking at other themes examples I do not really see anything about the windows size in general.
-How to change the default width used?
-Can the width be set to adjust automatically based on the window buttons title, with maybe a maximum width to accept before truncating... the name?
-The height appears to be based on the window buttons themselves so probably no need to adjust overall but is there a setting for the minimum used, for example if only one window open it only shows a one item height window, can this be set to be a taller minimum height, for example double item height (window item + space under it same height)?  I know not much value to one item but might want to set a minimum height used for 2-3 items just to give this window a little more size to see it is opened.

2.) Selection color
I cannot test right now but might be "xfwm-tabwin button"?
-How to change the selection cursor (rectangle background) color?
-How to change the selection cursor (rectangle background) size, currently does not go all the way to the edges of the window, there maybe is some padding around it?
-How to change the font formatting for example use a bold font for the selection cursors text
-How to change the font color for this selection cursors font

3.) Padding
-How to add space between the icons and the names?
-Can you change the horizontal "y" padding between items?
-Does this window just use for example the padding 12px number at the top in general for all padding in the window or can you get specific where to adjust the padding.
-Wasn't sure if this could also be the padding I mentioned with the selection cursor rectangle width.

Not using this specifically but here is an example I found online for Greybird themes use, just to maybe help out someone willing to answer this question, to point out some code answers.  (The theme I am using does not show this information so I am still trying to find it)

#xfwm-tabwin {
  padding: 12px;
  background-image: none;
  background-color: rgba(0, 0, 0, 0.8);
  color: shade(#ffffff, 0.65);
  text-shadow: 0px 1px rgba(0, 0, 0, 0.8);
  border-radius: 12px;
  /* Set the application icon- and preview-size to 64px */
  -XfwmTabwinWidget-icon-size: 64px;
  -XfwmTabwinWidget-preview-size: 64px; }
  #xfwm-tabwin button {
    background-image: none;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0px 1px rgba(0, 0, 0, 0.8);
    border: none;
    border-radius: 6px;
    box-shadow: none; }
    #xfwm-tabwin button:active, #xfwm-tabwin button:checked, #xfwm-tabwin button:active:hover, #xfwm-tabwin button:checked:hover {
      background: rgba(206, 206, 206, 0.3); }
    #xfwm-tabwin button:hover {
      background: #22558b;
      transition-duration: 50ms; }
  #xfwm-tabwin .tabwin-app-grid button {
    min-width: 96px;
    min-height: 96px; }

Thank You for any help provided

Last edited by advice1010 (2024-10-12 16:49:38)

ToZ

Administrator

From: Canada

Registered: 2011-06-02

Posts: 11,417

Re: Customizing xfwm-tabwin using css

1.) Size of Window
-How to change the default width used?
I don't believe you can. It looks like its hard-coded to the width of the smallest monitor / 2.
-Can the width be set to adjust automatically based on the window buttons title, with maybe a maximum width to accept before truncating... the name?
-The height appears to be based on the window buttons themselves so probably no need to adjust overall but is there a setting for the minimum used, for example if only one window open it only shows a one item height window, can this be set to be a taller minimum height, for example double item height (window item + space under it same height)?  I know not much value to one item but might want to set a minimum height used for 2-3 items just to give this window a little more size to see it is opened.

I don't believe any of these can be changed. All of the calculations for these sizes are hard-coded.

2.) Selection color
I cannot test right now but might be "xfwm-tabwin button"?
-How to change the selection cursor (rectangle background) color?
-How to change the selection cursor (rectangle background) size, currently does not go all the way to the edges of the window, there maybe is some padding around it?
-How to change the font formatting for example use a bold font for the selection cursors text
-How to change the font color for this selection cursors font

Yes. You would need to use the pseudo classes :active, :checked. :hover, and combinations of. You can see it in the sample css you provided.

Selected rectangle background color:

#xfwm-tabwin button:checked { background-color: red }

Selected rectangle background to edge - best you can get:

#xfwm-tabwin { padding: 0 }

Bold font & font color:

#xfwm-tabwin button:checked label { font-weight: 900; color: yellow; }

3.) Padding
-How to add space between the icons and the names?
-Can you change the horizontal "y" padding between items?
-Does this window just use for example the padding 12px number at the top in general for all padding in the window or can you get specific where to adjust the padding.
-Wasn't sure if this could also be the padding I mentioned with the selection cursor rectangle width.

Horizontal padding by targeting left/right padding of label elements:

#xfwm-tabwin button label { padding-left: 100px;}

---

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 ---