Is there a way to left-align all images upon opening and remove the dark gray background. Thanks
I would like my photos to open like the old default style. Firefox quantum doesn't have an add-on that will remove the dark color and left-align the image like before.
Thanks for any feedback.
الحل المُختار
You can do it with a custom style rule and the Stylus extension, or a userContent.css file. If you already have Stylus installed, that would be easier.
One preparatory setting change:
(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button promising to be careful or accepting the risk.
(2) In the search box above the list, type or paste moz-d and pause while the list is filtered
(3) Double-click the layout.css.moz-document.content.enabled preference to switch the value from false to true
The Stylus extension:
This is one of the easiest ways to inject custom style rules into web pages:
https://addons.mozilla.org/firefox/addon/styl-us/
If you don't want to install it, an alternative is to create a userContent.css file with the same rule. (See: http://kb.mozillazine.org/UserContent.css)
One-time Setup in Stylus:
Open the "Manage" page, which lists your existing user styles, if any.
Click the "Write new style" button.
In the "Enter a name" space, you can put something like Stand-alone images since this rule will only affect those.
On the right side, click in the box below "Code 1" and paste the following:
@-moz-document media-document(image) {
body {
color: #000 !important;
background-color: #f8f8f8 !important;
background-image: none !important;
height: 100vh !important;
}
body > img {
position: static !important;
margin: 8px 0 0 8px !important;
}
}
This gives you a very light gray background and positions the image in the upper left corner with 8 pixel margins at the top and left (similar to a normal web page). You can edit those 8px values as you like.
Then click the Save button in the left column and try viewing a stand-alone image in a different tab.
Success?
Before and After screenshots attached for reference.
Read this answer in context 👍 1All Replies (3)
So what site is hosting your images at? I would say the format would be from their site not the Browser as it only display what it is given.
الحل المُختار
You can do it with a custom style rule and the Stylus extension, or a userContent.css file. If you already have Stylus installed, that would be easier.
One preparatory setting change:
(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button promising to be careful or accepting the risk.
(2) In the search box above the list, type or paste moz-d and pause while the list is filtered
(3) Double-click the layout.css.moz-document.content.enabled preference to switch the value from false to true
The Stylus extension:
This is one of the easiest ways to inject custom style rules into web pages:
https://addons.mozilla.org/firefox/addon/styl-us/
If you don't want to install it, an alternative is to create a userContent.css file with the same rule. (See: http://kb.mozillazine.org/UserContent.css)
One-time Setup in Stylus:
Open the "Manage" page, which lists your existing user styles, if any.
Click the "Write new style" button.
In the "Enter a name" space, you can put something like Stand-alone images since this rule will only affect those.
On the right side, click in the box below "Code 1" and paste the following:
@-moz-document media-document(image) {
body {
color: #000 !important;
background-color: #f8f8f8 !important;
background-image: none !important;
height: 100vh !important;
}
body > img {
position: static !important;
margin: 8px 0 0 8px !important;
}
}
This gives you a very light gray background and positions the image in the upper left corner with 8 pixel margins at the top and left (similar to a normal web page). You can edit those 8px values as you like.
Then click the Save button in the left column and try viewing a stand-alone image in a different tab.
Success?
Before and After screenshots attached for reference.
Thank you for your quick repsonse, jscher2000. This was the perfect solution.