How to make Australis button not style on hover or active

Talk about add-ons and extension development.
Post Reply
yajd
Posts: 55
Joined: February 3rd, 2014, 6:02 pm

How to make Australis button not style on hover or active

Post by yajd »

Hi all,

So I'm adding a toolbarbutton to Australis. But I don't want it to get the hovered box when its hovered, and i dont want it to get the depressed look when clicked.

How can I do this? If I set it to disabled it works, but then event listener of command doesnt work on it and it becomes too light.

You can install the addon from here to see it:
https://github.com/yajd/Throbber-Restored
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: How to make Australis button not style on hover or activ

Post by patrickjdempsey »

All of the styling cues for various objects in the Firefox interface comes from what kind of element they are, and what classes they have. "toolbarbutton" elements with the class of ".toolbarbutton-1" will be styled with that hover style. Traditionally, movable items which are meant to be unstyled use the "toolbaritem" element and avoid the use of style-flagging classes. FYI, you can easily learn about this by using DOM Inspector to inspect an element and then view the applied CSS to see where the style rules are originating from.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
yajd
Posts: 55
Joined: February 3rd, 2014, 6:02 pm

Re: How to make Australis button not style on hover or activ

Post by yajd »

Well the thing is I like the toolbarbutton look, the padding and stuff is nice, i just need to disable the hover and active styles, im not so great with css :(
Noitidart
Posts: 1168
Joined: September 16th, 2007, 8:01 am

Re: How to make Australis button not style on hover or activ

Post by Noitidart »

I found the culprit. Its the class of toolbarbutton-icon on the xul:image element within the toolbarbutton that is responsible for the the hover and active styling:
http://img.photobucket.com/albums/v135/ ... 85df20.png

now the grunt work is to create style so that when its in nav-bar if hover or active it should override the hover and active styles with the normal style
Noitidart
Posts: 1168
Joined: September 16th, 2007, 8:01 am

Re: How to make Australis button not style on hover or activ

Post by Noitidart »

Ok figured it out, this is the style to apply to your custom widget by id if you want the hover and active styles to not take affect. This gives it the effect of not clickable. This example below is applying this style to my widget which has id of "navigator-throbber".

Code: Select all

  /*start - make not clickable style meaning no hover and no active*/
  /*start - when in nav-bar*/
  toolbar[id="nav-bar"] * #navigator-throbber[cui-areatype="toolbar"] > image {
   border: 1px solid transparent !important;
   border-radius: 2px !important;
   box-shadow: transparent 0px 1px 0px 0px inset, transparent 0px 1px 0px 0px, transparent 0px 0px 2px 0px !important;
   height: 24px !important;
   padding: 3px 7px !important;
   perspective-origin: 16px 12px !important;
   transform-origin: 16px 12px !important;
   transition-property: background-color, border-color, box-shadow !important;
   width: 32px !important;
   background-image: none !important;
   background-color: transparent !important;
   transition-duration: 0.15s !important;
  }
  /*start - when in PanelUI-popup*/
  #navigator-throbber[cui-areatype="menu-panel"] {
   background-color: transparent !important;
   border-color: transparent !important;
   box-shadow: none !important;
  }
  /*start - handle when in tabs bar*/
  toolbar[id="TabsToolbar"] > #navigator-throbber[cui-areatype="toolbar"] {
   background-image: none !important;
   background-position: 0% 0% !important;
   background-size: auto auto !important;
   /*background-repeat: repeat;*/ /*this is the normal value but i just left it out, the on hover value is no-repeat*/
   border-color: transparent !important;
  }
  /*start - handle when in bookmarks bar, toolbar-menubar (file view tools etc), and all other toolbars (just not tabstoolbar or navbar, in navbar its not direct descdent but grandchild so the > makes the different)*/
  toolbar:not([id="TabsToolbar"]) > #navigator-throbber[cui-areatype="toolbar"] {
   padding: 3px !important;
   -moz-appearance: none !important; /*otherwise i cant edit border-color, weird i know but this is what made it work*/
   border-color: transparent !important;
   outline: none !important;
   outline-offset: 0 !important;
  }
  /*end - make not clickable style meaning no hover and no active*/
Post Reply