Help with userContent.css Topic is solved

[Walter Dnes]

Problem: Idiot webdesigners make web pages with faint grey fonts on glaring white background. They're driftng towards font foreground #FEFEFE and backgrounf #FFFFFF. For years I've had one dedicated "dark profile", with Advanced Night Mode extension active. However, I'm now running in to more and more webpaages where it simply doesn't work, e.g. https://rumblekraft.substack.com/p/the- ... settlement

My understanding is that putting a "userContent.css" file in the "chrome" directory might over-ride this. My stumbling steps so far...

1) the example "userContent.css" file does not mention requiring a "namespace" declaration

2) The example file refers me to https://www-archive.mozilla.org/unix/cu ... serContent for more info. Given how much Pale Moon has diverged from Firefox, is that site still relevant?

3) Here's my first attempt at "userContent.css"... which doesn't work. Any ideas?

font {
color: #FFFFFF !important;
background-color: #000000 !important;
}

In case you're wondering, yes, I want to set one dedicated profile to use heavy-handed methods to beat stupid webpages into submission.

One related item... is there an extension such that
* I'm in profile "A"
* I can right-click a URL and open it in profile "B"

[adoxa]

Colors are associated with content, not fonts; try * instead of font. (BTW, that site seemed fine with Windows Basilisk.)

[jars_]

Rough and ready (на скорую руку набросал)

Code: Select all

@-moz-document domain(substack.com) {

/* lines and borders*/
* {
	border-color: #111 !important;
	}

HR {
	background:#111 !important;
	}

/* links */
A {
	color: #0080FF !important;
	}
 
/* top line */
[class^='mainMenuContent'] {
	background: #111 !important;
	}

/* main background */
.single-post-container {
	background: #222 !important;
	background-color: #222 !important;
	}

/*  text */
P {
	color: #EEE !important;
	background-color: rgba(46,46,46, 0.8) !important;
	}


}

+V2: width and font size

Code: Select all

@-moz-document domain(substack.com) {

/* lines and borders*/
* {
	border-color: #111 !important;
	}

HR {
	background: #111 !important;
	}

/* links */
A {
	color: #0080FF !important;
	}
 
/* top line */
[class^='mainMenuContent'] {
	background: #111 !important;
	}

/* main background */
.single-post-container {
	background: #222 !important;
	background-color: #222 !important;
	}

/* width */
.container {
	width: 90% !important;
	}

/*  text and font size */
P {
	color: #EEE !important;
	background-color: rgba(46,46,46, 0.8) !important;
	font-size: 1.4rem !important;
	}

img:not(:hover) {
	opacity: 0.6 !important;
	}



}

[Walter Dnes]

(BTW, that site seemed fine with Windows Basilisk.)

Yes. But the webmaster's definition of "fine" is rather hard on my eyes. Basically saying "It's not a bug, it's a feature".

[Walter Dnes]

Rough and ready (на скорую руку набросал)

Thank you! It works. I didn't realize that it could be specified down to the domain. I'll do additional tweaking to get it to my exact tastes. Related questions...

1) Substack hosts a lot of personal websites, which may have different styles. Can I restrict further to subdomains, e.g.

Code: Select all

@-moz-document domain(rumblekraft.substack.com)

2) I mentioned "more and more webpages" with faint fonts. I used the substack.com site as an example. Is it possible to specify multiple domains?

Code: Select all

@-moz-document domain(rumblekraft.substack.com)
@-moz-document domain(lightreading.com)
@-moz-document domain(example.com)

3) Failing that, is it OK to wild-card all domains to work on every webpage when viewed from that profile?

Code: Select all

@-moz-document domain(*.*)

4) Are

Code: Select all

[class^='mainMenuContent']

and

Code: Select all

.single-post-container

specific to the substack.com domain?

5) Do you recommend the tutorial at https://www.w3schools.com/css/ ? I want to get away from asking for handholding with every minor detail.

[Moonchild]

I didn't realize that it could be specified down to the domain.

it might be an idea to include that in the -example.css...

[jars_]

1,2,3 yes but...

Code: Select all

@-moz-document url-prefix("http://"), url-prefix("https://") {
 /*-----styles for all websites----------- */
[aria-label='Advertisement'],
[class^='exo-ad-'], [class^='exo-content-'] {
	display:none !important;
	}

}


@-moz-document regexp("https?://.+.js(?:\W.*)?") {
html, body,PRE {
	background-color: #AAA;
	font-size: 1.2rem !important; 
/*	font-family: "Segoe UI", Vardana;*/
	line-height: 1.6 !important;
	}
}




@-moz-document domain("civitai.com") {
    .scroll-area {	max-height: 100vh !important;	}
}


@-moz-document domain("noodlemagazine.com") {

    [id='particles-js'] {	display:none !important;	}

}

@-moz-document domain(rumblekraft.substack.com),
                domain(lightreading.com),
                domain(example.com) {
...........

}

4,5 yes: .someClass the same as [class='someClass'] #someID the same as [id='someID']
with [] you can use CSS Attribute Selectors Writing form is longer, but more possibilities.

[Kris_88]

-moz-document :
https://udn.realityripple.com/docs/Web/CSS/@document

CSS reference :
https://udn.realityripple.com/docs/Web/CSS/Reference

[Walter Dnes]

Thanks everybody for your help. I feel like a kid with a shiny new toy. I'll be playing with it the next few days. Given what I've learned so far, I've changed my strategy. Rather than one dedicated "all-dark" profile, I'll set userContent.css to work on specified websites in all profiles.

[jars_]

My green style for PM forum

Code: Select all

@-moz-document domain(palemoon.org) {

BODY[id="phpbb"] {
	background-color: #004400 !important;
	background-color: #004444 !important;
	}

#wrap {
	background-color:#98C098 !important;
	border: 3px solid #004400 !important;
	box-shadow:  0px 0px 10px 6px #005500 !important;
	}

.post {
	background-color:#BEE8BE !important;	
	}

.signature {
	opacity: 0.1;
/*	visibility: hidden;*/
	border-top-color: #222 !important;
	background-color: #92BC92 !important;
	background-color: #A1CBA1 !important;
	font-size: 1rem !important;
	}

.signature:hover {
/*	visibility: visible;*/
	opacity: 1;
	transition-duration: 0.6s;
	transition-timing-function: ease;
	transition-delay: 2s;
	}

.signature SPAN {
	font-size: 1rem !important;
	}


.button {
/*	color: #FF8CBA !important;*/
	background-image: linear-gradient(to bottom, #373737 0%, #171717 100%) !important;
	background-color: #171717 !important;
	box-shadow: none !important;
	border: 1px solid #272727 !important;
	}


.button:hover,
.button:focus,
.button .icon:hover {
	color: #EEE !important;
	text-shadow: none !important;
	background-image: linear-gradient(to bottom, #565656 0%, #272727 100%) !important;
	background-color: #373737 !important;
	}

.pagination li a {
	background: #f9f9f9;
	filter: none;
	border-color: #cccccc;
	color: #CCC !important;
	}

.button .icon, .button-secondary {	color: #CCC !important;	}


.button-secondary:focus,
.button-secondary:hover,
.button:focus .icon,
.button:hover .icon {
	color: #00FFA9 !important;
	}

.button-search:hover,
.button-search-end:hover {
	border-color: #C7C3BF;
	}


}

+ if you install the CustomButtons extension, you can edit userChrome/userContent.css and see results without restarting the browser, with that btn↓

Code: Select all

/*Initialisation*/
// script author: Griever       http://d.hatena.ne.jp/Griever/
// Кнопка перезагружает файлы (userChrome | userContent).css прям сразу. без перезагрузки бравзера
// Шобы работало в версиях FF 24+  и PaleMoon 25+ в начало файлов нужно вставить строку:    root{};
//  you need to insert the line: root {};    in files on start

 this.setAttribute("context", false);
 this.onclick = clickFunc;

  function clickFunc(e) {
     switch (e.button) {
        case 0:
            relChrome();
            self.style.filter = 'brightness(180%)';
            setTimeout(()=> self.style.filter = 'none', 500);
            break;
        case 1:
            custombuttons.editButton(this); break       //gShowPopup(this);  break;
        case 2:
            relContent();          // self.checked = true; setTimeout(()=> self.checked = false, 450);
            self.style.filter = 'brightness(180%)';
            setTimeout(()=> self.style.filter = 'none', 500);
            break;
      }
 };




//   "use strict";
 const inIDOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);

 function relChrome() {
  let aFile = Services.dirsvc.get("UChrm", Ci.nsILocalFile), fileURL, rule;
         //aFile.appendRelativePath("userChrome.css");
    aFile.append("userChrome.css");
    fileURL = Services.io.getProtocolHandler("file").QueryInterface(Ci.nsIFileProtocolHandler).getURLSpecFromFile(aFile);
    rule = getStyleSheet(document.documentElement, fileURL);
       if (!rule) return;
    inIDOMUtils.parseStyleSheet(rule, loadText(aFile));
	// ウインドウを一度背面にする必要がある
    rule.insertRule(":root{}", rule.cssRules.length); // おまじない  Это оберег. 
        //alert("Правила userChrome.css перезагружены");
 };

 function relContent() {
  let aFile = Services.dirsvc.get("UChrm", Ci.nsILocalFile), fileURL, rule, s;
       //aFile.appendRelativePath("userContent.css");
      aFile.append("userContent.css");
    fileURL = Services.io.getProtocolHandler("file").QueryInterface(Ci.nsIFileProtocolHandler).getURLSpecFromFile(aFile);
       rule = getStyleSheet(content.document.documentElement, fileURL);
    if (!rule) return;
     inIDOMUtils.parseStyleSheet(rule, loadText(aFile));
     rule.insertRule(":root{}", rule.cssRules.length);   // おまじない
	// 再描画処理
        s = gBrowser.markupDocumentViewer;
        s.authorStyleDisabled = !s.authorStyleDisabled;
        s.authorStyleDisabled = !s.authorStyleDisabled;
//  alert("Правила userContent.css перезагружены");
// -----------------------------
// http://custombuttons.sourceforge.net/forum/viewtopic.php?p=85475
//  let browser = gBrowser.selectedBrowser, styleSheetInfo = gPageStyleMenu._getStyleSheetInfo(browser), styleDisabled = styleSheetInfo.authorStyleDisabled;
//  if (styleDisabled) gPageStyleMenu.switchStyleSheet("");
//     else gPageStyleMenu.disableStyle();
//view-source:chrome://browser/content/browser.xul
//view-source:chrome://browser/content/browser.js

};


 function getStyleSheet(aElement, cssURL) {
  let rules = inIDOMUtils.getCSSStyleRules(aElement), count = rules.Count(), rule, i;
   if (!count) return null;
   for (i = 0; i < count; ++i) {
      rule = rules.GetElementAt(i).parentStyleSheet;
     if (rule && rule.href === cssURL) return rule;
    };
   return null;
 };


 function loadText(aFile) {
   if (!aFile.exists() || !aFile.isFile()) return null;
  const fstream = Cc["@mozilla.org/network/file-input-stream;1"].createInstance(Ci.nsIFileInputStream),
        sstream = Cc["@mozilla.org/scriptableinputstream;1"].createInstance(Ci.nsIScriptableInputStream);
          fstream.init(aFile, -1, 0, 0);
          sstream.init(fstream);
  let dat = sstream.read(sstream.available()), data;
     try { data = decodeURIComponent(escape(dat)) } catch(e) {}
       sstream.close();
       fstream.close();
       return data;
 };


 this.tooltipText = "LMC - Reload userChrome.css\n\
 RMC - Reload userContent.css\n\
 -------------------------------------------------------\n\
 MMC - edit Button";

[Walter Dnes]

My green style for PM forum

I'm trying tp come up with GENERIC "dark mode" CSS that will work across multiple websites. Here it is so far...

@-moz-document domain(rumblekraft.substack.com), domain(sites.psu.edu), domain(bad.example.com) {

/* lines and borders*/
* {
border-color: #111 !important;
}

HR {
background:#000 !important;
}

/* links */
A {
color: #00FFFF !important;
}

/* background colour */
body {
background: #000 !important;
background-color: #222 !important;
font-size: 20px !important;
}

/* text */
P {
color: #FFF !important;
background-color: rgba(0,0,0, 0.8) !important;
}

Right now I'm using https://rumblekraft.substack.com/p/the- ... settlement and https://sites.psu.edu/astrowright/2025/ ... -3i-atlas/ as test cases. I have a "chrometest" profile that brings up those two websites on startup and has the css file in its chrome directory. A couple of questions...

1) The text in paragraphs is white on black as desired. But the gaps between paragraphs have white background. Is there any generic method to make those area black? In other words, how do I refer to those areas?

2) I want to make the font size the greater of 20 px or whatever the website specifies. I have not been able to get "max()" or "clamp()" to work with "font-size:". What is the "magic incantation"?

[adoxa]

1) You'd want div:has(+p), but unfortunately has is not implemented, so this will have to do:

Code: Select all

/* black background between p, sites.psu.edu & rumblekraft, resp. */
  div[class~="entry-content"], div[class~="body"] {
    background-color: black !important;
  }

2) Likewise, max & clamp are not implemented. I don't know how you'd do that.

[Kris_88]

max() and clamp() won't help here anyway. You want to increase the font size to 20 where they are smaller and leave the rest unchanged (i.e. as set by the site author). As far as I understand, this cannot be done by CSS, in general. There is no magic instruction to compare the values set by the site author with the number 20 and choose the maximum as the new value.

[Walter Dnes]

max() and clamp() won't help here anyway.

Thanks. Not what I wanted to hear, but at least I know I'm not missing something glaringly obvious.

[tellu-white]

One related item... is there an extension such that
* I'm in profile "A"
* I can right-click a URL and open it in profile "B"

After reading this post, I created an add-on that has this option.

Screenshots:

Right-click on the add-on button:

01.png

Click on the add-on button:

02.png

The "about:profiles" page before creating profiles with the add-on:

03.png

The "about:profiles" page after creating profiles with the add-on:

04.png

IMPORTANT!
The "about:profiles" page must be closed when creating a new profile with this add-on.

Right-click on a link in the Google Search results page + click on the "Open Link in Another Profile" option:

05.png

A list with the created profiles opens, allowing you to select one with which to open the link that was right-clicked:

06.png

The page associated with the link that was right-clicked was opened in the selected profile:

07.png

Next, I will delete ("remove") one of the three profiles created earlier (with right-click on the add-on button):

08.png

09.png

IMPORTANT!
The "about:profiles" page must be closed when removing a profile with this add-on.

IMPORTANT!
Before creating profiles and using them with this add-on, you must save the path to the Pale Moon app (in the "prefs.js" file) by right-clicking on the add-on button + clicking on the "Get the Path to Pale Moon app" option.

IMPORTANT!
When a profile is open, the add-on cannot be used to open another URL with the same profile because that profile is locked by the "parent.lock" file created by Pale Moon ( %APPDATA%\Moonchild Productions\Pale Moon\Profiles\XXXXXXXX.profile_01\parent.lock ).

Of course, other pages can be opened directly in the window of the opened profile.

To use the add-on to open another URL with the same profile, you must first close the Pale Moon window with that profile.

This behavior is identical to that resulting from using the "Launch profile in new browser" option in the "about:profiles" window, so it appears to be hardcoded into Pale Moon.

***

Download link

If you are interested in testing my add-on, you can download it here ( Open Link in Another Profile 2.3 ):

https://www.mediafire.com/file/f6pwwmrhsua9xg3/open_link_in_another_profile_2_3.zip/file

[tellu-white]

Another Option:

In the previous post, I did not mention how to open a profile without loading a specific page in it. To do this, use the "Open Custom URL in Custom Pale Moon Profile" option (after clicking the button) without entering a URL in the "prompt dialog" that opens.

Screenshots:

01.png

02.png

03.png

04.png

***************

IMPORTANT!
Before deleting ("removing") a profile, you must close any instances of Pale Moon that are using that profile. Otherwise, folders (files) created by that profile will remain after the profile is deleted.

[jars_]

tellu-white With all my respect .., the method you proposed, it is "remove the tonsils through the ass" Technically, it is possible, but why???
Are you suggesting to load an entirely new profile just to apply the required CSS style for the website? Thats a fire from a cannon at sparrows; total overkill!

There are methods much simpler and less costly... but, if all of this is for the sake of practicing, honing skills, and just for fun - I applaud and completely withdraw all complaints. The main thing is, that such methods do not become the norm... too late.
Because "pulling out tonsils through the ass", has became the standard for modern coders and app creators.
- CustomButtons + btn upthere (i use it)
- Stylish-Custom | Pale Moon Add-ons
- Stylem
- SiteStyles
SfMBE

+ small upd in defense of CustomButtons and the wishes to integrate this extension into PaleMoon:
with CB to open loaded site url with others Profile we need something like this (8 lines)↓
(to open the link with a RMC it's roughly the same, just a couple of lines shorter)

Code: Select all

// --------------- PaleMoon tmp_profile ----------------------------------------------------------
function pmProfSelect(ico) {
  const cwd = Services.dirsvc.get('CurWorkD', Ci.nsIFile), tmp = Services.dirsvc.get('TmpD', Ci.nsIFile);
    progPath = cwd.path + "\\palemoon.exe";
           if(ico==1) { return "moz-icon://file://" + progPath }
    let prof_tmp = tmp.path + "\\PM_prof_tmp_" + Math.random();
                  arg = ["-no-remote", "-profile", prof_tmp, gBrowser.currentURI.spec];
     btnFunc.startProcess(progPath, arg);
   };

// btnFunc & startProcess is Global objects\func in other CB btn prepared for global execution by\for me - user.  that is  + ~20 lines of code.

[tellu-white]

the method you proposed, it is "remove the tonsils through the ass" Technically, it is possible, but why???

Si tacuisses, philosophus mansisses!

If you had read my first post here carefully, you would have seen that I posted this add-on in response to Walter Dnes' additional request ("one related item") at the end of his first post:

Walter Dnes wrote:
One related item... is there an extension such that
* I'm in profile "A"
* I can right-click a URL and open it in profile "B"

In addition, since I created an add-on that opens links in another profile, I also added options to EASILY create (and delete) profiles from which a user can EASILY select one when opening a link, depending on the context (see the explanation about the limitation imposed by the "parent.lock" file in my first comment). Also, my add-on removes tracking parameters from links in Google Search results pages (parameters added by Google every time you right-click a link).

To implement all these options, you need a few more lines of code than the ones you posted.

[Walter Dnes]

One related item... is there an extension such that
* I'm in profile "A"
* I can right-click a URL and open it in profile "B"

After reading this post, I created an add-on that has this option.

Thank you. I'll take a look at it.

[tellu-white]

I've made a new version of this add-on (3.1) in which I've removed the need to save the Pale Moon application path with "Right-Click / Get the Path to Pale Moon app". I was able to remove this requirement after coming across a hard-to-find line of code (hard-to-find argument = XREExeF):

Code: Select all

var process_Pale_Moon = Components.classes["@mozilla.org/process/util;1"].createInstance(Components.interfaces.nsIProcess);
process_Pale_Moon.init(Services.dirsvc.get("XREExeF", Components.interfaces.nsIFile));

I assume that the letter F at the end of the argument "XREExeF" stands for Firefox. I also assume that the string "Exe" refers to an executable file.

I've tested the code on "Windows 7 32-bit" and "Linux Mint 19.3 Cinnamon 32-bit", and it worked (even though in Linux, Pale Moon executable does not have the "exe" extension).

***

I've made another change, namely for cases where you want to open a profile without a specific page in it. Thus, when using the "Open Custom URL in Custom Pale Moon Profile" option, if you leave the "prompt dialog" that opens blank (see my previous post), the new code will open the selected profile with the URL "about:blank". This change was necessary because without it, in Linux the new profile would open with the URL "file:///home/mint/".

Download link ( Open Link in Another Profile 3.1 ):

https://www.mediafire.com/file/owoqxjo8271sh9k/open_link_in_another_profile_3_1.zip/file

***

P.S.

jars_ wrote:
small upd in defense of CustomButtons and the wishes to integrate this extension into PaleMoon:
with CB to open loaded site url with others Profile we need something like this (8 lines)

Code: Select all

function pmProfSelect(ico) {
  const cwd = Services.dirsvc.get('CurWorkD', Ci.nsIFile), tmp = Services.dirsvc.get('TmpD', Ci.nsIFile);
    progPath = cwd.path + "\\palemoon.exe";
           if(ico==1) { return "moz-icon://file://" + progPath }
    let prof_tmp = tmp.path + "\\PM_prof_tmp_" + Math.random();
                  arg = ["-no-remote", "-profile", prof_tmp, gBrowser.currentURI.spec];
     btnFunc.startProcess(progPath, arg);
   };

By the way, your code did not work in "Linux Mint 19.3 Cinnamon 32-bit." The "CurWorkD" argument points to the wrong path "home/mint" instead of the correct path "usr/lib/palemoon"! I tested the code you posted with "custom_buttons-0.0.5.8.9-fixed8".

Screenshots:

01.png

02.png

03.png

04.png