Gentoo Forums
Gentoo Forums
Gentoo Forums
Quick Search: in
Forums code tag colors
View unanswered posts
View posts from last 24 hours

 
Reply to topic    Gentoo Forums Forum Index Gentoo Forums Feedback
View previous topic :: View next topic  
Author Message
krumpf
Apprentice
Apprentice


Joined: 15 Jul 2018
Posts: 191

PostPosted: Thu May 25, 2023 8:29 am    Post subject: Forums code tag colors Reply with quote

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
View user's profile Send private message
rab0171610
Guru
Guru


Joined: 24 Dec 2022
Posts: 427

PostPosted: Thu May 25, 2023 9:06 am    Post subject: Reply with quote

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
View user's profile Send private message
Hu
Administrator
Administrator


Joined: 06 Mar 2007
Posts: 22710

PostPosted: Thu May 25, 2023 3:20 pm    Post subject: Reply with quote

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
View user's profile Send private message
stefan11111
l33t
l33t


Joined: 29 Jan 2023
Posts: 934
Location: Romania

PostPosted: Thu May 25, 2023 4:51 pm    Post subject: Reply with quote

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
View user's profile Send private message
krumpf
Apprentice
Apprentice


Joined: 15 Jul 2018
Posts: 191

PostPosted: Thu May 25, 2023 6:46 pm    Post subject: Reply with quote

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
View user's profile Send private message
Hu
Administrator
Administrator


Joined: 06 Mar 2007
Posts: 22710

PostPosted: Thu May 25, 2023 7:00 pm    Post subject: Reply with quote

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
View user's profile Send private message
krumpf
Apprentice
Apprentice


Joined: 15 Jul 2018
Posts: 191

PostPosted: Thu May 25, 2023 7:36 pm    Post subject: Reply with quote

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 :D
Back to top
View user's profile Send private message
stefan11111
l33t
l33t


Joined: 29 Jan 2023
Posts: 934
Location: Romania

PostPosted: Thu May 25, 2023 8:46 pm    Post subject: Reply with quote

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
View user's profile Send private message
krumpf
Apprentice
Apprentice


Joined: 15 Jul 2018
Posts: 191

PostPosted: Thu May 25, 2023 9:27 pm    Post subject: Reply with quote

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
View user's profile Send private message
skellr
l33t
l33t


Joined: 18 Jun 2005
Posts: 981
Location: The Village, Portmeirion

PostPosted: Thu May 25, 2023 9:29 pm    Post subject: Reply with quote

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

They have it disabled by default.
Back to top
View user's profile Send private message
rab0171610
Guru
Guru


Joined: 24 Dec 2022
Posts: 427

PostPosted: Thu May 25, 2023 10:32 pm    Post subject: Reply with quote

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
View user's profile Send private message
stefan11111
l33t
l33t


Joined: 29 Jan 2023
Posts: 934
Location: Romania

PostPosted: Thu May 25, 2023 10:43 pm    Post subject: Reply with quote

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
View user's profile Send private message
krumpf
Apprentice
Apprentice


Joined: 15 Jul 2018
Posts: 191

PostPosted: Fri May 26, 2023 5:37 am    Post subject: Reply with quote

@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
View user's profile Send private message
stefan11111
l33t
l33t


Joined: 29 Jan 2023
Posts: 934
Location: Romania

PostPosted: Fri May 26, 2023 6:33 am    Post subject: Reply with quote

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
View user's profile Send private message
krumpf
Apprentice
Apprentice


Joined: 15 Jul 2018
Posts: 191

PostPosted: Fri May 26, 2023 6:56 am    Post subject: Reply with quote

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
View user's profile Send private message
Chiitoo
Administrator
Administrator


Joined: 28 Feb 2010
Posts: 2733
Location: Here and Away Again

PostPosted: Fri May 26, 2023 7:03 am    Post subject: Reply with quote

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
View user's profile Send private message
Hu
Administrator
Administrator


Joined: 06 Mar 2007
Posts: 22710

PostPosted: Fri May 26, 2023 2:52 pm    Post subject: Reply with quote

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
View user's profile Send private message
wjb
l33t
l33t


Joined: 10 Jul 2005
Posts: 632
Location: Fife, Scotland

PostPosted: Fri Sep 01, 2023 10:10 am    Post subject: Reply with quote

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
View user's profile Send private message
Display posts from previous:   
Reply to topic    Gentoo Forums Forum Index Gentoo Forums Feedback All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum