XFCE panel - problem with changing tasklist icon size

MartinKnayt · 2020-05-09 06:19:35

Good morning, I'm trying to make complete xfce overhaul and one thing that I can't achieve is making tasklist-3 (Window Buttons item) icons bigger. The best effect which I achieved yet is scaling them by writing few lines in ~/.config/gtk-3.0/gtk.css but they look very blurry and I know that I have to change their size somewhere. I tried modifying xsettings in Settings Editor but it doesn't work. Is there someone who knows how to do it? I'll appreciate it.
P.S.: I'm also customizing Whisker menu, I got rid of whisker window border but I can't figure out how to remove inner outlines. Is there any way?
https://ibb.co/ykfYHpj

Last edited by MartinKnayt (2020-05-09 06:19:53)

ToZ · 2020-05-09 13:22:35

Hello and welcome.

MartinKnayt wrote:

Good morning, I'm trying to make complete xfce overhaul and one thing that I can't achieve is making tasklist-3 (Window Buttons item) icons bigger. The best effect which I achieved yet is scaling them by writing few lines in ~/.config/gtk-3.0/gtk.css but they look very blurry and I know that I have to change their size somewhere. I tried modifying xsettings in Settings Editor but it doesn't work. Is there someone who knows how to do it? I'll appreciate it.

First have a read through this thread. Then check out https://bugzilla.xfce.org/show_bug.cgi?id=16008 and https://bugzilla.xfce.org/show_bug.cgi?id=12277.

P.S.: I'm also customizing Whisker menu, I got rid of whisker window border but I can't figure out how to remove inner outlines. Is there any way?
https://ibb.co/ykfYHpj

Try something like this:

#whiskermenu-window * { border: 0; }
#whiskermenu-window separator { background-color: transparent; }

MartinKnayt · 2020-05-09 18:34:43

Thank you for replying. I figured out 2 methods to get this effect. https://ibb.co/WzzNMNk Upper one where I'm setting panel to 42px and fixed icon size to 32px (I can keep my transparency but icons are bigger. (Is there any way to scale all launchers with 1 line of code?) And lower one where I'm actually using 3 panels - middle one has only separator and tasklist on it that's set to adjusted icon size and then I'm scaling it to match launchers. The downsides are that if I'll want to add new launcher I'll need to scale middle panel and also I can't use transparency cause I can't fit panels borders to fit perfectly with each others. I also tried making tasklist panel on top of first one but when I'm clicking on it tasklist panel is going under it and I can't use it anymore. I also found out how Zorin os team dealt with it and they just installed DockBarX on top of the panel and theamed it to fit the rest. That's interesting solution but I'm not sure if I want to do it this way.
P.S.: I also have 2 additional questions if it's not too much... Is there a way to overwrite color of clock and rest of icons that aren't themed (bell and speaker)? How can I disable transparency of inactive tasklist icons?

Last edited by MartinKnayt (2020-05-09 18:40:50)

ToZ · 2020-05-09 19:00:09

MartinKnayt wrote:

(Is there any way to scale all launchers with 1 line of code?)

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

...and change the scale value to suit.

Is there a way to overwrite color of clock and rest of icons that aren't themed (bell and speaker)?

Here is a somewhat detailed howto, but to directly answers your questions:
Clock:

#clock-button label { color: red; }

Bell:

#xfce4-notification-plugin image { color: red; }

Speaker:

#pulseaudio-button image { color: red; }

How can I disable transparency of inactive tasklist icons?

What theme are you using? Is it setting transparency? If so, it may not have set any fallback colours and you'll need to define them yourself. The basic method would be to 1. define base state colours/effects, then 2. define active/checked colours/effects.

Something like this:

.tasklist button { background-color: red; }
.tasklist button:checked { background-image: none; background-color: blue; }

...but it will vary from theme to theme depending on how it deals with the button. Have a look at your theme's gtk.css file.

MartinKnayt · 2020-05-09 23:59:58

Thank you very much! You really helped me a lot. Here is my current theming. https://ibb.co/JzJ9BY0
It has to be familiar cause I'm doing this for long time windows user.

Last edited by MartinKnayt (2020-05-11 06:35:34)

ToZ · 2020-05-10 11:24:58

Looks nice. Are you going to install Xubuntu then?

MartinKnayt · 2020-05-11 06:46:46

It's not for me but person I do it for is in deed going to install xubuntu. He was using windows for a long time. Now switched to ubuntu and he don't like gnome de so I reffered xfce to him and offered that I'll customize it for him to be more familiar. I was using gnome by myself and from like 1,5 year I switched to Manjaro XFCE cause I got a little tired of it and I don't like plasma so I stayed on xfce which I liked. I'm using more gnome looking style and all panels transparent so I didn't had these problems when I was customizing my desktop. Once again thank you for help.

julian · 2020-09-07 17:09:31

These are all fair things that a user might want, ex-Windows or not.

I was going to ask about how to increase the icon size in the Window Buttons component, and when I first was testing the Window Buttons I did find the transparency effect a bit uncomfortable. Thanks ToZ for all the help and I'll be sure to move through these steps.

At one stage, I did try making all the icons bigger but that also affected the size of the network, sound, clipboard etc icons and I prefer those smaller because it felt cleaner. Maybe in the Preferences if the user unticks Show button labels then the icon might be made larger to compensate or there could be a input field for the desired size? The latter might be more consistent with other options, but the size might be increased or decreased by 15% automatically (if possible) depending on whether the former is ticked or unticked?

The default Show Desktop icon also looks too much like a (Thundar) folder icon so I'll likely try to change this to be the Papirus/.../categories/gnome-desktop-config.svg file.

In terms of the Whisker Menu there are some issues that mostly relate to margins or lack thereof, in some cases the margins are noticeably inconsistent. Now that I know they're styled by a CSS-like syntax makes me confident that I might be able to help here. Other minor points: The user's avatar is on the small side. The white arrow in the top-right to imply the menu can be resized is double the size it needs to be. The far end of the Whisker Menu should probably have a tiny border-radius like the top edge of other windows. I was meaning to bring these points up at another time but given that I'm here now it seems as good a time as any.

julian · 2020-09-10 23:46:17

Okay, so I've done this.

Panel result

It does all the points about the Panel I made above and also
- adds a diagonal gloss/shine over the Window Switcher
- makes the window and launcher buttons pop upwards a bit when you hover over them (feels real snappy)
- adds the same manjaro colored underline to the Launcher icons
- adds some margins around the LCD and analog clock (and volume icon) to reduce clutter
- program in focus gets a darker background

The only thing I was NOT able to do was increase the width of the Window Buttons (taskbar buttons) (shown at end of above GIF). this is the step-by-step for the layman manjaro user.

STEP 1

As stated previously in the forums you'll need to do something that will look strange because the icons will look huge, please don't worry, you need to do this so the correct (larger) version of the icon is fetched. You will reduce the size of the high resolution icons in the CSS later.

- Right click the bottom Panel and select Panel > Panel Preferences
- Go to the Appearance tab
- Under Icons, ensure that 'Adjust size automatically' is red/off/disabled
- Increase the size of the Fixed icon size (pixels) to 32 (yes your taskbar will look weird but follow the next steps)

STEP 2: Add the CSS

- Click the Home folder on the desktop to access your folder
- Press Ctrl + H on the keyboard so you can see the hidden files (and hidden folders)
- Open the hidden folder '.config' and continue to 'gtk-3.0'
- Create a new Blank Document and call it 'gtk.css', it must be that filename.
- Open the file in Mousepad (or your preferred text editor and copy the following contents.

/* Reduce icon size after loading large 32px */
#whiskermenu-button image {
-gtk-icon-transform:scale(0.8);
}
#launcher-arrow image {
-gtk-icon-transform:scale(0.8) translateY(1px); /* translate to account for new bottom border*/
}
/* Give the launcher icons the same blue highlight when hovering mouse 
over them (if you are not using Manjaro you might not need to do this or 
the highlight might be a different color) */
#launcher-arrow {border-bottom:2px solid transparent;}
#launcher-arrow:hover {border-bottom:2px solid rgba(46,179,152,0.5);
}

/* Resize as above, nudge to the left and prevent transparency */
.tasklist button image {
  -gtk-icon-transform:scale(0.8) translateX(-1px);
  opacity:1;
}.tasklist button:checked {
  background-image:none;
  background-color:rgba(0,0,0,0.3); /* Focused program has a darker tint */
}

/* Raise the icons smoothly when hovering over them */
#launcher-arrow:hover image {
  -gtk-icon-transform:scale(0.85) translateY(-1px);
  transition: -gtk-icon-transform 0.1s;
}
.tasklist button:hover image {
  -gtk-icon-transform:scale(0.85) translate(-1px, -1px);
  transition: -gtk-icon-transform 0.1s;
}

/*  Resize as above */
#pulseaudio-button image  {-gtk-icon-transform:scale(0.6);}

/* If you are using an LCD or analog clock this adds some needed padding
around the edges */
#clock-button  {padding:6px}

/* Adds some angled light rays on the screen selecter*/
#pager-4 wnck-pager {
  background-image:linear-gradient(290deg, transparent 28%,rgba(255,255,255,0.1) 30%,rgba(255,255,255,0) 60%);
}

/* Change the Show desktop image to a more non-descript one that also doesn't
look like a Thunder folder */
#showdesktop-1 image {opacity:0;}
#showdesktop-1 button {
background-image:url('/usr/share/icons/Papirus/32x32/places/folder-black-desktop.svg');
background-size:72%;
background-position:center;
background-repeat:no-repeat;
}

STEP 3: Save and reset the panel

- Save the file you pasted into. You should see the asterisk in the title bar disappear when you do this.
- To restart the Panel, open the terminal window by typing Ctrl + Alt + T (or click the Terminal icon in your Panel).
- Run the below command to restart

xfce4-panel -r

- Bang! Click! Snap! Your Panel should reappear all improved! smile

I'll get around to the Whisker menu, but it's much lower on my list. The Panel is important because it's on the screen the whole time.

More about how to edit and theme GTK stuff here.

(Thanks ZoT for his work on these forums, notbob.i2p for search and sharefile.i2p for hosting the above image on the decentralized internet known as i2p big_smile )

Last edited by julian (2020-09-11 06:42:53)

ToZ · 2020-09-11 01:14:36

Looks good. Thanks for the detailed instructions.

julian · 2020-09-11 06:39:28

Forgot to add Step 3 about restarting. So did that.

Plus added a link to the instructions that you gave.

Thank you, ZoT, and others who helps to work out how to do stuff! smile

Xfce Forum

Sub domains

#1 2020-05-09 06:19:35