View previous topic :: View next topic |
Author |
Message |
krumpf Apprentice
Joined: 15 Jul 2018 Posts: 191
|
Posted: Thu May 25, 2023 8:29 am Post subject: Forums code tag colors |
|
|
Hi all,
Code: | 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.) |
|
Back to top |
|
|
rab0171610 Guru
Joined: 24 Dec 2022 Posts: 428
|
Posted: Thu May 25, 2023 9:06 am Post subject: |
|
|
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. |
|
Back to top |
|
|
Hu Administrator
Joined: 06 Mar 2007 Posts: 22724
|
Posted: Thu May 25, 2023 3:20 pm Post subject: |
|
|
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: | @-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;}
} |
|
|
Back to top |
|
|
stefan11111 l33t
Joined: 29 Jan 2023 Posts: 934 Location: Romania
|
Posted: Thu May 25, 2023 4:51 pm Post subject: |
|
|
Hu wrote: | 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: | @-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? _________________ My overlay: https://github.com/stefan11111/stefan_overlay
INSTALL_MASK="/etc/systemd /lib/systemd /usr/lib/systemd /usr/lib/modules-load.d *udev* /usr/lib/tmpfiles.d *tmpfiles* /var/lib/dbus /usr/bin/gdbus /lib/udev" |
|
Back to top |
|
|
krumpf Apprentice
Joined: 15 Jul 2018 Posts: 191
|
Posted: Thu May 25, 2023 6:46 pm Post subject: |
|
|
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 |
|
Back to top |
|
|
Hu Administrator
Joined: 06 Mar 2007 Posts: 22724
|
Posted: Thu May 25, 2023 7:00 pm Post subject: |
|
|
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. |
|
Back to top |
|
|
krumpf Apprentice
Joined: 15 Jul 2018 Posts: 191
|
Posted: Thu May 25, 2023 7:36 pm Post subject: |
|
|
I've reduced your code to this
Code: | @-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 |
|
Back to top |
|
|
stefan11111 l33t
Joined: 29 Jan 2023 Posts: 934 Location: Romania
|
Posted: Thu May 25, 2023 8:46 pm Post subject: |
|
|
krumpf wrote: | 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: | ~/.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. _________________ My overlay: https://github.com/stefan11111/stefan_overlay
INSTALL_MASK="/etc/systemd /lib/systemd /usr/lib/systemd /usr/lib/modules-load.d *udev* /usr/lib/tmpfiles.d *tmpfiles* /var/lib/dbus /usr/bin/gdbus /lib/udev" |
|
Back to top |
|
|
krumpf Apprentice
Joined: 15 Jul 2018 Posts: 191
|
Posted: Thu May 25, 2023 9:27 pm Post subject: |
|
|
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. |
|
Back to top |
|
|
skellr l33t
Joined: 18 Jun 2005 Posts: 981 Location: The Village, Portmeirion
|
Posted: Thu May 25, 2023 9:29 pm Post subject: |
|
|
In Firefox go to about:config and change toolkit.legacyUserProfileCustomizations.stylesheets to true.
They have it disabled by default. |
|
Back to top |
|
|
rab0171610 Guru
Joined: 24 Dec 2022 Posts: 428
|
Posted: Thu May 25, 2023 10:32 pm Post subject: |
|
|
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? |
|
Back to top |
|
|
stefan11111 l33t
Joined: 29 Jan 2023 Posts: 934 Location: Romania
|
Posted: Thu May 25, 2023 10:43 pm Post subject: |
|
|
stefan11111 wrote: | krumpf wrote: | 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: | ~/.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/blob/main/2023-05-26-1685054375_1920x1080.png
https://github.com/stefan11111/pastebin/blob/main/2023-05-26-1685054388_1920x1080.png _________________ My overlay: https://github.com/stefan11111/stefan_overlay
INSTALL_MASK="/etc/systemd /lib/systemd /usr/lib/systemd /usr/lib/modules-load.d *udev* /usr/lib/tmpfiles.d *tmpfiles* /var/lib/dbus /usr/bin/gdbus /lib/udev" |
|
Back to top |
|
|
krumpf Apprentice
Joined: 15 Jul 2018 Posts: 191
|
Posted: Fri May 26, 2023 5:37 am Post subject: |
|
|
@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] tag. |
|
Back to top |
|
|
stefan11111 l33t
Joined: 29 Jan 2023 Posts: 934 Location: Romania
|
Posted: Fri May 26, 2023 6:33 am Post subject: |
|
|
krumpf wrote: | @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] tag. |
I figured out how to make the background back, but that corner is still there. _________________ My overlay: https://github.com/stefan11111/stefan_overlay
INSTALL_MASK="/etc/systemd /lib/systemd /usr/lib/systemd /usr/lib/modules-load.d *udev* /usr/lib/tmpfiles.d *tmpfiles* /var/lib/dbus /usr/bin/gdbus /lib/udev" |
|
Back to top |
|
|
krumpf Apprentice
Joined: 15 Jul 2018 Posts: 191
|
Posted: Fri May 26, 2023 6:56 am Post subject: |
|
|
stefan11111 wrote: | 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. |
|
Back to top |
|
|
Chiitoo Administrator
Joined: 28 Feb 2010 Posts: 2734 Location: Here and Away Again
|
Posted: Fri May 26, 2023 7:03 am Post subject: |
|
|
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... _________________ Kindest of regardses. |
|
Back to top |
|
|
Hu Administrator
Joined: 06 Mar 2007 Posts: 22724
|
Posted: Fri May 26, 2023 2:52 pm Post subject: |
|
|
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. |
|
Back to top |
|
|
wjb l33t
Joined: 10 Jul 2005 Posts: 633 Location: Fife, Scotland
|
Posted: Fri Sep 01, 2023 10:10 am Post subject: |
|
|
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: |
/*
** 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;
}
|
|
|
Back to top |
|
|
|