Xfce Forum

Sub domains
 

You are not logged in.

Pages: 1

#1 2020-03-09 04:01:51

NemKo
Member
Registered: 2020-03-09
Posts: 21

Panel launcher buttons hover background

Hello, can anyone tell me how to enable background hover for launcher buttons, Launcher button background works on 4.12 but after 4.14 this does not work anymore.

I have try adding this to gtk3, every buttons on panel works but launcher button does not work. https://imgur.com/cSC7nQi

.xfce4-panel.background button *
{
    background-color: #c92cc7 ; 
}

Thanks in advance

Last edited by NemKo (2020-03-09 04:03:36)

Offline

#2 2020-03-09 05:20:05

Aravisian
Member
Registered: 2019-08-17
Posts: 410

Re: Panel launcher buttons hover background

Those Squares with little gray triangles in them... What are those in your image? They look like an "Image Missing" icon...

You might try

.xfce4-panel.panel button:hover {
    background-color: #c92cc7;
}

Offline

#3 2020-03-09 08:10:22

NemKo
Member
Registered: 2020-03-09
Posts: 21

Re: Panel launcher buttons hover background

Aravisian wrote:

Those Squares with little gray triangles in them... What are those in your image? They look like an "Image Missing" icon...

You might try

.xfce4-panel.panel button:hover {
    background-color: #c92cc7;
}

thanks for reply but that din't work sad

this is the launcher button hover din't work on my xfce 4.14, everything on panel is working fine, just the launcher.
https://imgur.com/OfuHwCg

Last edited by NemKo (2020-03-09 08:12:28)

Offline

#4 2020-03-09 08:57:15

Aravisian
Member
Registered: 2019-08-17
Posts: 410

Re: Panel launcher buttons hover background

NemKo wrote:
Aravisian wrote:

Those Squares with little gray triangles in them... What are those in your image? They look like an "Image Missing" icon...

You might try

.xfce4-panel.panel button:hover {
    background-color: #c92cc7;
}

thanks for reply but that din't work sad

this is the launcher button hover din't work on my xfce 4.14, everything on panel is working fine, just the launcher.
https://imgur.com/OfuHwCg

I see... Can you try adding the following to your gtk.css?

#launcher-<Put Launcher Name Here>* 
{
    background-color: #c92cc7;
}

Where is says <Put Launcher Name Here>, replace that with the launchers name.
Do this for each launcher you are having trouble with.

For example, if your launcher was xfce4-terminal, it would be: #launcher-xfce4-terminal

Offline

#5 2020-03-09 12:39:30

NemKo
Member
Registered: 2020-03-09
Posts: 21

Re: Panel launcher buttons hover background

Hi, that doesn't work, I have also tried adding  "button" at the end of line still no backgound hover.

#launcher-google-chrome-stable button
{
    background-color: #c92cc7;
}

my launcher "chrome" it doesn't show hover backgound colored line.
https://imgur.com/SUcrhJd

maybe has something to do with theme I'm using, theme creator haven't updated their themes?

Offline

#6 2020-03-09 19:01:27

Aravisian
Member
Registered: 2019-08-17
Posts: 410

Re: Panel launcher buttons hover background

NemKo wrote:

Hi, that doesn't work, I have also tried adding  "button" at the end of line still no backgound hover.

#launcher-google-chrome-stable button
{
    background-color: #c92cc7;
}

my launcher "chrome" it doesn't show hover backgound colored line.
https://imgur.com/SUcrhJd

maybe has something to do with theme I'm using, theme creator haven't updated their themes?

It's possible, but don't be too hard on the theme creator.  wink
Let's try something I know works on my own theme:

    .xfce4-panel.panel button.flat:hover, .xfce4-panel.panel button.sidebar-button:hover {
    background-color: #c92cc7;
}

For active, just repeat the above and replace "hover" with "active."

Last edited by Aravisian (2020-03-09 19:03:50)

Offline

#7 2020-03-10 01:04:50

NemKo
Member
Registered: 2020-03-09
Posts: 21

Re: Panel launcher buttons hover background

Aravisian wrote:

It's possible, but don't be too hard on the theme creator.  wink
Let's try something I know works on my own theme:

    .xfce4-panel.panel button.flat:hover, .xfce4-panel.panel button.sidebar-button:hover {
    background-color: #c92cc7;
}

For active, just repeat the above and replace "hover" with "active."

Omg It's actually working :hover :active both!! Thanks you so much.

Offline

#8 2020-03-10 01:12:42

NemKo
Member
Registered: 2020-03-09
Posts: 21

Re: Panel launcher buttons hover background

Also now I'm wondering is it possible to change "whisker menu" background-color? how can I  set a custom background-color for just the whisker-menu.
https://imgur.com/LtMOEqw

.xfce4-whisker-menu-plugin button {
background-color: blue !important; 
}

using :hover :active nothing happened can't change whisker-menu background.
Hopefully can there's a way to do this, thanks in advance.

Last edited by NemKo (2020-03-10 01:13:18)

Offline

#9 2020-03-10 02:20:36

Aravisian
Member
Registered: 2019-08-17
Posts: 410

Re: Panel launcher buttons hover background

NemKo wrote:

Also now I'm wondering is it possible to change "whisker menu" background-color? how can I  set a custom background-color for just the whisker-menu.
https://imgur.com/LtMOEqw

.xfce4-whisker-menu-plugin button {
background-color: blue !important; 
}

using :hover :active nothing happened can't change whisker-menu background.
Hopefully can there's a way to do this, thanks in advance.

There is and I have actually uploaded all these codes on Pling... They are as Themes, but anyone can change what they see and remove anything they dislike by using any of them as a template:)
Here is one example:
https://www.pling.com/p/1355565/
HERE are the cmds for Whiskermenu Panel Button as BLANKS- fill in the fields you want:

#whiskermenu-button {
    background-color: transparent;
    background-image: none;
    background-size: auto;
    border-color: transparent;
    border-image: none;
    padding: 1px 1px 1px 1px;
	color: transparent;
	font-weight: normal;
}
#whiskermenu-button:hover{
    background-image: none;
    background-size: auto;
    border-color: transparent;
    border-image: none;
    padding: 1px 1px 1px 1px;
    background-color: transparent;
	color: #ffffff;
}
#whiskermenu-button:checked{
    background-image: none;
    background-size: auto;
    padding: 1px 1px 1px 1px;
    background-color: transparent;
    border-color: transparent;
    border-image: none;
	color: #fff;
}

Ask any questions.

Here are all the cmds- BLANK- as a blank template that you can fill in or ignore any of the options you desire:

#whiskermenu-window.background {
  background-image: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color:  transparent;
  border-radius: 1px;
}
#whiskermenu-window entry {
  min-height: 20px;
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-image: none;
  background-color: transparent;
  color: #F3F3F5;}

#whiskermenu-window entry:focus {
    border-image: none;
    background-color: transparent;
    background-image: none;
}

#whiskermenu-window entry:disabled {
    border-image: none;
    background-color: transparent;
    color: #949597;
    background-image: none; 
}

#whiskermenu-window button:active{
    transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-duration: 100ms;
    color: #ffffff;
    background-image: none;
    background-repeat: no-repeat;
    background-size: auto; }

#whiskermenu-window button:hover{
    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-duration: 0ms;
    color: #ffffff;
    background-image: none;
    background-repeat: no-repeat;
    background-size: auto; }

#whiskermenu-window button:checked {
    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-duration: 200ms;
    color: #ffffff;
    background-image: none;
    background-repeat: no-repeat;
    background-size: auto; }

/*panel button*/
#whiskermenu-button{
	color: #bac3cf;
	font-weight: normal;
}
#whiskermenu-button:hover{
	color: #ffffff;
}

/*tree list*/
#whiskermenu-window treeview {
	background-color: transparent;
	color: #fff;
}
#whiskermenu-window treeview:hover {
	background-color: transparent;
	color: #f2f2f2;
}
#whiskermenu-window treeview:selected {
	background-color: transparent;
	color: #f2f2f2;
	outline-color: #3f4453;
}
/*panel button*/

/*.xfce4-panel.panel button {
    background-image: none;
}*/
.xfce4-panel.panel button:hover {
    background-image: none;
}
.xfce4-panel.panel button:active {
    background-image: none;
}
.xfce4-panel.panel button:checked {
    background-image:none;
}
/*.xfce4-panel.panel.background {
    background-image: none;
    background-size: auto;
    background-repeat: no-repeat;
}*/


#whiskermenu-window scrollbar.vertical button.down {
  -gtk-icon-source: none;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  border-image: none; }
#whiskermenu-window scrollbar.vertical button.down:hover {
  -gtk-icon-source: none;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  border-image: none;  }
#whiskermenu-window scrollbar.vertical button.down:active {
  -gtk-icon-source: none;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  border-image: none;  }
#whiskermenu-window scrollbar.vertical button.up {
  -gtk-icon-source: none;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  border-image: none;  }
#whiskermenu-window scrollbar.vertical button.up:hover {
  -gtk-icon-source: none;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  border-image: none;  }
#whiskermenu-window scrollbar.vertical button.up:active {
  -gtk-icon-source: none;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  border-image: none;  }

#whiskermenu-window treeview.view:selected, #whiskermenu-window treeview.view:selected:focus {
  color: #ffffff;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
  -gtk-icon-shadow: none;
  background-image: linear-gradient(to right,
	                                  #3296CF,
	                                  #004473);
 }

This should give you enough material that you can customize your Whiskermenu and panel, panel buttons and launchers pretty much Any Way You Want. You can add background images or border images, adjust the values as needed (For example, background-size, you can try using contain, cover, auto, or a percentage like "background-size: 45% 50%;" ) and so on.

Offline

#10 2020-03-10 09:37:16

NemKo
Member
Registered: 2020-03-09
Posts: 21

Re: Panel launcher buttons hover background

Aravisian wrote:
NemKo wrote:

Also now I'm wondering is it possible to change "whisker menu" background-color? how can I  set a custom background-color for just the whisker-menu.
https://imgur.com/LtMOEqw

.xfce4-whisker-menu-plugin button {
background-color: blue !important; 
}

using :hover :active nothing happened can't change whisker-menu background.
Hopefully can there's a way to do this, thanks in advance.

There is and I have actually uploaded all these codes on Pling... They are as Themes, but anyone can change what they see and remove anything they dislike by using any of them as a template:)
Here is one example:
https://www.pling.com/p/1355565/
HERE are the cmds for Whiskermenu Panel Button as BLANKS- fill in the fields you want:

#whiskermenu-button {
    background-color: transparent;
    background-image: none;
    background-size: auto;
    border-color: transparent;
    border-image: none;
    padding: 1px 1px 1px 1px;
	color: transparent;
	font-weight: normal;
}
#whiskermenu-button:hover{
    background-image: none;
    background-size: auto;
    border-color: transparent;
    border-image: none;
    padding: 1px 1px 1px 1px;
    background-color: transparent;
	color: #ffffff;
}
#whiskermenu-button:checked{
    background-image: none;
    background-size: auto;
    padding: 1px 1px 1px 1px;
    background-color: transparent;
    border-color: transparent;
    border-image: none;
	color: #fff;
}

Ask any questions.

Here are all the cmds- BLANK- as a blank template that you can fill in or ignore any of the options you desire:

#whiskermenu-window.background {
  background-image: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color:  transparent;
  border-radius: 1px;
}
#whiskermenu-window entry {
  min-height: 20px;
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-image: none;
  background-color: transparent;
  color: #F3F3F5;}

#whiskermenu-window entry:focus {
    border-image: none;
    background-color: transparent;
    background-image: none;
}

#whiskermenu-window entry:disabled {
    border-image: none;
    background-color: transparent;
    color: #949597;
    background-image: none; 
}

#whiskermenu-window button:active{
    transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-duration: 100ms;
    color: #ffffff;
    background-image: none;
    background-repeat: no-repeat;
    background-size: auto; }

#whiskermenu-window button:hover{
    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-duration: 0ms;
    color: #ffffff;
    background-image: none;
    background-repeat: no-repeat;
    background-size: auto; }

#whiskermenu-window button:checked {
    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-duration: 200ms;
    color: #ffffff;
    background-image: none;
    background-repeat: no-repeat;
    background-size: auto; }

/*panel button*/
#whiskermenu-button{
	color: #bac3cf;
	font-weight: normal;
}
#whiskermenu-button:hover{
	color: #ffffff;
}

/*tree list*/
#whiskermenu-window treeview {
	background-color: transparent;
	color: #fff;
}
#whiskermenu-window treeview:hover {
	background-color: transparent;
	color: #f2f2f2;
}
#whiskermenu-window treeview:selected {
	background-color: transparent;
	color: #f2f2f2;
	outline-color: #3f4453;
}
/*panel button*/

/*.xfce4-panel.panel button {
    background-image: none;
}*/
.xfce4-panel.panel button:hover {
    background-image: none;
}
.xfce4-panel.panel button:active {
    background-image: none;
}
.xfce4-panel.panel button:checked {
    background-image:none;
}
/*.xfce4-panel.panel.background {
    background-image: none;
    background-size: auto;
    background-repeat: no-repeat;
}*/


#whiskermenu-window scrollbar.vertical button.down {
  -gtk-icon-source: none;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  border-image: none; }
#whiskermenu-window scrollbar.vertical button.down:hover {
  -gtk-icon-source: none;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  border-image: none;  }
#whiskermenu-window scrollbar.vertical button.down:active {
  -gtk-icon-source: none;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  border-image: none;  }
#whiskermenu-window scrollbar.vertical button.up {
  -gtk-icon-source: none;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  border-image: none;  }
#whiskermenu-window scrollbar.vertical button.up:hover {
  -gtk-icon-source: none;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  border-image: none;  }
#whiskermenu-window scrollbar.vertical button.up:active {
  -gtk-icon-source: none;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  border-image: none;  }

#whiskermenu-window treeview.view:selected, #whiskermenu-window treeview.view:selected:focus {
  color: #ffffff;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
  -gtk-icon-shadow: none;
  background-image: linear-gradient(to right,
	                                  #3296CF,
	                                  #004473);
 }

This should give you enough material that you can customize your Whiskermenu and panel, panel buttons and launchers pretty much Any Way You Want. You can add background images or border images, adjust the values as needed (For example, background-size, you can try using contain, cover, auto, or a percentage like "background-size: 45% 50%;" ) and so on.

Wow thank you for the information provided, It's actually working, now I'm actually really happy with xfce 4.14 gtk 3 smile thanks again!!

Offline

#11 2020-03-10 10:07:05

Aravisian
Member
Registered: 2019-08-17
Posts: 410

Re: Panel launcher buttons hover background

NemKo wrote:

now I'm actually really happy with xfce 4.14 gtk 3 smile

...
oops...

Offline

Pages: 1

Registered users online in this topic: 0, guests: 1
[Bot] ClaudeBot

Board footer

Powered by FluxBB
Modified by Visman

[ Generated in 0.016 seconds, 9 queries executed - Memory usage: 611.43 KiB (Peak: 628.27 KiB) ]