gtk3 css how add image Grips/Handles for slider

Aravisian · 2019-09-01 22:20:29

Everything I try doesn't work. How do I write what is necessary for grips on the slider? I have made the images and they are in the assets folder.
My slider is:

 .scrollbar.slider.vertical {
      border-image: -gtk-scaled(url("assets/scrollbar-slider-dark.png"), url("assets/scrollbar-slider-dark@2.png")) 8 7 8 8/8px 7px 8px 8px stretch;
      border-radius: 0;
      border-width: 8px 7px 8px 8px;
      border-style: solid;
      border-color: transparent;
}
    .scrollbar.slider:dir(rtl) {
        border-image: -gtk-scaled(url("assets/scrollbar-slider-rtl-dark.png"), url("assets/scrollbar-slider-rtl-dark@2.png")) 8 7 8 8/8px 7px 8px 8px stretch;
        border-radius: 0;
        border-width: 8px 7px 8px 8px;
        border-style: solid;
        border-color: transparent;
}
    .scrollbar.slider.vertical:hover, .scrollbar.slider:insensitive {
        border-image: -gtk-scaled(url("assets/scrollbar-slider-hover-dark.png"), url("assets/scrollbar-slider-hover-dark@2.png")) 8 7 8 8/8px 7px 8px 8px stretch;
        border-radius: 0;
        border-width: 8px 7px 8px 8px;
        border-style: solid;
        border-color: transparent;
}
      .scrollbar.slider:hover:dir(rtl), .scrollbar.slider:insensitive:dir(rtl) {
        border-image: -gtk-scaled(url("assets/scrollbar-slider-rtl-hover-dark.png"), url("assets/scrollbar-slider-rtl-hover-dark@2.png")) 8 7 8 8/8px 7px 8px 8px stretch;
        border-radius: 0;
        border-width: 8px 7px 8px 8px;
}
    .scrollbar.slider.vertical:active {
        border-image: -gtk-scaled(url("assets/scrollbar-slider-active-dark.png"), url("assets/scrollbar-slider-active-dark@2.png")) 8 7 8 8/8px 7px 8px 8px stretch;
        border-radius: 0;
        border-width: 8px 7px 8px 8px;
        border-style: solid;
        border-color: transparent;
}
      .scrollbar.slider.vertical:active:dir(rtl) {
        border-image: -gtk-scaled(url("assets/scrollbar-slider-rtl-active-dark.png"), url("assets/scrollbar-slider-rtl-active-dark@2.png")) 8 7 8 8/8px 7px 8px 8px stretch;
        border-radius: 0;
        border-width: 8px 7px 8px 8px;
        border-style: solid;
        border-color: transparent;
}
    .scrollbar.slider.horizontal {
      border-image: -gtk-scaled(url("assets/scrollbar-slider-horizontal-dark.png"), url("assets/scrollbar-slider-horizontal-dark@2.png")) 8 8 7 8/8px 8px 7px 8px;
        border-radius: 0;
        border-width: 8px 8px 7px 8px;
        border-style: solid;
        border-color: transparent;
}
      .scrollbar.slider.horizontal:hover, .scrollbar.slider.horizontal:insensitive {
        border-image: -gtk-scaled(url("assets/scrollbar-slider-horizontal-hover-dark.png"), url("assets/scrollbar-slider-horizontal-hover-dark@2.png")) 8 8 7 8/8px 8px 7px 8px;
        border-radius: 0;
        border-width: 8px 8px 7px 8px;
        border-style: solid;
        border-color: transparent;
}
      .scrollbar.slider.horizontal:active {
        border-image: -gtk-scaled(url("assets/scrollbar-slider-horizontal-active-dark.png"), url("assets/scrollbar-slider-horizontal-active-dark@2.png")) 8 8 7 8/8px 8px 7px 8px;
        border-radius: 0;
        border-width: 8px 8px 7px 8px;
        border-style: solid;
        border-color: transparent;
}

ToZ · 2019-09-02 01:18:52

More of a guess here since I can't test this on your theme, but to reference the scrollbar element you should not precede it with a "."

".scrollbar.slider.vertical" should probably be something like:

scrollbar.vertical slider

Aravisian · 2019-09-02 09:39:27

hmm...

See, remember, I started this not knowing anything at all about css. My entire theme is written that way... Not sure what effect that has. It works fine in 3.18 to 3.24 but I know it does not work above 3.24. Edit: (Correction, I meant above 3.22 and does not work on 3.24)
So... Should I go through and clean out all those periods? I wonder what will happen if I do...
I cannot remember know why I started out that way. I think it had to do with compatibility.

Edit: removed the leading periods--- it did not go well...

Last edited by Aravisian (2019-09-02 10:29:34)

ToZ · 2019-09-02 12:35:51

Aravisian wrote:

See, remember, I started this not knowing anything at all about css. My entire theme is written that way... Not sure what effect that has. It works fine in 3.18 to 3.24 but I know it does not work above 3.24. Edit: (Correction, I meant above 3.22 and does not work on 3.24)

Can you post an image of how it looked on 3.22 vs 3.24?

Aravisian · 2019-09-02 15:51:59

ToZ wrote:

Aravisian wrote:
See, remember, I started this not knowing anything at all about css. My entire theme is written that way... Not sure what effect that has. It works fine in 3.18 to 3.24 but I know it does not work above 3.24. Edit: (Correction, I meant above 3.22 and does not work on 3.24)
Can you post an image of how it looked on 3.22 vs 3.24?

Hate life...

That is using VMware, Zorin 15.
You see the version, then a nautilus window. Yes, I know the buttons are not finished out- this is because I have not done that yet.

Next, I went in to "upgrade" to 3.24. As I recall from before, Ubuntu does not offer that package in repository, so I had to add a ppa for jonathanf, then do it that way. This time around, (I have no idea why...) as soon as I did, the VMware said I had no wifi adapter.
I literally had just used the net to download the theme and icon set using pcloud and now it claims I have no net. After trying for a while, I shut it down and then created a new session entirely and the same exact thing happened. Third time, I did not go online to pcloud and download my theme and icon set and went straight for the ppa.

It did it again.

At this point I got fed up- especially as the whole demonstration was to show that something does not work... So I will simply describe what visually changed the last time I did it.
The header bar retained the background for the title bar, but not for header-bar-right which holds the Close Min max buttons. The buttons were there, the background was not.
The menu's were bunched very close together and the theme around them did not work,a t all. The menu drop downs did, but without the backdrops.
Scrollbars did not show up at all. Neither did scale / range.
All the window backgrounds did show up but frames did not.
Your pretty standard look for a broken theme.

I will try again later by burning a disk and then booting Live Session from the disk.
And by later... I probably will wait til the weekend lol...

EDIT: The things that do not make any sense adding up...
Another thing I was trying to change was the paper-thin Progress bar height and width. I accomplished this (about 30seconds before posting this edit) by adding

GtkProgressBar { -GtkProgressBar-min-horizontal-bar-height: 20px; }
GtkProgressBar { -GtkProgressBar-min-vertical-bar-width: 20px; }

Literally, I just threw it on the css in some random location... I wasn't caring because it was about the twentieth attempt which I knew wouldn't work- but it did work. Perfectly.
Which is weird because all the documentation I read said it should NOT work on 3.18 or earlier and I am running 3.18.
Further reading took the wind out of my sails, anyway, as I read on that in gtk3.20, all of that is broken and you must change it to different terms... and on the GTK reference site, it lists the lot of it as depreciated.
So what I am doing will work for now on my machine only for a very limited time. Wasted effort. I mean, sure I can enjoy it a bit but I cannot share it with anyone else on Pling or whatever. Which was a big part of the motivation when I started.
[vent]
I swear the GTK Developers since 3.0 have set Priority One to destroy all themes. It REALLY seems that way.
You want a personalized theme? Too bad, you have to take their Paper Flat Boring Bland vibrant colored CRAP and be uniform with everyone else. ALL modern themes are the same junk just colored differently.
Go from 3.12? Breaks it. To 3.18? Breaks it. To 3.20? Breaks it. Go up to 3.24? Breaks it..
Smacks of Microsoft efforts of Authoritarian Control.
I use my machine with my theme scanning peoples Cars. I hook it up to the OBD ii and when I run it, every Single Customer that sees my screen falls in love with it. It has depth, looks very mechanical and almost retro/industrial. They've never seen anything like it. For me, the "eye candy" is an important part of the package deal.
[/vent]

Last edited by Aravisian (2019-09-02 17:32:59)

Aravisian · 2019-09-24 17:20:35

I tried adding multiple images in .css. Valid in .css but it seems not in gtk.
In the end, I finally wound up giving up on doing it how I wanted to do it and doing it this way, instead.

.scrollbar.slider {
	background-color: transparent;
	background-image: url("assets/grip-horiz.png"),
	                  linear-gradient(to right,
	                                  #3296CF,
	                                  #004473);
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 6px;
	border-width: 0px;
	border-style: solid;
}

.scrollbar.slider.vertical {
	background-color: transparent;
	background-image: url("assets/grip-vert.png"),
	                  linear-gradient(to bottom,
	                                  #3296CF,
	                                  #004473);
	border-radius: 6px;
	border-width: 0px;
	border-style: solid;
}



.scrollbar.slider:prelight {
	background-image: url("assets/grip-horiz-prelight.png"),
	                  linear-gradient(to right,
	                                  #3296CF,
	                                  #004473);
}

.scrollbar.slider.vertical:prelight {
	background-image: url("assets/grip-vert-prelight.png"),
	                  linear-gradient(to bottom,
	                                  #3296CF,
	                                  #004473);
}

.scrollbar.slider:prelight:active {
	color: @theme_fg_color;
	border-style: solid;
	background-image: url("assets/grip-horiz-prelight.png"),
	                  linear-gradient(to right,
	                                  #3296CF,
	                                  #004473);
}

.scrollbar.slider.vertical:prelight:active {
	background-image: url("assets/grip-vert-prelight.png"),
	                  linear-gradient(to bottom,
	                                  #3296CF,
	                                  #004473);
}

Doesn't have quite the look I was trying for.

Xfce Forum

Sub domains

#1 2019-09-01 22:20:29

gtk3 css how add image Grips/Handles for slider

#2 2019-09-02 01:18:52

Re: gtk3 css how add image Grips/Handles for slider

#3 2019-09-02 09:39:27

Re: gtk3 css how add image Grips/Handles for slider

#4 2019-09-02 12:35:51

Re: gtk3 css how add image Grips/Handles for slider

#5 2019-09-02 15:51:59

Re: gtk3 css how add image Grips/Handles for slider

#6 2019-09-24 17:20:35

Re: gtk3 css how add image Grips/Handles for slider

Board footer