Jump to content
Banner by ~ Ice Princess Silky

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


Rikifive

Recommended Posts

@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. :BrightMacContent:

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.

  • Brohoof 1
Link to comment
Share on other sites

(edited)

// 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? e-twibigbrain.png.59f9651fa9ae93815fbd2e51e2fc697b.png

 

The Issue

ractions0.png.12f9b912f11a8bd7b3f951af67fe706c.png
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)

reactions1.png.3d9646bca41838347ee3a20b3d544bb2.png

- 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.

reactions2.png.4ed8093df795b4587d3e188d75f1d7de.png

- 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! :BrightMacContent:

Edited by Rikifive
  • Brohoof 2
Link to comment
Share on other sites

 // 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:

2022-01-03_02-03-59.thumb.png.1da544de43ad753d0478282b85477ffd.png

 

e-note_blue.png.c6bd230ec43be0d9999952e51e1c7690.png 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! :mlp_yeehaa:

 

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

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! :BrightMacContent:

 

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! :ticking:

  • Brohoof 2
Link to comment
Share on other sites

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.

  • Brohoof 2
Link to comment
Share on other sites

  • 1 month later...

 // 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. :P )

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)

2022-02-10_04-12-50.png.7cab0e5326d755286e262aa714dd2fd3.png

"Visual Fan Art" subforum in particular

2022-02-10_04-13-25.png.b78df86d068f77843539b20eeae063c1.png

- and "Throne Room" forum as a whole

2022-02-10_04-13-55.png.be9b55ebc9b737bb6170faf8e75e52b0.png

 

 

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:

2022-02-10_04-23-22.png.9c4ab70da914c70399baccedeab4f9d9.png

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

2022-02-10_04-26-15.png.5cc85d466fd8138530a6c29d5c30e83d.png

- 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-

e-note_blue.png.c6bd230ec43be0d9999952e51e1c7690.png 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.

e-note_blue.png.c6bd230ec43be0d9999952e51e1c7690.png 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! :mlp_yeehaa:

 

 

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

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! :BrightMacContent:

Edited by Rikifive
  • Brohoof 1
Link to comment
Share on other sites

  • The title was changed to MLPForums Plus - A Site Mod For Quality Of Life Improvements (v1.4.0)
  • The title was changed to MLPForums Plus - A Site Mod For Quality Of Life Improvements (v1.4.1)

 // 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.

2022-04-09_23-25-04.thumb.png.f4d8640eefb022b69ecb1b41bf9b67d3.png

 

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~

1364202814_forumfollowtest.gif.e61676be0c166bdd3df0f0cfe8c3deed.gif

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-

reactions1.png.3d9646bca41838347ee3a20b3d544bb2.png

 

And later, @RaraLover suggested this...

2022-04-10_00-01-48.png.75a8d736d477e8ebf850607ac51e4ebb.png

 

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

2022-04-10_00-03-31.png.7af4636465de11022ac9f0855ea5862f.png

 

 

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. :awwthanks:

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! :BrightMacContent:

  • Brohoof 2
Link to comment
Share on other sites

  • 1 month later...
(edited)

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...

2022-06-03_17-11-33.png.c21673406aef395a61db622b71d731d8.png

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

I took a quick look and I found this:

2022-06-03_17-24-46.png.20f0f86d90ff2af6a7d52ec541914873.png

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:

2022-06-03_17-46-46.png.d4069ab4dfe735f599779161872beec5.png

 

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

2022-06-03_17-14-55.png.0b49658cf02589a834e7b97178644cc3.png

 

 

2022-06-03_17-51-13.png.54240eaff6e60d8c8dd524893dd82982.png

 

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? e-twiwth.png.5878ad773cfe0efaf9dc8dc75763160a.png

2022-06-03_17-53-58.png.bdfcbb4ac0ff1c7c10ea6f5d1bcd02a0.png

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. e-twiwth.png.5878ad773cfe0efaf9dc8dc75763160a.png

 

 

 

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? :ooh:

Edited by Rikifive
the attachments are doing whatever they want, invision ponies - WHYYYYYYYYYY u do this
  • Brohoof 3
Link to comment
Share on other sites

  • 8 months later...

I guess Luna Theme is ready for testing~

2023-02-25_21-01-12.thumb.png.aa0a5028d69d456a6fce2807903047dc.png

2023-02-25_21-50-38.thumb.png.4b6bf8c2c8f8e3450387be8dbd83b128.png

 

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:

2023-02-25_23-50-58.thumb.png.995825640302433f99830420120b3a60.png

2023-02-25_23-51-32.png.c7dfe434ae1385f4b86207f2cb9ae2d2.png

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. :mlp_icwudt: But I think it's all doable if there would be a demand for this. :coco:

  • Brohoof 3
Link to comment
Share on other sites

@Rikifive

I am testing it out now, it looks great! I have an idea though - do you think you could also make a Nightmare Moon theme? Like make it look more Nightmare Moon-ish? You could maybe change the pink-ish color to more of a dark blue, sort of like Nightmare Moon? But I love this! It's much better than the original dark mode theme!

image.thumb.png.47c24b75286ebd741cb1d8b6199d1724.png

  • Brohoof 1
Link to comment
Share on other sites

@Props ValRoa Thanks! e-BARBARA_LOVE.png.093937706744721075571530ebbf31f3.png Technically I could make a theme for literally every single character, but one thing I fear is, that if there ever will be a forum software update that ruins something, I'd have to tweak every single theme, so basically the work will be multiplied by amount of themes. To not search far, admins have installed a plugin that enhances the search engine and search results were all white with white font - I already had to push a fix (which is what I did with the release of Luna Theme). While I'm eager to create tons of themes for everyone, I feel like I should keep it at minimum, heh. Because users prefer either dark or light theme, for now I plan to create the Celestia Theme and see how it goes with supporting these two. Maybe in the future I'll make more if there'll be a demand and supporting these won't be too problematic.

Yeah, the original dark mode was pretty much just a plain palette swap from bright to dark. This is now a proper MLP theme and I hope everyone who uses it will enjoy it. :BrightMacContent:

Thank you for your interest! e-glimlove.png.61d49f640b098e894f62157567582a55.png

  • Brohoof 1
Link to comment
Share on other sites

Nice.
 

And yes the the pending update may completely cause a mess with all the non stock themes. That said, I applaud your initiative on this. If it does break, at least I know you have the skills to start working on fixing it 

  • Brohoof 1
Link to comment
Share on other sites

It shouldn't be too bad I believe. Maybe few elements will look poopy and require tweaking, but it shouldn't be anything too scary. :lookup: 

  • Brohoof 1
Link to comment
Share on other sites

Im testing it now for a couple of hours. It really looks great and I like it. I've always been drawn to dark color themes, so this is perfect for me :>

So far I don't see any problems :>

Thank you so much for this @Rikifive

  • Brohoof 1
Link to comment
Share on other sites

@Astral Soul Happy to hear that! e-glimlove.png.61d49f640b098e894f62157567582a55.png You're welcome! :BrightMacContent:

@Silly Druid Awesome! Glad to hear that! e-glimlove.png.61d49f640b098e894f62157567582a55.png 

That's very nice to have confirmation, that it works in other extensions. Are you using only the CSS or JS as well? CSS is rather straightforward so I don't expect any extension of that type generating troubles there, but with JS, you never know. :P 

  • Brohoof 3
Link to comment
Share on other sites

1 hour ago, Rikifive said:

@Astral Soul Happy to hear that! e-glimlove.png.61d49f640b098e894f62157567582a55.png You're welcome! :BrightMacContent:

@Silly Druid Awesome! Glad to hear that! e-glimlove.png.61d49f640b098e894f62157567582a55.png 

That's very nice to have confirmation, that it works in other extensions. Are you using only the CSS or JS as well? CSS is rather straightforward so I don't expect any extension of that type generating troubles there, but with JS, you never know. :P 

I'm using both JS and CSS. An interesting thing I noticed is that there is an option in that extension called "on page load". When it's unchecked, the changes to the forum's appearance are applied immediately, but sometimes it doesn't work at all (the page has the default forum theme). So I had to check that option, which makes the page load normally, and then applies the changes. So it's white for a second or so, and then it turns dark.

Let me know which features are provided by the JS part, so I can test them.

Edited by Silly Druid
  • Brohoof 2
Link to comment
Share on other sites

Update: It turns out the JS features don't work when "on page load" is turned on, but they work when it's turned off. It makes the entire thing a bit unreliable, but it works most of the time so I'm sticking to it for now.

Perhaps there are other Firefox extensions I can test?

Edited by Silly Druid
  • Brohoof 1
Link to comment
Share on other sites

@Silly Druid Yeah, I've noticed the extension you use is available for Chrome as well, so I'm testing it and I've noticed some issues with JS, so currently trying to debug what's going on for a while.

CSS (all the stylization including dark theme) works perfect for me, given the "on page load" option is not ticked. The site being white for a second (getting a flashbang) is what is called a "Flash of Incorrect Theme" (FOIT), it's simply because the CSS is applied too late which sux, so for that reason alone it's best to keep "on page load" option disabled, so that it is applied in the correct time.

Same goes for JS actually. Because the extension I use doesn't have that option and injects code at the start, I have let's say, queued functions to be run in the correct time. So if JS is injected at the beginning, functions (element creations) are queued to be run in correct time. If you enable "on page load", the code is injected after the page is loaded, so not only dark theme is applied too late, element creations are queued after the right trigger time has already passed, so nothing is created. I'd have to adjust the code itself to just run functions the moment code is processed, instead of queueing them.

TL;DR keep "on page load" disabled. I find it interesting, that you can't set that option differently for JS and CSS. A delay for JS is absolutely understandable and needed, but for CSS? Not sure why anyone would need those FOITs. or perhaps I'm missing some big-brain potential usage for that.

 

Anyway, when I have the "on page load" disabled, everything works for me, except the post list to the right in topics. It throws an error that I don't get in the extension I use. The post list is created, but it doesn't update your position. I'm trying to debug it to locate the issue.

 

You mentioned, that it works most of the time - I haven't encountered that problem in Chrome, seems to be working for me every time, except that post list to the right, which behaves oddly.

Link to comment
Share on other sites

@Silly Druid I figured out the error I was getting with the post list, I realized I did something kinda dumb and while it worked in the extension I use, it can generate issues in different ones that have a bit different inject timing.

Otherwise the extension you use seems to be working perfectly. I have "on page load" and "top frame only" disabled and haven't encountered any issues. Dark theme always triggers in the right time, sticky nav bar at the top and post list to the right are loaded correctly.

Replace all the JS code with the following; it contains a fix to the post list as well as console logs for testing, so if something particular doesn't work, maybe it will throw a hint in regards to what where went wrong.

Spoiler
/*====================================================
// MLPForums Plus (JS) v1.4.1
// Author: Rikifive
//==================================================*/

/*====================================================
| * * * CONFIGURATION * * *
====================================================*/

// === FAVORITES ===
//----------------------------------------------------
// Configure links here.
// ["title"]			=> creates an unclickable section
// ["title", "link"]	=> creates a clickable option
// Remember about commas after every entry, except the last one.
//----------------------------------------------------
const FAVORITES = [
	["MLP:FiM Canon Discussion"],
	["Season 1 Discussion","https://mlpforums.com/forum/11-season-1-discussion/"],
	["Season 2 Discussion","https://mlpforums.com/forum/58-season-2-discussion/"],
	["Season 3 Discussion","https://mlpforums.com/forum/59-season-3-discussion/"],
	["Season 4 Discussion","https://mlpforums.com/forum/119-season-4-discussion/"],
	["Season 5 Discussion","https://mlpforums.com/forum/167-season-5-discussion/"],
	["Season 6 Discussion","https://mlpforums.com/forum/214-season-6-discussion/"],
	["Season 7 Discussion","https://mlpforums.com/forum/259-season-7-discussion/"],
	["My Little Pony: The Movie (2017)", "https://mlpforums.com/forum/219-my-little-pony-the-movie-2017/"],
	["Season 8 Discussion","https://mlpforums.com/forum/270-season-8-discussion/"],
	["Season 9 Discussion","https://mlpforums.com/forum/311-season-9-discussion/"],
	["Specials and Shorts","https://mlpforums.com/forum/331-specials-and-shorts/"],
	
	["Canterlot Gallery"],
	["Visual Fan Art","https://mlpforums.com/forum/18-visual-fan-art/"],
	["Fan Music","https://mlpforums.com/forum/30-fan-music/"],
	
	["Science!"],
	["Testing Forum", "https://mlpforums.com/forum/110-testing-forum/"]
]; // end of favorites



// === FOLLOWED FORUMS ===
// Be notified about unread posts in the forums of your choice.
// The notifications will appear on a new dedicated userbar button.

//----------------------------------------------------
// *** Enable feature? (true/false)
//----------------------------------------------------
const ENABLE_FOLLOWING_FORUMS = true;

//----------------------------------------------------
// Specify forums you want to be notified about unread posts.
// syntax: FOLLOWED_FORUMS = array[string];
// example: FOLLOWED_FORUMS = ["MLP:FiM Canon Discussion", "Visual Fan Art", "Throne Room"];
//
// Note, that you can specify the entire section or only its subforums of your choice.
// Caution: It is case-sensitive, so be sure to put names exactly like they are on the forums.
//----------------------------------------------------
const FOLLOWED_FORUMS = [];

/*====================================================
| * * * END OF CONFIGURATION * * *
| /!\ Do NOT edit anything past this point unless you know what you are doing!
====================================================*/



/*=======================================
// Sticky UserNav
=======================================*/
document.addEventListener("DOMContentLoaded", function() {
    console.log("Initializing Sticky UserNav...");
	let nav = document.getElementById("elUserNav");
	if (!nav) { return; }
	setupUserNav(nav);
	addNavBtns(nav);
	updateScroll();
    console.log("Sticky UserNav initialized successfully.");
})

// Setup User Navbar
function setupUserNav(nav) {
	// Wrap UserNav in container and move to the body
	let navContainer = document.createElement("div");
	navContainer.id = "elUserNavContainer";
	document.body.appendChild(navContainer);
	navContainer.appendChild(nav);
	// Mark Default UserNav Menus
	let mnu = document.querySelectorAll('#elUserNav > li > *[id$="_menu"]');
	mnu.forEach(e => e.classList.add("userNavMenu"));
}

// Add Extra Buttons to the left
function addNavBtns(nav) {
	let count = 0;
	// Home & Status Updates
	let button = [
		{
			title: "Return to Home Page",
			link: "https://mlpforums.com/",
			icon: "home",
			text: " Home"
		},
		{
			title: "View All Status Updates",
			link: "https://mlpforums.com/discover/23/",
			icon: "newspaper-o",
			text: " Status Updates"
		}
	]
	
	let i, li, a, ico;
	for (i = 0; i < button.length; i++) {
		nav.insertBefore(li = document.createElement("li"), nav.childNodes[count++]);
		li.classList.add("cExtraBtn");
		li.appendChild(a = document.createElement("a"));
		a.setAttribute("data-ipstooltip", "");
		a.setAttribute("_title", button[i].title);
		a.href = button[i].link;
		a.appendChild(ico = document.createElement("i"));
		ico.classList.add("fa", "fa-" + button[i].icon);
		a.appendChild(document.createTextNode(button[i].text));
	}
	
	// Forums
	let section = [
		["All About Ponies"],
		["Start Here!", "https://mlpforums.com/forum/211-start-here/"],
		["My Little Pony", "https://mlpforums.com/forum/1-my-little-pony/"],
		["Octavia's Hall", "https://mlpforums.com/forum/4-octavias-hall-fan-art-more/"],
		
		["Roleplaying, Fun & Discussions"],
		["Roleplay World", "https://mlpforums.com/forum/21-roleplay-world/"],
		["Events", "https://mlpforums.com/forum/176-events/"],
		["Beyond Equestria", "https://mlpforums.com/forum/5-beyond-equestria/"],
		
		["MLP Forums Meta"],
		["Canterlot", "https://mlpforums.com/forum/20-canterlot-mlp-forums-meta/"],
		
		["More"],
		["Poniverse", "https://mlpforums.com/forum/67-poniverse/"],
		["Conventions", "https://mlpforums.com/forum/135-conventions/"]
	]
	
	nav.insertBefore(li = document.createElement("li"), nav.childNodes[count++]);
	li.classList.add("cExtraBtn", "cForumsList");
	
	li.appendChild(a = document.createElement("a"));
	a.setAttribute("data-ipstooltip", "");
	a.setAttribute("_title", "Browse Forums");
	a.href = "#elForumsList_menu";
	a.id = "elForumsList";
	a.setAttribute("data-ipsmenu", "");
	
	a.appendChild(ico = document.createElement("i"));
	ico.classList.add("fa", "fa-navicon");
	a.appendChild(document.createTextNode(" Forums "));
	a.appendChild(ico = document.createElement("i"));
	ico.classList.add("fa", "fa-caret-down");
	
	let ul, opt;
	li.appendChild(ul = document.createElement("ul"));
	ul.id = "elForumsList_menu";
	ul.classList.add("ipsMenu", "ipsMenu_normal", "ipsHide", "userNavMenu");
	ul.setAttribute("style", "position: fixed; top: 32px; display: none;");
	
	for (i = 0; i < section.length; i++) {
		ul.appendChild(opt = document.createElement("li"));
		if (section[i][1]) {
			opt.classList.add("ipsMenu_item");
			opt.appendChild(a = document.createElement("a"));
			a.href = section[i][1];
			a.appendChild(document.createTextNode(section[i][0]));
		} else {
			opt.classList.add("ipsMenu_title");
			opt.appendChild(document.createTextNode(section[i][0]));
		}
	}
	
	// Favorites
	nav.insertBefore(li = document.createElement("li"), nav.childNodes[count++]);
	li.classList.add("cExtraBtn", "cFavList");
	li.appendChild(a = document.createElement("a"));
	a.setAttribute("data-ipstooltip", "");
	a.setAttribute("_title", "Browse Favorite Places");
	a.href = "#elFavList_menu";
	a.id = "elFavList";
	a.setAttribute("data-ipsmenu", "");
	a.appendChild(ico = document.createElement("i"));
	ico.classList.add("fa", "fa-star");
	a.appendChild(document.createTextNode(" Favorites "));
	a.appendChild(ico = document.createElement("i"));
	ico.classList.add("fa", "fa-caret-down");
			
	li.appendChild(ul = document.createElement("ul"));
	ul.id = "elFavList_menu";
	ul.classList.add("ipsMenu", "ipsMenu_normal", "ipsHide", "userNavMenu");
	ul.setAttribute("style", "position: fixed; top: 32px; display: none;");
		
	for (i = 0; i < FAVORITES.length; i++) {
		ul.appendChild(opt = document.createElement("li"));
		if (FAVORITES[i][1]) {
			opt.classList.add("ipsMenu_item");
			opt.appendChild(a = document.createElement("a"));
			a.href = FAVORITES[i][1];
			a.appendChild(document.createTextNode(FAVORITES[i][0]));
		} else {
			opt.classList.add("ipsMenu_title");
			opt.appendChild(document.createTextNode(FAVORITES[i][0]));
		}
	}
	
	// SEPARATOR
	nav.insertBefore(li = document.createElement("li"), nav.childNodes[count++]);
	li.classList.add("cExtraBtn", "elUserNav_sep");
	
	// FAQ & Rules
	button = [
		{
			title: "Forum Guidelines",
			link: "https://mlpforums.com/guidelines/",
			icon: "book",
		},
		{
			title: "Site FAQ",
			link: "https://mlpforums.com/faq/",
			icon: "question-circle",
		}
	]
	
	for (i = 0; i < button.length; i++) {
		nav.insertBefore(li = document.createElement("li"), nav.childNodes[count++]);
		li.classList.add("cExtraBtn", "iconOnly", "cUserNav_icon");
		li.appendChild(a = document.createElement("a"));
		a.setAttribute("data-ipstooltip", "");
		a.setAttribute("_title", button[i].title);
		a.href = button[i].link;
		a.appendChild(ico = document.createElement("i"));
		ico.classList.add("fa", "fa-" + button[i].icon);
	}
	
	// SEPARATOR
	nav.insertBefore(li = document.createElement("li"), nav.childNodes[count++]);
	li.classList.add("cExtraBtn", "elUserNav_sep");
	
	// ROLEPLAY CHARACTERS
	nav.insertBefore(li = document.createElement("li"), nav.childNodes[count++]);
	li.classList.add("cExtraBtn", "iconOnly", "cUserNav_icon");
	li.appendChild(a = document.createElement("a"));
	a.setAttribute("data-ipstooltip", "");
	a.setAttribute("_title", "My Roleplay Characters");
	a.href = "https://mlpforums.com/characters/?filter=characters_mine";
	a.appendChild(ico = document.createElement("i"));
	ico.classList.add("fa", "fa-address-card");
	
	// FOLLOWED FORUMS
	if (ENABLE_FOLLOWING_FORUMS && document.body.getAttribute("data-pagecontroller") == "index") {
		let unreadForums = [];
		let uForumsAll = document.querySelectorAll('.cForumList .ipsDataItem_unread .ipsDataItem_main .ipsDataItem_title a, .cForumList .ipsDataItem_main .ipsDataItem_subList .ipsDataItem_unread a');
		let uForumName;
		for (i = 0; i < uForumsAll.length; i++) {
			uForumName = uForumsAll[i].innerText.replace(" ", ""); //that sneaky troublemaker...
			if (FOLLOWED_FORUMS.includes(uForumName)) {
				unreadForums.push([uForumName, uForumsAll[i].href]);
			}
		}
		
		nav.insertBefore(li = document.createElement("li"), nav.childNodes[count++]);
		li.classList.add("cExtraBtn", "iconOnly", "cUserNav_icon", "cUnreadForums");
		li.appendChild(a = document.createElement("a"));
		a.setAttribute("data-ipstooltip", "");
		a.setAttribute("_title", "Unread Forums");
		a.href = "#elUnreadForums_menu";
		a.id = "elUnreadForums";
		a.setAttribute("data-ipsmenu", "");
		a.appendChild(ico = document.createElement("i"));
		ico.classList.add("fa", "fa-comments");
		if (unreadForums.length > 0) {
			let count;
			a.appendChild(count = document.createElement("span"));
			count.classList.add("ipsNotificationCount");
			count.setAttribute("style", "right: -5px; top: -5px;");
			count.innerText = unreadForums.length;
		}
		
		li.appendChild(ul = document.createElement("ul"));
		ul.id = "elUnreadForums_menu";
		ul.classList.add("ipsMenu", "ipsMenu_normal", "ipsHide", "userNavMenu");
		ul.setAttribute("style", "position: fixed; top: 32px; display: none;");
		
		ul.appendChild(opt = document.createElement("li"));
		opt.classList.add("ipsMenu_title");
		opt.appendChild(document.createTextNode("Unread Forums"));
		opt.appendChild(ico = document.createElement("i"));
		ico.classList.add("fa", "fa-gears", "cUnreadTestBtn");
		ico.setAttribute("onclick", "performFollowTest()");
		ico.setAttribute("data-ipstooltip", "");
		ico.setAttribute("_title", "Test Followed Forums");
		
		if (unreadForums.length == 0) {
			ul.appendChild(opt = document.createElement("li"));
			opt.classList.add("ipsMenu_item");
			opt.setAttribute("style", "padding: 11px 20px;");
			opt.appendChild(document.createTextNode("~ There's nothing here ~"));
		}
		else {
			for (i = 0; i < unreadForums.length; i++) {
				ul.appendChild(opt = document.createElement("li"));
				opt.classList.add("ipsMenu_item");
				opt.appendChild(a = document.createElement("a"));
				a.href = unreadForums[i][1];
				a.appendChild(document.createTextNode(unreadForums[i][0]));
			}
		}
	}
	
	// SEPARATOR
	nav.insertBefore(li = document.createElement("li"), nav.childNodes[count++]);
	li.classList.add("cExtraBtn", "elUserNav_sep", "lastExtraSep");
}

function performFollowTest() {
	let tForumsAll = document.querySelectorAll('.cForumList .ipsDataItem_main .ipsDataItem_title a, .cForumList .ipsDataItem_main .ipsDataItem_subList a');
	let tForumName;
	for (i = 0; i < tForumsAll.length; i++) {
		tForumName = tForumsAll[i].innerText.replace(" ", ""); //that sneaky troublemaker...
		if (FOLLOWED_FORUMS.includes(tForumName)) {
			tForumsAll[i].classList.add("verified-follow");
		}
	}
	alert("Test Successful.\nCheck if the forums you follow are highlighed on the main page.");
}

window.addEventListener('scroll', updateScroll);
function updateScroll() {
	let nav = document.getElementById("elUserNavContainer");
	if (!nav) { return; }
	let menu = document.getElementsByClassName("userNavMenu");
	let tip = document.getElementById("ipsTooltip");
	let i;
	if (nav) {
		if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
			if (tip) { tip.style.position = "fixed"; tip.style.top = "32px"; }
			for (i=0; i < menu.length; i++) {
				if (!menu[i] || menu[i].style.display == "none") { continue; }
				menu[i].style.position = "fixed";
				menu[i].style.top = "32px";
				if (!nav.classList.contains("sticky")) { menu[i].style.display = "none"; }
			}
			nav.classList.add("sticky");
		} else {
			for (i=0; i < menu.length; i++) {
				if (!menu[i] || menu[i].style.display == "none") { continue; }
				if (nav.classList.contains("sticky")) { menu[i].style.display = "none"; }
			}
			nav.classList.remove("sticky");
		}
	}
}

/*=======================================
// Post Nav
=======================================*/
document.addEventListener("DOMContentLoaded", function() {
    console.log("Initializing Post List...");
	if (document.body.getAttribute("data-pagecontroller") != "topic") { 
        console.log("Aborting, the current page is not a topic.")
        return;
    }

	var postNav = document.createElement("div");
	document.body.appendChild(postNav);
	postNav.id = "postNav";
	
	var ipsPagination = document.querySelector('.ipsPagination_pageJump');
	if (ipsPagination) {
		let postNavPage = ipsPagination.cloneNode(true);
		postNav.appendChild(postNavPage);
		postNavPage.id = "postNavPage";
	}
	
	var postHeader = document.createElement("p");
	postNav.appendChild(postHeader);
	postHeader.id = "postNavHeader";
	postHeader.innerHTML = "Posts on This Page";
	
	var postList = document.createElement("ul");
	postNav.appendChild(postList);
	postList.id = "postNavList";
	
    console.log("triggering postlist update from initialization...")
	updatePostNav();
    window.addEventListener('scroll', updatePostNav);
})

function updatePostNav() {
    console.log("updating post list...")
	var posts = document.querySelectorAll('.cPost');
	var postNavItems = document.querySelectorAll('.postNavItem');
	// Check For New Posts
	var postsCnt = posts.length;
	var itemsCnt = postNavItems.length;
	if (itemsCnt != postsCnt) {
		let diff = postsCnt - itemsCnt;
		let postList = document.querySelector('#postNavList');
		let post, photo, name, eleName;
        console.log("amount of posts: " + String(postsCnt) + "\nitems on list: " + String(itemsCnt) + "\nadding " + String(diff) + " posts to the list...");
        console.log("entering loop...")
        for (let i=itemsCnt; diff>0; i++) {
            console.log("fetching post to the list [" + String(i) + "]...");
            posts[i].setAttribute("post-index", i);
            postList.appendChild(post = document.createElement("li"));
            post.classList.add("postNavItem");
            post.setAttribute("index", i);
            post.setAttribute("onclick", "moveToPost(" + String(i) + ")");
            if (posts[i].classList.contains("ipsComment_solved")) { post.classList.add("postNavSolution"); }
            // Draw User Photo
            post.appendChild(photo = document.createElement("img"));
            photo.src = posts[i].querySelector('.cAuthorPane_photo > .ipsUserPhoto > img').src;
            // Draw User Name
            post.appendChild(name = document.createElement("span"));
            eleName = posts[i].querySelector('.cAuthorPane_author a');
            if (eleName == null) { eleName = posts[i].querySelector('.cAuthorPane_author'); }
            name.innerHTML = " " + eleName.innerHTML;
            diff--;
        }
		postNavItems = document.querySelectorAll('.postNavItem');
	}
	if (postNavItems.length == 0) { document.querySelector('#postNavHeader').classList.add("hide"); }
	else { document.querySelector('#postNavHeader').classList.remove("hide"); }
	// Mark Moderated and Selected
	postNavItems.forEach(function(item) {
		item.classList.remove("postNavModerated");
		item.classList.remove("postNavSelected");
	})
	for (let i=0; i<postsCnt; i++) {
		if (posts[i].classList.contains("ipsModerated")) {
			postNavItems[i].classList.add("postNavModerated");
		}
		if (posts[i].classList.contains("ipsComment_selected")) {
			postNavItems[i].classList.add("postNavSelected");
		}
	}
	//  Update Location
	let wpos = window.pageYOffset+250;
	let done = false;
	let ptop, pbtm;
	for (let i=0; i < postsCnt; i++) {
		ptop = posts[i].getBoundingClientRect().top - document.body.getBoundingClientRect().top;
		pbtm = posts[i].getBoundingClientRect().bottom - document.body.getBoundingClientRect().top;
		if (!done && (wpos >= ptop-100) && (wpos <= pbtm+50)) {
			postNavItems[i].classList.add("current");
			done = true;
		} else {
			postNavItems[i].classList.remove("current");
		}
	}
}

function moveToPost(index) {
	let post = document.querySelector('.cPost[post-index="' + String(index) + '"]');
	let tgt = post.getBoundingClientRect().top - document.body.getBoundingClientRect().top - 100;
	document.body.scrollTop = tgt; // For Safari
    document.documentElement.scrollTop = tgt; // For Chrome, Firefox, IE and Opera
}

/*=======================================
// Clickable Ranks
=======================================*/
document.addEventListener("DOMContentLoaded", function() {
	document.querySelectorAll('[data-role="rank-image"]').forEach(function(item) {
		let img = item.innerHTML;
		item.innerHTML = '<a href="https://mlpforums.com/faq/site-problems/user-and-staff-ranks-r116/" data-ipsdialog>' + img + '</a>';
	})
})

 

The logs are quietly dumped into the browser debug console like this:

2023-02-26_21-01-21.png.8db25664b350963ed597af5bfe897497.png

If there are some errors between these, that means something sucks. :P Oh and there surely will be some errors at the top in the console, these aren't mine, MLPF itself generates some lmao.

Update the JS code and tick both options off and let me know how it works.

Edited by Rikifive
typo
  • Brohoof 1
Link to comment
Share on other sites

@Rikifive

I use the browser called Vivaldi and it seems to be working just fine. When I tried putting the code in initially, it caused my browser to randomly close itself and it took multiple attempts to get it in without the browser closing out.

  • Brohoof 1
Link to comment
Share on other sites

@Rikifive I can confirm the post list works properly now. As for the unreliable behavior, it just doesn't apply any changes to a page (both JS and CSS) sometimes. It seems random, because when I open the same page again, the result can be different.

Here are the logs when loading the same page. First time it didn't succeed, second time it did.

Clipboard05.thumb.png.8bedf6be79f0276a82971d5c3a439503.pngClipboard07.thumb.png.021249b4b9e79b49fd14409154891c7d.png

 

Edited by Silly Druid
  • Brohoof 2
Link to comment
Share on other sites

Update: It has a chance to fail only when opening a page in a new tab (I think it's about 50% chance).

It always works properly when refreshing a page or opening another page in a tab when there was already an MLPF page, or even when right-clicking on a bookmark to open it in a new tab.

Edit: Also it seems to always fail when right-clicking on a link on a page to open it in a new tab, if I let it load fully before switching to that tab.

The difference between right-clicking on a bookmark or on a link to open it in a new tab is that in case of a bookmark it switches to that tag immediately, and in case of a link it doesn't. So, in conclusion, the user's focus on a tab or lack thereof seems to be an important factor here...

Edited by Silly Druid
  • Brohoof 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Join the herd!

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...