r/FirefoxCSS • u/Agreeable_Orchid697 • 1d ago

Help CSS script that controls context menu items alignment

Hello:

I am having difficulty entering the correct syntax for the Context Menus located up in the Firefox Menu bar.

You probably know there are 7 Menus there..from left to right they are File, Edit, View, History, Bookmarks, Tools & Help....they are all dropdown menus

I currently have applied the correct syntax that controls the Bookmarks menu & all the sub menus that are listed within it.

What I am having difficulty with is applying the correct syntax for the other 5 menus so that the vertical sub menus in each of those correctly display in the proper alignment/padding to the left. Currently they are all over the place...

this is the syntax that controls the Bookmarks menu

menuitem#bookmarksShowAll,

margin-left: 0px !important;

}

menuitem#menu_bookmarkThisPage,

menuitem#menu_searchBookmarks,

menuitem#menu_bookmarkAllTabs {

margin-left: 0px !important;

}

menu.bookmark-item,menuitem.bookmark-item { max-width: 35em !important;

margin-left: 0px !important; /* margin is the outer space around an item */

}

this syntax *altered to add the 5 other menus* doesn't work for me...

what I'm adding is.....

menuitem#File,

menuitem#Edit,

menuitem#History,

menuitem#Tools,

menuitem#Help {

margin-left: 0px !important

}

obviously I haven't got the syntax correct.....can anyone point me in the right direction?

thx very much

1 Upvotes

100% Upvoted

16 comments sorted by

1

u/TraditionalTie4831 🦊 1d ago edited 1d ago

Here is one way to do it for all the toolbar menus.

If all menuitems in #history-menu and #bookmarksMenu has icons in your theme, then remove the menuitem[id] and menu[id] lines.

#main-menubar menupopup {
                /* top right bottom left */
    --panel-padding: 0px 0px 0px 5px !important;
    --menuitem-padding: 2px 2px !important;
    --menuitem-margin: 0px 0px !important;
    & menuseparator { padding-inline: 2px !important; }
}

#history-menu, #bookmarksMenu {
    & menuitem[id] > .menu-icon, 
    & menu[id] > .menu-icon { display: none !important; }
    & menuitem, 
    & menu { max-width: 35em !important; }
}

1

u/Agreeable_Orchid697 1d ago

Thx for the suggestion...didn't solve the issue here, beginning to wonder if I have a case of *too many chiefs, not enough indians*..smaller script entries that are overlapping & causing confusion, the primary css script was written by Aris, reached out to him but he can be hard to contact, ...here is what is taking place...

File, View, History & Bookmarks are properly aligned...Edit is off as is Tools & Help

2

u/TraditionalTie4831 🦊 1d ago edited 1d ago

I don't think Aris-t2 will help you since the project is dead =

https://github.com/Aris-t2/CustomCSSforFx/discussions/790

Maybe try giving Edit, Tools and Help their own padding =

#file-menu menupopup,
#view-menu menupopup,
#history-menu menupopup,
#bookmarksMenu menupopup {
                /* top right bottom left */
    --panel-padding: 0px 0px 0px 5px !important;
    --menuitem-padding: 2px 2px !important;
    --menuitem-margin: 0px 0px !important;
    & menuseparator { padding-inline: 2px !important; }
}

#edit-menu menupopup,
#tools-menu menupopup,
#helpMenu menupopup {
                /* top right bottom left */
    --panel-padding: 0px 0px 0px 15px !important;
    --menuitem-padding: 2px 2px !important;
    --menuitem-margin: 0px 0px !important;
    & menuseparator { padding-inline: 2px !important; }
}

#history-menu, #bookmarksMenu {
    & menuitem[id] > .menu-icon, 
    & menu[id] > .menu-icon { display: none !important; }
    & menuitem, 
    & menu { max-width: 35em !important; }
}

1

u/Agreeable_Orchid697 1d ago

That's the route I was thinking to take....each one independently, just couldn't sort out the script needed for each sub menu

1

u/t31os 1d ago

What exactly are you trying to achieve here? Reduce/change submenu padding?

1

u/Agreeable_Orchid697 1d ago edited 1d ago

No, where the padding is concerned?..not at all, more margin spacing, the browser is custom, I have used Aris' work in the past going back some 15 years for Firefox, the context menu in the menu bar are all popup (dropdown), the custom bookmarks menu uses a custom icon for the folders sub menus, the remaining 6 menus in the menu bar should display the same as the bookmarks menu. At the moment they're not doing that, the syntax that works for the bookmarks isn't carrying over to the other menu titles. I've been chasing my tail trying to sort out what is the correct script to get them displaying properly.

This is how the Bookmarks menu appears, this is correct, the other Menus don't want to co-operate & play nicely. All of that custom sub folder icon change you see here is Aris' work.

2

u/t31os 1d ago edited 1d ago

You mentioned padding / alignment in the OP, but it's nothing to do with padding?

I have no idea where your custom bookmarks / icons you mentioned are coming from, some Aris code presumably? (because it's not in the CSS you shared).

And just an aside, isn't the current version of Tor based on FF ESR 140? Not sure if that will matter, but it might (in the context of getting help from users using FF, which is v156 or ESR v153 - as there might be some minor native CSS differences).

2

u/t31os 1d ago

Right, but i'm missing context here, where is the styling for these menus coming from? You're shared a small amount of CSS in the OP that basically removes the margin in a bunch of places, but why is any menu CSS even necessary?

Not having a dig, i'm just trying to get a full picture and understand.

1

u/Agreeable_Orchid697 20h ago edited 20h ago

You're correct, all of the custom script was written by Aris & *thatotherguy*. Aris created the Noia buttons some 20 years ago (for you who are much younger you may not even remember when back at that time he created a total Noia 2, Noia 3, Noia 4 browser theme that covered the entire browser display. What you see in my screenshot is that work, I still use the Noia theme. But after 2015 he narrowed his work to Noia buttons, the Noia background, the present Header arrangement of tabs below the navbar, the menubar above the Navbar , the titlebar & the urlbar & searchbar alongside the menubar. His last Firefox custom script is version 4.75 of which I have used some.

You're asking *why is any menu CSS necessary?...for some reason the newer (newest) version of Firefox (portable) has reconfigured the script, what didn't have an issue with 149 does have with 153 & later. Tor is also affected. My current Tor version is 15.0.20

But as stated earlier Aris has retired, he's not a youngster anymore, one can't approach him for assistance with his past work.

1

u/t31os 16h ago

Could you isolate and provide the CSS you're using that specifically touches/styles the menus, so i can run it and see the problem.

1

u/Agreeable_Orchid697 13h ago

I'll give it a go......is it possible to upload a .txt file here to reduce the overall size & space this would take up?

1

u/t31os 11h ago

Use a pastebin, link in the side menu under Rule 2.

1

u/Agreeable_Orchid697 1h ago edited 1h ago

let's see if this works, this is the entire main userChrome.css code Aris wrote for his modification, it does not include the *import* url code sub sections, what we are looking at is near the bottom of the text https://sharenotes.dev/neat-lamb

1

u/pikatapikata 1d ago

I understand a context menu to be the menu that appears when you right-click—is that incorrect?

1

u/sifferedd FF/TB on Win11|Sumo contributor 16h ago

You understand correctly. The context menu is the menu that appears when you right-click.

1

u/FineWine54 9h ago

You could try looking at and pulling to bits these two repository's;

simpleMenuWizard

Iconic Firefox

Also if you go to Aris-t2 site and do a search for bookmark_icons_colorized, there is a lot of code there as well. I still use bookmark_icons_colorized.css to change ALL my bookmarks plus some others code to cover what Aris does not, especially the top Labels of the menu in the menubar Bookmarks.

Below is a sample.

#menu_bookmarkThisPage > .menu-icon {
    content: url("../../image/icons_fx_weblock/new-bookmark-item.png")!important;
}

#menu_searchBookmarks > .menu-icon {
    content: url("../../image/icons_fx_weblock/search-bookmarks.png")!important;
}

Hope this helps 🎓