Made a "user style" to increase forum contrast and available space

[n.b.z.]

This isn't a complaint about the forum, but rather an attempt at the usual kerbal solution for anything that could possibly be improved: modding it to hell immediately.

I cobbled together some CSS that only does a few basic things:

• increasing contrast for some elements; this helps with lists-of-threads, and boundaries between posts
• reducing margins around posts / articles
• widening the page (should in theory make better use of space)
• adds scrolling for CODE blocks

This is a temporary quick-fix that I expect to be obsoleted by improvements to the real deal rather soon. Therefore, it doesn't even attempt to be something worthy of being called a "design" or a "theme".

 

Please DON'T complain to the forum admins if THEIR forum doesn't work with MY stuff!

Anyone desperate enough to try should find it easy to dump this into a (desktop) browser of choice - and delete it just as quickly - but it requires the "Stylish" addon which is provided with the link.

https://userstyles.org/styles/121339/nbzkontrast


EDIT 1: updated with input and help from Trann and curtquarquesso.

Edited December 2, 2015 by n.b.z.

[curtquarquesso]

Oh my goodness. This is a step in the right direction. The contrast between individual topics needs to be lessened though. Maybe light blue and light-light-light blue. 

[Trann]

The width fix alone...  thanks.  I may yet fiddle

Edited December 1, 2015 by Trann

[FleshJeb]

MUCH better. Thank you.

[Trann]

For the sake of sharing...

 

Font choice:

    DIV {
        font-family: Verdana;
    }

Separate content from author:

    .ipsComment_author {
        background-color: #f2f6f8;
    }

Separate content from status:

    DIV.ipsComment_meta.ipsType_light {
        background-color: #f3f3f3;
        position: relative;
        border-left: 15px ;
    }

Very easy on the eyes so far.

Edited December 1, 2015 by Trann

[n.b.z.]

Thank you guys.

curtquarquesso: I have now included the suggestion about contrasting topics. Now looks like before, but less overdone.

Trann, I stole your code, but of course not without making it worse, and leaving stuff out.
Specifically, after messing with fonts for a good while, I personally found the default one to be the best option.

I also made thread lists a bit more compact, and gave the line height some whack.

Edited December 2, 2015 by n.b.z.

[Starwhip]

Oh my! This is wonderful!
The excessive amount of vertical space was my largest qualm with the new layout, and this whacks that nail right on the head.

[steve_v]

My eyeballs thank you.
Again the community steps up to fix the obvious.

[Jarin]

Any reason you have that nice blue background gradiating away to the old glaring white after half a dozen posts? Otherwise, this is looking really good, thanks.

[Trann]

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

EDIT 1: updated with input and help from Trann and curtquarquesso.

I was installing Stylish at home and pasted in the bits from the office when I realized I was seeing double: you already had it in there   Thanks.

 

Jarin: you just need to change the gradients from #FFFFFF to something else (or remove those lines altogether so there is no background gradient).

[n.b.z.]

51 minutes ago, Jarin said:

Any reason you have that nice blue background gradiating away to the old glaring white after half a dozen posts?

Yup, this prevents all sorts of elements at the bottom of the page from showing up as white boxes, in the most lazy way I could think of.

Oh, and, yes, thank you Trann... for full-page blue, if you edit the thing, just leave the top line intact, which is:

background: #3c6994; /* Old browsers */

in the section body {....}

Edited December 2, 2015 by n.b.z.

[mcirish3]

Oh man can I please give you more rep thank you ever so much.  Huge improvement!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[Kerbart]

Is there a way to set the margins? Having edge-to-edge text on a 21" monitor is starting to get old

Oh wait, I found it:

	.ipsLayout_container {
	/*	max-width: 98%;  */
	max-width: 1200px;
	}

 

Edited December 2, 2015 by Kerbart
Foundit

[Starwhip]

I've been doing a bit of personal tweaking, and this is still great.
Personally, I'd change this part of your post...

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

Please DON'T complain to the forum admins if THEIR forum doesn't work with MY stuff!

To "Please DON'T complain to the forum admins if MY stuff doesn't work with THEIR forum!"
Not that the message intention isn't clear, just that it could come off as impolite.

[KrazyKrl]

I'm terrible at this, lol. No prior experience with CSS or userscripts, so I made this up in the last hour or so.

This will hide elements under your username until you mouseover it. (Saves some page space for 1-line or so posts.)

I bet there is an easier, and more efficient, way of doing it.

/* Hide portions of the Author Info until mouseover. */
/* Uncomment some of the next 7 lines to hide portions of the Author's information.*/
/*.ipsComment_author .cAuthorPane_info li:nth-child(1){display:none;} /* Hides Member Title  */
/*.ipsComment_author .cAuthorPane_info li:nth-child(2){display:none;} /* Hides User Reputation Pips */
/*.ipsComment_author .cAuthorPane_info li:nth-child(3){display:none;} /* Hides Avatar */
/*.ipsComment_author .cAuthorPane_info li:nth-child(4){display:none;} /* Hides Member Ranking */
/*.ipsComment_author .cAuthorPane_info li:nth-child(5){display:none;} /* Hides Total Reputation */
/*.ipsComment_author .cAuthorPane_info li:nth-child(6){display:none;} /* Hides Post Count */
/*.ipsComment_author .cAuthorPane_info li:nth-child(7){display:none;} /* Hides Location Info */
.ipsComment_author:hover .cAuthorPane_info li:nth-child(-n+7) {display:list-item;} /* Required: Reshow All Elements on mouseover. */

 

 

And I slapped this together to hide the "Multiquote" "Quote" and "Like This" bar at the bottom of every post until you mouseover a post.

.cPost_contentWrap .ipsLikeRep, .ipsComment_controls {display:none;}
.cPost_contentWrap:hover .ipsLikeRep, .cPost_contentWrap:hover .ipsComment_controls {display:inline;}

 

Edited December 2, 2015 by KrazyKrl

[n.b.z.]

5 hours ago, Starwhip said:

, just that it could come off as impolite.

Ooops, that's certainly not my intention.

I'm just seeing the potential of people adding this to their browser, then forgetting about it, and later blaming the admins if my CSS breaks the forum for them because some changes were made.

For this reason, I will leave that statement up there in its full militant tone.

[Umlüx]

yes! thank you!!

i will tweak it a little to fit my preferences, but its MUCH better than the original!

[NecroBones]

This is really great. Thanks!

EDIT: I've been using this all day today, and it's perfect!

 

 

Edited December 2, 2015 by NecroBones

[Starwhip]

/*green reputation pips*/
.ipsPip {
    font-size: 10px;
    color: #5f7a47;
    display: inline-block;
}

More or less self-explanatory.  Other colors you might want to try: 1F9100, 008E3B, 2AC400

EDIT: Or, for bigger circles...

/*green reputation pips*/
.ipsPip {
    font-size: 15px;
    color: #2A9700;
    display: inline-block;
}

 

Edited December 2, 2015 by Starwhip

[blackrack]

Thanks a lot, the bad space management was my biggest gripe with this new forum.

[Trann]

Nearing perfection for me...

    /* Author muting */

    UL.cAuthorPane_info.ipsList_reset{
        color: #acacac;
    }

...and I'm a max-width: 100%; kind of guy.

[anarkhon]

Here is my style. (edited n.b.z.theme)

 

Edited December 2, 2015 by anarkhon

[HafCoJoe]

Do you plan on adding the ability to recolor the headers?  I've gotten some fairly good results with recoloring to my avatar's faded red. - I'm keeping your settings for now though with the exception of removing /* separate content from author */ as to make white outlines around avatars not present. Great work done here.

Edited December 2, 2015 by Avera9eJoe

[n.b.z.]

1 hour ago, Avera9eJoe said:

Do you plan on adding the ability to recolor the headers?

Not really. This whole thing was really meant as a quick fix for the most complained-about issues, and as far as I'm concerned, this is now good enough to be usable.

However, everyone shall be encouraged to keep mixing, messing, adding, and re-mixing that stuff as desired. I gave it a silly name¹ with my initials in it, but it's Public Domain and belongs to absolutely everyone. If someone feels like putting more styles up on userstyles.org, feel free to use as much or as little of my stuff as you want.


¹ - The word "Kontrast" is both a kerbalized version of "contrast", and that same word spelled correctly in german, which is my native language.

[HafCoJoe]

Hmm... I'll look around for a IPS theme that recolors the headers then. If you already know of one that I can steal code from and merge into yours please share!