UnrealForums Dark Theme

I’ve been tampering with the Forums theme for some time. Made my own Dark version:

You could get one here: https://gist.github.com/S-ed/23f6628…ef7847c02dd1f6
It’s in WIP, and may not be finished ever (depends on how Epic would solve the issue with forums)
To install it You would need Stylus addon for Firefox/Chrome.

USE WITH LIGHT EPIC THEME SETTING (Drop down on the bottom of the forum. Epic’s Dark Theme uses different ruleset, so right now it may look broken when used with this usercss-theme.)

You could support the development by donation .

See Also:
Dark Theme for AnswerHub | Dark Themes for the rest parts of the website

I think, I had to remove the feedback for Epic as it lost its purpose in this thread.

This post will be used to show all the optional features.*

  • WIP

This is a brilliant piece of hard work that @S-ed have shown here, and i’m absolutely support this effort to make the forums look better. This style sheet is super clean and works very well to me as well, i can read and navigate the site much much better, the comparison between the default and this theme is almost impossible to make, as in the design choices it bears the clear understanding of a person who is actually using the forums and not just puts some general trash to the screen.

I am actually shocked by the current state of the forum, it barely works and this change from Epic put quite a stress and damage to the community as it display careless behavior and unprofessionalism on their part. This is clearly the representation of that how little they actually know about us the community, and there are great many indications present already that this accident can and will indeed repeat itself in the future. It is terrifying and should be avoided to happen again!

As for the CSS S-ed just presented here i can very strongly recommend it to everyone; just install your favorite styling browser extension and put it in there, help in the test and work to make it better, since this is the look how the forum should appear for the publics. I also would like to propose a vote in favor of this theme to make it to the Default setting, and just move the current unreadable user-unfriendly white default trash to the bottom of the style list, as it should remain hidden for the vast majority of the users.

VBForums is also a big pile of garbage, written and maintained by the ancient old pre-css era folks, who have no idea about how the forum engine should work these days. It is very unfortunate that such bloatwares can still manage to make it to appear in professional environments, but it’s functionality can probably help to maintain it’s content so i think it can remain to exists for the time being. If someone well experienced of many forum engines will decide to put up an another vote for the next engine, that would in fact help a great deal to Epic for make much better decisions regarding what the community would require, and to make this website work out for many and all the newcomers, the old friends here!

Please guys, support this and make your votes when you feel it is ready.

I copied the style into stylish (chrome) but nothing happens. Am I doing it wrong?

Which browser + extension are you using? Stylish isn’t working for me. Tried Stylebot and it gives error, it works when those lines are removed but with slight annoying differences. Also, thanks for your work! :slight_smile:

Thank for the theme, @S-ed, forums are much more pleasant to look at with it!

@konflict, @nicat I’ve used **Mozilla Format import **and it worked flawlessly, also I changed Applied to to URLs starting with

Aha! That worked.

For those having issues implementing the CSS into different styling extensions where the mozilla related commands are not functioning, you can just remove or adjust the headers to get the actual CSS being applied for the forums.



@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document regexp("^https?:\/\/forums\.unrealengine\.com\/.*") {


And, at the end of the CSS file you will remove the last } bracket as well in case you don’t require these headers. I’m using this style sheet in Chrome with a modified version of Injector extension, there i don’t have to apply the headers since the extension will make clear distinctions between websites and apply the CSS only upon domain match.

At the time i’m writing this the large portion of the site is already appears with the nice skin, but certain parts are missing the styles applied - or simply unable to reach for thanks to the browser cross site limitations. The CKE is running in a IFRAME (meh!) that the CSS style will never going to be applied properly thus you can experience dark background and black letters which doesn’t work out well. This is a limitation of the injected style sheet that it is cannot be applied to the CKE content itself. Very unfortunate limitation, and if you find this problematic i’m sure S-ed can make the comment boxes appear some brighter background color for the time being, but in the final version of the theme it will blend in properly as it should.

@zeOrb thanks! I’ll try it. Though, I am not able to find anything about Mozilla Format import. Do you mean you are browsing using Mozilla? :S

@Konflict thanks! That is what I did as well but I got the problem you mentioned, some stuff not applying properly. I’m not using it currently, I got used to current one after a while (I’m using f.lux as well), hopefully we’ll get an official dark theme soon as mentioned before.

I’ve been modified the Injector extension to apply custom style sheets to IFRAME nodes as well, and because the site will delete and recreate this iframe multiple times as you do certain things, it will update the iframes in a repetitive manner to make sure the styles are there. I can actually share this modded version this would make it very easy to use this style sheet as well, however Chrome and it’s famous limitations all around will makes it kind of hard to install, since the missing policies. I would have to instead just submit this mod to the chrome web store to have a fine copy. But that’s would be a whole another topic with the original author, even tho he have been abandoned this project for some time.

Maybe other extensions have similar functionality so you can use them instead, and it would make the comment box work properly on Chrome as well.
Other than this limitation, everything else seems to be working just fine, and while f.lux can ease on the eyes it will won’t adjust you the layout which the style sheet does too as well. :slight_smile:

We should make this the official one as it is almost done already. Sooner the better.

@S-ed oh, that is what zeOrb meant by Mozilla import. Now everything looks as it is supposed to be. Thanks!

This really is a great theme! Let’s see if Epic can do any better :cool:

Hello, I want to say Thank you, please keep updating your theme, especially links highlighting, keep in mind some people use dark colors for fonts, when they type, if it possible to put dark fonts under some box with a background?
Thank you.

@SAMBUEV](https://forums.unrealengine.com/member/371034-sambuev) if You’re talking about font coloring, those people are … selfish and ignorant.
IMO font coloring should be banned on forums. Or only limited subset should be available.
I’ll take a look on this issue, You probably should link here the examples You’ve seen.

[font=courier new]#000000 | #800000 | #8b4513 | #2f4f4f | #008080 | #000080 | #4b0082 | #696969 [hr][/hr][font=courier new]#b22222 | #a52a2a | #daa520 | #006400 | #40e0d0 | #0000cd | #800080 | #808080 [hr][/hr][font=courier new]#ff0000 | #ff8c00 | #ffd700 | #008000 | #00ffff | #0000ff | #ee82ee | #a9a9a9 [hr][/hr][font=courier new]#ffa07a | #ffa500 | #ffff00 | #00ff00 | #afeeee | #add8e6 | #dda0dd | #d3d3d3 [hr][/hr][font=courier new]#fff0f5 | #faebd7 | #ffffe0 | #f0fff0 | #f0ffff | #f0f8ff | #e6e6fa | #ffffff

Well. I’ve tested several methods, and there’s no way to make it readable for ANY color. Some subset always well be invisible.

However. I’ve made this hack to eliminate any color customization in the post, in my theme it’s commented.


    .js-post__content-text span {
        color: #ccc !important;
    }

Made badges slightly bigger. [SPOILER]


[/SPOILER]

Checkboxes: [SPOILER]screenshot.1504358825.png
[/SPOILER]
Status icons:[SPOILER]

[/SPOILER]
Topic selection: [SPOILER]


[/SPOILER]

Theme is almost finished.
Except CKE popups (Link, Image, Video) and some dropdown lists all should be dark themed.

If You find a ‘white spot’ make a screenshot and give an explanation how to find it.
Link hovering still an issue (it’s really hard to debug, since FF and Chrome could not debug :visited styles).

I’ve also moved available “hacks” to the top of the theme. Make sure to not overwrite them if You’re using those.

Found some, fixed them.

https://pastebin.com/X7mS9SBv

You can pick whatever you like! The !important was very important, lesser of 2 evils.

Nice work S-ed!

UI.X for XenForo actually does this; it lets you set a max display height for signatures and anything beyond that is JS cropped with an expand button on it. You can also set it to 0 px to default to fully collapsed. Here it is in action on my board: http://puu.sh/xq8OL/fe396fd002.jpg

Anyway, nice work so far! vBulletin 5’s default style is hot garbage so every little bit helps.

Signatures hack done: [SPOILER]


[/SPOILER]