Until recently the inspector had a background colour #dbc3a3 (tan) and a text colour #000080 (dark blue) as well as a font size of 17px. Those changes resulted from code for chrome documents as set out below. The colours and font size have reverted to the defaults as shown in the snapshot.
How do I need to change the code?
https://imgur.com/a/Vfnkopv
``` @-moz-document url-prefix("about:"), url-prefix("chrome://"), url-prefix("resource://"){ :root { --in-content-page-color: #000080 !important; --in-content-text-color: #000080 !important; --in-content-page-background: #dbc3a3 !important; --in-content-box-background: #e2cfb6 !important; --in-content-deemphasized-text: var(--in-content-text-color) !important; scrollbar-color: #6495ed #d9d9d9 !important; --background-color-box: var(--in-content-page-background) !important; --text-color: var(--in-content-text-color) !important; color:var(--in-content-text-color) !important; --background-color-canvas: var(--in-content-page-background) !important; --table-row-background-color-alternate: var(--in-content-box-background) !important;
menulist > menupopup{ background-color: var(--in-content-page-background) !important; }}}
@-moz-document url-prefix("chrome:") { html, body, tr { background-color: #dbc3a3 !important; color: #000080 !important; font-size: 17px !important; } div { background-color: #dbc3a3 !important; color: #000080 !important; font-size: 17px !important; } tr:hover { background-color: #b3d1ff !important; } tr.odd:hover { background-color: #b3d1ff !important; } } ```
I am not sure how much of the last stanza applied to the inspector.
Thanks. I have added a closing bracket and restarted. There is no change.
First, an image showing the colour set in userContent.css when only two letters of the search are typed. https://imgur.com/fLdLN5b Secondly, an image showing the colour change to white when I type the third letter of the search. I expect the colour to remain as set in the css code. https://imgur.com/XqiZ1Wx Thirdly, an image showing the same colour change when I choose to show only altered preferences. https://imgur.com/kYlb9QR
At some point recently, the background colour of about:config started changing to white when my search reaches the third letter. Below is the code in userContent.css. What do I need to add?
@-moz-document url-prefix("about:"), url-prefix("chrome://"), url-prefix("resource://"){ :root { --in-content-page-color: #000080 !important; --in-content-text-color: #000080 !important; --in-content-page-background: #dbc3a3 !important; --in-content-box-background: #e2cfb6 !important; --in-content-deemphasized-text: var(--in-content-text-color) !important; scrollbar-color: #6495ed #d9d9d9 !important; --background-color-box: var(--in-content-page-background) !important; --text-color: var(--in-content-text-color) !important; color:var(--in-content-text-color) !important; }
I get the following error :
Firefox can’t find the file at jar:file:///usr/lib64/firefox/browser/omni.ja!/chrome/browser/content/browser/browser.xhmtl.
Thanks again. I added the first code below to an existing :root stanza and it is effective. If I add the second code, I get the default colour as well, as you say. I hadn't noticed that until I changed the hover colour to a lighter blue.
I do want the colour to apply to menus inside panel menus. Bookmark menus have the set hover colour.
--toolbarbutton-hover-background: #83b7fb !important;
toolbarbutton:hover { background-color: #83b7fb !important; }
Thanks again. That does not have the desired result on my browser. The following code changes the hover colour of all toolbar buttons including bookmark items.
toolbarbutton:hover { background-color: #6495ed !important; }
Thanks. What about the toolbar buttons?
Thanks. Below is a screenshot of toolbar buttons and bookmarks shown on the menu bar. When I hover over any item, the background colour is a light grey (probably the default).
Thanks. I tried selecting every category and nothing pointed to the bookmark items. They are all folders and are on the menu bar, as are the toolbar buttons. I did find what seems to be the set of toolbar buttons but the following code has no effect on the hover colour :
#mainPopupSet { --toolbar-field-focus-background-color: #6495ed !important; }
This is what I see in the Browser Toolbox :
I have created a standard hover background which, using various stanzas, applies to everything except the toolbar bookmark items and buttons. The following code doesn't have the desired effect on bookmarks. What will? The browser toolbox only shows the main window so I have improvised.
toolbarbutton.bookmark-item(hover) { background-color: #6495ed !important; }
I can't think what to use for toolbar buttons such as UBlock Origin.
I marked this solved then saw a post on Reddit suggesting the following to limit code to popups : @media (width >= 700px) {...} Would it be appropriate to bracket the added lines with that?
Thank you. That had the desired result on the addons page. I have seen a post on Reddit suggesting the following to limit code to popups :
@media (width >= 700px) {...}
Would it be appropriate to bracket the added lines with that?
For some time the colours of the popup on about:addons has had the native colours (black on white) instead of the colours set in userContent.css. The addons page itself still has the colours set in the css file.
I opened the Browser Toolbox and disabled popup auto-hide but I wasn't able to identify the selector(s) to use.
This is my code :
@-moz-document url-prefix("about:"), url-prefix("chrome://"), url-prefix("resource://"){ :root { --in-content-page-color: #000080 !important; --in-content-text-color: #000080 !important; --in-content-page-background: #dbc3a3 !important; --in-content-box-background: #e2cfb6 !important; --in-content-deemphasized-text: var(--in-content-text-color) !important; scrollbar-color: #6495ed #d9d9d9 !important; /*var(--in-content-text-color) var(--in-content-page-background) !important;*/ color:var(--in-content-text-color) !important; }
What do I add to change the colours of the popup to conform with the page itself?
I think you will have to use a method other than Mozilla to sign in to connect. I can use google and one other which I forget. Once you are signed in, you may be able to change your connected email account.
An user script of general application is one which changes the background colour of some sites. Also, for facebook only, FBPurity. _https://greasyfork.org/en/scripts/979-nobrighter_ _https://www.fbpurity.com/_
I use bookmarklets also to change background colour. Two are based on a script posted on reddit, two others from _https://www.squarefree.com/bookmarklets/_.
I'm not seeing any such posts on fedia.
See also chrome://global/skin/icons/
After the first 'private' session ended, the mod replied to a post to the effect that someone had his phone and had made the sub private. This episode has lasted longer. The first was apparently 8 hours, this is now in its 3rd day.
Evidently, adding a tag to a bookmark enables that section. In my case it's already there.
Thanks for your help. My idea was misconceived. If the 'image' is hidden, there is nowhere to insert 'checkmarks'.
I amended the code. I am printing it here to be sure. The colour of the checkboxes has not changed. Back to the drawing board. I will try adding !important to the colour.
#menu-history-clear-recent-history .checkbox-check { appearance: none !important; background: #e2cfb6; }
The question about checkboxes inspired me to try to change the colour of unchecked checkboxes in Clear Recent History (ctl+shft+del) in History > Clear Recent History.
I found the menu command in the Browser Toolbox and I used that to identify the modal. On my system is was the 343rd menuitem. My code doesn't work but I don't know why.
#menu-history-clear-recent-history{ .checkbox-check { appearance: none !important; background: #e2cfb6; } }
I have a folder of bookmarklets. They all have the same favicon, i.e. the default (globe) icon. It would be useful to change at least two of them to distinctive icons.
I copied code posted recently on another forum. It is only partly effective in that the default icon disappears but, instead of the icon I have named, there is a faint orange blur. The icon I have named is the Facebook icon, a white f letter on a blue background. I began with an .ico file but changed it to a .jpg file, hoping that would help; it didn't. I also tried changing the size from 1616 to 2424 and 50*50, to no avail.
The code is below.
#personal-bookmarks .bookmark-item[scheme="javascript"][label="zap fb"] .toolbarbutton-icon, #personal-bookmarks .bookmark-item[scheme="javascript"][label="zap fb"] .menu-iconic-icon { width: 0 !important; padding-right: 16px !important; background-image: url ("fb16.jpg") !important; }
I see a double separator below the "Copy link" option in the link context menu seen when you right-click a link. I tried commenting out all the code I have relating to context menus and it's still there.
I have tried adding the separator id (#context-sep-copylink) to code I have to hide various context menu items and that was ineffective.
The text in the menu isn't as large as the screenshot suggests.
SOLVED. It was the separator sendlinktodevice. The other code was hiding the separator below copy link in the image context menu. The double line was just an irritant, not a practical problem, but I'm glad it's gone. Thanks to those who replied.