Dark look for the night owls

This forum contains information about 3rd party applications which may be of use to those who run the FAH client and one place where you might be able to get help when using one of those apps.

Moderator: Site Moderators

Post Reply
grom
Posts: 7
Joined: Sat Dec 07, 2013 9:54 am

Dark look for the night owls

Post 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"
Last edited by grom on Mon Dec 09, 2013 4:07 pm, edited 1 time in total.
PantherX
Site Moderator
Posts: 7020
Joined: Wed Dec 23, 2009 9:33 am
Hardware configuration: V7.6.21 -> Multi-purpose 24/7
Windows 10 64-bit
CPU:2/3/4/6 -> Intel i7-6700K
GPU:1 -> Nvidia GTX 1080 Ti
§
Retired:
2x Nvidia GTX 1070
Nvidia GTX 675M
Nvidia GTX 660 Ti
Nvidia GTX 650 SC
Nvidia GTX 260 896 MB SOC
Nvidia 9600GT 1 GB OC
Nvidia 9500M GS
Nvidia 8800GTS 320 MB

Intel Core i7-860
Intel Core i7-3840QM
Intel i3-3240
Intel Core 2 Duo E8200
Intel Core 2 Duo E6550
Intel Core 2 Duo T8300
Intel Pentium E5500
Intel Pentium E5400
Location: Land Of The Long White Cloud
Contact:

Re: Dark look for the night owls

Post 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.
ETA:
Now ↞ Very Soon ↔ Soon ↔ Soon-ish ↔ Not Soon ↠ End Of Time

Welcome To The F@H Support Forum Ӂ Troubleshooting Bad WUs Ӂ Troubleshooting Server Connectivity Issues
Napoleon
Posts: 887
Joined: Wed May 26, 2010 2:31 pm
Hardware configuration: Atom330 (overclocked):
Windows 7 Ultimate 64bit
Intel Atom330 dualcore (4 HyperThreads)
NVidia GT430, core_15 work
2x2GB Kingston KVR1333D3N9K2/4G 1333MHz memory kit
Asus AT3IONT-I Deluxe motherboard
Location: Finland

Re: Dark look for the night owls

Post 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-)
Win7 64bit, FAH v7, OC'd
2C/4T Atom330 3x667MHz - GT430 2x832.5MHz - ION iGPU 3x466.7MHz
NaCl - Core_15 - display
grom
Posts: 7
Joined: Sat Dec 07, 2013 9:54 am

Re: Dark look for the night owls

Post 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.
Napoleon
Posts: 887
Joined: Wed May 26, 2010 2:31 pm
Hardware configuration: Atom330 (overclocked):
Windows 7 Ultimate 64bit
Intel Atom330 dualcore (4 HyperThreads)
NVidia GT430, core_15 work
2x2GB Kingston KVR1333D3N9K2/4G 1333MHz memory kit
Asus AT3IONT-I Deluxe motherboard
Location: Finland

Re: Dark look for the night owls

Post 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.
Last edited by Napoleon on Mon Dec 09, 2013 4:08 pm, edited 1 time in total.
Win7 64bit, FAH v7, OC'd
2C/4T Atom330 3x667MHz - GT430 2x832.5MHz - ION iGPU 3x466.7MHz
NaCl - Core_15 - display
grom
Posts: 7
Joined: Sat Dec 07, 2013 9:54 am

Re: Dark look for the night owls

Post 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.
Napoleon
Posts: 887
Joined: Wed May 26, 2010 2:31 pm
Hardware configuration: Atom330 (overclocked):
Windows 7 Ultimate 64bit
Intel Atom330 dualcore (4 HyperThreads)
NVidia GT430, core_15 work
2x2GB Kingston KVR1333D3N9K2/4G 1333MHz memory kit
Asus AT3IONT-I Deluxe motherboard
Location: Finland

Re: Dark look for the night owls

Post by Napoleon »

YGPM.
Win7 64bit, FAH v7, OC'd
2C/4T Atom330 3x667MHz - GT430 2x832.5MHz - ION iGPU 3x466.7MHz
NaCl - Core_15 - display
grom
Posts: 7
Joined: Sat Dec 07, 2013 9:54 am

Re: Dark look for the night owls

Post 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.
Napoleon
Posts: 887
Joined: Wed May 26, 2010 2:31 pm
Hardware configuration: Atom330 (overclocked):
Windows 7 Ultimate 64bit
Intel Atom330 dualcore (4 HyperThreads)
NVidia GT430, core_15 work
2x2GB Kingston KVR1333D3N9K2/4G 1333MHz memory kit
Asus AT3IONT-I Deluxe motherboard
Location: Finland

Re: Dark look for the night owls

Post 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]
Win7 64bit, FAH v7, OC'd
2C/4T Atom330 3x667MHz - GT430 2x832.5MHz - ION iGPU 3x466.7MHz
NaCl - Core_15 - display
grom
Posts: 7
Joined: Sat Dec 07, 2013 9:54 am

Re: Dark look for the night owls

Post 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.
grom
Posts: 7
Joined: Sat Dec 07, 2013 9:54 am

Re: Dark look for the night owls

Post 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 - )?/, "");
grom
Posts: 7
Joined: Sat Dec 07, 2013 9:54 am

Re: Dark look for the night owls

Post 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. :)
Post Reply