1

I have been modifying the gtk.css file and managed to change the look of mi windows. For the most part i have been able to figure what certain components i must modify to change the look of certain things. however I have not been able to find a way to modify the window's minimize, maximize, and close buttons certain properties and I have been trying for a good while now.

enter image description here

I was able to modify the background-image of the search button in my terminal as you can see in the picture to make it blend in into the headerbar color.

I was able to modify the color of the minimize, maximize, and close buttons color but I can't seem to figure out two remove the background color for these three buttons.

I used the following to modify the regular buttons properties.

button{
  /* min-height: 0px;
  min-width: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;*/
  /* border: 1px pink; */
  /*border-radius: 0px; */
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  color: blue;
  outline-color: rgba(229, 112, 132, 0.7);
  border-color: pink;
  background-image: image(pink);
  text-shadow: 0 1px rgba(255, 255, 255, 0.769231);
  -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); }

I used the following to change the close and others buttons colors as well, But i can't make the background color disappear.

 button.minimize, button.maximize, button.close{
    color: blue;
    border:0px;
    border-radius: 0px;
    border-color: pink;
    background-image: image(pink);
    background-color: pink;
    border-radius: 0px;
  }

I used all the following components but i just can't seem to make it work, I used one by one, they are not all active at once. These modify the color but won't modify the background color like it did with the search button or menu button from the terminal.

 headerbar .close{
  color:yellow;
} 
  .tab-close-button{
  color:red;
} 
button.titlebutton.minimize{
  color: red;
  background-color: pink;
  background-image: :image(pink);
}

button.headerbutton.minimize{
  color: red;
  background-color: pink;
  background-image: image(pink);
}

  button.header.minimize{
  color: yellow;
  background-color: pink;
  background-image: :image(pink);
}
Gustavo Palomino
  • 41
  • 4

1 Answers1

0

I know its been 3 months since this post but I have an answer. Even if you had already found it, might as well send it for those coming from google.

windowcontrols button image:not(:hover) {
    background-color: transparent;
}
debuggy
  • 1