MozillaZine

Forward and back button backgrounds (hover status)

Discuss application theming and theme development.
ErraticFox

User avatar
 
Posts: 16
Joined: October 28th, 2013, 11:33 am

Post Posted November 1st, 2013, 1:23 am

I've been sifiting through all kinds of code to find the properties Mozilla used to make the grey background on the forward and back button while hovered. I'm using chrome://browser/content/browser.xul along with FireBug and DOMi to try to find it. I know that

#back-button:hover {
display: none !important;
}

will make the whole button disappear, so the background has to be nested in this div id. I just don't know what properties they're using to create this. Can anybody help me out?

Image

smsmith
Moderator

User avatar
 
Posts: 19446
Joined: December 7th, 2004, 8:51 pm
Location: Indiana

Post Posted November 1st, 2013, 6:32 am

Looks like maybe this is what you are after:
Code: Select all
#back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
  background-color: hsla(210,48%,96%,.75) !important;
  box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset,
              0 0 0 1px hsla(0,0%,100%,.3) inset,
              0 0 0 1px hsla(210,54%,20%,.3),
              0 1px 0 hsla(210,54%,20%,.4),
              0 0 4px hsla(210,54%,20%,.2) !important;
}

#back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
#back-button[open="true"] > .toolbarbutton-icon {
  background-color: hsla(210,54%,20%,.15) !important;
  box-shadow: 0 1px 1px hsla(210,54%,20%,.1) inset,
              0 0 1px hsla(210,54%,20%,.2) inset,
              0 0 0 1px hsla(210,54%,20%,.4),
              0 1px 0 hsla(210,54%,20%,.2) !important;
  transition: none;
}


chrome://browser/skin/browser.css <-- the URI from DOM Inspector.
Give a man a fish, and he eats for a day. Teach a man to fish, and he eats for a lifetime.
I like poetry, long walks on the beach and poking dead things with a stick.
Please do not PM me for personal support. Keep posts here in the Forums instead and we all learn.

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest