Jump to content
Banner by ~ The Wife of Hawks

Recommended Posts

(edited)

 -and by "mods" I don't mean "moderators" but "modificationse-twiwth.png.5878ad773cfe0efaf9dc8dc75763160a.png

VERSION
JS - v1.2.0 (14.10.2021)
CSS - v1.2.0 (14.10.2021)

 

// Introduction

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

 

Well look no further! The solution is here! ... Maybe.. I don't know. e-twiwth.png.5878ad773cfe0efaf9dc8dc75763160a.png

 

Seriously though, about half a year ago, I wrote a bunch of code to modify MLPF a bit to my own likings, and initially I didn't intend to release it for public use, so to speak. The reason is, that my code probably isn't optimized well, but it just works for me and that's all what I cared about. It was more of a practice, than writing legit modifications. I've been browsing forums with these mods for quite a while now, and personally I can't live without them, so to speak. I've been thinking, that I guess it won't hurt to put it here, perhaps someone will have some use for that.

Initially I had features separately, but I've merged it into a single modification for everyone's convenience.

So let's see what Quality of Life improvements it brings, shall we? :darling:

 

 

 

// Features

 

1. DARK MODE

Oh yes, one of the most requested features here, and not only here. I ran a poll outside MLPF and the results speak for themselves:

2021-09-09_03-20-24.thumb.png.2ab764cc9ce1caebf1185215487bdffc.png

So Dark Mode it is, why not, I adjusted the colors and provided few minor tweaks to make it all look alright.

 

HOME PAGE:
2021-10-03_02-25-31.thumb.png.989966db9d38698a0b036643148256c4.png

 

TOPIC LIST:
2021-10-03_02-26-03.thumb.png.4d491741d050f93ea6c9851cd8880398.png

 

TOPIC:
2021-10-03_02-27-43.thumb.png.80cf7a4958c81a303462028a8dce0ea3.png

 

TEXT EDITOR:
2021-10-03_02-28-55.thumb.png.26d58ba1cc5ab38a8878937655c41e73.png

 

PROFILE PAGE
2021-10-03_02-29-46.thumb.png.26f92b0a0722e2bb37b2ce66d7c8f3e4.png

 

 

 

 

2. STICKY NAVIGATION BAR

Now this is what I personally wanted the most. Wanting to check something in the profile while being in the middle of the thread / status update feed? I either had to scroll all the way up or duplicate the tab, wait for it to load, and then go to desired page. No more running all over the place, the navigation bar is always where it is needed, at the top of the page.

Additionally, it's loaded with new buttons to make navigation even more convenient.

 

Home - Takes to the home page

Status Updates - Takes to status update feed

Forums - A list of all main forums

2021-10-03_02-56-58.png.f266820bf6e41a37e6531f8a16a1e035.png

Favorites - A customizable list of links

2021-10-03_02-58-09.png.0e109b78376e92c106ac70b8ee8c5798.png

and two buttons after the separator:

2021-10-03_02-57-53.png.df9eb214225920c846d7d871c7ea3774.png  & 2021-10-03_02-57-59.png.5b207d45f5e82db4a2873e7e417adee0.png

 

How to configure FAVORITES:

Spoiler

At the beginning of the JS (JavaScript) code, you'll see this:

2021-10-03_03-04-42.png.3f09ca99537bbb970d37e42099025641.png

The formatting goes as follows:

If you'll put one argument like this:





["SECTION NAME"],

 

~it will create an unclickable section.

Providing two arguments like this:





["BUTTON NAME", "LINK"],

 

~will create a clickable button.

 

Be careful with this formatting, these brackets, quotes and commas are important. One thing to note is, that each line NEEDS A COMMA AT THE END, EVERY BUT THE LAST ONE, just like if you'd be listing items, for example:

[cookie],
[muffin],
[tea]

^ no comma in the last entry alright

Take a closer look at the provided-by-default configuration to get the idea. If you'll run into troubles, of course feel free to ask for help! Will be happy to assist. :BrightMacContent:

 

 

 

3. POST NAVIGATION LIST

A pretty handy overview of posts displayed on the page.

2021-10-03_03-16-51.png.d6101ad0061967e1c1d4e3c4967f1dad.png

- Lists all posts on the page by authors
- Shows the currently viewed post
- Each entry on the list is clickable and will "jump" to the corresponding post when doing so
- If there is more than one page, displays the current page and allows to switch them there as well
2021-10-03_03-20-35.png.4bcd8dfa9f169a84bf1b41f0f6f2ec82.png

 

- Support for answers in Site Questions
0Byvznv.png


- Support for moderated (red) and selected (yellow) posts for moderators
2021-10-03_03-22-30.png.993212fc358c1b80db76500486a93170.png

 

- Limited support for smaller displays
> If there won't be enough space horizontally, the list will shrink itself to profile pictures only and will snap to the right edge of the screen.
> Currently there's no support for lack of vertical space however. List items may end up being outside the screen.
n0JEpZN.png

 

VIDEO PREVIEW:

 

4. CLICKABLE USER RANKS IN POSTS

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

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

2021-10-14_03-56-29.png.e01567fac52615b14e919c4536cf1743.png2021-10-14_03-57-02.thumb.png.8ef10b882e06a51629312e0a09f267eb.png

 

 

// Installation & Requirements

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

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

If I would be asked what I use:
Personally I use a Chrome extension called "User JavaScript and CSS". An extension with a straightforward name, that perfectly describes what it does - which is allowing user to inject JS and CSS to any site. I searched, I found, I installed - no complaints, this one works perfectly. You can find it in the Chrome Web Store:
https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld
 

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

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

1. Install the extension

2. Go to its settings (should appear in the upper right corner)

2021-10-03_03-38-39.png.6cf6f1e57456f41a202a10696764e97c.png

3. Add a new site you want to modify

2021-10-03_03-39-14.png.039eddec8f8a11a3238c9c946bd62b0c.png

4. Apply my modification in these simple 5 steps (I'll post the JS and CSS codes you have to paste there below)

2021-10-03_03-43-57.thumb.png.2b6fd7db517835b73d497f505c43ec87.png

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

 

JAVASCRIPT CODE // COPY ALL AND PASTE IN THE LEFT WINDOW

Spoiler


"use strict"; // leave it be
/*=======================================
// MLPF MASTERMOD (JS) v1.2.0
// Author: Rikifive
//=====================================*/

/*=======================================
// Sticky UserNav
=======================================*/
document.addEventListener("DOMContentLoaded", function() {
	/*====================================================
	| CONFIGURATION
	====================================================*/
	let fav = [
	// FAVORITES - Configure your custom links here.
		["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 CONFIGURATION
	====================================================*/
	];
	let nav = document.getElementById("elUserNav");
	if (!nav) { return; }
	setupUserNav(nav);
	addNavBtns(nav, fav);
	updateScroll();
})

// 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, fav) {
	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 = [
		{ name: "All About Ponies" },
		{
			name: "Start Here!",
			link: "https://mlpforums.com/forum/211-start-here/"
		},
		{
			name: "My Little Pony",
			link: "https://mlpforums.com/forum/1-my-little-pony/"
		},
		{
			name: "Octavia's Hall",
			link: "https://mlpforums.com/forum/4-octavias-hall-fan-art-more/"
		},
		{ name: "Roleplaying, Fun & Discussions" },
		{
			name: "Roleplay World",
			link: "https://mlpforums.com/forum/21-roleplay-world/"
		},
		{
			name: "Events",
			link: "https://mlpforums.com/forum/176-events/"
		},
		{
			name: "Beyond Equestria",
			link: "https://mlpforums.com/forum/5-beyond-equestria/"
		},
		{ name: "MLP Forums Meta" },
		{
			name: "Canterlot",
			link: "https://mlpforums.com/forum/20-canterlot-mlp-forums-meta/"
		},
		{ name: "More" },
		{
			name: "Poniverse",
			link: "https://mlpforums.com/forum/67-poniverse/"
		},
		{
			name: "Conventions",
			link: "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].link) {
				opt.classList.add("ipsMenu_item");
				opt.appendChild(a = document.createElement("a"));
				a.href = section[i].link;
				a.appendChild(document.createTextNode(section[i].name));
			} else {
				opt.classList.add("ipsMenu_title");
				opt.appendChild(document.createTextNode(section[i].name));
			}
		}
	
	// 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 < fav.length; i++) {
			ul.appendChild(opt = document.createElement("li"));
			if (fav[i][1]) {
				opt.classList.add("ipsMenu_item");
				opt.appendChild(a = document.createElement("a"));
				a.href = fav[i][1];
				a.appendChild(document.createTextNode(fav[i][0]));
			} else {
				opt.classList.add("ipsMenu_title");
				opt.appendChild(document.createTextNode(fav[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", "lastExtraSep");
}

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() {
	if (document.body.getAttribute("data-pagecontroller") != "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";
	
	updatePostNav();
})

if (document.body.getAttribute("data-pagecontroller") == "topic") {
	window.addEventListener('scroll', updatePostNav);
}

function updatePostNav() {
	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;
		for (let i=itemsCnt; diff>0; 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
	var wpos = window.pageYOffset+250;
	var done = false;
	var 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/" title="View Rank List" data-ipsdialog>' + img + '</a>';
	})
})

 

 

CSS CODE // COPY ALL AND PASTE IN THE RIGHT WINDOW

Spoiler


/*=======================================
// MLPF MASTERMOD (CSS) v1.2.0
// Author: Rikifive
//=====================================*/

/*=======================================
// DARK MODE
=======================================*/

#ipsLayout_body {
	background: #222 !important;
}

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

/* CKEDITOR ADJUSTMENTS */
.ipsApp .cke_top {
	background-color: #fed;
	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;
}


body {
	--box--boxShadow: 0 1px 3px rgb(255 100 175), 0 1px 2px rgb(255 100 0);
	--box--backgroundColor: rgb( var(--theme-area_background_reset) );
	
	--positive-dark: #21b744;
	--positive-light: #456550;
	
	--intermediate-light: #555530;
	
	--theme-active_input_border: 255, 165, 225;
	
	--theme-area_background: 185, 80, 90;
	--theme-area_background_dark: 35, 13, 18;
	--theme-area_background_light: 90, 80, 84;
	--theme-area_background_reset: 70, 70, 70;
	--theme-brand_primary: 255, 50, 140;
	--theme-button_bar: 100, 100, 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-primary_button: 255, 100, 110;
	--theme-primary_button_font: 255, 250, 245;
    
	--theme-selected: 100, 100, 90;
    
	--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; background:#663344; }
	50% {top:0; background:#da6595; }
	100% {background:#333; }
}

#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: #333;
	border-bottom: 1px solid #f78;
	box-shadow: var(--box--boxShadow);
	animation-name: stickyNavBackground;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
}

#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;
}



/*=======================================
// 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;
	}
}

 

 

 

 

// Version History

Spoiler

// VERSION HISTORY

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

JAVASCRIPT AND CSS UPDATE

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

- dark theme fixes/adjustments for Friends list

 

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

JAVASCRIPT AND CSS HOTFIX

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

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

 

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

JAVASCRIPT AND CSS UPDATE

- added support for Q&A system in Site Questions

- added Dark Theme Support for Code Blocks

 

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

- initial release

 

 

 

// Reporting Bugs

I saw some users report issues with the dark themes they use, forgetting MLPF doesn't have a native dark theme, that they installed these on their own and that what they report has nothing to do with MLPF itself. So let me say this:

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

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

2021-10-03_03-46-49.png.765f6b72400edb6fc01eb0aa9c946105.png

 

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

 

Troubles? Questions? Ask away! :BrightMacContent:

e-twibigbrain.png

Edited by Rikifive
v1.2.0 update
  • Brohoof 4
  • Excited 1
  • Hug 1
Link to post
Share on other sites
Badges

6 hours ago, Starforce said:

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

I was thinking this might interest you. :BrightMacContent:

I hope it will serve you well! :darling:

5 hours ago, Pandora said:

That’s really cool!

well done riki and thank you! 

Thank you, I appreciate that! R2zWBpB.png

5 hours ago, Astral Soul said:

Amazing!

Thank you for all of your hard work :>

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

5 hours ago, cuteycindyhoney said:

This is way over my head!

:blink:

mindblowing I know :mlp_nom: jk

  • Brohoof 1
  • Hug 1
Link to post
Share on other sites
Badges

  • Rikifive changed the title to MLP FORUMS MODS! (Dark Theme And Stuff)

// UPDATE


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

 

 

// What's New

 

1

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

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

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

2021-10-05_04-51-32.thumb.png.24def64767b2e5eea8707f265805386c.png

 

2

Added Dark Theme Support for Code Blocks.

Code Block Previously:

2021-10-05_05-00-36.png.562436e580cd281e16d452e1cd6b09fd.png

Code Block Updated:

2021-10-05_05-01-42.png.fe673161b00a8f5efa833f8e9a1268c2.png

Code Editor Previously:

2021-10-05_05-01-01.thumb.png.b5178ed69e23430e35bd411a863bad43.png

Code Editor Updated:

2021-10-05_05-01-53.thumb.png.62bacfd61c6cb00696265c39349d059c.png

 

BUG FIXES

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

 

 

// How To Update

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

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

 

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

  • Hug 1
Link to post
Share on other sites
Badges

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

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

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

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

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

  • Brohoof 1
Link to post
Share on other sites
Badges

@Rikifive

For your knowledge I use the OperaGX browser. It didn't look like that on the dark mode. I will show you what it would look like for me normally. It's not an extension I would use, but a built in feature of the browser. I see what you mean.

unknown.png?width=1326&height=675

unknown.png?width=974&height=676

  • Brohoof 1
Link to post
Share on other sites
Badges

(edited)

@Starforce Hmm I checked the post you've mentioned, and it does have color overwrites all over the place
2021-10-05_06-36-42.png.a98d69c397b629fec355b0063173c839.png

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

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

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

 

---

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

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

JAVASCRIPT AND CSS HOTFIX

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

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

yup:

Spoiler

2021-10-05_06-57-41.png.b7e570c09f6ec2d7541c5be9a2a6c232.png

 

Now I need to go to sleep. :P 

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

@Rikifive

Ah interesting. Seems to be the case as in that post. I figured I'd bring it up since I know the user who made that thread personally and I was showing him the modifications you have posted here and he remarked upon it so I wanted to get an answer as per that. 

Is this bar up here supposed to be a dark brown color? It seems a bit out of place in coloration.

unknown.png

  • Brohoof 1
Link to post
Share on other sites
Badges

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

Like, look at this part with white background:

2021-10-05_07-26-33.png.9b62c116853aaf22bc228fe2393fb20b.png

It's actually there in the formatting-

2021-10-05_07-26-40.png.4f82324775f9e1a1ecd7a4a6247e3765.png

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

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

 

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

 

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

 

 

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

2021-10-05_07-43-32.thumb.png.094f9c369061935fe4203efd2d9b432e.png

 

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

  • Pondering 1
Link to post
Share on other sites
Badges

@Rikifive

If anything at the very least it gives you something to think about. I don't know much about this sort of thing so I can only comment on so much from what you say. Thank you for looking into it. I had the dark mode forced, so I changed that setting and it looks as seen in your post. 

  • Brohoof 1
Link to post
Share on other sites
Badges

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

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

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

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

  • Pondering 1
Link to post
Share on other sites
Badges

@Rikifive

Glad I could be of help and help you confirm something when it comes to the work you do here on the forums. Do you have any ideas or plans for what you will be adding to the future of this? Maybe you could make a few different dark themes for people to choose from.

  • Brohoof 1
Link to post
Share on other sites
Badges

(edited)

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

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

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

...but imagine luna theme, for example  e-eyeswoke.png.e442d218a54e0bafe7357923034d3b77.png

2021-10-05_08-28-02.thumb.png.98a2723e9f30e0b939a29fab790d3ba8.png

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

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

Edited by Rikifive
  • Excited 1
Link to post
Share on other sites
Badges

// UPDATE


JS - v1.2.0
CSS - v1.2.0

 

 

// What's New

 

1

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

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

2021-10-14_03-56-29.png.e01567fac52615b14e919c4536cf1743.png

2021-10-14_03-57-02.thumb.png.8ef10b882e06a51629312e0a09f267eb.png

 

 

 

BUG FIXES

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

2021-10-14_04-13-53.png.d40de04561f5d38273c9416df1ac6ea8.png

 

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

 

 

// How To Update

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

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

 

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

  • Brohoof 1
Link to post
Share on other sites
Badges

3 minutes ago, Sparklefan1234 said:

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

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

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

 

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

  • Brohoof 1
Link to post
Share on other sites
Badges

2 minutes ago, Rikifive said:

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

Even if not many would use it, I most certainly do! Took some getting used to, but it is now something that I am fully immersed in.

  • Yay 1
Link to post
Share on other sites
Badges

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...