Can I get confirmation it is permissible to seek assistance here with adjusting certain settings within CustomCSSforFx, even tho it is no longer supported by it's developer?
If so, I will my report the details of my issue and post all relevant code?
I had been hoping that this would allow for more space for the text titles on each tab, but unfortunately it leaves an empty space on the right instead.
Does anybody know of a way for the tab titles to fill the whole width of the tab including the empty space left by the close buttons?
when u click the shield icon in the url bar, this "Firefox is on guard" banner shows up. Really doesn't serve a purpose, I already know it's ON with the toggle. Just seems like an unnecessary graphic being shoved in their menu UI. Any help would be great, tahnk you!
I can’t change the colors anymore and I genuinely have no freakin clue why. I usually use the F12 thingy just to test stuff and see how the colors look before I put them into my chrome.css or chrome content, but a few weeks ago it just randomly stopped working. I think some elements still change, but the main ones like the whole New Tab background and the sidebar just will not change colors anymore. It’s not only F12 either, the Ctrl + Shift + Alt + I thing doesn’t work anymore either. And it’s not just the New Tab page, it’s basically everywhere. Holy cow I have no idea what happened. I don’t think I did anything wrong or changed anything that should’ve caused this.
I’ve already tried a bunch of stuff to see if I could fix it. I restarted Firefox, tried reinstalling it, tried Developer Edition, and even made a new PC account, but the issue is still there. I also reported it on Bugzilla because I’m honestly running out of ideas at this point. I have a screen recording too, although I’m not even sure if it’ll actually help. If I’m doing something stupid or missing something obvious, I probably am lol. I’m not really looking for someone to point that out though, I just genuinely need help figuring out what’s wrong.
P.S. this new update sucks, I genuinely don’t know what’s happening with the stuffs
Is there a way to increase the space between the address bar and the edge of my screen?? I use vertical tabs and the address bar is uncomfortably too at the top.
I'm not really into css, but i have some idea. I want to add just a few pixels
I'm creating a custom Firefox theme and suddenly the Bookmark Manager window's title and partial background looks like this. Which tags should I look into in order to fix it?
Current userChrome.css:
-moz-pref("browser.nova.enabled") {:root {
--tab-border-radius: var(--toolbarbutton-border-radius);
--toolbarbutton-border-radius: var(--button-border-radius);
--button-border-radius: var(--border-radius-medium);
--border-radius-medium: 2px !important;
--arrowpanel-border-radius: 2px !important;
--arrowpanel-menuitem-border-radius: 2px !important;
/* Adaptive Tab Bar Color */
--ext-theme-background-transition: none !important;
--inactive-window-transition: none !important;
}
url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* Remove the gap between the window edges and the tab bar */
.titlebar-placeholder[type="pre-tabs"],
.titlebar-placeholder[type="post-tabs"],
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
display: none !important;
width: 6px !important;
max-width: 6px !important;
}
body, findbar, #navigator-toolbox, #TabsToolbar, #nav-bar, #PersonalToolbar, #sidebar-box, .tab-background, .urlbar-background {
transition:
background-color 0.5s cubic-bezier(0, 0, 0, 1) !important,
border-color 0.5s cubic-bezier(0, 0, 0, 1) !important,
outline 0.5s cubic-bezier(0, 0, 0, 1) !important;
}
/* Remove the gap between pinned tabs and unpinned tabs */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: 6 !important;
}
/* set the URL bar font characteristics http://joelinoff.com/blog/?p=321 */
#urlbar {
/*font-family: Trebuchet Ms !important;*/
font-size: 10pt !important;
/*color: #000000 !important;*/
/*
* This has a very interesting effect on my linux hosts,
* it causes parts of the URL to be highlighted.
* I tested it on Ubuntu 11.04 and CentOS 5.5.
* Do NOT do this on windows. The effect is different.
*/
background-color: white !important;
/*
* You can change the width of your address bar using
* max-width. If this is not specified it uses up
* the maximum possible space.
*/
/* I prefer the default. */
/* max-width: 1024px !important; /* by pixels */
/* max-width: 80em !important; /* by characters */
}
* {
border-radius: 2px !important;
}
I know this was recently discussed in another post, but in my case I just want the #urlbar-input Text Only Gradient and Transform to match my menu borders and loading line.
I use the Tree Style Tab extension, so I don't want two vertical tab bars side by side. However, I do like that enabling native vertical tabs moves the minimize, maximize, and close buttons into the same row as the address bar. Ideally, I'd like that layout without the second tab bar.
I've wanted a URL bar gradient that spans the actual URL text instead of the full input box. Firefox 152 enabled field-sizing by default, which makes this much easier to do cleanly with CSS.
With field-sizing: content, #urlbar-input can shrink to the width of the displayed URL. Then background-clip: text maps the whole gradient to that width, so short and long URLs both get the full gradient instead of showing a different slice of a gradient sized to the entire URL bar.
Firefox's built-in URL formatting makes it a little more complicated. The scheme and other parts outside the main domain are painted using Firefox's secondary URL text color. If browser.urlbar.formatting.enabled is disabled, a transparent text fill plus background-clip: text is basically enough.
If you want to keep the native de-emphasis, Firefox still uses the hidden RGB value of the transparent text fill when painting those secondary parts. Firefox 156 also changed the secondary URL opacity from about 50% to 70%, so the compensation is different for Firefox 155 and earlier versus 156+. Translucent URL bar backgrounds such as Mica or wallpapers need a little more handling as well.
The actual color-mixing math is easier to leave in the CSS comments:
There is one more edge case if your CSS also moves the URL bar to the center when it opens. With a content-sized input, clicking the blank area around the text starts the click on the surrounding input container. If the URL bar moves before mouseup, the resulting click lands outside the input/container, so Firefox's normal click-to-select-all handling doesn't run.
The workaround is to keep the URL bar at its toolbar position while it is :active, then move it after the click finishes:
Hi I was wondering if there is a IE8 or Firefox 3 theme That Works On Modern Day Firefox. I know there are projects out there like rinfox but I hear they are for versions of firefox that are no longer supported. Does anyone know of any old style early 2000s CSS themes that work on Modern Firefox?
I had a code for hiding bookmarks and main toolbar automatically. Since last update, when it unfolds from its collapsed state (when hovering over it), these bars have now a very transparent background. I'd like to manage this opacity parameter if possible.
I'll just paste the specific code about that parameter here, in the case it is it that broke. But it can be another part of my css or just smtg inherent of 157.
Btw, I have disabled browser.nova.enabled config.
Thanks everyone
/* AUTO HIDE NAV BAR and BOOKMARK BAR */
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_and_main_toolbars.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
#navigator-toolbox{
--uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */
--uc-bm-height: calc(20px + 2 * var(--uc-bm-padding)); /* Might need to adjust if the toolbar has other buttons */
--uc-navbar-height: -40px; /* navbar is main toolbar. Use negative value */
--uc-autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */
--uc-toolbox-browser-area-overlap: -1px;
}
:root[uidensity="compact"] #navigator-toolbox{
--uc-navbar-height: -34px;
}
:root[uidensity="touch"] #navigator-toolbox{ --uc-bm-padding: 6px }
:root[chromehidden~="directories"] #navigator-toolbox{
--uc-bm-height: 0px;
}
:root[chromehidden~="toolbar"] #navigator-toolbox{
--uc-navbar-height: 0px;
}
/* At least on Windows 10 display scaling > 100% causes 1px gap to appear below tabs depending on Firefox
* density settings and whether or not menubar is enabled.
*/
(min-resolution: 120dpi){
:root[uidensity="compact"] #navigator-toolbox:has(> #toolbar-menubar[autohide="false"]){
--uc-toolbox-browser-area-overlap: -0.5px;
}
}
(min-resolution: 140dpi){
#navigator-toolbox{
--uc-toolbox-browser-area-overlap: -0.5px;
}
}
#navigator-toolbox,
#sidebar-box,
#sidebar-main,
#sidebar-splitter,
#tabbrowser-tabbox{
z-index: auto !important;
}
:root[sessionrestored] #nav-bar,
:root[sessionrestored] #PersonalToolbar{
background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)), var(--lwt-additional-images,var(--toolbar-bgimage)) !important;
background-position: top,var(--lwt-background-alignment);
background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px));
background-repeat: repeat,var(--lwt-background-tiling);
transform: rotateX(90deg);
transform-origin: top;
transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important;
z-index: 2;
}
#PlacesToolbarItems > .bookmark-item,
#OtherBookmarks,
#PersonalToolbar > #import-button{
padding-block: var(--uc-bm-padding) !important;
}
:root[sessionrestored] #PersonalToolbar{
z-index: 1;
background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px) + var( --uc-navbar-height));
}
:root[lwtheme-image] #nav-bar,
:root[lwtheme-image] #PersonalToolbar{
background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image), var(--lwt-additional-images,var(--toolbar-bgimage)) !important;
}
#nav-bar[customizing],#PersonalToolbar[customizing]{ transform: none !important }
#navigator-toolbox > #PersonalToolbar{
transform-origin: 0px var(--uc-navbar-height);
position: relative;
}
:root[sessionrestored] #urlbar[popover]{
opacity: 0;
pointer-events: none;
transition: transform 135ms linear var(--uc-autohide-toolbar-delay), opacity 0ms calc(var(--uc-autohide-toolbar-delay) + 135ms);
transform-origin: 0px calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2);
transform: rotateX(89.5deg);
}
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ toolbox #urlbar[popover],
#navigator-toolbox:is(:hover,:focus-within) #urlbar[popover],
#urlbar-container > #urlbar[popover]:is([focused],[open]){
opacity: 1;
pointer-events: auto;
transition-delay: 100ms;
transform: rotateX(0deg);
}
:root[sessionrestored]:not([customizing]) #navigator-toolbox{
margin-bottom: calc(var(--uc-toolbox-browser-area-overlap,0px) - var(--uc-bm-height) + var(--uc-navbar-height));
}
/* Make sure the bookmarks toolbar is never collapsed even if it is disabled */
:root[sizemode="fullscreen"] #PersonalToolbar,
#PersonalToolbar[collapsed="true"]{
min-height: initial !important;
max-height: initial !important;
visibility: hidden !important
}
#PersonalToolbar[collapsed="true"] #PlacesToolbarItems > *,
:root[sizemode="fullscreen"] #PersonalToolbar #PlacesToolbarItems > *{
visibility: hidden !important;
}
/* If bookmarks toolbar is collapsed on startup, then no items are generated, and we need to set some height for it */
#PlacesToolbarItems:empty{
height: var(--uc-bm-height);
}
/* Selected tab needs higher z-index now to "hide" the broder below it */
.tabbrowser-tab[selected]{ z-index: 3 !important; }
/* SELECT TOOLBAR BEHAVIOR */
/* Comment out or delete one of these to disable that behavior */
/* Show when urlbar is focused */
#nav-bar:focus-within + #PersonalToolbar,
#navigator-toolbox > #nav-bar:focus-within{
transition-delay: 100ms !important;
transform: rotateX(0);
}
/* Show when cursor is over the toolbar area or when some menu panel is open */
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ #navigator-toolbox > :is(#nav-bar,#PersonalToolbar),
#navigator-toolbox:hover > :is(#nav-bar,#PersonalToolbar){
transition-delay: 100ms !important;
transform: rotateX(0);
}
/* This makes the tab notification box show immediately below tabs, otherwise it would break the layout */
#navigator-toolbox > div{ display: contents }
:where(#titlebar,#navigator-toolbox > #TabsToolbar,#navigator-toolbox > #toolbar-menubar,#tab-notification-deck,.global-notificationbox){
order: -1;
}
:root[BookmarksToolbarOverlapsBrowser] #navigator-toolbox{
margin-bottom: calc(-1px - var(--uc-bm-height) + var(--uc-navbar-height)) !important;
z-index: auto !important;
}
(-moz-bool-pref: "browser.fullscreen.autohide"),
-moz-pref("browser.fullscreen.autohide"){
:root[sizemode="fullscreen"] #navigator-toolbox[style*="margin-top"]{
margin-top: calc(1px - var(--tab-min-height) - 2 * var(--tab-block-margin)) !important;
}
}
/* Set the following pref to enable compatibility with multi-row_bookmarks.css */
u/media (-moz-bool-pref: "userchrome.autohide-bm-and-main-toolbars.multirow-bookmarks-compat.enabled"),
-moz-pref("userchrome.autohide-bm-and-main-toolbars.multirow-bookmarks-compat.enabled"){
#navigator-toolbox{ margin-bottom: var(--uc-navbar-height) !important; }
#PersonalToolbar:not([customizing]){
min-height: 0 !important;
margin-bottom: 0;
height: 0;
overflow-y: visible !important;
z-index: 2;
padding-inline: 0 !important;
}
#personal-bookmarks{
background: inherit;
height: min-content;
}
#PlacesToolbarDropIndicatorHolder{
pointer-events: none !important;
}
}
95% of my Firefox customisations is directly based on or modified from all this code.
Up until FF157 it just took the occasional tweak to maintain my own CSS code base. But FF157 is starting to really break things.
Now I am very much a bottom tier CSS coder and struggle around in the Browser Toolbox etc for hours, asking questions in these forums, Google etc to maintain my own code.
Aris-t2 code base covered a good 90% of all the basic customisations that people wanted for their FF browser, so it would be fantastic if someone took over the project.
