b00ze64 / ff-menu-icon-plus-css Goto Github PK
View Code? Open in Web Editor NEWAdd icons to Firefox menus using userChrome/userContent.css
License: Other
Add icons to Firefox menus using userChrome/userContent.css
License: Other
Note: I just report it here, but the credits go to user bananovic in German forum Camp Firefox, cf. thread Größere Abstände zwischen den Menüsymbolen und dem Menütext.
In some main menus no icons are displayed. Apparently, you have asked for a solution at CustomJSforFx (your request), and after some help by @Aris-t2 you have created a script that works (at least, I found it only there). But this script produces a new issue: There are now too large gaps for most items between the icons and the labels, cf, images posted by bananovic: image1, image2, which provoked the request by bananovic. I confirm this observation.
Long story short, bananovic found another, very simple solution consisting in altering a single value in your style code:
menupopup[needsgutter] menu:not([icon], .menu-iconic), menupopup[needsgutter] menuitem:not([checked="true"], [icon], .menuitem-iconic) {
--mip-menu-icon-margin: 0;/* changed value, was "-24px" before */
}
The value of zero is mine, bananovic used "-1px".
This said:
Why do you make it so difficult for yourself and other people who potentially may want to help you? I’ve searched for the particular rule and apparently you have used the almost same code 17 times. The rule set obviously differs between the styles only in the icons. Why don’t you just create a basic style (or one for the menus, one for the panel, one for the library) and then import this (these) into the styles for the icon sets? How exactly, is up to your choice, but for instance, you could take the one you actively use as the basic style. This could even be done with variables for every symbol which then are applied in the distinct rules for the various icon sets with the necessary value.
Using your script in conjunction with Aris's CustomCSSforFx. First off, props to your incredible work. I don't even remember the original Menu Icons Plus extension being this comprehensive.
I've noticed a few minor snags with the Bookmarks menu, however. Both the the filemenu and "panel".
To start, the filemenu. As shown in the image, there's an overlap on the 'Mobile Bookmarks' entry where the cellphone and folder submenu icon seem to be competing for the entry.
The other issue is in the panel, which I realize isn't (yet) the focus of this project.
The green + icon resource is overlapping the panel text in this case.
My settings are relatively vanilla, I just enabled the entries in your script to show a few classic Ff icons where possible.
Furthermore, I do have one question. When do you do begin skinning the panel menus (Hamburger, etc), would it be possible to style address/search icons or the Site Information dialogue?
Thanks
Hello,
thank you for the new release.
-moz-image-region
is no longer supported in Firefox and can simply be removed. It was only necessary for png files with many icons which is no longer supported. For single icon png files it is redundant.
First off, thank you for making this available. It looks great on my FF 79 running Windows 10. I'm using your default theme Fugue Plus. I have noticed a few icons missing on the context menu when you click over a blank area of a page. Back, Forward, Reload and Bookmark This Page are the ones missing. I'll attach a screen capture of it below. I have icons showing everywhere else.
If we use completely Aris-t2's CustomCSSforFx, where is the best way to integrate with it?
Hi B00ze64,
A basic question I have to ask, I would like to use your FF-Menu-Icon-Plus-CSS files & folders for use with Aris-t2CustomCSSforFx. I know that I need to add the folders and css files to the Chrome folder. I created a couple of CSS files called my_userChrome.css & my_userContent.css that Aris-t2 recommends for any "special" CSS files and have that load with the userChrome.css & the userContent.css. Your MIP folders I added to the existing Chrome folder where everything is located.
I can't seem to get my menus and such to look remotely like your showing with the descriptions. It appears that I am missing something. I have that one command activated that you pointed out. I always have that activated.
Maybe you can point me in the right direction would be very helpful. If you need more information I will be glad to supply it. I have as my operating system Mac OS 11.4 (Big Sur) Firefox 89. Please advise.
Thank you in advance,
Thomas
Hi,
I have a problem/installation issue/bug whereby the items that can be selected in an on/off manner in the drop down menus contain a check box as well as the icon. All other icons are present as they should be. See attached screenshot. I originally encountered this issue with a moderately modified Firefox using Aris's CustomCSS but I'm now testing this in a completely new profile with a default installation of both projects and the problem remains. The only thing I've changed is the value of --mip-menu-icon-margin in mip_ConfigMenus.css from -24px to 0px to make the icons in the File drop down menu appear.
Any help to fix this fly in the ointment of an otherwise great result would be appreciated.
After you according to release notes removed support for the FirefoxSVG theme from v2.6.8 you also should remove its import possibility from userChrome.css
(lines 72 + 73,line 85) and userContent.css
(line 66).
Hi!
I tried this (with silk theme), and immediately noticed this issue. Both tools and context menu shows the scroll arrows by default.
There would be no reason to scroll. The scrollbutton actully covers one menu item.
(FF 83 dev edition)
Hello Sir,
Thank you for this awesome work. I'm new to all these Firefox customization and I just have got a question,
I like the (Silk) variation of these icons and I've these files installed properly :
@import "./MipCss/mip_Silk-Menus.css";
@import "./MipCss/mip_override_CutCopyPaste-Silk.css";
But the Silk project doesn't theme the 'Web Developer' & 'About' menus from the Hamburger button. So will there be any support for them? THANK YOU so much.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.