Page 1 of 1

Dark look for the night owls

Posted: Sat Dec 07, 2013 12:09 pm
by grom
Hello.

One of your members kindly asked me to create a dark style for this forum, and also for the EOC stats site. Many of you are supposedly "night owls", so these should come in handy.

phpbb-dark-blue-simple style for Folding Forum (use with ProBlue or ProDark theme)
EOC-dark style for EOC and kakaostats.

A user style is a user-side CSS override of website appearance. Mainly, you specify your own colors and backgrounds instead of what the website developer chose. You can also move or hide existing page elements, but can't create new elements (such as links), can't add scripts (JavaScript) nor anything like that. Easiest way to use them is through Stylish or similar browser extensions, but anything allowing user CSS will do. Firefox family of browsers can use the built in userContent.css file.

Mod Edit: Moved To Appropriate Forum - PantherX
Mod Edit: converted url's to links - P5-133XL
Author Edit: added info "with ProBlue or ProDark theme"

Re: Dark look for the night owls

Posted: Mon Dec 09, 2013 1:55 am
by PantherX
Welcome to the F@H Forum grom,

Thank you very much for taking the time to create and share the userstyles :)

I do like the dark looks and am now using both of them.

Re: Dark look for the night owls

Posted: Mon Dec 09, 2013 3:30 am
by Napoleon
Brilliant! Installing Stylish (and the style itself) was a breeze on my browser of choice (Opera). Definitely easier on the eyes than any of the choices provided by UCP. A "must have" for me.

EDIT: Apparently specific font colors, defined by the [color=#FF0000]BBCode[/color] tag won't be available... still, not switching back. 8-)

Re: Dark look for the night owls

Posted: Mon Dec 09, 2013 12:03 pm
by grom
Thank you for the warm welcome and kind words.

@Napoleon, yes, any user-specified text color will be shown as bright red / pink with the forum style. It was intentional since that usually marks important parts of posts, but many user-chosen colors are not easily readable against dark backgrounds. As there are over 16 million selectable colors, it would have been unfeasible to specify them all. "Red for all" seemed like a good compromise. I could add a couple more most used colors if you wish.

Other notes worth mentioning about the forum style:
- Pande group is colored bright orange for better visibility on dark backgrounds, and for easier distinguishing from regular blue links / ordinary members.
- Individual post titles (subjects) are hidden to save vertical space, as from experience they only reflect titles of their threads. They are visible again on search pages, as that is where they prove very useful.
- All images are embedded as base64 strings. Basically, they are in there as text so the styles are self-contained.

I'm glad you guys like it. If you find any issues, freely let me know and I'll try to fix them. I'm subscribed to this topic.

Have a nice day.

Re: Dark look for the night owls

Posted: Mon Dec 09, 2013 1:19 pm
by Napoleon
grom wrote:Napoleon, yes, any user-specified text color will be shown as bright red / pink with the forum style. It was intentional since that usually marks important parts of posts, but many user-chosen colors are not easily readable against dark backgrounds. As there are over 16 million selectable colors, it would have been unfeasible to specify them all. "Red for all" seemed like a good compromise. I could add a couple more most used colors if you wish.
Testing a bit...
This text should be red.
This text should be green.
This text should be blue.
This text should be yellow.

You can click "quote" to reply/check the BBCode tags I used in this post. As for what I see in my Opera browser... bold, italics & underline works, but the color tag has no effect whatsoever (all the text is white).

EDIT: Switching to ProBlue forum theme solved the problem.

Re: Dark look for the night owls

Posted: Mon Dec 09, 2013 2:22 pm
by grom
Napoleon wrote:As for what I see in my Opera browser... bold, italics & underline works, but the color tag has no effect whatsoever (all the text is white).
Curious. It works here in Firefox, Chrome and Opera 12.16 (latest Presto based version of Opera). I included a screenshot named "Napoleon" on the page of the forum style, that is how user colored text should appear.

Do you mind if we take this to PM?
Steps for troubleshooting:
- can you please right-click here on the "red colored text within quotes" and choose "Inspect element" from your browser's context menu;
- take a screenshot of the Inspector which just opened at the bottom of your browser, and send me a link to it in PM.

Thank you. I will add those green, blue and yellow text colors during the next update, as bright green, bright blue and yellow.

Re: Dark look for the night owls

Posted: Mon Dec 09, 2013 3:06 pm
by Napoleon
YGPM.

Re: Dark look for the night owls

Posted: Mon Dec 09, 2013 3:59 pm
by grom
Thank you for the PM, Napoleon. Issue was the selected theme in User Control Panel.

Style works with default ProBlue (ProDark, ProSilver etc) themes. Other themes such as Subsilver and Artodia do not provide optimal experience with the forum userstyle, because they change HTML markup of pages in significant degrees.

Re: Dark look for the night owls

Posted: Mon Dec 09, 2013 4:25 pm
by Napoleon
Works, and looks even better now that I've switched from Subsilver2 to ProBlue. 8-)

About additional user-specified colours, do you think the following specific values would be OK?
[color=#00FF00]Green[/color]
[color=#0000FF]Blue[/color]
[color=#FFFF00]Yellow[/color]

Re: Dark look for the night owls

Posted: Tue Dec 10, 2013 4:08 pm
by grom
Both styles were updated today to fix reported omissions.

Forum style:
1) Added more user-selected text colors.
#008000, #008040, #00BF00, #00BF40, #00FF00, #00FF40,
#408000, #408040, #40BF00, #40BF40, #40FF00, #40FF40,
#80FF00, #80FF40, #80FF80 now all appear as light green (#9f9).
- #0000BF, #0000FF, #0040BF, #0040FF as light blue (#acf).
- #FFFF00, #FFFF40 as yellow (#ff7).
- #FF4000, #FF4040, #FF8000, #FF8040, #FFBF00, #FFBF40 as bright orange (#fc5).

2) Images in posts are now slightly dimmed until moused-over, to prevent unexpected "blinding" from bright screenshots.

EOC style:
Top left on the EOC site, "Processing" is once again orange and "Current" is green.

Have a nice day.

PS: In order not to bump this topic too often, reports of minor issues, bugs and feature requests can be sent over PM. Thank you. Regards.

Re: Dark look for the night owls

Posted: Tue Jan 14, 2014 6:30 pm
by grom
Hello. Just letting you guys know there has been an update to the forum style.

Due to feedback, individual post titles are shown again. Those wanting to save vertical space by hiding them, simply uncomment /*.postbody > h3,*/ near the beginning of code. "To uncomment" means to remove /* from in front and */ from behind it.

There have been small fixes to some of the arrows (Previous PM, Next PM, Return to Inbox...).
PM list and Board Preferences have received a little more attention regarding backgrounds. Right side has a different background from the left side, like regular proBlue theme.
Highlighted / selected text keeps original text color, only background changes.

Thank you all, and enjoy.

------------------------------------------

PS: one thing I noticed when posting this is that page/tab titles are a little busy for multi taskers. You already know that you are on Folding Forum, and the icon is uniquely recognizable. Here is an extremely simple user script (careful! JavaScript) which shortens titles for you. Only aimed at those who spend much time here.
Tabs before:
Image
Tabs after:
Image

Code: Select all

// ==UserScript==
// @name           Folding Forum - Shorter titles
// @include        https://foldingforum.org/*
// @run-at         document-end
// ==/UserScript==

// Remove excess words from page titles
var title = document.querySelector("title").innerHTML.replace(/Folding Forum • (View topic - |View forum - )?/,"");
document.querySelector("title").innerHTML = title;
It works on Firefox (via Greasemonkey, or Scriptish), Chrome (via Tampermonkey, or save locally and drag-n-drop), Opera (save locally and Edit Site Preferences).

Thought I'd share. License of user script is CC Public Domain.

Kind regards.

[Edit:] A year later, the user script is even simpler and more efficient.

Code: Select all

// ==UserScript==
// @name           Folding Forum - Shorter titles
// @include        https://foldingforum.org/*
// @run-at         document-end
// ==/UserScript==

// trim page titles
document.title = document.title.replace(/Folding Forum • (View topic - |View forum - )?/, "");

Re: Dark look for the night owls

Posted: Wed Mar 04, 2015 10:01 pm
by grom
Hello again. I just wanted to take the time to let you know about upcoming update to phpBB dark user style.

Due to (upcoming) changes in phpBB's default theme, I will update the style in about a week or two. This will overwrite any edits you've made to your copy of the style, if you installed it in a way that supports automatic updates (Stylish, Greasemonkey, Tampermonkey).

If you have made edits and would like to keep them, I recommend you make a copy of the style.

If you want to take a look at what the new phpBB's theme looks like, and why I need to update this style, take a look at VideoLAN's forum with the current user style enabled. Because these changes are mostly "under the hood", without any user styles the forum looks much the same as before.

There is no big rush with backing up your edits, but please do so in a timely fashion.

I wish you well, and thank you for your time. :)