Forums code tag colors

[krumpf]

Hi all,

Code: Select all

My eyes and myself are getting older, and reading the light green text on white background within code tags is troublesome.

So, I was wondering, could the site admin change the light green to a darker green, or maybe a darker background for the code tags ?
Or is there any way for me to change those colors only for gentoo forums by tweaking firefox's userChrome.css ? (Without turning the whole board into some kind of black hole like some dark themes do.)

[rab0171610]

I use the black hole theme that you refer to in Firefox so it is not that stark for me here. I find glaring white pages more troublesome.
What happens when you just select the text and highlight it with your mouse? Selecting the text, which highlights it, makes it much easier to read here. The ratio of quotes in the forums to other text is very small in comparison.
Dark Reader is a Firefox add-on that can customize varying degrees of darkness, but it is buried in the settings.
Or they could just change the font color.
I am sure it is possible to change the font color for a given page with css or Greasemonkey.

[Hu]

The forum is quite amenable to local CSS overrides. I use a dark override here, which I wrote years ago without much effort. Unlike some modern excuses for web sites, this one was easy. I use:

Code: Select all

@-moz-document domain("forums.gentoo.org") {
  :root,img,iframe{filter:invert(100%);}
  a[href]>img{filter: initial !important;}
  .menu,
  body>:last-child p,
  .forumline td{background-color:white !important;}
  .forumline td.spacerow{background-color:gold !important;}
  body{background-color:black !important;}
  .forumline td .code{background-color:lightyellow !important;}
}

[stefan11111]

The forum is quite amenable to local CSS overrides. I use a dark override here, which I wrote years ago without much effort. Unlike some modern excuses for web sites, this one was easy. I use:

Code: Select all

@-moz-document domain("forums.gentoo.org") {
  :root,img,iframe{filter:invert(100%);}
  a[href]>img{filter: initial !important;}
  .menu,
  body>:last-child p,
  .forumline td{background-color:white !important;}
  .forumline td.spacerow{background-color:gold !important;}
  body{background-color:black !important;}
  .forumline td .code{background-color:lightyellow !important;}
}

How do you apply this?

[krumpf]

Thanks Hu !
You gave me a nice base to perform the small tweak I want.
CSS might be easy for you, but each time I've tried it, even just to align 2 div, there were a lot of F-words coming out of my mouth ^^'

@stefan In your firefox profile folder (find its location with url about:support ) create a chrome folder, and inside that folder a userContent.css

[Hu]

I may have been unclear. I was not bragging that I am proficient at CSS, but rather observing that the document structure of the forum is amenable to these types of changes. There have been other sites where I wanted a change and it was much more complicated, because a variety of page elements needed to be overridden individually, such as a grid where the elements are all individually and absolutely positioned, so making one element wider makes everything else wrong and requires that all the other elements be explicitly repositioned, or various sites that have a dozen different style rules that all set different parts of their text to white, and I have to override all of them to get the page to be reasonable. With these forums, I made the change I wanted, and did not find myself in a pit of secondary changes required just to smooth out the side effects of the change I wanted.

If you want more specific help, please ask. It has been a long time since I wrote the fragment I posted above, but I am happy to recompute how it works and explain it, if you want.

[krumpf]

I've reduced your code to this

Code: Select all

@-moz-document domain("forums.gentoo.org") {
.forumline td .code {	background-color:silver !important;
						font-family : "dejavu sans mono" !important;
						color: darkblue !important}
}

and now I got easier to read code in forums

I think that comic explains nicely my CSS skills

[stefan11111]

Thanks Hu !
You gave me a nice base to perform the small tweak I want.
CSS might be easy for you, but each time I've tried it, even just to align 2 div, there were a lot of F-words coming out of my mouth ^^'

@stefan In your firefox profile folder (find its location with url about:support ) create a chrome folder, and inside that folder a userContent.css

Its location seems to be /home/stefan/.librewolf/7zzdpqn2.default-release.
I created this:

Code: Select all

~/.librewolf/7zzdpqn2.default-release/chrome $ cat userContent.css

@-moz-document domain("forums.gentoo.org") {
  :root,img,iframe{filter:invert(100%);}
  a[href]>img{filter: initial !important;}
  .menu,
  body>:last-child p,
  .forumline td{background-color:white !important;}
  .forumline td.spacerow{background-color:gold !important;}
  body{background-color:black !important;}
  .forumline td .code{background-color:lightyellow !important;}

The site looks the same.

[krumpf]

You're missing the final }

Other possibility, in about:config url, search for toolkit.legacyUserProfileCustomizations.stylesheets, set it to true and restart your browser.
Also, I noticed just refreshing the page after tweaking the css file wouldn't work, I needed to open a new tab for changes to be applied.

[skellr]

In Firefox go to about:config and change toolkit.legacyUserProfileCustomizations.stylesheets to true.

They have it disabled by default.

[rab0171610]

I am always highlighting the quote text to soften the brightness and read it better. This will keep me from having to do that if I can change the color to something less neon colored. (exacerbated by wearing bifocals probably)
Really dumb questions tho . . .
Where can I find a list of supported color names to experiment with?
Also, I already have a css file to remove that new puzzle piece extension button from the task bar. I assume I can I just add this code block to the bottom of the file without affecting the other code already there?

[stefan11111]

Thanks Hu !
You gave me a nice base to perform the small tweak I want.
CSS might be easy for you, but each time I've tried it, even just to align 2 div, there were a lot of F-words coming out of my mouth ^^'

@stefan In your firefox profile folder (find its location with url about:support ) create a chrome folder, and inside that folder a userContent.css

Its location seems to be /home/stefan/.librewolf/7zzdpqn2.default-release.
I created this:

Code: Select all

~/.librewolf/7zzdpqn2.default-release/chrome $ cat userContent.css

@-moz-document domain("forums.gentoo.org") {
  :root,img,iframe{filter:invert(100%);}
  a[href]>img{filter: initial !important;}
  .menu,
  body>:last-child p,
  .forumline td{background-color:white !important;}
  .forumline td.spacerow{background-color:gold !important;}
  body{background-color:black !important;}
  .forumline td .code{background-color:lightyellow !important;}

The site looks the same.

Finally applied this.
The background off the site is still white and there is a weird gap at the top-left corner.
https://github.com/stefan11111/pastebin ... 0x1080.png
https://github.com/stefan11111/pastebin ... 0x1080.png

[krumpf]

@rab0171610 Just search for html colors on the web. I noticed the css file also accepts hexadecimal color codes, that should leave you room to experiment.

@stefan There are Hu's choice of colors, it felt like overkill to me, so as said in a previous post, I just reduced the css to affect only the

Code: Select all

 tag.

[stefan11111]

[quote="krumpf"]@rab0171610 Just search for html colors on the web. I noticed the css file also accepts hexadecimal color codes, that should leave you room to experiment.

@stefan There are Hu's choice of colors, it felt like overkill to me, so as said in a previous post, I just reduced the css to affect only the

Code: Select all

 tag.[/quote]
I figured out how to make the background back, but that corner is still there.

[krumpf]

I figured out how to make the background back, but that corner is still there.

Wild guess : using the firefox inspector (F12 key), I would say it's caused of the <a name="top"></a> anchor, but honestly, I have no clue.

[Chiitoo]

Yes, the default colours are pretty bad, but we'd rather not touch anything with the current forum software as long as it works. :]

Tiny tweaks like this of course /should/ not break anything... but I have /some/ hope that this is the year 202(phpBB)3 which has quite some changes in store...

[Hu]

stefan11111: I do not get that artifact on my view, so I cannot debug it for you. Perhaps one of my other customizations (not shown) is responsible for eliminating it.

[wjb]

A little late here, but I only just noticed this conversation.

I use the Stylus add-on (available for Chromium, Firefox, etc) for patching site CSS. It's only foible is the 'name' it wants for a new script is the domain name of the site to be patched.

I hadn't thought of changing the font as well, thanks @krumpf

Code: Select all

/*
** Stylus script for: forums.gentoo.org
*/

/*
** Changes the code areas to improve readability
** - dark background
** - light text
** - cleaner font
**
** Dotted names get turned into links, so set a colour
** for these that works on dark b/g.
*/
.forumline td .code {
    color: white !important;
    background-color: black !important;
    font-size: 14px;
    font-family: "dejavu sans mono" !important
}

.forumline td .code a {
    color: yellow;
}

[Zucca]

I decided to jump on this too.
I've allowed custom css via about:config and wrote this using the forum stylesheet as a base:

Code: Select all

@-moz-document domain("forums.gentoo.org") {
	.code {
		border-right: #d1d7dc 1px solid;
		border-top: #d1d7dc 1px solid;
		font-size: 14pt;
		border-left: #d1d7dc 1px solid;
		color: #00AA00;
		border-bottom: #d1d7dc 1px solid;
		font-family: Courier, 'Courier New', monospace;
		background-color: #121212;
	}
}

placed it into chrome/userContent.css under my profile dir... But the code blocks never change. Any clues?

[skellr]

I decided to jump on this too.
I've allowed custom css via about:config and wrote this using the forum stylesheet as a base:
...
placed it into chrome/userContent.css under my profile dir... But the code blocks never change. Any clues?

Yeah, sadly, that won't work anymore. You now need an extension. Or write you own extension...

I use Stylus. https://addons.mozilla.org/en-US/firefox/addon/styl-us/

[Zucca]

Yeah, sadly, that won't work anymore.

So the config option toolkit.legacyUserProfileCustomizations.stylesheets is just a leftover.

You now need an extension.

I wish I could avoid another one... I already have six installed.
I think uBlock Origin has such feature too... I'll try it.

[skellr]

Yeah, sadly, that won't work anymore.

So the config option toolkit.legacyUserProfileCustomizations.stylesheets is just a leftover.
...
I wish I could avoid another one... I already have six installed.
I think uBlock Origin has such feature too... I'll try it.

Yes. The config option to enable userContent was recently disabled.

CSS has evolved quite a bit. It's now trivial to change hyperlink text and targets. You can imagine what anything that gains write access to your profile could do/phish.

It would be nice to find an extension that just re-enabled it, without all the unwanted features of a "desirable" extension.

[Zucca]

Well... uBlock can do styling, but it's limited to oneliners and you cannot really just import a standard css file. At least I haven't been able to find a way to do that after digging quite a lot of documentation and reading different discussion about the topic.

So I guess I need to pick up some custom styling extension. Preferably one which can simply import a css file from my system.

[skellr]

So I guess I need to pick up some custom styling extension.

Yeah, with a built in text editor and syntax highlighting, optional external repos for additional sylesheets. A kitchen sink and a half just to allow access to a single text file that you want to include.

Here were are 2025

[Zucca]

Well. I installed Stylebot. It even has a wysiwyg gui for quickly changing basic style settings for a site.
So I created the following style for these forums:

• Screenshot

  Code: Select all

  .row2, .row2 * {
    background-color: #435;
    color: #d9d2e9;
  }
  
  .row1, .row1 *:not(span.gensmall [style], span.gensmall [style] *, .code, a.postlink){
    background-color: #333;
    color: #d9d2e9;
  }
  
  a.postlink {
    text-decoration: underline;
    text-decoration-color: #2e2;
    color: #2e2;
  }
  
  a.postlink:link {
    color: #2e2;
  }
  
  a.postlink:visited {
    color: #292;
  }
  
  p.menu {
    font-size: 14pt;
  }
  
  .maintitle {
    color:#d9d2e9;
  }
  
  .nav, .gensmall {
    color:#aad;
  }
  
  .gensmall {
    font-size: 10pt;
  }
  
  .postbody {
    font-size: 14pt;
    line-height: 18pt;
  }
  
  .code {
    font-family: terminus, monospace;
    font-size: 12pt;
    font-weight: 700;
    font-style: normal;
    background-color: #121212;
    color: #93cc7d;
  }
  
  .forumline * {
    border-color: #657;
    outline-color: #657;
    font-size: 12pt;
  }
  
  .forumline {
    background-color: #080808;
  }
  
  .spaceRow {
    background-color: #080808;
  }
  
  * > a:link, a.nav, a:link, a.gensmall {
    color:#d9d2e9
  }
  
  body {
    background-color: #080808;
  }
  
  table:has(img[alt="Gentoo Forums"]) {
    margin: 20px;
    width:fit-content;
  }
  
  p.menu {
    text-align: center;
  }
  
  table.forumline tr:has(td.catLeft, td.catRight) * {
    background-color: #559;
    background-image: none;
  }
  
  .catHead, .catBottom, .catHead *, .catBottom *, select, button, input {
    background-color: #648;
    background-image: none;
    color :#d9d2e9;
    font-size: 12pt;
  }
  
  .genmed {
    font-size: 10pt;
  }
  
  input {
    width: fit-content; 
  }
  
  textarea.post {
    font-size: 12pt;
    border: 3px;
    border-style:dashed;
    padding: 10px;
  }
  
  .code a {
    color: #EC4;
    background-color: inherit;
  }
  
  td.row1 td.quote {
    color:#88b;
  }
  
  td.row2 td.quote {
    color:#aad;
  }
  
  td.row1:has(span.name) {
    width: 250px;
  }
  
  table[cellpadding="0"] tbody tr td[colspan="2"] span.gensmall {
    color:#b22;
    display: block;
  }
  
  tr:has(td.row1) {
    background-color: #333;
  }

... it works... fine, but needs work to blend with the images the forums uses.

If someone is interested, I can post updates to this when I see a need for some adjustments.