Porting of my xfce desktop style settings to gtk3

Machredsch · 2017-05-17 14:18:16

Hello,

with the new xfdesktop ported to gtk3, I need to port my gtk2 desktop settings to gtk3 too.
Can anyone tell me, how to setup the correct css style expressions for my gtk2 settings?
I had transparent labels for my desktop icons and tried to port all of my settings to css.
Because the lack of my css knowledge, I got it worked only partly.

The former gtk2rc file there was:

style "xfdesktop-icon-view" 
{ 
	font_name = "DejaVu Sans Book"
	XfdesktopIconView::label-alpha = 0 
    	XfdesktopIconView::selected-label-alpha = 140 
    	XfdesktopIconView::ellipsize-icon-labels = 0

    	XfdesktopIconView::shadow-x-offset = 1 
    	XfdesktopIconView::shadow-y-offset = 1  
    	XfdesktopIconView::selected-shadow-x-offset = 1 
    	XfdesktopIconView::selected-shadow-y-offset = 1
	
	XfdesktopIconView::shadow-color = "#000000" 
    	XfdesktopIconView::selected-shadow-color = "#999999" 

    	XfdesktopIconView::cell-spacing = 5
	XfdesktopIconView::cell-padding = 0
   	XfdesktopIconView::cell-text-width-proportion = 2.8 

   	base[NORMAL] = "#cccccc" 
    	base[SELECTED] = "#cccccc" 
    	base[ACTIVE] = "#cccccc" 

    	fg[NORMAL] = "#cccccc" 
    	fg[SELECTED] = "#000000" 
    	fg[ACTIVE] = "#000000" 
} 
widget_class "*XfdesktopIconView*" style "xfdesktop-icon-view"
widget "*XfdesktopIconView*" style "xfdesktop-icon-view"
class "*XfdesktopIconView*" style "xfdesktop-icon-view"

My new gtk.css contains the following, I figured out already:

* {
   -gtk-icon-style: regular;
}

XfdesktopIconView {
	font: "DejaVu Sans Book";
	background-color: rgba(240, 240, 240, 0.0);
	color:#cccccc;
        text-shadow: 2px 2px #000000;

        margin: 0;
	padding: 0;
}

Transparency is working, but I don't know howto do the "active / selected - thing" and so on with this style class or whats the working css selector for this related behaviour.

Last edited by Machredsch (2017-05-17 14:19:59)

sixsixfive · 2017-05-17 17:34:13

just use the gtk3 inspector on xfdesktop

pkill xfdesktop
GTK_DEBUG=interactive xfdesktop

ToZ · 2017-05-17 17:46:34

Hello and welcome.

Here are my current xfdesktop GTK3 configs:

/* xfdesktop icon theming */
XfdesktopIconView.view {
	background-color: rgba(0,0,0,0.0);
}

XfdesktopIconView.view:active {
	background-color: rgba(0,0,0,0.3);
	color: #3D7BC7;
	border-radius: 1px;
}

XfdesktopIconView.rubberband {
	background-color: rgba(0,0,0,0.3);
}

XfdesktopIconView.label:active {
	background-color: rgba(0,0,0,0.3);
	color: white;
}

You can tweak as necessary.

And as @sixsixfive says, you can use the inspector, but some items, like the rubberband entity, I can't get to show up in the inspector.

Machredsch · 2017-05-18 09:15:28

Thank you, you 2 have helped me a lot.
I didn't know about that GTKInspector.

dc_coder_84 · 2018-12-04 20:49:13

Can anybody help me with the overlay color of the desktop icons when they are active? What is the CSS selector? Many thanks in advance smile

ToZ · 2018-12-04 23:54:52

dc_coder_84 wrote:

Can anybody help me with the overlay color of the desktop icons when they are active? What is the CSS selector? Many thanks in advance

Hello and welcome.

Consider this block:

XfdesktopIconView.view {
  background: transparent;
  color: #fcfcfc;
  border-radius: 3px; }
  XfdesktopIconView.view:active {
    background: rgba(23, 104, 189, 0.5);
    text-shadow: 0 1px 1px black; }
  XfdesktopIconView.view .label {
    text-shadow: 1px 1px 2px black; }

The "XfdesktopIconView.view:active" block affects the actively selected icon. Is this what you are referring to when you say "overlay color"?

Jerry3904 · 2018-12-05 11:54:45

Good responses. Added GTK Inspector to my Tidbits.

Last edited by Jerry3904 (2018-12-05 11:55:08)

dc_coder_84 · 2018-12-05 20:00:04

ToZ wrote:

Consider this block:
XfdesktopIconView.view {
  background: transparent;
  color: #fcfcfc;
  border-radius: 3px; }
  XfdesktopIconView.view:active {
    background: rgba(23, 104, 189, 0.5);
    text-shadow: 0 1px 1px black; }
  XfdesktopIconView.view .label {
    text-shadow: 1px 1px 2px black; }
The "XfdesktopIconView.view:active" block affects the actively selected icon. Is this what you are referring to when you say "overlay color"?

I tested your code but I don't think it is what I want. Let me give you an example. Let's say I have a browser bookmark (a desktop file) on my desktop. With my current theme I have stars as icons for bookmarks. If I select a bookmark the star gets darker because a semi transparent blue layer will be drawn over it. Now I want to change exactly this color.

MountainDewManiac · 2018-12-06 02:21:05

The "highlight" color, then? What I see when I highlight text.
select text in order to copy it with CTRL C.

Regards,
MDM

ToZ · 2018-12-06 11:42:06

dc_coder_84 wrote:

. If I select a bookmark the star gets darker because a semi transparent blue layer will be drawn over it. Now I want to change exactly this color.

The code block below works for me by getting rid of the transparent layer (it also affects the text background). Which appearance theme are you using?

dc_coder_84 · 2018-12-06 15:15:27

MountainDewManiac wrote:

The "highlight" color, then? What I see when I highlight text.
select text in order to copy it with CTRL C.

Yes, the highlighting / selection color.

dc_coder_84 · 2018-12-06 15:17:19

ToZ wrote:

The code block below works for me by getting rid of the transparent layer (it also affects the text background). Which appearance theme are you using?

I am using the Numix theme under Xubuntu 18.10 64 bit. The highlighting color for desktop items is blue but should be red.

ToZ · 2018-12-06 22:17:44

dc_coder_84 wrote:

ToZ wrote:
The code block below works for me by getting rid of the transparent layer (it also affects the text background). Which appearance theme are you using?
I am using the Numix theme under Xubuntu 18.10 64 bit. The highlighting color for desktop items is blue but should be red.

How about something like this:

XfdesktopIconView.view {
  background: transparent;
  color: #fcfcfc;
  border-radius: 3px; }
  XfdesktopIconView.view:active {
    background: rgba(23, 104, 189, 0.5);
    text-shadow: 0 1px 1px black; }
  XfdesktopIconView.view .label {
    text-shadow: 1px 1px 2px black; }

...make sure you restart xfdesktop to see the change.

dc_coder_84 · 2018-12-07 16:29:57

Many thanks ToZ. After some trial and error I now found this solution:

XfdesktopIconView.view {
	color: rgb(240, 84, 76);
}

XfdesktopIconView.label {
	color: white;
}

XfdesktopIconView.view:active {
	background: rgba(240, 84, 76, 0.8);
}

It's a bit confusing because in CSS the color attribute normally defines the text color. Anyway, it's working now smile

Xfce Forum

Sub domains

#1 2017-05-17 14:18:16

Porting of my xfce desktop style settings to gtk3

#2 2017-05-17 17:34:13

Re: Porting of my xfce desktop style settings to gtk3

#3 2017-05-17 17:46:34

Re: Porting of my xfce desktop style settings to gtk3

#4 2017-05-18 09:15:28

Re: Porting of my xfce desktop style settings to gtk3

#5 2018-12-04 20:49:13

Re: Porting of my xfce desktop style settings to gtk3

#6 2018-12-04 23:54:52

Re: Porting of my xfce desktop style settings to gtk3

#7 2018-12-05 11:54:45

Re: Porting of my xfce desktop style settings to gtk3

#8 2018-12-05 20:00:04

Re: Porting of my xfce desktop style settings to gtk3

#9 2018-12-06 02:21:05

Re: Porting of my xfce desktop style settings to gtk3

#10 2018-12-06 11:42:06

Re: Porting of my xfce desktop style settings to gtk3

#11 2018-12-06 15:15:27

Re: Porting of my xfce desktop style settings to gtk3

#12 2018-12-06 15:17:19

Re: Porting of my xfce desktop style settings to gtk3

#13 2018-12-06 22:17:44

Re: Porting of my xfce desktop style settings to gtk3

#14 2018-12-07 16:29:57

Re: Porting of my xfce desktop style settings to gtk3

Board footer