I also enjoy reading Foghorn's posts and would think it a shame if he left over something so easily fixable.
All he needs is a few lines of CSS code - so no javascript, or anything else that might be
"dangerous."
I took the liberty of writing the basics to allow for changing the quote box background and foreground (text) colors along with the font size. The code is nearly self explanatory, I did add a few sparse comments that I thought might help.
Once you take a look at the code I am quite sure anyone here will see how to change the quote colors to any flavor they like. All you need is the hex codes for the colors you want, just google "hex red," for example.
With CSS in hand, the only other requirement is a browser extension to inject it, there are scores available. I use this one on my Chrome based browsers:
https://chromewebstore.google.com/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld
As I said, there are many others available, look for them here - search "CSS injection":
Chrome based browsers:
https://chromewebstore.google.com
Firefox based browsers:
https://addons.mozilla.org/en-US/firefox/extensions
Firefox also offers a native method for doing this (the injection part), you can Google for instructions if you prefer this route.
The user has nearly absolute control over the colors, sizes and layouts of every element on a website using this method - you can rearrange, recolor and resize Sci anyway you like. The only limit is no changes to function, that would require javascript, so you can't alter the action of buttons and so forth.
Accomplishment of the initial phase, giving control over the colors and font sizes of the quote boxes, should take no more than 20 minutes of foghorn's time - start to finish.
Naturally, these effects are local to the specific browser only, nothing whatsoever happens server side (to Sci's site). To me, this is obvious and I would have left it unsaid, save for the fact that nobody has posted this extremely simple, noninvasive solution - perhaps CSS is not quite the common knowledge I would have expected it to be amongst the members.
To that end, here are a couple of links to background information on CSS and browser injection:
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
My apologies for the video, it was the only introductory level resource I was able to quickly locate with a google search on "CSS injection into a browser."
foghorn - let me know if you have any questions - my time is somewhat limited, but I will be happy to assist with any other needs you may have on this project, to the extent that I can...
CSS Code (copy & paste everything between the --- lines in the CSS box of your extension):
--------------------------------
/* This modifies the background color of the quote box */
.bbCodeBlock.bbCodeBlock {
background: #280000; /* burgundy */
}
/* This modifies the color of the quoted text */
.block--messages .message.message, .block--messages .block-row.block-row {
color: #fffacb; /* light yellow */
}
/* This modifies the font size of the quote */
.bbCodeBlock.bbCodeBlock--quote.bbCodeBlock--quote .bbCodeBlock-content.bbCodeBlock-content {
font-size: 16px; /* the default is 13px */
}
/* This modifies the quote title element */
.bbCodeBlock-title.bbCodeBlock-title {
font-size: 16px; /* the default is 13px */
color: #fffacb; /* light yellow */
background: #002800; /* dark green */
}
--------------------------------
Edited to add screenshot.
It occurred to me that it might be helpful to provide a screenshot of the CSS in action - I have dark mode turned on, so the rest of the site (other than the quotes) may appear differently in your browsers. I just picked a random thread to screenshot...
