GENERAL discussion, feedback, questions belong here! (v14) #417
Comments
|
Since we were talking about compact stuff recently, I wanted to share another piece of code from my /* Hide lines with something else than the id in login popup */
#PopupAutoComplete richlistbox richlistitem div div :not(.line1-label) {
display: none !important;
}On a site with multiple login, it get rid of that stupidly repeating "From this website" line below each login entry. Ps: I thought I already shared that, but a search gave nothing. But I wonder if the github search really work that well to begin with. 🤔 |
|
Never though about removing that line, but its great we can achieve it using CSS. About the Github search. Once a thread gets too long, entries get hidden and you have to click "Load more..." link to show them again. Search won't find the hidden stuff, so I think this is what happened to your post.
|
|
So I've been getting these kind of "popups" since I updated to Firefox 92.0, happens on sites like "Spotify, Apple, Outlook, etc. https://i.imgur.com/P0mZtC8.png I was wondering if these can be completely hidden and removed from happening, or is this not even CSS stuff anymore? |
Do you use any kind of adblocker like ublock Origin, I would think that would take care of the second one (that seems like spam). |
|
Yes, uBlock Origin, but these don't seem to be your typical popups like from ads, more like notifications from Firefox. Like when you go and install an "Add-on" and a small pop up will occur, asking to allow or deny. |
|
FYI, I was able to solve this with two about:config pref's. DRM popup; Mailto popup; |
Though you already found a solution, yes, it probably could have been hidden by CSS, if those have an id and/or other properties than can be used to target with css (see the id finding part of the readme) /* Hide the "update available" popup */
#appMenu-notification-popup {
display: none !important;
}To no longer be bothered with Firefox reminders that it can be updated. Though I haven't seen that popup for so long I can't tell for sure if my css is still working, or if the popup was just removed at some point 😛 |
|
Unless I missed - a lot, does customCSSforFx have any code to change heights of urlbar-container , urlbar-input-container & matching searchbar elements? Some of the code I tried to use as root and / or like the example below. I'm looking mostly to chg the heights of entry field(s) for URL & Search input containers, and the 40px TALL #urlbar-container and #search-container. Mozilla has set the "--urlbar-container-height: 40.00px" as root & nothing I've found online or thought of myself, has overridden the 40px. Code below is from Mozilla support. I'm not sure why (cor-el) did some things, like repeat "#urlbar-input-container" in succession, but he is usually right. https://support.mozilla.org/en-US/questions/1284030
|
|
@bendover22 : I'm not sure we would be talking about the same thing, but in my case, I had an issue of ///
/// Change navbar height because too big otherwise
///
try {
let nav_bar = document.getElementById("nav-bar");
nav_bar.setAttribute("height","28px");
}
catch(e) { console.log("height setting failed"); console.log(e); }To recap:
|
|
@BoomerangAide - "What is in a name? Would not a nav-bar by any other name be just...." W.S. Here's what I found to change height of urlbar-container; search-container; and the text entry containers. Decide what height you want for the urlbar-container ("text entry field") & search-container (the tallest part of this toolbar). URL & Search containers must be same ht., so the toolbar's bottom edge is even . The magic bullet to override Fx's 40px H urlbar-container (& search-container)is shown. If you need to change height of URL & Seach bars (input area) from the default (32px for Normal density), you can define it the same way as --urlbar-container-height: I found I needed to override the Moz value for padding-block:4px; on urlbar-container, search-container, or the url-container extends past the input containers more than I wanted. |
|
Hi @Aris-t2 Maybe you can help with the following... I tried to reverse engineer the mentioned module but got a mixed results (messed up Bookmark Gear and tag icons) Thank you in advance |
|
https://github.com/Acid-Crash I think what you may want is something like /chrome/css/generalui/bookmark_icons_colorized.css The former has more than just a colored folder icon. If you don't like the color of the folder icons (like yellow), you can backup / save the orig. image under the customcss "image" folder, then either change the color in another drawing or graphic editor app. Then save it to the images folder, using the SAME name as the original. Or find images already colored & put them in the proper path in customcssforFx. What ever OS you use, get a "text editor" w/ a GOOD search function, that shows results (in partial sentences, for context), the line # where located, etc. You can find what you're looking for MUCH faster. Regardless, I suggest getting a dark theme for the text editor. Black or V dark background & as bright of syntax coloring as you want (say for CSS files). Much easier to see for search thru a file, or make simple changes, rather than white / nearly white BG. Easier on the eyes. |
I know about this module, it replaces every icon within Bookmarks (folder, tag, gear). I am interested only in replacing the bookmark folder icon (I have the needed SVG file). |
|
does anyone know how to remove the "Find in text" placeholder text in the findbar? |
|
#417 (comment) Not resized forcefully through javascript
Resized forcefully through javascript
I hope you managed to get things to look like how you wanted. |
|
Hello everyone. Is there any way I can make the appmenu completely square? |
|
This worked for me without breaking other code. :root {
--urlbar-container-height: 40px !important;
--urlbar-min-height: calc( var(--urlbar-container-height) - 2px ) !important;
}@Acid-Crash toolbarbutton.bookmark-item[container],
.bookmark-item[container] .menu-iconic-left .menu-iconic-icon,
.bookmark-item[query][hostContainer],
.folder-icon,
#editBMPanel_chooseFolderMenuItem .menu-iconic-icon,
treechildren::-moz-tree-image(title, container),
treechildren::-moz-tree-image(title, query, hostContainer) {
-moz-image-region: rect(0px, 16px, 16px, 0) !important;
-moz-context-properties: fill !important;
list-style-image: url("chrome://browser/skin/developer.svg")!important;
fill: red !important;
}
toolbarbutton.bookmark-item[container][open],
.bookmark-item[container][open] .menu-iconic-left .menu-iconic-icon,
treechildren::-moz-tree-image(title, open),
.bookmark-item[query][hostContainer][open] {
-moz-image-region: rect(0px, 16px, 16px, 0) !important;
-moz-context-properties: fill !important;
list-style-image: url("chrome://browser/skin/developer.svg")!important;
fill: blue !important;
}@mimecry #main-window[tabsintitlebar] #PanelUI-button #PanelUI-menu-button {
border-radius: 0 !important;
} |
|
@Aris-t2 i managed to hide it using input.findbar-textbox::placeholder {opacity: 0 !important;} |
Tried this version, unfortunately it also affects other Bookmark-related icons:
Also, the every subfolder icon (for example Globe icon) color changes for the opened folder, meaning, that it is also partially affected I do understand that this is a lot of work, but maybe you can still look at this...
|
|
I don't have version 92 or above, but I think the trick is the elements you want changed would be |
|
@Aris-t2 Thank you. |
|
This was a summary of what the folder icon changes look like, if using the code from bookmark_icons_colorized.css file. You can tweak it, but colors will always affect iconized folders/containers unless one overrides them manually later. .bookmark-item[container],
treechildren::-moz-tree-image(container) {
fill: red !important;
}
.bookmark-item[container][open],
treechildren::-moz-tree-image(container, open) {
fill: blue !important;
}Excluing [data-l10n-id] will work for bookmarks toolbar and bookmarks popups, but not for sidebar and library. .bookmark-item[container]:not([data-l10n-id]),
treechildren::-moz-tree-image(container) {
fill: red !important;
}
.bookmark-item[container]:not([data-l10n-id])[open],
treechildren::-moz-tree-image(container, open) {
fill: blue !important;
}That would require to remove the fill rule from containers with icons manually.
treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar),
treechildren::-moz-tree-image(container, queryFolder_toolbar_____),
treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu),
treechildren::-moz-tree-image(container, queryFolder_menu________),
treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks),
treechildren::-moz-tree-image(container, queryFolder_unfiled_____),
treechildren::-moz-tree-image(container, OrganizerQuery_History),
treechildren::-moz-tree-image(container, OrganizerQuery_history____v),
treechildren::-moz-tree-image(container, OrganizerQuery_downloads__v),
treechildren::-moz-tree-image(container, OrganizerQuery_allbms_____v),
treechildren::-moz-tree-image(container, tagContainer),
treechildren::-moz-tree-image(container, OrganizerQuery_tags_______v) {
fill: unset !important;
}EDIT I looked through the code and found a few more "names". That should cover all items incl. sidebar and library now. Based on the above entries one could write custom code for those containers independent of the "default folder icons". |
|
Is there anything that rectifies all the round UI buttons? I looked here but there doesn't seem to be anything. Is it correct that scrollbars both in the Firefox UI and web content (assuming the website doesn't override them) are defined by the system toolkit? They changed to the worse when updating from Firefox 88 to 92: instead of an elaborate rendering of a scrollbar, it's a grey rectangle with a grey oval as "handle" in it. This is on Linux. Firefox 92 is built against GTK 3, and Firefox 88 probably as well but not sure. Does anyone know why it changed and how it can be fixed? I found and modified this to make it look slightly better, but it's still ugly and with worse usability. |
|
I feel like some compact-ness has hit the wrong place in latest css: Version 78.14 ESR (normal)
Version 91.0.2
Disabling "popup_compact_menus" make it look better (though not as good as in the past), I wonder if it's possible to exclude that popup (or whatever it should be called) from the "compact" changes? On a more personal point (so low priority), I don't like the new "shield" icon (look like an empty vessel to me), I would be interested in getting the old one back / seeing it customizable in the future. |
|
Not editing the previous entry since it's completely unrelated: #favimginurlbar[style*="warning.svg"]
{
filter: hue-rotate(-45deg) saturate(100);
}was now broken on Firefox 91. #favimginurlbar[style*="warning.svg"]
{
filter: invert(100%) brightness(50%) sepia(100%) hue-rotate(-45deg) saturate(10000%);
}I don't know if other icons one want from black to another color will show up, but maybe my experience will be useful. |
|
@plomari Besides @BoomerangAide It should be possible to replace the shield icon with the old one: #urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box > #tracking-protection-icon {
list-style-image: url(tracking-protection.svg) !important;
}
#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box[hasException] > #tracking-protection-icon {
list-style-image: url(tracking-protection-disabled.svg) !important;
}
#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon {
list-style-image: url(tracking-protection.svg) !important;
} |
|
If no option names/urls get changed between updates, replacing old "css" folder with new one should be enough. |
|
@Aris-t2 I’m not sure I understand the instructions correctly. I created a “author_style_sheet.css” file in my chrome folder with your code: Then, that link doesn’t really say what to do with the code JS there. I tried copying the code directly into a new file, “author_style_sheet.js” in the chrome folder, but after restarting Firefox nothing happens; the appbutton is still visible in fullscreen mode. I know zero about how to work with JS; what exactly should I do? |
|
Use "method 2" instructions on CustomJSforFx main page: https://github.com/Aris-t2/CustomJSforFx There is although a thread about JS there: Aris-t2/CustomJSforFx#29 |
|
@Aris-t2 Thanks for the link, but … I really have no idea what to do with the files/folders there. 😅 Do I use the files in “firefox”, “profile”, or both? Do I need the “userChrome.js” that’s described as “update alternative_searchbar.uc.js”? Where do I put the files? Do I need to edit any of them? I took a look at the thread you linked, and it’s all waaay over my head, sorry. |
|
Sorry, this was a misunderstanding. The The other question about the scrollbuttons has to be solved by using the JS script. |
|
Thanks. It works. 👍🏻 |
|
Updating from 96.0.1 to 96.0.3 messed up my tab bar's height. It looks like #442 and #439. (Strangely, the reporter of the first issue claimed updating to 96.0.1 caused this, while 96.0.1 was fine to me, and it's broken with 96.0.3 instead.) I'm also using tabs_below_navigation_toolbar.css, and it looks like the tab bar's height is too large, and covers part of the navigation bar. My userChrome.css is a mess of copy pasted .css files (since I apparently didn't understand how to use them "correctly"). The tabs_below_navigation_toolbar.css part is now exactly the same as 4.1.3, but the problem persists. I didn't find any other change in 00411af which seemed to help. By the way, adjusting the "--classic_squared_tabs_tab_height" variable allowed me to move the tab bar further down, so it stopped overlapping with the navigation bar. But the tab bar's height is still too large and wastes space. (I assume the variable controls the space reserved for the tab bar, while the tab bar's actual height is determined or expanded by something else.) |
|
Is it possible for someone to make a CTR-esque application using these files? |
|
@plomari @daemonspudguy |
|
How can I change the font size in the sidebar? |
|
I'm currently experimenting on a Firefox 96.0.3 portable because I'm trying to get rid of some glitchiness of the download button while using the ie6 button style. /* Prevent download button from turning into something else */
#downloads-button:-moz-any([progress],[counter],[paused],[attention]) #downloads-indicator-progress-outer,
#downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
background: -moz-image-rect(url("./image/toolbar_fx_ie6.png"), 0, 198, 18, 180) center no-repeat !important;
}
#downloads-button[indicator="true"] {
list-style-image: url("./image/toolbar_fx_ie6.png") !important;
-moz-image-region: rect(0px, 198px, 18px, 180px) !important;
}
#downloads-button[attention] {
color: #005F00 !important;
font-weight: bold !important;
}
#downloads-indicator-start-image, #downloads-indicator-finish-image {
list-style-image: url("./image/toolbar_fx_ie6.png") !important;
-moz-image-region: rect(0px, 198px, 18px, 180px) !important;
}
#downloads-indicator-progress-outer {
border: none !important;
}
#downloads-indicator-progress-inner{
display: none !important;
}
/**/
/* Remove a blue dot introduced in Custom CSS 4 and/or Fx 91 */
#downloads-button:is([progress],[counter],[paused],[attention])::after,
.toolbarbutton-badge {
display: none !important;
}
/**/There's still some glitchiness happening at a download end before the image become back normal. |
|
Hello, Firefox ESR now released version 91.6.0esr , where Compact mode not working on Tabbar (tabs) . Tabs have 32px maybe more and I can't set default 28px , so I had to make my fix for it. #TabsToolbar {
height: 28px !important;
}
.tabbrowser-tab .tab-label, .tabbrowser-tab .tab-icon-image, .tab-close-button, .tab-throbber, .tabbrowser-tab[pinned] :-moz-any(.tab-icon-overlay[soundplaying]), .tabbrowser-tab :-moz-any(.tab-icon-sound, .tab-icon-overlay[soundplaying]) {
margin-top: -5px !important;
}
@media (-moz-windows-classic) {
.tabbrowser-tab .tab-label, .tabbrowser-tab .tab-icon-image, .tab-close-button, .tab-throbber, .tabbrowser-tab[pinned] :-moz-any(.tab-icon-overlay[soundplaying]), .tabbrowser-tab :-moz-any(.tab-icon-sound, .tab-icon-overlay[soundplaying]) {
margin-top: -2px !important;
}
}Before: After:
|
tree.sidebar-placesTree {
font-size: 20pt !important;
}@BoomerangAide Btw. @SGvagon |
|
@Aris-t2 : Yes, that's a reason why I am using ESR, but Mozilla makes too much changes in design here too :-/ . As you said, this is betrays its purpose. |
|
Hi! Can't the jumping items be improved when two rows are set for URL-bar? Such as when you hover over a switch to tab item and press alt. |
|
Hi @Aris-t2 how are you?! In Firefox 97 as you can see the pic, I use full darkmode theme but I changed the background of Navigator Toobox with linear-grantient code, and everything is fine. |
|
Also: @import "./css/aboutaddons/addonlists_show_addon_version_number.css"; /**/
@import "./css/aboutaddons/addonlists_compact.css"; /**/
@import "./css/aboutaddons/addonlists_show_buttons_instead_of_menu_popup_compact_view.css"; /**/
@import "./css/aboutaddons/addons_manager_alternative_appearance_compact_categories.css"; /**/
@import "./css/aboutaddons/recentupdates_category_always_visible.css"; /**/
@import "./css/aboutaddons/availableupdates_category_always_visible.css"; /**/But something borks the highlights for categories inside about:addons. Only icons are highlighted: |
They backported bug 1714276 to 96.0.2 and then 91.6.0esr. Gotta give it up to mozilla because this was the first time I ever have to update css tweaks mid-esr cycle. @Aris-t2 Edit: Hmm seems like the height fix is only necessary for |
|
Since moving from Firefox ESR 91.5.1 to 91.6.0, my Tabs no longer retain their customized size. /**************************************************************** #TabsToolbar, #tabbrowser-tabs { --tab-min-height: 16px !important; } The above code no longer works. Is there any other code that I could try to get back the original size? |
|
@click-click If my code for my_Userchrome above not working, you have to update Aris pack to the newest version. |
|
Thank you SGvagon. I tend to forget checking the release and change logs. I updated from 4..1.1 to 4.1.4 and my smaller tabs are back again. It's a never ending battle with Mozilla Development always futzing around with the GUI. They should be made to develop with tiny screens to see how much space gets wasted by their actions. :-( I see someone did not like my comment. Okay, I take it all back. I was told that the developers fixed something to help Linux users in the 97/91.6 update which is fine with me. |
|
@SGvagon Do you know what changed in FF 91.6 to make the snippet I used in my_Userchrome.css to stop working? |
|
@click-click The tabs height for classic squared tabs is set in config\general_variables.css on line 13 --classic_squared_tabs_tab_height: 28px !important;And the change is in css\tabs\classic_squared_tabs.css on the last lines 489-492 , that fixed the custom tabs height what I see. Just look at changelog of version 4.1.3 what Aris changed :-) . 00411af . /* Fx 97+ height fix */
#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container {
height: unset !important;
}I am not a pro in this, but this is all what I know at the moment :) . |
|
A couple of issues with Nightly 99: There's an added space between the menubar & toolbar and
Here's what the popup_compact_menus looked like before:
|
|
@mzso
Override download buttons progress colors: #downloads-indicator-progress-inner {
background: conic-gradient(green var(--download-progress-pcent), transparent var(--download-progress-pcent)) !important;
}
#downloads-indicator-start-image {
fill: orange !important;
stroke: orane !important;
}
#downloads-indicator-finish-image {
fill: red !important;
stroke: red !important;
}@glennpc @ALL |
|
Continue here: #452 |
and others
Make sure you have updated your configuration to the most recent version of this projects files and are using the latest version of the "options" required by your Firefox version >before< reporting problems!
Continued from #3, #41, #88, #109, #133, #163, #189, #211, #241, #273, #308, #368 and #404
Instead of opening new "issues" for general talk we can use this area for discussions, feedback and questions. Open new "issues" for real bugs and problems.
Custom JS scripts to restore more classic features
https://github.com/Aris-t2/CustomJSforFx
Things this project will not target/recreate
Things not possible with CSS
The text was updated successfully, but these errors were encountered: