MLPForums Plus - A Site Mod For Quality Of Life Improvements (v1.5.1)

[Rikifive 24,125]

 

UP-TO-DATE VERSIONS

JS - v1.5.1 (15.10.2023)
CSS🌙LUNA - v1.5.1 (15.10.2023)
CSS☀CELESTIA - v1.5.1 (15.10.2023)

To ensure compatibility, when updating, make sure both* your scripts are up to date.
*both refers to JS and one of CSS of your choice

 

// Introduction

Tired of Flashbangs MLP Forums throw at you? 
Tired of thinking of at least one difference between looking at MLPF and looking at the Sun? 
Tired of getting lost in threads and not knowing the way out? 

 

Well look no further! The solution is here! ... Maybe.. I don't know. 

 

Seriously though, I wrote a bunch of code to modify MLP Forums' visuals as well as introduce various Quality of Life improvements.

So let's see what we got here, shall we? 

 

 

// Features

 

1. PONIFIED THEMES

Let's start with the basics, CELESTIA and LUNA themes!

If you prefer light themes: ☀Celestia is for you!

Spoiler

If you prefer dark themes: 🌙Luna is for you!

Spoiler

 

 

2. STICKY NAVBAR

Wanting to check something in the profile while being in the middle of the thread / status update feed? Having to scroll all the way up to access account menu? No more running all over the place, the navigation bar is always where it is needed, at the top of the page. It's following you like a loyal doggo.

Not only that, but it's also filled with extra features to make everything nicer.

- Navigation buttons taking you to different places
- Rank Level and progress in form of an EXP Bar

 NOTE
The "Favorites" menu can be customized at the beginning of the JS code.
Its configuration maybe isn't too user friendly at the moment,
but I plan to make an easy to use on-site configuration in the future.

 

 

3. POST LIST

A pretty handy overview of posts displayed on the page.

- Lists all posts on the page by authors
- Highlights the currently viewed post
- Click item on the list to "jump" to the post
- If there is more than one page, displays the current page and allows to switch them there as well

 NOTE
At the moment there is a limited support for smaller displays
> If there won't be enough space horizontally, the list will shrink itself to profile pictures only and will snap to the right edge of the screen.
> There's no support for lack of vertical space however. List items may end up being outside the screen.

 

 

4. NOTIFICATIONS FROM UNREAD FOLLOWED FORUMS

If you have your favorite forum areas, where you like to read every single post, this might interest you.

Sure one can just normally follow the forums and threads, but this option is a little bit different.

I do follow Canterlot and opted in to receive notifications whenever new threads are created. Although, I did not opt in to receive notifications from every single post created in these, simply because that could flood my notifications, but I do want to know, that something new was posted there regardless.

So that's my solution

In the configuration, one can now specify which forums to follow by name, like this:

const FOLLOWED_FORUMS = ["MLP:FiM Canon Discussion", "Visual Fan Art", "Throne Room"];

And this, for example, will follow:

- "MLP:FiM Canon Discussion" forum (and therefore will keep notifying until all subforums are read as well)

- "Visual Fan Art" subforum in particular

- and "Throne Room" forum as a whole

Now, if any of your selected forums/subforums will have something you haven't read yet (basically be in bold on the homepage), these will be dumped into a new dedicated notification box of some sort:

Clicking entries will take you to these forums.

The only way to "remove" such notification is to go there and read all the unread content, or basically "mark forums as read". Otherwise it will keep popping out as long as there's unread content in the forums you follow.

 NOTE
Due to technical limitations, this button appears and works ONLY ON THE HOME PAGE. If for mysterious reason it appears somewhere else too, it probably won't catch anything, because it needs the forum listing from the home page to work.

 

 

5. VISUAL MODIFICATIONS & PONIFICATIONS

Whenever a new notification pops out, it will be delivered by the best mail mare in Equestria!

 

- Some other minor animated parts and the like here and there...

- User Ranks in topics are clickable just like they used to be years ago!

 There's also Celestia or Luna (*depending on theme) waiting for you somewhere, can you find them? 

 

 

 

6. REACTION TWEAKS

BEFORE

- Impossible to tell if you have reacted to content in Status Updates or not, unless you picked something else than the brohoof

- Remove Reaction button is really tricky to reach, as you have to slide all the way without "falling off the track", which would wrap the list back

- Also have you noticed? For some reason you can remove reaction even if you didn't give any

 

AFTER

- Green round outline on content you have reacted to

- Remove Reaction button moved to easier-to-reach spot and it also looks better that way (IMO)

- Fixes a bug, showing Remove Reaction button only in content you reacted to

 

 

7. SHOW FULL STATUSES

The recent forum software update caused all statuses to be "truncated" by default, requiring you to click "read more" to view them in full glory.

Instead of nicely scrolling through statuses, now you have to snipe these "read more" buttons and OH BOY is it bugged!

Anyway,
I asked for opinions and nobody seemed to like it, so here you have it, with this epic plugin statuses show fully as they used to.

 

 

// Installation & Requirements

My modifications are made via JavaScript and CSS code, so in order to install this, a way to inject such code is required for it to work.

There are various browser extensions, that allow to do such things, so I believe a search for these would yield plenty of results.

If I would be asked what I use:
Personally I use Chrome and an extension called "User JavaScript and CSS", an extension with a straightforward name, that perfectly describes what it does.
You can find it in the Chrome Web Store:
https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld
 

My modifications were written in its editor and are confirmed to work there, but should be fine in any other extension of that type I believe.

The following instructions will be applying to the extension mentioned above, but the process should be pretty much the same in any other extension.

 

[STEP 1] Install the extension

[STEP 2] Go to its settings (should appear in the upper right corner)

[STEP 3] Add a new site you want to modify

[STEP 4] Apply my modification in these simple 5 steps (You can find the scripts below)

[STEP 5] Save and done. It's plug&play, should instantly take effect.

♦ ←─────~◊~─────→ ♦

For FIREFOX users, an extension called "Man in the Middle" appears to be a compatible option.

[STEP 1] Install the browser extension.

[STEP 2] Once in the extension settings, add a new "Content Script"

1. Give it any Name you want
2. Paste JS code in the "Code (Required)" field
3. Leave "Script type" as "JavaScript"
4. In the "URL filters (Required)" field type MLP Forums' address, so that it triggers only on MLPF's domain
5. Change "DOM event" to "Loading"

[STEP 3] Repeat for CSS, add a new "Content Script"

1. Give it any Name you want
2. Paste CSS code in the "Code (Required)" field
3. Change "Script type" to "CSS"
4. "URL filters (Required)" same as previously
5. Change "DOM event" to "Loading" as well

[STEP 4] That's it, should work now. You can toggle each script individually by poking "Enabled" / "Disabled" slider, so you can add an another script for the other CSS and toggle themes, keeping only one enabled at a time.

 

// Scripts

 *** INSTALL ONLY ONE CSS CODE ***
Choose whichever theme you prefer and copy&paste corresponding CSS code. Using both at once wouldn't be the end of the world, one will simply cover the other. If the extension you use allows you to toggle CSS scripts ON/OFF individually, you can paste different CSS individually and toggle them to use one at a time.

 

JAVASCRIPT CODE
MLPForums Plus v1.5.1 (JS).txt

 

CSS CODE (🌙 LUNA THEME)
MLPForums Plus v1.5.1 (CSS LUNA).txt

 

CSS CODE (☀ CELESTIA THEME)
MLPForums Plus v1.5.1 (CSS CELESTIA).txt

 

 

// Version History

Spoiler

// VERSION HISTORY

DD-MM-YYYY JS VERSION ● CSS VERSION 

UPDATE SCOPE - Update Title

*changelog*

 

* * * * *

// VERSION HISTORY

15-10-2023 JS VERSION 1.5.1 ● CSS VERSION 1.5.1 

JS AND CSS UPDATE - Compatibility Patches

The forums had some changes in functionality, which affected some of the mod's features. There's also a new forum feature "Live Messenger", that required to be styled.

• patched Post List to reload entries when switching the page in topics
• fixed User NavBar colliding with announcements appearing on top of the page
• added stylization for Live Messenger plugin

 

20-03-2023 JS VERSION 1.5 ● CSS VERSION 1.5 

JS AND CSS UPDATE - Luna and Celestia Themes + Rank Level

- Theme overhaul, dark mode became Luna Theme and light mode became Celestia Theme

- Significant visual changes all over the place

- [NAVBAR] Removed "Forum Guidelines" button

- [NAVBAR] Added Rank Level and progress towards next rank in form of an EXP bar

- Reverts effect of the recent forum software upgrade, whereby status updates were truncated by default and required to click "read more" ... Well, "no more" of that thing, it's back to what it used to be prior to the forum upgrade, showing statuses in their full glory

- Added "Enhanced with MLPForums Plus plugin" line linking to plugin topic to footer.

- Toggleable console logs for debugging

- [BUGFIX] Fixed a bug, whereby "Unread Forums" function didn't cooperate with subforums. It wasn't catching them because the subforums on the homepage have these pips before them which affects their titles. I had that patched, but *this some unicode poop or sth* doesn't want to stay here in the forums' code block, so I had to take a different approach

 

09-04-2022 JS VERSION 1.4.1 ● CSS VERSION 1.4.1 

JS AND CSS UPDATE - RP Characters Button and Followed Forums Test

- added a new button to the navigation bar, that takes users to the list of their roleplay characters

- added a test button in the followed forums menu to verify if specified followed forums are correctly configured

- react-button visuals (green outline) to reacted content in Status Updates have been added to topics as well, according to user feedback

 

10-02-2022 JS VERSION 1.4.0 ● CSS VERSION 1.3.1 

JS UPDATE - Notifications From Unread Followed Forums

- added a new button in the navigation bar, that notifies about unread content in the selected followed forums

- minor polishing to the JS code

 

03-01-2022 JS VERSION 1.2 ● CSS VERSION 1.3.1 

ADDED SECOND VERSION OF CSS CODE - Light Mode Now Available

If you are interested in my additions to the site's functionality, but are not a fan of the DARK MODE, now you can choose to install my mod and keep the default LIGHT MODE.

- users can now choose the theme they prefer

*** CSS scripts are identical. The only difference is the color styling *** Paste only one version ***

 

01-01-2022 JS VERSION 1.2 ● CSS VERSION 1.3.1 

CSS UPDATE - Reaction Display in Status Updates

- added visuals marking content you have reacted to in Status Updates

- added a total number of reactions next to reaction button in Status Updates

- moved un-react button

- fixed a forum software bug, whereby un-react button appeared even on contents users have not reacted to in Status Updates

 

01-01-2022 JS VERSION 1.2 ● CSS VERSION 1.3 

CSS UPDATE - Notification Popup Ponification

- added visual ponification to notification popup

- added some visual modifications to the "Messages" box in the navbar

- gave this modification an actual name "MLPForums Plus"

 

14-10-2021 JS VERSION 1.2 ● CSS VERSION 1.2 

JAVASCRIPT AND CSS UPDATE - Clickable Ranks

- added clickable ranks to view list of them and their post requirements

- dark theme fixes/adjustments for Friends list

 

05-10-2021 JS VERSION 1.1.1 ● CSS VERSION 1.1.1 

JAVASCRIPT AND CSS HOTFIX - Post List And Code Block Bugfixes

- fixed an oversight, whereby the first entry in the Post List was unclickable while in Site Questions.

- fixed an oversight, whereby the cursor color in the Code Editor was black, thus hardly visible on dark background.

 

05-10-2021 JS VERSION 1.1 ● CSS VERSION 1.1 

JAVASCRIPT AND CSS UPDATE - Site Questions And Code Block Support

- added support for Q&A system in Site Questions

- added Dark Theme Support for Code Blocks

 

03-10-2021 JS VERSION 1.0 ● CSS VERSION 1.0 

INITIAL RELEASE

 

* * * * *

 

 

 

// Reporting Bugs

I saw some users report issues with the dark themes they use, forgetting MLPF doesn't have a native dark theme, so let me say this:

If you'll be using these mods, please remember about that fact. If you'll ever encounter an issue with how the site is displayed (like wonky colors, unreadable font (black font on black bg etc.)), please TURN OFF the mod and try again before reporting issues to the staff. Chances are, that some of my changes might be incompatible with the site itself, especially when the forums will be upgraded to newer versions. I may be having to adjust things as the forum software develops.

You can easily switch the mod OFF and ON in the handy menu in the upper right corner, if you'd happen to use the extension I use at least:

(Yes, you can install both if you wish so. Add one rule with JS&CSS (LIGHT) and another with JS&CSS (DARK) to have it displayed like this)

 

Should an issue with the mod arise, I guess it's best to report it here and tag me and only me alright.  Blame me, don't bother other staffers when they have nothing to do with it, okay?  Don't tell anyone you're using these hacks 

 

Troubles? Questions? Ask away! 

Edited October 15, 2023 by Rikifive
1.5.1 update

[Pandora 38,015]

That’s really cool!

well done riki and thank you! 

[Astralshy 26,418]

Amazing!

Thank you for all of your hard work :>

[cuteycindyhoney 13,306]

This is way over my head!

[Rikifive 24,125]

6 hours ago, Starforce said:

Oh wow, it works! I am going to use this forever! 

I was thinking this might interest you. 

I hope it will serve you well! 

5 hours ago, Pandora said:

That’s really cool!

well done riki and thank you! 

Thank you, I appreciate that! 

5 hours ago, Astral Soul said:

Amazing!

Thank you for all of your hard work :>

That couldn't be achieved without the aid of tea. 

5 hours ago, cuteycindyhoney said:

This is way over my head!

mindblowing I know  jk

[Rikifive 24,125]

// UPDATE

JS - v1.0 ==> v1.1
CSS - v1.0 ==> v1.1

 

 

// What's New

 

1

A new Question-And-Answer system has been implemented in Site Questions, which wasn't supported by the Post List.

There was a problem, whereby the opening post wasn't displayed in the post list, but only the further replies. The reason was, that the opening post is displayed a bit differently there, and therefore wasn't caught by the Post List. The issue has been resolved and all posts, including the opening question should be displayed properly now.

In addition to that, the Post List also marks the solution on the list:

 

2

Added Dark Theme Support for Code Blocks.

Code Block Previously:

Code Block Updated:

Code Editor Previously:

Code Editor Updated:

 

BUG FIXES

- I accidentally left a duplicate line for marking the entries in the Post List as moderated; the unnecessary line of code has been removed.

 

 

// How To Update

I updated the codes in the main post, please replace the old codes (both JS and CSS) with the new ones entirely, as if you'd be installing them for the first time.

YOU CAN KEEP THE FAVORITES CONFIGURATION - If you have customized your favorite tab in the navbar, save your settings somewhere aside, update the code, and then copy your configuration back to the new version. Or you can simply update only the code past the configuration, choose whatever is less confusing for you.  

 

Remember to report issues here if you'll ever bump into something odd,
THANK YOU! 

[Rikifive 24,125]

@Starforce Was it like this prior to the update as well?

Unless I'm overlooking something, it must be because the user who posted this had to change the font color to black, instead of leaving it default (called "automatic" in the color panel). Sadly this is what happens when there are both, light and dark themes in play on boards like this. If you'll copy something from another post, it will also copy background color and font color, so members using default light theme may be dropping flashbangs, whereas members using dark themes will be dropping dark boxes.

I changed the default font color to be bright, so here, you can normally read what I write, unless I'd change the font color to dark in the text editor. The view is different for those with bright themes - so for example, if they'll aim to make their font a lil bit brighter/lighter on white background, it will have a very different effect for those with the dark theme. If one changes color with the editor, the selected color isn't overwritten by my dark theme.

Not much I can do about this I'm afraid, people just shouldn't change font color to black if it's already black by default, heh.

I recall you were using a dedicated extension for forcing sites to be dark - did something like this happen there as well?

[Rikifive 24,125]

@Starforce Hmm I checked the post you've mentioned, and it does have color overwrites all over the place

That suggests, that the entire post was probably copied from somewhere else. When copying stuff like this, it's best to paste it without formatting (ctrl+shift+V) or turn it into plain text as proposed by the text editor at the bottom. It's the same as when there are dark blocks with bright font when copying messages from Discord (chatting software) - it actually copies its background and font color too, making it appear a bit odd on forum's default theme, for example.

... The font itself in that post is set to be dark, so this is expected behavior in my implementation of the dark theme. It's just like if I set the font color to black (word "black" should appear black) manually now. I only inverted the default font from black to white, haven't added any fancy filters.

Hmm.. that makes me wonder what did they put in their opera browser... 

 

---

By an occasion, I've noticed few minor issues and fixed them; updated the main post.. (yeah it's super late for me, i was kinda rushing hence these overlooks)

(to give an example, I'll also just copy&paste text from the default mlpf's bright theme, so there should be white bars with dark text, on my dark theme at least)

JAVASCRIPT AND CSS HOTFIX

- fixed an oversight, whereby the first entry in the Post List was unclickable while in Site Questions.

- fixed an oversight, whereby the cursor color in the Code Editor was black, thus hardly visible on dark background.

yup:

Spoiler

 

Now I need to go to sleep.  

Edited October 5, 2021 by Rikifive

[Rikifive 24,125]

@Starforce Yeah, since Opera filters the colors automatically for all sites, I believe they added bunch of fancier code to make it more versatile and compatible with as many sites as possible. I actually wonder what's their approach for that - since the font itself is actually set to be dark, does it detect, that its color values are low and defaults it to white?

Like, look at this part with white background:

It's actually there in the formatting-

- that part itself is formatted like this and will look like this in the default mlpf theme as well (although there no one will notice, as it will be the same as that theme's environment)

So Opera adjusts both, font color and background color. I wonder to what degree it respects the poster's design choices. Will it convert different shades of dark gray to just white? Will it remove background color if it will be anything near white? That would be a reasonable design for something, that is expected to automatically work on all sites. That's pretty interesting. I wonder if just toying in the text editor would already make things visible - like, if trying to choose dark gray would default to white anyway. Inspecting the code would probably answer these questions, but I don't use Opera.

 

I didn't want to put too much science behind this, so I just modified how the forums look by default, with full respect towards how the post themselves are formatted. I believe, that if the forums would natively offer a dark theme, there would be the same issues as with mine, as it just often happens on message boards. Sometimes users make posts with such odd formatting, and it just comes from one place or another, without them realizing that.

 

The post could be fixed by highlighting the dark font and setting its color to default (Automatic) - then the theme would pick the suitable color on its own, just like you can easily read my post now.

 

 

Regarding the toolbar- no, it should be brighter, like shown in the opening post.

 

Hmm interesting - could it be, that Opera sees it as a bright color and inverts it to dark?

[Rikifive 24,125]

@Starforce Ooooh! So it actually may work the way I think it does! My toolbar does use colors close to white (top part being #fed, the line with character counter actually being white #fff but with opacity set to 0.5) - The color values are so high, that Opera inverted it into a dark background, which is expected given its purpose.

So yeah, Opera goes a step further and actively manipulates colors. Everything close to dark or close to bright is switched over. That's good for browsing content in general, but may yield inaccurate results depending on how people design their contents.

Still pretty interesting thing to know. I expected it to work that way, but now I know it actually does. 

In any case, unreadable posts in my theme isn't really a bug to fix - it's just how post themselves are formatted. It's just like people commonly post "invisible text" by setting font color to white on white background - the poster is to blame, not theme, although switching to dark theme will reveal the sneaky part.   That's a common issue on message boards, where contents can have their colors modified. If colors wouldn't be allowed to change on forums, there wouldn't be any problems, as the color would be always defaulted. Guess that's why most of the services allow to type in plain text only for maximum compatibility. No fancy fonts, no coloring - nothing to break, in any theme.

[Rikifive 24,125]

@Starforce Yup, thanks for giving it a try and notifying me about things! 

At the moment I don't have any ideas, nor plans, as to be honest, these three things are what I wanted the most, especially the sticky navigation bar at the top. Buuuuut perhaps in the future I might have bump into something I'd think would be nice to have. Time will tell I suppose.

Designing multiple themes surely could be a thing, although I'm not really sure if that would be necessary.  

...but imagine luna theme, for example  

(just a random example; i do not own the art, nor anything; the author isn't listed on the page I grabbed the "wallpaper" from, so hard to even give a credit..)

I mean, adjusting colors would totally be doable, but I was thinking, that pink will be suitable, given it's all about ponies after all.

Edited October 5, 2021 by Rikifive

[Rikifive 24,125]

// UPDATE

JS - v1.2.0
CSS - v1.2.0

 

 

// What's New

 

1

Do you remember how one could click rank images in posts to bring up a handy list of ranks and their post requirements? One of the forum software updates removed such possibility at some point.

I think it was pretty convenient, so I made these clickable again. I hooked the FAQ answer about ranks to these, so clicking them will show that FAQ in a popup, without redirecting you anywhere, so that you can quickly take a look without leaving the thread.

 

 

 

BUG FIXES

- Friends Plugin Compatibility Patch: Adjusted Input Box's background color from white to dark, so that you can now see what you're typing there.

 

- Friends Plugin Compatibility Patch: I think there's something wrong with the Friend list, because when you're on a user's profile page, the CSS styles for the tabs (Friends / Requests received / Requests sent) are applied twice for some reason. It's all fine everywhere else, it's just broken on profile pages from what I've noticed. It's not my fault and it's something you won't notice on the default MLPF's bright theme, but it was effectively overwriting my adjustment to the selected tab, so it literally was like this: "DEFAULT LIGHT -> MY DARK THEME ADJUSTMENTS -> DEFAULT LIGHT AGAIN". The selected tab was properly dark everywhere, but bright and unreadable on profile pages. I made my CSS rule a bit more specific, so that it stays on top.. of the double white color, because apparently a single white is not white enough. 

 

 

// How To Update

I updated the codes in the main post, please replace the old codes (both JS and CSS) with the new ones entirely, as if you'd be installing them for the first time.

YOU CAN KEEP THE FAVORITES CONFIGURATION - If you have customized your favorite tab in the navbar, save your settings somewhere aside, update the code, and then copy your configuration back to the new version. Or you can simply update only the code past the configuration (and the version number at the beginning for your own reference), choose whatever is less confusing for you.  

 

Remember to report issues here if you'll ever bump into something odd,
THANK YOU! 

[Sparklefan1234 169,730]

@Rikifive This sounds WAY too complicated for me to figure out. Couldn't you just add a light switch option in the navigation bar? 

Edited October 14, 2021 by Sparklefan1234

[Rikifive 24,125]

3 minutes ago, Sparklefan1234 said:

@Rikifive This sounds WAY too complicated for me to figure out. Couldn't you just add a light switch option in the navigation bar? 

Uh, what I posted here is a standalone modification, which has nothing to do with MLPF itself. It's nothing official. 

I'm not toying with the actual site's code, not sure if anyone would want me to, so I'm leaving it alone. Therefore, I can't just make stuff appear for everyone and call it "official". It's just a third party mod of mine, so to speak.  

 

In any case, if something is unclear, I'll be happy to answer any questions. c:

[Rikifive 24,125]

Thank you! Glad you're finding this stuff useful.

[Rikifive 24,125]

// UPDATE

JS - v1.2.0
CSS - v1.3.0 (NEW!)

This happened for the first time now, so let me point this out:
This time ONLY CSS code got updated, so you don't have to touch your JS code.

 

// What's New

 

1 - Notification Popup Ponification

Whenever a new notification pops out, it will be delivered by the best mail mare in Equestria!

 

 

 

2 - Visual Addition

The "Messages" box in the navbar has now an animated background

(don't worry, it's just the gif that doesn't loop seamlessly)

 

 

3 - Actual Name?

Previously this whole "mod" thing didn't have an actual name, now it has, I guess. As of this update, it is named "MLPForums Plus" Mod.

 

 

 

Remember to report issues here if you'll ever bump into something odd,
THANK YOU! 

Edited January 1, 2022 by Rikifive

[Rikifive 24,125]

@Starforce This one is kind of harder to test, because there are different types of possible popups and I'd have to create a little mess to spawn them all for testing, so I didn't do that. Therefore, I haven't tested all possible scenarios yet, and it will surely help if someone else will be keeping their eyes open as well. 

Thank you! I'm slowly thinking of adding some more visual additions in the future, but before that, I want to see how this one behaves. The image it uses is hosted here on MLPF as my attachment, and I'd like to check if this is reliable.

[Rikifive 24,125]

// UPDATE

JS - v1.2.0
CSS - v1.3.1 (NEW!)
This time ONLY CSS code got updated, so you don't have to touch your JS code.

 

// What's New

 

1 - Improved Reaction Display In Status Updates

This is actually something I left feedback on over 3 years ago:

Unfortunately, these issues still exist to this day. 

 

So... why not change few things myself? 

 

The Issue

Status Update Comment Section on default MLPF theme without "MLPForums Plus" mod installed

If you happen to browse Status Updates frequently, you may probably know, that it's hard to tell whether you have reacted to content or not there. There are no visible signs, that would tell that, unless you react with something else than the "brohoof". Therefore, sometimes you may be wondering what is new, what you have brohoofed and what not. Sure there are workarounds, like hovering over reaction counters and seeing if there's your name there, but that's inconvenient and surely not how it should be working.

There is also a minor harmless bug, whereby the un-react button appears even in contents one have not reacted to. Clicking it in such circumstances does nothing, so it's not a big deal, although it wrongly suggests, that you have reacted to this content already. Judging by code going on there, the forum software developers actually made the button not appear, or at least they tried to, because they apparently have overlooked, that another more specific CSS rule comes on top, which makes it visible again. As a result, basically the button is hidden and then set to be shown anyway.

 

 

My Solution (What's New In My Mod)

- Now there's a GREEN ROUND BORDER around the reaction button if you have given one to the content. This way you can easily see what you have reacted to and not without any unnecessary clicking and sneaking around.

- While I was there, I've noticed there is a Total Reaction Count hidden there, so I figured I'll place it there. Let me know if you'll find it unnecessary, I'll remove it.

- Un-react button has been moved to the left. I think it simply looks better there, than in upper right corner of the reaction list.

- I have fixed the bug, whereby the un-react button appeared on content one has not reacted to.

 

 

♦ ←─────~◊~─────→ ♦

DISCLAIMER

Please remember, that it is an UNOFFICIAL modification to MLPForums.
Report mod-related issues here if you'll ever bump into something odd.
THANK YOU! 

Edited January 1, 2022 by Rikifive

[Astralshy 26,418]

I installed it and it's working so far properly at my end :>

I really like this! Great work!

[Rikifive 24,125]

 // UPDATE

JS - v1.2.0
CSS - v1.3.1
ONLY LIGHT-MODE VERSION OF CSS HAS BEEN ADDED
If you already have the mod installed and you still prefer to keep the DARK MODE, no updating is required on your end.

 

// What's New

 

1 - LIGHT-MODE VERSION

Or more like a version that simply doesn't include the DARK MODE feature, for those who prefer to keep things bright.

 

- If you're interested in my custom features, but are not a fan of DARK THEMES, now you can choose to install the version, that adds only the features, without making things dark.

- There are now TWO CSS codes - one includes DARK MODE, the other doesn't. Choose whichever you prefer and paste only one.

- All the functionality remains the same, the only difference is color styling. The LIGHT-MODE version simply doesn't include modifications, that make the site dark. Therefore, the LIGHT-MODE version keeps the default MLPF's looks.

 

PREVIEW:

 

 NOTE FOR USERS, WHO PREFER DARK MODE AND ALREADY HAVE THE MOD INSTALLED

*** Other than this, there's no new functions at the moment. If you have the mod already installed and still prefer to keep the DARK MODE, there's nothing requiring updating. ***

 

That's all ponies! 

 

♦ ←─────~◊~─────→ ♦

DISCLAIMER

Please remember, that it is an UNOFFICIAL modification to MLPForums.
Report mod-related issues here if you'll ever bump into something odd.
THANK YOU! 

 

5 hours ago, Astral Soul said:

I installed it and it's working so far properly at my end :>

I really like this! Great work!

Glad you found this useful too!

[Rikifive 24,125]

5 minutes ago, Starforce said:

@Rikifive

Would there be anything you plan to add for the dark mode version?

Not having anything specific in mind at the moment, but perhaps in the future.

Both versions will be getting updates simultaneously. When there'll be something new in the dark mode version, it will also be in light mode version, but just styled to be bright.

[Rikifive 24,125]

 // UPDATE

JS - v1.4.0 (NEW!)
CSS - v1.3.1
This time ONLY JS code got updated, so you don't have to touch your CSS code.

 

// What's New

 

 

4. NOTIFICATIONS FROM UNREAD FOLLOWED FORUMS

(This probably isn't as epic as it may sound at first.  )

If you have your favorite forum areas, where you like to read every single post, this might interest you.

Sure one can just normally follow the forums and threads, but this option is a little bit different.

I do follow Canterlot and opted in to receive notifications whenever new threads are created. Although, I did not opt in to receive notifications from every single post created in these, simply because that could flood my notifications, but I do want to know, that something new was posted there regardless. So, to check that, I had to scroooooll down to see if their names appear in bold, which signifies, that the forums contain content I haven't viewed yet. This works, but I was doing this somewhat occasionally, so I not always was aware of these fast enough.

So that's my solution:

In the configuration, one can now specify forums (and subforums) to follow by name, like this:

const FOLLOWED_FORUMS = ["MLP:FiM Canon Discussion", "Visual Fan Art", "Throne Room"];

(Everything is prepared and explained in the configuration)

And this, for example, will follow:

- "MLP:FiM Canon Discussion" forum (and therefore will keep notifying until all subforums are read as well)

- "Visual Fan Art" subforum in particular

- and "Throne Room" forum as a whole

 

 

Now, if any of your selected forums/subforums will have something you haven't read yet (basically be in bold on the homepage), these will be dumped into a new dedicated notification box of some sort:

- and if you open it, you'll see a list of which of these forums contain unread content:

- and clicking entries will take you to these forums.

The only way to "remove" such notification is to go there and read all the unread content, or basically use the function to "mark forums as read". Otherwise it will keep popping out as long as there's unread content in the forums you follow.

 

 

Now in my case, I'll always know if there's anything new to read in the Canterlot forums right away, without having to scroll that far. Someone replied to a feedback thread? Bang! Someone replied to question they asked earlier? Bang! Since I'm your favorite support pink pone, it's important for me to know if someone needs something. Now I'll be sure, that I'm always up to date. c:

 

Notes-

 In the configuration you can quickly toggle this function (true/false). In case you'll find this unnecessary, setting it to false will remove this button and its functionality.

 Due to technical limitations, this button appears and works ONLY ON THE HOME PAGE. If for mysterious reason it appears somewhere else too, it probably won't catch anything, because it needs the forum listing from the home page to work. Please report any issues, if you'll bump into any.

 

PAQIG (Potentially Asked Questions (I guess?))

Q: Can I make it follow threads, so that these appear in the new button instead of my already flooded notification box?

A: That would be fantastic, but it's impossible to achieve this with a modification of that type. I simply cannot access the database nor anything like this by any means. I can only work with what is already loaded on the page, hence why it works only on the homepage to begin with.

 

 

Also caution!

I did some minor polishing to the code, and it slightly affected the structure of configuration at the beginning. Basically I replaced variables with constants (so instead of "var fav = ..." there's "const FAVORITES = ..." now. So there's that slight difference to keep in mind if you want to copy your existing list of favorites, but the structure of the array remains the same.

 

That's all for now!

 

 

♦ ←─────~◊~─────→ ♦

DISCLAIMER

Please remember, that it is an UNOFFICIAL modification to MLPForums.
Report mod-related issues here if you'll ever bump into something odd.
THANK YOU! 

Edited February 10, 2022 by Rikifive

[Rikifive 24,125]

 // UPDATE

JS - v1.4.1 (NEW!)
CSS - v1.4.1 (NEW!)
This time BOTH, JS and CSS code have been updated.
[Configuration] remains the same, be sure to copy your settings into the new JS code.

 

// What's New

 

1 - ROLEPLAY CHARACTERS BUTTON

Added a new button in the navigation bar, that takes users to the list of their roleplay characters.

 

This basically opens the new roleplay character library with filter set to show only your own characters, so that it saves some clicks for you in case you'd like to view or edit your characters.

 

2 - VERIFICATION OF FOLLOWED FORUMS

Added a button to TEST the followed forums in your configuration.

In the CONFIG at the beginning of JS code, you can specify which forums you'd like to follow and this config is case-sensitive and all that stuff, so chances are, that you won't be notified about new posts just because of a single typo. Sometimes even I wonder if I typed things correctly and if things actually work.

I've added a button to run a test and highlight the forums on the homepage, that you're following according to your configuration. If these turn GREEN on the homepage, that means you've typed them correctly, and these forums are followed successfully.

 

For example, let's follow these forums & subforums...

const FOLLOWED_FORUMS = ["Pony Games, Apps, and Dev Projects", "Requestria", "Button Mash's Code Library", "Video Fan Art"];

and then run the test to see if these are hooked correctly~

and voila, now we're sure these are actually followed!

 

 

3 - GREEN OUTLINE ON REACT BUTTONS - NOW IN TOPICS AS WELL

Earlier, due to inconvenience in status updates, I've added visuals that made it clearer to which content you have reacted to and not-

 

And later, @RaraLover suggested this...

 

So as promised, this should be applying to posts as well~

 

 

On a side note, it would be nice if the forums would support dark theme by default... That way I wouldn't have to do the same changes in both, light and dark sets... This is a bit confusing and time consuming, I might also derp somewhere because of that someday. Would be better to just work on a single, versatile set. I admit I wanted to add some more things, but with how things are all over the place, I decided it will be enough for now. 

Welp, that's all for now!  

 

 

♦ ←─────~◊~─────→ ♦

DISCLAIMER

Please remember, that it is an UNOFFICIAL modification to MLPForums.
Report mod-related issues here if you'll ever bump into something odd.
THANK YOU! 

[Rikifive 24,125]

Just a little something~

 

It was reported in the After-Upgrade Issues thread, that content in activity and status update is shown a bit different than it was...

...not only different, but something doesn't seem to be right...

The content-type icon is covering the contents a bit. OOF!

I took a quick look and I found this:

I'm not sure why, but obviously the zeroes should not appear at all. Only the rule with green text should be there and nothing above it. That's the issue.

 

For those who use my mod and are bothered by this little issue, you can slap a temporary fix to that.

Just paste this CCS rule at the end of CSS code (the right window)

/* Fixes to Issues Caused By MLPF Upgrade */
html[dir="ltr"] .ipsStreamItem_snippet, html[dir="ltr"] .ipsStreamItem_meta {
	margin-left: 55px !important;
}

It should look like this:

 

Then, the content there should appear normally like it was before the forum upgrade:

 

 

 

It also fixes the margin in status feed in general as well, because it is related.

 

 

And while you're at it... Maybe you too want a twithonk reaction? 

For that, slap this CSS rule anywhere in the right (CSS) window, preferably also just add it at the bottom~

/* Twithonk Ponding Reaction */
img[src*="https://buffy.mlpforums.com/reactions/"][alt="Pondering"] {
	content: url("https://buffy.mlpforums.com/monthly_2021_05/e-twithonk.png.64d8c3279246fdf3b1376912ae577813.png");
}

 

There is and there will never be a better pondering reaction than twithonk, change my mind. 

 

 

 

I've been also slowly thinking about changing the dark theme to something luna-related, like, some stars here and there in backgrounds and perhaps other minor thingies?

Edited June 3, 2022 by Rikifive
the attachments are doing whatever they want, invision ponies - WHYYYYYYYYYY u do this

[Rikifive 24,125]

I guess Luna Theme is ready for testing~

 

If you'd like to take a look at it, replace the entire CSS code (in the right window) with the following:

Spoiler

/*====================================================
// MLPForums Plus (CSS) v1.5.0
// Author: Rikifive
// Version: [DARK] LUNA THEME
//==================================================*/

/*=======================================
// DARK MODE - LUNA THEME
=======================================*/
#ipsLayout_body {
	background: linear-gradient(rgba(10,0,20,0.5), rgba(20,0,10,0.5)), url(https://mlpforums.com/uploads/monthly_2023_02/883614320_LunaTheme-IPSboxbg.jpg.1f32d2f93888b3da488e321a351ef5f7.jpg) !important;
}

.ipsBox, #ipsLayout_mainArea > .ipsForm[action$='do=edit'] > .ipsForm,
html[dir="ltr"] .ipsStream_withTimeline .ipsStreamItem,
#elSearch_main .ipsStreamItem_contentBlock:not( .ipsBox ) {
	background-color: #151025;
	background-image: linear-gradient(rgba(50,0,50,0.3), rgba(0,50,50,0.3)), url(https://mlpforums.com/uploads/monthly_2023_02/883614320_LunaTheme-IPSboxbg.jpg.1f32d2f93888b3da488e321a351ef5f7.jpg);
}

.ipsType_sectionTitle {
    background: url(https://mlpforums.com/uploads/monthly_2023_02/1003824767_LunaTheme-section_l.gif.4878563a7cbba93ec981298de0a17c63.gif) center left no-repeat, url(https://mlpforums.com/uploads/monthly_2023_02/252498260_LunaTheme-section_r.gif.aa9796854e098ce0a484ba8484526f50.gif) center right no-repeat, url(https://mlpforums.com/uploads/monthly_2023_02/276660512_LunaTheme-section_c.gif.b8646ad2aab2f7723708f8c5b50e69a3.gif) center center repeat-x #8d629d;
}

.ipsWidget_title {
	background: linear-gradient(225deg, #00eaff24, transparent), url(https://mlpforums.com/uploads/monthly_2023_02/1519317505_LunaTheme-moon.png.25d545bbbcd0648b1cca35bfa380b10c.png) no-repeat right center;
	text-shadow: 0px 0px 10px white;
}

#ipsLayout_header nav {
	background: linear-gradient(90deg, rgba(60,20,255,0.2), transparent, rgba(200,20,255,0.2)), url(https://mlpforums.com/uploads/monthly_2023_02/883614320_LunaTheme-IPSboxbg.jpg.1f32d2f93888b3da488e321a351ef5f7.jpg);
	animation-name: stickyNavBackgroundFlow;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

#ipsLayout_header nav::after {
	background: linear-gradient(0deg, #100020, #200540);
	border: 1px solid #75b;
}

.ipsAreaBackground_light {
    background: linear-gradient(rgba(10,0,20,0.5), rgba(20,0,10,0.5)), url(https://mlpforums.com/uploads/monthly_2023_02/883614320_LunaTheme-IPSboxbg.jpg.1f32d2f93888b3da488e321a351ef5f7.jpg);
    border: 1px solid;
    border-image: linear-gradient(155deg, #77f9, #a189) 2;
}

.ipsMenu {
	border: 1px solid #aaf8;
}

html[dir="ltr"] .ipsStream.ipsStream_withTimeline {
    border-left: 5px solid rgba( var(--theme-timeline_color), 0.8 );
}

.ipsApp .cke_wysiwyg_frame, .ipsApp .cke_wysiwyg_div {
	background: linear-gradient(rgba(50,0,50,0.3), rgba(0,50,50,0.3)), url(https://mlpforums.com/uploads/monthly_2023_02/883614320_LunaTheme-IPSboxbg.jpg.1f32d2f93888b3da488e321a351ef5f7.jpg);
}

.ipsQuote, .ipsSpoiler, .ipsStyle_spoiler {
	border: 4px solid rgba( var(--theme-area_background_dark),.85);
}

a[data-mentionid] {
	color: rgb(var(--theme-text_color));
	background-image: linear-gradient(to bottom, rgb( var(--theme-brand_primary) ), rgb( var(--theme-important_button) ));
}

.ipsBadge_neutral, .ipsBadge_style6 {
	--badge--color: #fff;
	background: #777;
}

.ipsBadge_warning, .ipsBadge_style3 {
	--badge--color: #fff;
	background: #f22;
}

.ipsBadge_new, .ipsBadge_style1 {
	--badge--color: #cdcdcd;
}

.ipsDataItem_selected .ipsCommentCount {
	background: white;
}

#elWidgetControls {
	background: #111;
}

.ipsApp .ipsModerated:not(.ipsComment_selected):not(.ipsDataItem_selected) {
	background-color: rgb( var(--theme-moderated_light) );
	background-image: linear-gradient(rgba(150,0,0,0.3), rgba(100,25,25,0.3)), url(https://mlpforums.com/uploads/monthly_2023_02/883614320_LunaTheme-IPSboxbg.jpg.1f32d2f93888b3da488e321a351ef5f7.jpg);
    color: rgb( var(--theme-moderated_text) );
}

.ipsComment.ipsComment_solved {
	background-image: linear-gradient(rgba(0,150,0,0.3), rgba(25,100,25,0.3)), url(https://mlpforums.com/uploads/monthly_2023_02/883614320_LunaTheme-IPSboxbg.jpg.1f32d2f93888b3da488e321a351ef5f7.jpg);
}

/* CKEDITOR ADJUSTMENTS */
.ipsApp .cke_top {
	background-color: #fcc;
	border-radius: 5px 5px 0 0;
}

.content-counter {
	border-bottom: 2px solid #fed;
	border-radius: 0 0 5px 5px;
}

/* CODE BLOCKS */
.ipsCode {
	background: #25282c;
}

.pln {
	color: #C5C8C6;
}

@media screen {
	.str { color: #4c4; }
	.kwd { color: #88f; }
	.com { color: #c66; }
	.typ { color: #f8f; }
	.lit { color: #4cc; }
	.pun,.opn,.clo { color: #cc4; }
	.tag { color: #44f; }
	.atn { color: #c4c; }
	.atv { color: #4c4; }
	.dec,.var {  color: #c4c; }
	.fun { color: red; }
}

.CodeMirror {
	background: #25282c !important;
	color: #C5C8C6 !important;
}

.CodeMirror-cursor {
	border-color: white !important;
}

.cm-s-default .cm-keyword { color: #e7f !important; }
.cm-s-default .cm-atom { color: #52f !important; }
.cm-s-default .cm-number { color: #4fa !important; }
.cm-s-default .cm-def { color: #09f !important; }
.cm-s-default .cm-variable-2 { color: #6cf !important; }
.cm-s-default .cm-variable-3, .cm-s-default .cm-type { color: #1fa !important; }
.cm-s-default .cm-comment { color: #f81 !important; }
.cm-s-default .cm-string { color: #f66 !important; }
.cm-s-default .cm-string-2 { color: #f81 !important; }
.cm-s-default .cm-meta { color: #aaa !important; }
.cm-s-default .cm-qualifier { color: #aaa !important; }
.cm-s-default .cm-builtin { color: #61f !important; }
.cm-s-default .cm-bracket { color: #cc9 !important; }
.cm-s-default .cm-tag { color: #3f1 !important; }
.cm-s-default .cm-attribute { color: #44f !important; }
.cm-s-default .cm-hr { color: #ccc !important; }
.cm-s-default .cm-link { color: #33f !important; }
.cm-s-default .cm-error { color: #f33 !important; }
.cm-invalidchar { color: #f33 !important; }

/* MOBILE ADJUSTMENTS */
.ipsModal.ipsDrawer_modal {
	background: #0006;	
}

@media screen and (max-width: 767px) {
	.ipsReact_name {
		background: #202a40;
	}
}

/* FRIENDS PLUGIN COMPATIBILITY */
.friendsBox .ipsTabs .ipsTabs_item.ipsTabs_activeItem {
	background: #ff6eaf !important;	
}
.friendsConf .ipsField_autocomplete,.friendsBox .ipsField_autocomplete,.friendsConf input,.friendsBox input[data-role=quickSearch] {
	background-color: #2d2a2b !important;
}

:root {
	--box--boxShadow: 0 1px 3px rgb(150 100 255), 0 1px 2px rgb(0 255 255);
	--box--backgroundColor: rgb( var(--theme-area_background_reset) );
	
	--positive-dark: #21b744;
	--positive-light: #104530;
	
	--intermediate-light: #555530;
	
	--theme-active_input_border: 255, 165, 225;
	
	--theme-area_background: 70, 50, 80;
	--theme-area_background_dark: 75, 75, 100;
	--theme-area_background_light: 40, 30, 80;
	--theme-area_background_reset: 30, 20, 50;
	--theme-brand_primary: 255, 50, 140;
	--theme-button_bar: 80, 60, 100;
	
	--theme-footer_text: 255, 240, 245;
	
	--theme-header_text: 255, 240, 245;
	--theme-important_button: 255, 110, 120;
	--theme-important_button_font: 255, 255, 255;
	--theme-item_status: 255, 100, 110;
	--theme-light_button: 250, 242, 232;
	--theme-light_button_font: 121, 76, 14;
	--theme-link: 255, 200, 220;
	--theme-link_button: 255, 166, 199;
	
	--theme-main_nav_tab: 65, 60, 55;
	--theme-main_nav_tab_font: 250, 250, 250;
	--theme-mentions: 255, 195, 225;
    
	--theme-moderated_light: 84, 71, 70;
	--theme-moderated_text: 255, 200, 200;
	--theme-moderated_text_light: 185, 110, 110;
	
	--theme-pagination_active: 100, 100, 255;
    
	--theme-primary_button: 255, 100, 110;
	--theme-primary_button_font: 255, 250, 245;
    
	--theme-selected: 70, 70, 100;
    
	--theme-tab_background: 165, 65, 75;
    
	--theme-text_color: 255, 250, 245;
	--theme-text_dark: 255, 250, 245;
	--theme-text_light: 170, 165, 160;
    
	--theme-very_light_button: 100, 90, 80;
	--theme-very_light_button_font: 250, 240, 230;
	--theme-widget_title_bar: 50, 50, 50;
	--theme-widget_title_font: 255, 255, 255;
}



/*=======================================
// Sticky UserNav
=======================================*/
@keyframes stickyNavBackground {
	0% {top:-37px; filter:contrast(0.0); }
	100% {top:0; filter:contrast(1); }
}

@keyframes stickyNavBackgroundFlow {
	0% {background-position-y: 0px; }
	100% {background-position-y: -272px; }
}

#elUserNavContainer {
	position: absolute;
	top: 15px;
	max-width: var(--container--width);
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 2021;
}

@media (min-width: 980px) {
	#elUserNavContainer > #elUserNav {
		top: 0;
	}
}

#elUserNavContainer.sticky {
	position: fixed;
	top: 0;
}

#elUserNavContainer.sticky > #elUserNav {
	width: 100%;
	text-align: right;
	background: linear-gradient(90deg, rgba(60,20,255,0.2), transparent, rgba(200,20,255,0.2)), url(https://mlpforums.com/uploads/monthly_2023_02/883614320_LunaTheme-IPSboxbg.jpg.1f32d2f93888b3da488e321a351ef5f7.jpg);
	border-bottom: 1px solid #e7f;
	box-shadow: var(--box--boxShadow);
	animation-name: stickyNavBackground, stickyNavBackgroundFlow;
	animation-duration: 0.8s, 3s;
	animation-timing-function: ease-out, linear;
	animation-iteration-count: 1, infinite;
}

#elUserNavContainer.sticky > #elUserNav > li:last-child {
	margin-right: 15px;
}

#elUserNav .cExtraBtn {
	float: left;
	margin-right: 0;
	margin-left: 15px;
}

#elUserNav > .cExtraBtn > a:not(.ipsUserPhoto) {
	padding: 5px;
	border-radius: 10px;
}

#elUserNav > .cExtraBtn > a:hover {
	background: #c38;
	color: #ffa;
}

#elUserNav > .cExtraBtn:not(.iconOnly) > a .fa {
	font-size: 14px;
}

#elUserNav > .iconOnly {
	margin-top: 4px;
}

#elUserNavContainer:not(.sticky) > #elUserNav > .lastExtraSep {
	margin-right: 15px;
}

#elUserNavContainer.sticky > #elUserNav > .lastExtraSep {
	display: none;
}

#elUserNav.cSignedOut {
	line-height: 36px;
}

#elUserNav.cSignedOut > li:not(.cExtraBtn) {
	vertical-align: top;
}

#elUserNav > .cAltUserLink .ipsUserPhoto {
	width: 26px;
	height: 26px;
}

.cUnreadTestBtn {
	float: right;
	font-size: 18px;
	border: 1px solid;
    border-radius: 4px;
    padding: 2px;
    background-color: #222;
    margin-top: -5px;
}
.cUnreadTestBtn:hover {
	color: #ffc;
	background-color: #676;
	cursor: pointer;
}

.verified-follow {
	color: #afa;
	font-weight: bold;
	background: #ff03;
	border: 2px solid #cfc;
	border-radius: 5px;
	padding: 0 5px;
}
.verified-follow::before {
	font: normal normal normal 14px/1 FontAwesome;
	content: "\f058";
	margin-right: 3px;
}


/*=======================================
// Post Nav
=======================================*/
#postNav {
	position: fixed;
	right: 0;
	top: 20%;
	transform: translate(0, -20%);
	width: 340px;
	max-width: calc((100% - var(--container--width))/2);
	z-index: 1901;
}

#postNavPage {
	list-style-type: none;
	padding: 3px 10px;
	background: linear-gradient(to top, rgb( var(--theme-area_background_reset)) 20%, rgb(255, 110, 120));
	width: fit-content;
	border-radius: 15px;
	margin: 0;
}

#postNavPage:hover {
	background: linear-gradient(to top, rgb( var(--theme-area_background_reset)), rgb(255, 50, 140) 80%);
}

#postNavPage a {
	color: var(--theme-text_color);
	font-weight: bolder;
	padding: 3px 20px;
	margin: 0px -10px;
}

#postNavHeader.hide {
	display: none;
}

#postNavHeader {
	background: linear-gradient(to right, rgb( var(--theme-area_background_reset)) 20%, transparent);
	padding-left: 5px;
	width: 200px;
	margin-top: 5px;
	margin-bottom: 0;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
}

#postNavList {
	list-style-type: none;
	padding: 0;
	margin-top: 0;
	white-space: nowrap;
}

.postNavItem {
	background: linear-gradient(to right, #ff6677 10%,
		rgb( var(--theme-brand_primary)) 25%, rgb( var(--theme-area_background_reset)) 70%);
	background-size: 200% 100%;
	background-position-x: 100%;
	width: fit-content;
	padding: 2px 8px;
	border: 1px solid #f69;
	border-radius: 0 25px 25px 0;
	transition-duration: 0.6s;
	cursor:pointer;
}

.postNavItem > img {
	width: 20px;
	height: 20px;
}

.postNavItem > span {
	vertical-align: middle;
}

.postNavItem.current {
	border-color: white;
	background-position-x: 0%;
}

.postNavItem.current::before {
	font: normal normal normal 14px/1 FontAwesome;
	content: "\f04b";
	margin-right: 3px;
	vertical-align: middle;
}

.postNavModerated {
	background: linear-gradient(#711, #833);
	border-color: #f22;
}

.postNavModerated.current {
	background: linear-gradient(#a33, #f44);
}

.postNavModerated::after {
	font: normal normal normal 14px/1 FontAwesome;
	content: " \f071";
	vertical-align: middle;
}

.postNavSolution {
	background: linear-gradient(#484, #af8);
	border-color: #2f2;
}

.postNavSolution.current {
	background: linear-gradient(#7c7, #cfa);
}

.postNavSolution::before {
	font: normal normal normal 14px/1 FontAwesome;
	content: "\f058 ";
	margin-right: 3px;
	vertical-align: middle;
}

.postNavSelected {
	background: linear-gradient(#844, #ba6);
	border-color: #ffa;
}

.postNavSelected.current {
	background: linear-gradient(#964, #fe7);
}

.postNavSelected::before {
	font: normal normal normal 14px/1 FontAwesome;
	content: "\f00c ";
	margin-right: 3px;
	vertical-align: middle;
}

@media (max-width: 1450px) {
	#postNav {
		width: unset;
		max-width: unset;
	}
	#postNavHeader {
		display: none;
	}
	.postNavItem {
		padding: 2px 2px;
		border-width: 1px 5px;
		border-radius: 0;
	}
	.postNavItem span {
		display: none;
	}
	.postNavItem.current::before {
		display: none;
	}
	.postNavSelected::before {
		display: none;
	}
	.postNavModerated::after {
		display: none;
	}
	.postNavSolution::before {
		display: none;
	}
}

@media (max-width: 1620px) {
	#postNavPage {
		display: none;
	}
}



/*=======================================
// Visual/UI Modifications
=======================================*/
@keyframes MailBackground {
	to { background-position: 112px -94px; }
}

#elFlashMessage.ipsFlashMsg_bottom {
	background: url("https://buffy.mlpforums.com/monthly_2021_12/mail_bg_a0_08.png.bb2869aad73fe0e2d5f3a9c1ac27fab9.png"), linear-gradient(#553827, #261911);
	background-color: #222;
	border: 2px solid #fffaad;
	border-radius: 0 100px 100px 100px;
}
#elFlashMessage.ipsFlashMsg_bottom::before {
	content: url("https://buffy.mlpforums.com/monthly_2021_12/1615603097_derpynotif.png.73e690386e0fc9140a761cad0e42c15e.png")"NEW NOTIFICATION";
	position: absolute;
	top: -72px;
	left: 0;
	color: #fffaad;
	font-weight: bold;
	text-shadow: 1px -1px 2px #573928;
}
#elFlashMessage.ipsFlashMsg_bottom > div {
	margin-top: -2px;
}
#elFlashMessage.ipsFlashMsg_bottom.ipsFlashMsg_dismissable [data-action='dismissFlashMessage'] {
	background: #fffaad;
}

#elInboxContent {
	background: url("https://buffy.mlpforums.com/monthly_2021_12/mail_bg_a0_08.png.bb2869aad73fe0e2d5f3a9c1ac27fab9.png");
	background-attachment: fixed;
	animation: MailBackground 10s linear infinite;
}

/* Reactions */
html[dir] .ipsReact.ipsReact_mini .ipsReact_unreact {
	position: absolute;
	left: -23px;
	top: 4px;
}
html[dir] .ipsReact.ipsReact_mini .ipsReact_unreact.ipsHide {
	display: none;
}
.ipsReact .ipsReact_button.ipsReact_reacted {
	border: 1px solid #aaff95;
	background: #60624e;
}
body.ipsApp_noTouch .ipsReact_types:hover .ipsReact_button.ipsReact_reacted, body:not( .ipsApp_noTouch ) .ipsReact_types.ipsReact_types_active .ipsReact_button {
	border: 1px solid #aaff95;
	background: #60624e;
}
.ipsReact.ipsReact_mini .ipsReact_count {
	display: block;
}
.ipsReact.ipsReact_mini .ipsReact_count a {
	color: #999;
}

 

Nothing changed in the JS code.

Please notify me if something will look odd (like weird colors, unreadable elements and the like) and of course, feel free to suggest something if you'd have ideas.

 

For now there's only fancy dark mode for experimental purposes. If Luna Theme receives positive feedback, I'll consider creating Celestia Theme (Light Mode).

 

♦ ←─────~◊~─────→ ♦

On a side note @Samurai Equine , suggested adding a feature, that would highlight members you follow (like displaying their name in a different color or having a checkmark/heart/other symbol before/next to their name) across the forums, so that whenever you interact with someone, you know whether you follow them or not the moment their name pops out anywhere.

Example:

Problem is, the forum software doesn't mark users as followed everywhere, it does so only in few specific points where the button to follow is loaded (to either put "follow" or "unfollow" option), so there's nothing I can hook to from my third party plugin to make it mark users outside these areas. I could throw an if statement to check if the loaded member is followed within the forum theme settings, so there it would work, but via my third party plugin, I can't consult the database, so to speak, I can only work with what is loaded.

Therefore, unfortunately I can't make it work fully automatically, unless I'd modify the site code itself, which would be fine by me I guess, but I don't know if admins would like me to toy there too much. Either way, the plugin would need the names to be specified somewhere and use it to check if the member you see is followed.

> The simplest implementation I could do is to create an another variable in the configuration, where you'd edit an array of profile ID's of users you want to be marked. Names wouldn't work, as it would no longer mark users who changed their name. The problem is, that such configuration could be a bit tedious for users to set up and then keep it updated.

OR

> I was thinking of using browser cookies. In the followed users page I'd add a button, that would dump all displayed users' ID's into an array for you, in a form of a browser cookie. Because the forums display only few users per page, you'd have to cycle through all pages and click the button on each to make the plugin add everyone to the list. Then the plugin would use stored ID's to mark relevant users. The potential problem is, that if you'll happen to clear cookies, settings will be gone, so that would be something to keep in mind.

 

Personally I kinda think, that this rather simple feature would require overengineering.  But I think it's all doable if there would be a demand for this.