New
#71
I was certainly thinking of it as an exercise. I'll have a play and see what happens.
Last edited by Bert Coules; 23 Feb 2024 at 09:24.
I was certainly thinking of it as an exercise. I'll have a play and see what happens.
Last edited by Bert Coules; 23 Feb 2024 at 09:24.
Actually, you can use the Browser Toolbox, to live debug your CSS.
Firefox (also Thunderbird) DevTools:
In about:config preferences set up the following.
about:config preferences:
Then, you can start the "Browser Toolbox" through the menu.Code:devtools.chrome.enabled true devtools.debugger.remote-enabled true devtools.inspector.showAllAnonymousContent true This one (obviously) to enable the use of your own userChrome/userContent. toolkit.legacyUserProfileCustomizations.stylesheets true This one to accept remote debugging connection without any prompt. devtools.debugger.prompt-connection FALSE
For Firefox, use
main Menu: Tools > Browser Tools > Browser ToolBox
For Thunderbird, use
main Menu: Tools > Developer Tools > Developer Toolbox.
In the Browser Toolbox window which appears, select the "Style Editor" tool.
Find your own css files by using the filter box in the left panel.
Select it, and you can live edit your code in the right hand side edit panel.
If you want to save your edits, press the Save button, BUT make sure you have a backup of your own original css file, as it will be over-written without warning.
You can read more about it at and other tools:
Firefox DevTools User Docs — Firefox Source Docs documentation
@das10, may I ask your advice once again? After having lived with the newly-designed layout for Firefox for a couple of weeks there's one final adjustment I'd like to make, but I can't work out how to do it myself.
I'd like to increase the padding at the bottom of the toolbar which holds the File, Edit, View... commands by a tiny amount (1px? 2px?) because at the moment, the text (especially with its underlined initial capitals) appears to be slightly too close to the bottom rather than being centred vertically:
Many thanks.
Try and add the following code to Aris's "my_userChrome.css" file. Hopefuly it doesn't affect any of the elements which are below the menubar.
my_userChrome.css (additional code)
IF when going to full screen mode (F11), you find that the menubar is blank regardless of the above code, you can also add the following to make the menubar visible in the full screen mode.Code:/************************************************************************************/ /* 2px extra space below labels in menubar */ #toolbar-menubar menubar { padding-bottom: 2px !important; } /************************************************************************************/
Code:/* show menu bar in full screen mode otherwise it is blank band - this is Aris's code */ /* menubar visibility in fullscreen mode */ #main-window[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #toolbar-menubar { display: flex !important; visibility: visible !important; }
With a setting of 3px that gave exactly the look I wanted; thanks so much. Nothing else was affected and the menubar remained visible in full screen mode.
The reason my effort didn't work was that I was using the same basic code but with just #menubar rather than your #toolbar-menubar menubar. It would never have occurred to me to try that. It's interesting that the other toolbar labels are so inconsistent: #TabsToolbar, #nav-bar, #PersonalToolbar, and #urlbar.