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
How to make Australis button not style on hover or active
-
- Posts: 55
- Joined: February 3rd, 2014, 6:02 pm
- 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
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/
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
-
- Posts: 55
- Joined: February 3rd, 2014, 6:02 pm
Re: How to make Australis button not style on hover or activ
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
-
- Posts: 1168
- Joined: September 16th, 2007, 8:01 am
Re: How to make Australis button not style on hover or activ
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
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
-
- Posts: 1168
- Joined: September 16th, 2007, 8:01 am
Re: How to make Australis button not style on hover or activ
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*/