Icon transperancy on side panel?

u666sa · 2020-02-09 14:31:04

What's up.

I have these two thems I like, one is Kali Dark, if used with dark background it looks awesome, because elements on panels are transperant. Here shown with light background, so you could see the difference.

The other one is PRO Dark XFCE, which is lighter and I like using it sometimes when dark gets on my nerves. However it does not have panel element transperancy.

Well, the question is how to modify this second theme, PRO Dark XFCE so that panel elements are transperant. Also, anyway to make it's window close, minimize, maximize buttons smaller?

Here is how Kali Dark looks like with dark background so that you see that it looks good.

https://i.ibb.co/C14hRJ0/2020-02-09-17-25-41.png

Here is a link to both themes -- https://www.upload.ee/files/11102998/bo … ar.gz.html

Aravisian · 2020-02-09 17:33:40

u666sa wrote:

Well, the question is how to modify this second theme, PRO Dark XFCE so that panel elements are transperant.

I cannot remember off the top of my head... But am confident it can be done. Let's see what this thread turns up and if nothing soon, will get back to this. But the next question:

u666sa wrote:

Also, anyway to make it's window close, minimize, maximize buttons smaller?

The titlebar size is set by the size of the images used to make the background. So, it is very easy to adjust it.
However, your screenshots appear to show a web browser using CSD, or Client Side Decorations. It is so large because of that. You can turn CSD off in your web browser settings.
Does your Thunar view show the same huge headerbar?

u666sa · 2020-02-09 19:12:29

Large everywhere. Large relatively of course. I would prefer smaller.

ToZ · 2020-02-09 21:29:49

Pro Dark Xfce has, in it's gtk.css file, the following xfce4-panel-specific css:

.xfce4-panel.background {

  background-color: shade(#686868, 0.35);
  color: #fcfcfc;
  text-shadow:  0 -1px alpha(#ffffff, 0.04),
				 -1px  0px alpha(#202020, 0.05),
				  1px  0px alpha(#202020, 0.05),
				  0px  1px alpha(#202020, 0.5),
				  0px  2px alpha(#202020, 0.05);
  font-weight: normal; }

.xfce4-panel.background button {

  background-image: none;
  background-color: #37383d;
  border-radius: 0;
  border: none;
  box-shadow: none;
  padding: 0 1px;
  color: #dde2e7;
  text-shadow:  0 -1px alpha(#ffffff, 0.04),
				 -1px  0px alpha(#202020, 0.05),
				  1px  0px alpha(#202020, 0.05),
				  0px  1px alpha(#202020, 0.5),
				  0px  2px alpha(#202020, 0.05);
  /*text-shadow: 0px 1px rgba(0, 0, 0, 0.1);*/ }

.xfce4-panel.background button:active,
.xfce4-panel.background button:checked {

  background-image: none;
  background-color: #53555c;
  border: none;
  color: #dde2e7;
  text-shadow:  0 -1px alpha(#ffffff, 0.04),
				 -1px  0px alpha(#202020, 0.05),
				  1px  0px alpha(#202020, 0.05),
				  0px  1px alpha(#202020, 0.5),
				  0px  2px alpha(#202020, 0.05);
  transition: none; }

.xfce4-panel.background button:hover,
.xfce4-panel.background button:active:hover,
.xfce4-panel.background button:checked:hover {

  background-color: #53555c;
  background-image: none;
  color: #dde2e7;
  text-shadow:  0 -1px alpha(#ffffff, 0.04),
				 -1px  0px alpha(#202020, 0.05),
				  1px  0px alpha(#202020, 0.05),
				  0px  1px alpha(#202020, 0.5),
				  0px  2px alpha(#202020, 0.05);
  /*box-shadow: inset 0 -1px alpha(white,0), inset 1px 0 alpha(white,0.15), inset -1px 0 alpha(white,0.15), inset 0 1px alpha(white,0.15);*/
  transition: none; }

Notice how it is setting a background colour? If you set the value of every instance of "background-color" in that snippet to "transparent" you will get transparency on the panel.

background-color: transparent;

Note: you'll need to restart the panel for the effect to take place.

ToZ · 2020-02-09 21:37:57

Also, anyway to make it's window close, minimize, maximize buttons smaller?

This is the xfwm4 theme (and as Aravisian notes, we can only change the xfwm4 elements - not the CSD elements). Actually, you probably could change the CSD decorations as well using CSS if you were adventurous.

I use the following script to resize xfwm4 elements:

#!/bin/bash
# needs to be exectuted from within the xfwm4 directory
# need to specify percentage change

if (( $1 >= 0 )) 2>/dev/null; then
	echo -n "resizing xpms"
	for name in `find . -maxdepth 1 -type f -name "*.xpm"`; do convert "$name" -alpha on -resize "$1"% $name; echo -n "."; done
	echo ""	
	echo -n "resizing pngs"
	for name in `find . -maxdepth 1 -type f -name "*.png"`; do convert "$name" -alpha on -resize "$1"% $name; echo -n "."; done
	echo ""
else
	echo "Usage $0 <SCALE_FACTOR>"
	echo"   Where <SCALE_FACTOR> is > 0"
fi

To use, first make a backup of your current window manager theme's xfwm4 folder. From within the theme directory:

cp -rv xfwm4 xfwm4.orig

Then save the above snippet in the xfwm4 folder and make it executable. Then run it like this:

./script_name 75

...where "script_name" is the name of your script and "75" is the percentage scale of the original. The scaling is not perfect, it can get blurry especially if you are making it larger. The convert command could probably be tweaked to do better image scaling but I've never gotten around to it.

If it's not to your taste (too small, too large), simply copy over the files from xfwm4.orig and try again.

u666sa · 2020-02-14 06:14:54

Is there anyway to change size on GTK+ part of the theme as well? Chrome uses GTK theme.

ToZ · 2020-02-14 06:44:47

u666sa wrote:

Is there anyway to change size on GTK+ part of the theme as well? Chrome uses GTK theme.

Doesn't chrome have an option in settings to use system bars? That would force it to use the same window manager bars (not CSD).

Aravisian · 2020-02-14 06:56:06

ToZ wrote:

u666sa wrote:
Is there anyway to change size on GTK+ part of the theme as well? Chrome uses GTK theme.
Doesn't chrome have an option in settings to use system bars? That would force it to use the same window manager bars (not CSD).

It does and this problem is not easy to find the solution to. It drove me nuts,. as well. I know how the O.P. feels.
u666sa, if you go to Menu / Settings /"Appearance" section, unmark "Use system title bar and borders".
For Firefox:
Opening Firefox, you will see the Hamburger Icon far right. Click that, select "Customize."
That will open the FF Customization page. At the Very bottom, easy to miss, is a little checkbox next to where it says "titlebars". That's the setting you want.

Last edited by Aravisian (2020-02-14 06:57:38)

u666sa · 2020-02-14 08:05:15

I did find it, but it made things worst. The entire reason for making those icons smaller is to maximize screen space. I have an old school 1366x768 panel, no 1080p here, which is awesome for eyes, but not so good for screen realestate. Isn't there a way to resize GTK+ part of the theme?

Another question. PRO Dark theme does not resize at bottom-left and bottom-right corners, you have to drag window down and resize it from top. I bet there is a setting somewhere there that enables proper resizing, what to look for? Make it less pro!

Last edited by u666sa (2020-02-14 08:07:04)

Aravisian · 2020-02-14 08:21:33

u666sa wrote:

I did find it, but it made things worst. The entire reason for making those icons smaller is to maximize screen space. I have an old school 1366x768 panel, no 1080p here, which is awesome for eyes, but not so good for screen realestate. Isn't there a way to resize GTK+ part of the theme?
https://i.ibb.co/P4TmzVH/2020-02-14-10-48-13.png

In this comparison image, ignore the titlebuttons and their size for a moment and look at the Directional arrows. You can see that on the right-side image of your comparison, that they are sitting up higher than on the left-side image. The sad truth is, going from Titlebars to CSD headerbars really does not increase the "screen real estate" all that much.
I see you have a top panel and a bottom panel. I am certain that you have it set up that way for a reason, however, if you could combine those into one panel, that would increase your screen real estate by about the same amount.
Yes, there is a way to change the gtk CSD size of the titlebutton icons. It would need to be done within the .css of the theme you are using or in your home folder, navigate to .config/gtk-3.0/gtk.css
The headerbar size can be reduced as well in the same manner.
Let's try navigating to ~/.config/gtk-3.0/gtk.css -if gtk.css does not exist, create one using a text editor and save as gtk.css
Paste the following into it then save and close and reload your theme using the Settings Appearance popover.

window.ssd headerbar.titlebar {
    padding-top: 3px;
    padding-bottom: 3px;
    min-height: 0;
    border: none;
    background-image: linear-gradient(to bottom,
     shade(@theme_bg_color, 1.05),
     shade(@theme_bg_color, 1.00));
    box-shadow: inset 0 1px shade(@theme_bg_color, 1.4);
}

window.ssd headerbar.titlebar button.titlebutton {
    padding: 0px;
    min-height: 0;
    min-width: 0;
}
.default-decoration .titlebutton {
    padding: 0px;
    min-height: 0;
    min-width: 0;
}

u666sa wrote:

Another question. PRO Dark theme does not resize at bottom-left and bottom-right corners, you have to drag window down and resize it from top. I bet there is a setting somewhere there that enables proper resizing, what to look for? Make it less pro!

I do not know on this one.

ToZ · 2020-02-14 13:07:24

u666sa wrote:

Another question. PRO Dark theme does not resize at bottom-left and bottom-right corners, you have to drag window down and resize it from top. I bet there is a setting somewhere there that enables proper resizing, what to look for? Make it less pro!

The PRO Dark xfwm4 theme has no side or bottom borders. Without borders defined, you will not be able to resize. You'll need to manually adjust the theme to add borders, or use another complimentary xfwm4 theme.

Aravisian · 2020-02-14 21:17:27

Aravisian wrote:

u666sa wrote:
Another question. PRO Dark theme does not resize at bottom-left and bottom-right corners, you have to drag window down and resize it from top. I bet there is a setting somewhere there that enables proper resizing, what to look for? Make it less pro!
I do not know on this one.

ToZ wrote:

u666sa wrote:
Another question. PRO Dark theme does not resize at bottom-left and bottom-right corners, you have to drag window down and resize it from top. I bet there is a setting somewhere there that enables proper resizing, what to look for? Make it less pro!
The PRO Dark xfwm4 theme has no side or bottom borders. Without borders defined, you will not be able to resize. You'll need to manually adjust the theme to add borders, or use another complimentary xfwm4 theme.

Oh.
u666sa, could you try out this fast-made modification? See if it helps solve that.
https://www.pling.com/p/1359963/
Please test it -critically-... Tell me what it is that you dislike so I can fine tune it. That link is to start. I gave a 10px wide margin on it, but if you are adept at finding the border with your mouse to resize, you may need less than that.

Last edited by Aravisian (2020-02-14 21:23:09)

Xfce Forum

Sub domains

#1 2020-02-09 14:31:04

Icon transperancy on side panel?

#2 2020-02-09 17:33:40

Re: Icon transperancy on side panel?

#3 2020-02-09 19:12:29

Re: Icon transperancy on side panel?

#4 2020-02-09 21:29:49

Re: Icon transperancy on side panel?

#5 2020-02-09 21:37:57

Re: Icon transperancy on side panel?

#6 2020-02-14 06:14:54

Re: Icon transperancy on side panel?

#7 2020-02-14 06:44:47

Re: Icon transperancy on side panel?

#8 2020-02-14 06:56:06

Re: Icon transperancy on side panel?

#9 2020-02-14 08:05:15

Re: Icon transperancy on side panel?

#10 2020-02-14 08:21:33

Re: Icon transperancy on side panel?

#11 2020-02-14 13:07:24

Re: Icon transperancy on side panel?

#12 2020-02-14 21:17:27

Re: Icon transperancy on side panel?

Board footer