When Firefox generates a directory listing, it uses built-in CSS from a stylesheet called dirListing.css. I am looking to customize the appearance of the page that Firefox creates. Despite making changes, I'm unable to save anything back to dirListing.css permanently. How can I ensure my changes are saved for good?
I attempted altering the file through various methods, including using the "inspector" and "style editor," expecting the changes to be automatically saved.
Although I didn't have the opportunity to perform a comprehensive test on this solution, you may have success in altering Firefox generated pages by utilizing userContent.css. Inserting CSS like the example below:
@-moz-document regexp("^(file|chrome|resource).*/$"){
body{ background: #323427 !important }
}
Information on how to modify userContent can be found in the link provided below
To confirm that the main frame displays a directory listing, you can inject custom styles. This can be achieved through user scripts with a script manager or by creating a web extension.
( function () {
'use strict';
var
style = document.createElement( 'style' ),
text = 'body { border: 1px solid black; }'; // modify to fit your requirements
if ( location.protocol === 'file:' && document.querySelector(
'link[ href = "chrome://global/skin/dirListing/dirListing.css" ]'
) ) {
style.textContent = text;
document.head.appendChild( style );
}
} () );
You can test this code by executing it in the devtools console.
If using a script manager as a web extension, you can store the CSS text within the manager itself. For a standalone web extension, treat the script as the content script and manage the CSS on an options page (found on about:addons) that stores the CSS in the extension's storage.
Common script managers include Tampermonkey and Greasemonkey, but there are other alternatives available. (Please note that this is not an endorsement as I do not personally use these tools.)
The manifest file for a web extension would resemble:
{
"manifest_version": 2,
"name": "Answer",
"description": "Answer a Stack Overflow question",
"version": "0.1",
"content_security_policy": "default-src 'none'; object-src 'none'",
"browser_specific_settings": {
"gecko": {
"id": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64050a17130116240a050a0d0305170c0d080017010910071302110b001810125105141612151e18191205191d121d1808f6faeae9f6ffefa5ecaea1eae7efaaededece5ebade1eceabeede7eca1bfaba3" target="_blank">@</a>"
}
},
"content_scripts": [ {
"js": [ "content.js" ],
"matches": [ "file:///*" ]
} ],
"options_ui": {
"browser_style": true,
"page": "options.htm"
},
"permissions": [
"storage"
]
}
where content.js represents the script, and options.htm serves as the panel for managing CSS on the about:addons page. The storage permission allows access to the browser.storage API for storing and retrieving CSS.
I have recently been assigned a React project for my Full-Stack position at work. Within a wrapper div, there are 2 nested divs. Here's the breakdown of these divs: Left Div - Contains text within a span, with ellipsis and hidden overflow, allowin ...
I'm currently working on creating a basic product list with the ability to edit each product. My challenge right now is figuring out how to enable editing by double-clicking on a product. Since English isn't my first language, I hope you can unde ...
I need help with organizing the header section on my website, which includes: Logo Login and Register buttons Menu Language picker I want to display them all in a single row, but I'm having trouble as they overlap when I resize the window. Specific ...
I'm struggling to center the text both vertically and horizontally inside my div. No matter what I try, I can only get it to align horizontally. Here is the CSS code I have been using: #loading > h1 { text-align: center; font-size: 21px; ani ...
Here is a snippet of the script I'm using to create a slider that changes the background image for each image object in a specified time cycle. #Sliderimg - height set to 500px, $("#Sliderimg").css({ "background-image": "url(../Images/" + SliderIma ...
I need help hiding a filter section when there are no tags to display for the current collection. Below is the code I am currently using: {% assign colors = 'Blue, Grey, Black, Oak, Bronze, Pewter, Gunmetal, Utile, Mahogany' | split: ',&ap ...
I am currently facing a challenge in my project where I need to customize the select dropdown arrow by replacing it with a FontAwesome icon (specifically chevron-circle-down). While I have found resources on how to replace the background of the dropdown ...
While following a tutorial on tuts+ premium, I encountered an issue when the series creator failed to include an exercise file. Despite copying everything from the tutorial video into a CSS document accurately, the CSS list items simply would not float lef ...
It appears that when adding an 'href' tag to my anchor, all of the CSS formatting is lost. Is there a special way that CSS treats links? Below is the basic CSS: .topmenu > ul > li > a:visited, .topmenu > ul > li > a:active, .t ...
While developing my mvc4 application, I encountered an issue with setting the background in layout.cshtml. Despite adding the background-repeat:no-repeat tag, my background image continues to repeat. I have searched extensively online and tried various sug ...
If you're looking to design a card with three child divs, where only one is visible at a time and transitions smoothly as the user progresses through steps 1, 2, and 3, then you've come to the right place. In the code snippet provided below, the ...
I have written a jQuery function to dynamically center my <div> element. It seems to work fine when the page loads, but fails to re-center on window resize. Can anyone spot what I might be doing wrong? JS: <script> $( document ).ready(fu ...
$(document).ready(function(){ $("a").mouseover(function(){ var currentId = $(this).attr('id')+"S"; $(".stay:visible").hide("explode",[],200); $("#" + currentId).show("bounce"); }); }); .stay { display:none; } <body> <div id="pare ...
Currently, my goal is to create a dashboard capable of retrieving the file size for all resources (images, javascript, css, etc.) loaded on a webpage. I aim to then further filter these resources by file type and file size in order to identify which ones c ...
How can I position a white triangle at the bottom of my horizontal menus when they are hovered/activated? The triangle should be aligned to the right-most corner of the menu, not the center. Adding CSS "left: 50%;" positions it in the center of the menu ba ...
In my Vue project, I am creating a dynamic card display that scrolls horizontally on mobile screens. This section functions as a testimonial carousel where users can swipe left or right to view different testimonials. While I have successfully applied a l ...
I've created an "aquarium" using HTML and CSS, Now, I want to make the entire page responsive so that the elements shrink and grow based on the browser resolution. The first step is determining how the container should be structured. Is it acceptabl ...
I appreciate all the comments provided earlier. Looking back, I realize I should have been more thorough in my explanation. Hopefully, the updated version will make things clearer. On a broad level, my goal is to create a digital screen background that re ...
I am facing an issue with a component that is responsible for mapping input elements. These input elements have a flag indicating whether they should be displayed inline or not. Despite my efforts, I am struggling to make the flex property work as intended ...
Currently facing an issue with the canvas element on my project. <div id="app-container"> <div id="canvas-container"> <div id="canvas"></div> </div> </div> In the CSS stylesheet, the following styles ar ...