icons of opened programs are too small

Tabespe · 2020-08-05 07:39:15

When we open a program, then we get an icon of this program in the taskbar.

On my taskbar this icon is smaller then it is as start icon in the task list:
https://www.bilder-upload.eu/bild-96b51 … 6.png.html

I would like, that the right icon is as big as the left icon (starter icon).

The content of my "gtk.css":

************************************************************************************
.tasklist .toggle {
color: black;
border-radius: 3px; }

.xfce4-panel frame .horizontal {
padding-bottom: 0px;
padding-top: 0px;
padding-left: 4px;
padding-right: 0px;
}
.xfce4-panel frame .vertical {
padding-bottom: 4px;
padding-top: 0px;
padding-left: 0px;
padding-right: 4px;
}

@import url("whisker-tweak.css");

@import url("no-ellipse-desktop-filenames.css");

.tasklist image.minimized { opacity: 1.0 }
.tasklist button { background-image: none; background-color: #ffdfdf; border-color: #ffdfdf; }
.tasklist button:checked { background-image: none; background-color: #ff0000; border-color: #ff0000; }

***************************************************************************************

Thank you.

Last edited by Tabespe (2020-08-05 07:40:04)

ToZ · 2020-08-05 23:33:45

What row size (height) is your panel?
Do you have Panel Properties > Appearance > Icon Size Adjust automatically enabled?
If not, what size is it set to.

If you enable the Icon size auto-adjust and set the panel height to either 27 or 36, are the icons the same size?

Tabespe · 2020-08-06 11:39:02

Thank you for asking.

What row size (height) is your panel?
It is 29 pixel

Do you have Panel Properties > Appearance > Icon Size Adjust automatically enabled?
Yes, it is auto.

If you enable the Icon size auto-adjust and set the panel height to either 27 or 36, are the icons the same size?
When I go to 46, then the size of the starter icons in the starter icon area become bigger. Also the icons from the opened programs in the opened programs area become bigger. Nevertheless the icons of the opened programs are always a bit smaller than the starter icons.
When I go to 46, then the icons from the notification area do not become bigger. But this is OK.

ToZ · 2020-08-06 13:49:17

If you try to upscale the tasklist icons, you will get blurriness:

.tasklist image { -gtk-icon-transform: scale(1.5); }

...and its a matter of preference whether this is good enough.

The other option is to downscale the lancher icons:

#launcher-arrow image { -gtk-icon-transform: scale(0.5); }

In both cases, change the scale value to suit.

Tabespe · 2020-08-06 14:28:40

Thank you. Yes with ...
.tasklist image { -gtk-icon-transform: scale(1.5); }
it is blurry.

Does this simply mean, that the "opened program" symbols are in fact smaller icons by design than the "starter icons" of the same program?

ToZ · 2020-08-06 14:50:38

Tabespe wrote:

Does this simply mean, that the "opened program" symbols are in fact smaller icons by design than the "starter icons" of the same program?

My guess is that two different routines/processes are being used to get the icon. On my system, the icon sizes match up at 20-27 and 36-41 panel row sizes.

Tabespe · 2020-08-06 15:33:59

Thank you again.

- I now have set symbol size from "auto" to "32 px". (As soon as I go down to 31 px, the size of the "open program icons" turns a step smaller.)
- And I have set the panel row size from 29 to 34. (If I would keep it at 29 px, then the "open program icons" overlap. So 34 is a compromise.)

Result: The symbols have now the same size.
But the "open program icons" overlap a bit.

Question:
How can I modify the coloured background in the following lines in the "gtk.css"-file, into a transparent background?:

****************************************************************************************************************************
.tasklist button { background-image: none; background-color: #ffdfdf; border-color: #ffdfdf; }
.tasklist button:checked { background-image: none; background-color: #ff0000; border-color: #ff0000; }
****************************************************************************************************************************

I suppose that with a transparent background the overlap would be less noticeable.
Is there a code for the colour "transparent".

ToZ · 2020-08-06 15:40:37

Yes, it is "transparent". Just replace the existing colour codes with the word "transparent" (no quotes).

Tabespe · 2020-08-06 16:07:48

Great. This way I was able to reduce the panel row size back to 29px.

But what still bothers me is the grey frame we have around the icon of the program that is active:
https://www.bilder-upload.eu/bild-86256 … 2.png.html

As the icons are overlapping, the frame is not at the right position and does not fit to the icon. So I would like to make this frame transparent too. Is this also possible?

ToZ · 2020-08-06 18:14:31

Did you make border colour transparent as well?

Tabespe · 2020-08-06 18:17:35

Yes.

This are the settings for post #9:
.tasklist button { background-image: none; background-color: #transparent; border-color: #transparent; }
.tasklist button:checked { background-image: none; background-color: #transparent; border-color: #transparent; }

Last edited by Tabespe (2020-08-06 18:17:59)

ToZ · 2020-08-06 22:21:43

The # shouldn't be there. Try:

.tasklist button { background-image: none; background-color: transparent; border-color: transparent; }
.tasklist button:checked { background-image: none; background-color: transparent; border-color: transparent; }

If not difference, try border width at 0:

.tasklist button { background-image: none; background-color: transparent; border-color: transparent; border-width: 0; }
.tasklist button:checked { background-image: none; background-color: transparent; border-color: transparent; border-width: 0; }

Tabespe · 2020-08-07 08:14:54

Yes, this works quite good.

(In addition, I have added a blue background for the checked icon.)

.tasklist image { -gtk-icon-transform: scale(0.78); }
#launcher-arrow image { -gtk-icon-transform: scale(0.85); }

.tasklist button { background-image: none; background-color: transparent; border-color: transparent; border-width: 0; }
.tasklist button:checked { background-image: none; background-color: blue; border-color: transparent; border-width: 0; }

But maybe there is a possibility to move the background a few pixel from left to right?
The background is too much left. As you can see:
https://www.bilder-upload.eu/bild-56109 … 3.png.html
https://www.bilder-upload.eu/bild-c8030 … 8.png.html

Last edited by Tabespe (2020-08-07 08:46:43)

ToZ · 2020-08-07 11:18:31

Unfortunately, I don't think so. The blue is the actual position of the button widget. You can't move it over because the next button widget is there.

Tabespe · 2020-08-07 11:35:46

OK.

This is a question about the "starter icons":
As I have set symbol size from auto to 32px, the distance between the starter icons are fairly big.
Is there a possibility to move the starter icons together, without changing the size of this icons or the height of the panel?

Xfce Forum

Sub domains

#1 2020-08-05 07:39:15

icons of opened programs are too small

#2 2020-08-05 23:33:45

Re: icons of opened programs are too small

#3 2020-08-06 11:39:02

Re: icons of opened programs are too small

#4 2020-08-06 13:49:17

Re: icons of opened programs are too small

#5 2020-08-06 14:28:40

Re: icons of opened programs are too small

#6 2020-08-06 14:50:38

Re: icons of opened programs are too small

#7 2020-08-06 15:33:59

Re: icons of opened programs are too small

#8 2020-08-06 15:40:37

Re: icons of opened programs are too small

#9 2020-08-06 16:07:48

Re: icons of opened programs are too small

#10 2020-08-06 18:14:31

Re: icons of opened programs are too small

#11 2020-08-06 18:17:35

Re: icons of opened programs are too small

#12 2020-08-06 22:21:43

Re: icons of opened programs are too small

#13 2020-08-07 08:14:54

Re: icons of opened programs are too small

#14 2020-08-07 11:18:31

Re: icons of opened programs are too small

#15 2020-08-07 11:35:46

Re: icons of opened programs are too small

Board footer