X
Tap here to go to the mobile version of the site.

Support Forum

Hide specific drop-marker but keep drop down functionality using CSS

Posted

Im trying to customize an add-in toolbar menu icon using user.chrome. I was able to do it in a very complicated way. Wondering if there is a cleaner way to do this.

The button is a drop down list and what I am trying to do is remove the drop-down marker from this icon ONLY and not all markers, but keep the functionality of the marker. I found the button and marker in DOM inspector but was not initially able to turn off just the drop marker. I eventually changed the icon from toolbarbutton type "menu" to "menu-button" which separated the button and the marker. The problem was if I now hid the marker the button has no events associated with it (they are in the hidden marker).

I came up with this mess below and was wondering if there is a better way to do it.

/*Hide the real icon*/

  1. addin-button toolbarbutton { visibility:collapse !important;}

/*Change the drop marker icon to match the hidden icon */

  1. addin-button .toolbarbutton-menubutton-dropmarker .dropmarker-icon {list-style-image: url(data:image/png;base64,iBLA-BLA-BLA) !important; width: 100% !important; -moz-image-region: rect(0, 0, 0, 0) !important;}
Im trying to customize an add-in toolbar menu icon using user.chrome. I was able to do it in a very complicated way. Wondering if there is a cleaner way to do this. The button is a drop down list and what I am trying to do is remove the drop-down marker from this icon ONLY and not all markers, but keep the functionality of the marker. I found the button and marker in DOM inspector but was not initially able to turn off just the drop marker. I eventually changed the icon from toolbarbutton type "menu" to "menu-button" which separated the button and the marker. The problem was if I now hid the marker the button has no events associated with it (they are in the hidden marker). I came up with this mess below and was wondering if there is a better way to do it. /*Hide the real icon*/ #addin-button toolbarbutton { visibility:collapse !important;} /*Change the drop marker icon to match the hidden icon */ #addin-button .toolbarbutton-menubutton-dropmarker .dropmarker-icon {list-style-image: url(data:image/png;base64,iBLA-BLA-BLA) !important; width: 100% !important; -moz-image-region: rect(0, 0, 0, 0) !important;}

Additional System Details

Installed Plug-ins

  • Shockwave Flash 25.0 r0
  • The QuickTime Plugin allows you to view a wide variety of multimedia content in Web pages. For more information, visit the QuickTime Web site.
  • DRM Netscape Network Object
  • Npdsplay dll
  • DRM Store Netscape Plugin
  • RealPlayer(tm) LiveConnect-Enabled Plug-In
  • 6.0.12.1739
  • Adobe Acrobat Plug-In Version 5.00 for Netscape

Application

  • User Agent: Mozilla/5.0 (Windows NT 5.1; rv:27.0) Gecko/20100101 Firefox/40.0

More Information

jscher2000
  • Top 10 Contributor
8632 solutions 70597 answers

This is confusing... how do you hide the drop-menu marker button AND keep its functionality?

I'm attaching an image associated with the Greasemonkey button as an example. Is that the same structure your target extension button pair has?

You could try something like this but it's annoying:

/* Hide the Greasemonkey button drop marker */
#greasemonkey-tbb > .toolbarbutton-menubutton-dropmarker {
  display: none !important;
}

/* Show the Greasemonkey button drop marker when hovering
   Causes ANNOYING shift!! */
#greasemonkey-tbb:hover > .toolbarbutton-menubutton-dropmarker {
  display: -moz-box !important;
}

Or do you mean you want to hide the button part and replace the icon on the dropmarker with the icon of the button? Sorry, I'm out of time to experiment but maybe this will move the ball forward:

/* Hide the Greasemonkey button */
#greasemonkey-tbb > .toolbarbutton-menubutton-button {
  display: none !important;
}
/* Replace the icon of the Greasemonkey dropmarker */
#greasemonkey-tbb > .toolbarbutton-menubutton-dropmarker .dropmarker-icon {
  list-style-image: url("chrome://greasemonkey/skin/icon16.png") !important; 
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  border-left: none !important;
}
/* Get rid of divider */
/* TBD! */
This is confusing... how do you hide the drop-menu marker button AND keep its functionality? I'm attaching an image associated with the Greasemonkey button as an example. Is that the same structure your target extension button pair has? You could try something like this but it's annoying: <pre>/* Hide the Greasemonkey button drop marker */ #greasemonkey-tbb > .toolbarbutton-menubutton-dropmarker { display: none !important; } /* Show the Greasemonkey button drop marker when hovering Causes ANNOYING shift!! */ #greasemonkey-tbb:hover > .toolbarbutton-menubutton-dropmarker { display: -moz-box !important; }</pre> Or do you mean you want to hide the button part and replace the icon on the dropmarker with the icon of the button? Sorry, I'm out of time to experiment but maybe this will move the ball forward: <pre>/* Hide the Greasemonkey button */ #greasemonkey-tbb > .toolbarbutton-menubutton-button { display: none !important; } /* Replace the icon of the Greasemonkey dropmarker */ #greasemonkey-tbb > .toolbarbutton-menubutton-dropmarker .dropmarker-icon { list-style-image: url("chrome://greasemonkey/skin/icon16.png") !important; padding-top: 2px !important; padding-bottom: 2px !important; border-left: none !important; } /* Get rid of divider */ /* TBD! */</pre>
jscher2000
  • Top 10 Contributor
8632 solutions 70597 answers

Oh, your Firefox identified itself to the forum as version 40. An update is available: this article describes how to get Firefox 52 ESR (Extended Support Release) if you're on XP: Important - Firefox has ended support for Windows XP and Vista.

If something is holding you back from upgrading to Firefox 52, please let us know so we can suggest solutions or workarounds. Version 40 is not secure; Mozilla discloses security flaws after each new release.

Sometimes Firefox reports the wrong version because that information was saved in a preferences file. If you have Firefox 52.0esr or 52.1.0esr, you may need to clear out that incorrect information. See: How to reset the default user agent on Firefox.

Oh, your Firefox identified itself to the forum as version 40. An update is available: this article describes how to get Firefox 52 ESR (Extended Support Release) if you're on XP: [[Important - Firefox is ending support for Windows XP and Vista]]. If something is holding you back from upgrading to Firefox 52, please let us know so we can suggest solutions or workarounds. Version 40 is not secure; Mozilla discloses [https://www.mozilla.org/security/known-vulnerabilities/firefox.html security flaws] after each new release. Sometimes Firefox reports the wrong version because that information was saved in a preferences file. If you have Firefox 52.0esr or 52.1.0esr, you may need to clear out that incorrect information. See: [[How to reset the default user agent on Firefox]].
cor-el
  • Top 10 Contributor
  • Moderator
17407 solutions 157253 answers

It is a weird user agent with rv:27.0 and Firefox 40.0 These two would normally match. Is this a fake user agent or do you have a general.useragent.override pref (about:config)?

  • Mozilla/5.0 (Windows NT 5.1; rv:27.0) Gecko/20100101 Firefox/40.0
It is a weird user agent with rv:27.0 and Firefox 40.0 These two would normally match. Is this a fake user agent or do you have a general.useragent.override pref (<b>about:config</b>)? *Mozilla/5.0 (Windows NT 5.1; rv:27.0) Gecko/20100101 Firefox/40.0

Question owner

Thanks for your help. That is pretty much what I was doing but I think your code is cleaner :-)

Thanks for your help. That is pretty much what I was doing but I think your code is cleaner :-)
cor-el
  • Top 10 Contributor
  • Moderator
17407 solutions 157253 answers
(also posted here: [http://forums.mozillazine.org/viewtopic.php?f=38&t=3029686])