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

[Rikifive 24,183]

@Props ValRoa Thanks!  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. 

Thank you for your interest! 

[Jeric 46,851]

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 

[Rikifive 24,183]

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.  

[Astralshy 26,625]

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

[Silly Druid 6,969]

I'm testing the Luna theme and I'm loving it!

I'm using the "Code Injector" extension for Firefox, and it seems to be working fine.

Edited February 26, 2023 by Silly Druid

[Rikifive 24,183]

@Astral Soul Happy to hear that!  You're welcome! 

@Silly Druid Awesome! Glad to hear that!  

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.  

[Silly Druid 6,969]

1 hour ago, Rikifive said:

@Astral Soul Happy to hear that!  You're welcome! 

@Silly Druid Awesome! Glad to hear that!  

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.  

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 February 26, 2023 by Silly Druid

[Silly Druid 6,969]

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 February 26, 2023 by Silly Druid

[Rikifive 24,183]

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

[Rikifive 24,183]

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

If there are some errors between these, that means something sucks.  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 February 26, 2023 by Rikifive
typo

[Silly Druid 6,969]

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

 

Edited February 26, 2023 by Silly Druid

[Silly Druid 6,969]

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 February 26, 2023 by Silly Druid

[Rikifive 24,183]

@Silly Druid From the first screenshot I can say, that the code was run, as the event triggered by scrolling was correctly set up and the scrolling successfully triggers the update function. That event is added after the object is created, so apparently that code was processed, but for some reason it didn't create the object itself.

It's really hard to tell what is going on though, I cannot reproduce the issue in Chrome with the extension you use. I opened tons of topics at once with middle clicking, right clicking and every single page had everything initialized properly, no issues whatsoever.

At the beginning you're getting some errors related to document.head, I never get these myself. Not that it may be related, but it's odd regardless. If there's a difference between opening a page in the current tab and opening it in a new tab, maybe there's something, that Firefox does to perhaps optimize things, that apparently conflict with how the extension injects code? Chrome just simply fully loads the entire page in background if opened in a new tab you're not in.

...But wait, does the dark theme also refuse to load in this scenario? The site remains completely unchanged? If even CSS doesn't load properly, then there must be a problem with the extension itself and how it works in Firefox. With JS, my plugin requires some of the site elements to be loaded first before it can create objects that are powered by these (like the topic and its posts must be loaded for the post list to catch them and create a list), so if that alone was an issue, I could try to look around and optimize timing, but with CSS it doesn't really matter and there's no way for me to work around that.

JS and CSS are two different things, even if I pack JS code with errors, the entire JS may simply refuse to do anything, but CSS (dark theme) will continue to work correctly no matter what. So I fear I can't really do anything.

Perhaps a different extension would work better, but I honestly have no idea, as I'm not using Firefox. :c

[Rikifive 24,183]

@Silly Druid Well I kinda managed to recreate the issue if I set "Dostęp do stron" to "po kliknięciu". Then, whenever I opened a new tab the extension didn't work at all, as it required me to click its icon to inject code. Navigating in the same tab kept it running.

Setting it back to this:

Made the extension work correctly at all times.

But still, even if nothing worked for you, some logs were still printed anyway, so the extension had to be active... In my case it completely paused the extension and no logs were printed at all, so I already can tell it's not it. There was hope...

 

Either way, perhaps Firefox has things a bit differently, so try looking at the settings to see if there's anything potentially related.

 

Otherwise no idea. I had settings as they were by default after extension installation and it just works for me.

[Silly Druid 6,969]

@Rikifive

There is no such option in Firefox.

I tried many other extensions, and finally found one that works. It's called "Man in the Middle". Both JS and CSS work without any problems. I recommend it to anyone who wants to run this mod in Firefox.

Thanks for all the help you provided!

Edited February 27, 2023 by Silly Druid

[Rikifive 24,183]

@Silly Druid Excellent! Welcome to the cool club then!  

I'll update OP sometime later to mention the extension you found as a compatible option for Firefox users, thanks! c:

[Ice Princess Silky <3 13,893]

Ahh this is just TOO endearing!! I love it so much!!

[Rikifive 24,183]

 // UPDATE

JS - v1.5 (NEW!)
CSS🌙LUNA - v1.5 (NEW!)
CSS☀CELESTIA - v1.5 (NEW!)
This time BOTH, JS and CSS code have been updated.

 

// What's New

 

1. COMPLETE THEME OVERHAUL

NEW PONIFIED THEMES!

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

Spoiler

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

Spoiler

 

And with the new themes come tons of visual changes all over the place~

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

 

2. RANK LEVEL IN NAVBAR

Now you can view your rank and the progress to the next level in the navbar!

 

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

 

 

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

 

To get the update, please head to OP.

Scripts are uploaded as .txt files,

simply open them in notepad and copy&paste code according to instructions

 

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

DISCLAIMER

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

[Rikifive 24,183]

 // UPDATE

JS - v1.5.1 (NEW!)
CSS🌙LUNA - v1.5.1 (NEW!)
CSS☀CELESTIA - v1.5.1 (NEW!)
This time BOTH, JS and CSS code have been updated.

 

// What's New

 

1. 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
  • Switching post pages in topics no longer makes the entire page refresh, so after the new page with posts is loaded, just scroll for the post list to update itself with new entries
• fixed User NavBar colliding with announcements appearing on top of the page
• added stylization for Live Messenger plugin
  • The Live Messenger plugin is currently during the testing period, available only to staff. This patch is just to make my theme ready in case Live Messenger is released for everyone.

 

 

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

HOW TO UPDATE

To get the update, please head to OP.

Scripts are uploaded as .txt files,

simply open them in notepad and copy&paste code according to instructions

 

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

DISCLAIMER

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

[Espy Vibe 4,280]

WHy didnt you tell me about this sooner? This is cool! 

[Rikifive 24,183]

2 hours ago, Trot Shuffle said:

WHy didnt you tell me about this sooner? This is cool! 

You didn't ask  jk

I hope it serves you well, should you decide to give it a try.

[Cash In 22,307]

How did I not know about this until now?? This is incredible.