Made a new forum style: light text on dark background

[n.b.z.]

I made a new "user style" for this forum.

This time, it uses light text on a dark background - an objective that required a much more extensive effort than my first forum style.

As a consequence, the CSS file now exposes a massive amount of the text and background colors, and I've attempted to make it as accessible and easy to mod as I could.

Please don't expect everything to be perfect - there is going to be a lot of stuff that I missed, and there are other areas that aren't really ready for primetime. I'm releasing it again on the basis of thinking that it's "good enough" for others to enjoy, or to use it as a starting point for making their own theme.

Basically, it looks okay on the front page and the discussion forums, but the further you get into the "system" - to your profile, or the search - the more you will see things that are rather shoddy and unfinished. I guess I will improve this stuff over time.

Also, feel free to find this whole thing terribly ugly - that's why I tried to make it easy to change it.

I am (for now) not going to do anything about "broken" signatures. These often contain inline CSS, and while I could forcefully override the colors in most cases, this would force everyones signature text to have the same color(s), which seems more destructive than helpful to me. Any images that rely on a specific background color will look borked anyway.

To use this for yourself, you will need the "Stylish" browser-plugin. This is available for free and you'll find it on userstyles.org, the same site that hosts my style file:

https://userstyles.org/styles/121820/darkblue-ksp-forum

[Mad Rocket Scientist]

Hey, could you show me how to make the post background color the same as this: https://web.archive.org/web/20150920133212/http://forum.kerbalspaceprogram.com/threads/66465-Work-in-Progress-WIP-Design-Thread

[Stone Blue]

My EYES!!, My EYES!!, My EYES THANK YOU VERY MUCH!!!

COMPLETELY better than MY clumsy, amateurish attempt...

[n.b.z.]

41 minutes ago, Mad Rocket Scientist said:

Hey, could you show me how to make the post background color the same as this: https://web.archive.org/web/20150920133212/http://forum.kerbalspaceprogram.com/threads/66465-Work-in-Progress-WIP-Design-Thread

You mean like the "old" forum? I think that such a light background would probably fit better into my old CSS. In the new one, it would stand out too much with all the other dark blue stuff.

[Kozak]

THANK YOU

[Stone Blue]

Again, THANK YOU n.b.z.!! Using the "inspect element" feature of Firefox, i was able to make it even BLACKER!! ...and tone down some of the light text...

[Mad Rocket Scientist]

19 hours ago, n.b.z. said:

You mean like the "old" forum? I think that such a light background would probably fit better into my old CSS. In the new one, it would stand out too much with all the other dark blue stuff.

I just don't know how to write stylish scripts, and I was hoping you could tell me what that element of the forums was called, and how to change the color of an element. 

[n.b.z.]

Quote

[...] I was hoping you could tell me what that element of the forums was called, and how to change the color of an element.

The post backgrounds can be styled like this:

/* article main box */
.ipsComment:not(.ipsBox_transparent):not(.ipsModerated) {
	background: #fafafa;
}

/* article author */
.ipsComment_author {
	background-color: #f2f6f8;
}

/* article status bar */
.ipsComment_meta:not(.ipsBox_transparent):not(.ipsModerated) {
	/* something */
}

Or, if you don't like hexadecimal color values, like this:

/* article main box */
.ipsComment:not(.ipsBox_transparent):not(.ipsModerated) {
	background: rgb(98%, 98%, 98%);
}

/* article author */
.ipsComment_author {
	background-color: rgb(95%, 96%, 97%);
}

....where you have three values per color, in the order of RED, GREEN, BLUE.

The higher the brighter, so the values in my example are very near to full white. These are the actual colors from the old forum, but they no longer make any sense. If applied to the default new forum style, there will be even less contrast than before, and the same happens when used with my old "nbzKontrast" style.

The above style definitions will work when dropped into a new style file, which you can create yourself with the Stylish addon. If you want to play around with them in combination with any of my stuff, they need to be adapted a bit.

To work with my old "nbzKontrast", the color for the author box needs to be written like this:

background-color: rgb(95%, 96%, 97%) !important;

And in the new blue style (this thread's topic), I made quite a last-minute mess of the box style definitions, and the post background needs to be adressed like this:

.ipsBox:not(.ipsBox_transparent):not(.ipsModerated):not(.ipsWidget):not(.ipsWidget_vertical) {
	background: rgb(98%, 98%, 98%);
}

But if you want a light background, the new style isn't for you anyway, as most of the text is white...

Edited December 14, 2015 by n.b.z.
Quoted question for context

[Mad Rocket Scientist]

1 hour ago, n.b.z. said:

The post backgrounds can be styled like this:

Or, if you don't like hexadecimal color values, like this:

....where you have three values per color, in the order of RED, GREEN, BLUE.

The higher the brighter, so the values in my example are very near to full white. These are the actual colors from the old forum, but they no longer make any sense. If applied to the default new forum style, there will be even less contrast than before, and the same happens when used with my old "nbzKontrast" style.

The above style definitions will work when dropped into a new style file, which you can create yourself with the Stylish addon. If you want to play around with them in combination with any of my stuff, they need to be adapted a bit.

To work with my old "nbzKontrast", the color for the author box needs to be written like this:

And in the new blue style (this thread's topic), I made quite a last-minute mess of the box style definitions, and the post background needs to be adressed like this:

But if you want a light background, the new style isn't for you anyway, as most of the text is white...

Thanks!  I wasn't thinking of modifying your script, but of writing my own.  Thanks!

[Mad Rocket Scientist]

Thanks for the help!  The forums now look like this for me:

Spoiler

 

 

[swjr-swis]

I already have a dark on grey style tuned to my preferences, but this is a nice alternative.

Personally I prefer the brightness of the text a bit lower; I can tweak that easily enough.

Thanks n.b.z.

[Endersmens]

1 hour ago, Mad Rocket Scientist said:

Thanks for the help!  The forums now look like this for me:

  Reveal hidden contents

 

 

AH! MY EYES! IT BURNS!

 

No seriously, I got used to staring at this nice dark blue (very spacey theme too!) and upon opening your spoiler my pupils contracted and my eyes screamed  

[problemecium]

I should have checked this thread earlier - I'm in the OP! xDDD I feel so famous now. I shall download this as thanks

[n.b.z.]

1 hour ago, parameciumkid said:

I'm in the OP!

Your avatar was well-suited to demonstrate transparent images, and how shadows work with them.

For demo purposes, it would have been even cooler to show Red Iron Crown's animated avatar, which also throws a proper shadow, but I would have needed another image or turn the whole big thing into an animated GIF.

I plan to update this at some point, because of the various weird/unfinished things in the profile and search, but likely won't have the time before Christmas. As it is, the whole thing already basically consists of 1200 lines of high-grade, relentlessly militant procrastination...

[Stone Blue]

51 minutes ago, n.b.z. said:

As it is, the whole thing already basically consists of 1200 lines of high-grade, relentlessly militant procrastination...

 

And I for one CERTAINLY appreciate your work VERY much!

I was able to go even darker... (The more black on my screen the better! )

 

 

Edited December 16, 2015 by Stone Blue

[archarius]

@n.b.z.

Is there a chance for you to update the style?

[Stone Blue]

Wow... Thats weird... I JUST uploaded my dark version of n.b.z.'s theme to userstyles.org, like, only an hour or two ago...

It hasnt added the autoscreenshot yet, but its exactly the one shown in my post up above...

Edited May 18, 2016 by Stone Blue

[Guest]

You know, It's really easy to add themes in IPS.  You (as in admins) could just create a new theme, and users can choose which theme to use.

[n.b.z.]

9 hours ago, archarius said:

Is there a chance for you to update the style?

Unfortunately, I have to say no. I wish this weren't the case, but I'm in a less-than-desirable situation and need to take care of that first. (Depression furiously sucks donkey butt.)

That whole stylesheet was produced in a rather unhealthy fashion anyways -- a 48+ hour, non-stop-no-sleep, violent burst of militant procrastination, fueled by several orange tanks full of coffee whilst not eating anything -- and it seems that I currently could only either "work" in that same way (which I really shouldn't), or not get anything done at all. (ADHD enthusiastically sucks some other donkey bits.)

That said, I still encourage anyone who can "speak" a little CSS to improve, extend, modify, and then share that style at will. It's public domain anyways, which means "you can copy, modify, distribute [...] the work, even for commercial purposes, all without asking permission."

Edited May 18, 2016 by n.b.z.
sum wrod sbelled vrong

[archarius]

@n.b.z.

I usually try and fix broken styles but this looks a bit too much for me.

I've been using this style since December and it's still more or less usable, my eyes thank you for that.

Hope you'll get better.

 

@Stone Blue

Yeah, I've noticed your style there and that's why I came back to this thread, because it looked like the same style with changed colours and missing bits.

 

[WinkAllKerb'']

sound like you give a hand with style, "life is strange", might be some reasons for such a hand as well, anyway all hand are appreciated i guess

Edited May 18, 2016 by WinkAllKerb''