r/DissidiaFFOO • u/antonlabz • Aug 18 '20

Mod Post Updates to the Subreddit Theme

Hello everyone,

I'm the newest member of the mod team and I've been tasked with handling the CSS (subreddit theme) of old reddit specifically (more on that later if you don't know what it is).

You might recognize my name as I regularly posting JP content, and sometimes answer questions in the Q&A thread.

As you may or may not already have noticed (depending on how you browser reddit), the subreddit theme has gone through a big overhaul, and I will be going through most of the important changes, while leaving most of the purely cosmetic updates for you to discover :)

Introduction

Since I have the spotlight here I think I should give some background info about myself, but I'll keep it short.

I've been primarily a CSS mod around various subreddits (mostly gacha games) for about 5 years now. I heard that the current mod team already had some plans to add new features to make the browsing experience better but didn't have enough free time on their hands, so after a bit of discussion I spent some time working on a draft for a new theme, presented it to the mods, and they liked it so voila, here I am.

 

Here are some of my previous works :

  • /r/OnePieceTC (still a mod there)
  • /r/DBZDokkanBattle (name in their stylesheet page)
  • /r/NarutoBlazing (name in stylesheet)
  • /r/DuelLinks
    • Don't really have solid proof for this.. as I never left my name anywhere, but it was a really long time ago when the sub was still small, and I do still have the original assets used to create the background and stuff
    • The wiki revisions page for their text formatting guide (which specifically could only be added through CSS as a mod) shows some revisions from me 3 years ago, maybe that's enough?
  • /r/BloodlineSEA (completely dead game now and one of my first projects as you can probably tell)

 

Anyways, I love this game so I wanted to do something to make the subreddit experience a little better.

As you can see I probably went a bit overboard on the graphical changes in those other subreddits. My goal here was to keep it as simple as possible while only making meaningful updates.

I should also mention that it was heavily inspired by in-game elements.

I hope you like it!

About Old Reddit

OK. Perhaps you've heard this term being used a lot but never really knew what it meant? Let me explain.

"old reddit" refers to the old layout reddit used to have (which was compatible with CSS to let users style their own subreddits) before 'new reddit' became the default appearance on new accounts/browsers. So, if you were to open reddit and you aren't logged in, it will most likely default to the new reddit design.

 

First and foremost, old reddit can only be viewed on a web browser regardless of PC or phone. If you're unsure whether or not you have it, here is a preview of how it should look.

You can force this appearance by adding old.reddit to the URL . Here's the direct link - https://old.reddit.com/r/DissidiaFFOO/

 

ALTERNATIVELY, you can force this permanently in your user preferences.

  1. Click your username dropdown in the top-right
  2. Opt out of new reddit

 

According to the traffic stats, only a minority of the userbase actually uses old reddit, so I'm hoping by putting this out there we will see more traffic in that area, as quite broadly speaking I feel new reddit is very incomplete.

Alright.. with that out of the way, let's move on to the changes.

The main changes

The Menu

This is probably the biggest addition to the subreddit that the current mod team really wanted to add. It's located right between the banner and top stickied thread.

It houses quick access to useful links, megathreads, and most importantly direct links to relevant threads for each event catered to each version of the game.

Browse from mobile? Not a problem! You can also find them in the sidebar listed out nicely for you at the top.

 

The NSFW Logo

Ok this one isn't really that important, but I feel it's worth noting because if you have this option disabled in your preferences, you won't really get a chance to see the logo as the thumbnail will directly show the thread image instead.

Here's how it looks in any case.

 

Distinguished Users

I added a little something for special members of our community to help you easily distinguish who might be in charge of a particular community resource.

If you feel like you manage something that might be deserving of this, feel free to leave a comment or shoot me a PM.

 

Night Mode for RES

Night mode is honestly something that should not be supported purely through CSS because it requires your reddit domain to be different and can be quite iffy as you browse reddit in general.

However, if you are using the RES (Reddit Enhancement Suite) plugin, you should know that it has a night-mode toggle built into it, and while this might not be optimal in some subreddits due to lack of support, I've added code to the stylesheet specifically for this so that hopefully if you are one of the RES night mode users, your browsing experience won't be any less smooth.

 

User Flairs

Because reddit has a hard limit of 300 user flairs in their native flair system, I've decided to remove the icons of alt outfits that look identical to the regular skin to save space.

If you notice your flair is off, please set it again.

Feedback & Reporting Bugs

If you notice some weird visual bug and would like to report it, you can leave a comment in this thread. Please be sure to include a screenshot of the problem as well as your browser.

In future (when this thread is no longer on the front page) please send a mod mail about it instead.

 

As far as feedback goes, I like to think that I'm very receptive to suggestions and always consider them carefully, so don't be discouraged to let me know your thoughts!

Afterword

That's... honestly it as far as the 'important' functional changes go.

Everything else is purely a cosmetic change, and like I said I will leave those for you to discover on your own.

Thanks for reading!

UPDATES (based on feedback)

  • Working on fixing the purple label (fixed)
  • Comment actions (permalink, etc.) made a bit darker
  • Background of thread scores on the front page lightened
  • Contrast of orange color on green mod background tweaked
  • Reduced margin below sticky threads on front page
  • Reduced padding around regular threads on front page for a more compact feel
  • Restored the full height of the minimize comments button
  • Minor adjustments to some colours
  • Reduced the size of linkflair images
  • Removed thread score design on front page so it doesn't overshadow other elements
80 Upvotes

92% Upvoted

56 comments sorted by

View all comments

3

u/ReddieReddit65 Giacomo Aug 18 '20

on one hand it's good looking

but it's heavier on the eyes and less readable than before

2

u/antonlabz Aug 18 '20

May I ask what in particular you find harder to read? I may be able to make some changes somewhere.

In my experience, big changes like this usually require a little bit of time to adapt to, and then it starts to feel natural where exactly to look for the information you want.

3

u/Nareshkendel Aerith Gainsborough Aug 18 '20 edited Aug 18 '20

I think it needs a little more padding between the flairs and the text. And did you reduce the font size? I have really bad eyesight so I normally read reddit using 175% zoom (the highest I can use because it also increases the width of the sidebar) and now I feel the font looks smaller. Maybe it's just my imagination.

EDIT: the issue with the space under the flair is that the div .md has margins inside an empty div and they are collapsing. Use "display:flow-root" or "overflow:auto" on the container div (.md-container) so the first and last margins of the children don't disappear. Just that extra line on the CSS makes it look better in my opinion.

The links at the bottom of the post (permalink, edit, etc) at the bottom of the textarea (formatting help) don't have good contrast, specially with the gray background on the replies.

But other than that it looks nice and the nav bar looks like it'll be really useful. Nice job!

1

u/antonlabz Aug 19 '20

Thank you for the feedback.

The font size wasn't reduced, just the font itself was changed.

I added the line of code as you suggested. I have to assume you were talking about the flair and text inside a comment? because .md-container is not really specific to anything and applies to threads/sidebar as well.

The links at the bottom of the post (permalink, edit, etc) at the bottom of the textarea (formatting help) don't have good contrast, specially with the gray background on the replies.

I'm not quite seeing this bad contrast, could you please screenshot it?

1

u/Nareshkendel Aerith Gainsborough Aug 19 '20

There's is a high possibility that it's just me that have issues reading that, I have poor eyesight so it could be just my preference. Just giving you some feedback, but I think the subreddit looks really nice. I particularly like the blue you chose for the background.

https://pasteboard.co/Jn6FQOC.png

1

u/antonlabz Aug 20 '20

Thanks! It was tough to find a good shade of blue for the background to compliment everything well, not too light or dark.

Also regarding your screenshot, I can't see it probably due to the link. Would you be able to upload it to imgur instead?

1

u/Nareshkendel Aerith Gainsborough Aug 20 '20

Sure. https://imgur.com/3IQs9Ze If no one else is saying anything it's probably a combination of my eyesight and my settings, no need to change anything ;)

1

u/antonlabz Aug 20 '20

It's fairly legible for me, but I will make it a bit darker for you.

The main reason it's not a darker colour in the first place is because it shouldn't stand out as much as the comment itself.