Development Changes Day 2

New changes are the elegant inbox list (still fixing the colors)
New name rainbow addition to the Moderators and Administrator.
Hover Card - When you hover on a name there should be a card that will show you the user's information.
Name, post and the date when he/she joined the forum. I've had a long time understanding how this works since I haven't got any experiences on coding.

A quick tip on editing yours for your own forum.
The original code was from a forumotion post linked [You must be registered and logged in to see this link.].

Code:




/*
 *  Application: Hovercard
 *  Date: 04/06/2018
 *  Version: 2.004062018
 *  Copyright (c) 2018 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
*/
(function() {
    hovercard = {
        initialize: function() {
            $(function() {
                hovercard.setupHovercard();
            });
        },
        loading: "Loading...",
        sendPm: "Send PM",
        profile: "Profile",
        posts: "Posts",
        reputation: "Reputation",
        join: "Join Date",
        findContent: "Find Content",
        pmImg: "https://i62.servimg.com/u/f62/18/12/37/46/mail0210.png",
        profileImg: "https://i62.servimg.com/u/f62/18/12/37/46/user-111.png",
        findImg: "https://i62.servimg.com/u/f62/18/12/37/46/search10.png",
        hovercard: $("<div>", {
            class: "hovercard"
        }),
        myCSS: '<style type="text/css">' +
            '.hovercard {' +
            '  display: none;' +
            '  position: absolute;' +
            '  font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;' +
            '  margin-top: 8px;' +
            '  word-wrap: break-word;' +
            '  color: #555;' +
            '  font-size: 13px;' +
            '  padding: 4px;' +
            '  border-radius: 4px;' +
            '  -webkit-border-radius: 4px;' +
            '  -moz-border-radius: 4px;' +
            '  text-decoration: none' +
            '  z-index: 50;' +
            '  background-color: #fff;' +
            '  -webkit-box-shadow:  rgba(0, 0, 0, 0.4) 0px 3px 4px;' +
            '  -moz-box-shadow:  rgba(0, 0, 0, 0.4) 0px 3px 4px;' +
            '  box-shadow:  rgba(0, 0, 0, 0.4) 0px 3px 4px;' +
            '}' +
            '.hovercard ul {' +
            '  margin-left: 100px;' +
            '  list-style: none;' +
            '  display: table;' +
            '  table-layout: auto;' +
            '  border-collapse: separate;' +
            '  border-spacing: 0;' +
            '}' +
            '.hovercard ul, .hovercard .hovercard-field {position: relative;}' +
            '.hovercard li {padding: 2px 0;}' +
            '.hovercard .hovercard-field {width: 100px;}' +
            '.hovercard .hovercard-field, .hovercard .hovercard-value {display: table-cell;}' +
            '.hovercard:before {' +
            '  width: 0;' +
            '  pointer-events: none;' +
            '  left: 0;' +
            '  right: 0;' +
            '  margin-left: auto;' +
            '  margin-right: auto;' +
            '  content: "";' +
            '  position: absolute;' +
            '  pointer-events: none !important;' +
            '  bottom: 100%;' +
            '  border-width: 10px;' +
            '  border-style: solid;' +
            '  border-color: transparent transparent #fff transparent;' +
            '}' +
            '.hovercard h3 {' +
            '  background-color: #353c41;' +
            '  border-radius: 4px 4px 0 0;' +
            '  -webkit-border-radius: 4px 4px 0 0;' +
            '  -moz-border-radius: 4px 4px 0 0;' +
            '  margin-bottom: 5px;' +
            '  padding: 13px;' +
            '  text-align: center;' +
            '}' +
            '.hovercard h3 a {' +
            '  font-size: 17px;' +
            '  text-decoration: none;' +
            '  color:#fff;' +
            '}' +
            '.hovercard h3 a:hover {color: #479fcf;}' +
            '.hovercard .hover-photo {' +
            '  width: 68px;' +
            '  height: 68px;' +
            '  background-color: #FFFFFF;' +
            '  border: 1px solid #aaa;' +
            '  border-radius: 150px;' +
            '  -webkit-border-radius: 150px;' +
            '  -moz-border-radius: 150px;' +
            '  -webkit-box-shadow:  rgba(0, 0, 0, 0.4) 0px 2px 3px;' +
            '  -moz-box-shadow:  rgba(0, 0, 0, 0.4) 0px 2px 3px;' +
            '  box-shadow:  rgba(0, 0, 0, 0.4) 0px 2px 3px;' +
            '  float: left;' +
            '  padding: 2px;' +
            '}' +
            '.hovercard .hovercard-footer {' +
            '  background-color: #ddd;' +
            '  border-radius: 0 0 4px 4px;' +
            '  -webkit-border-radius: 0 0 4px 4px;' +
            '  -moz-border-radius: 0 0 4px 4px;' +
            '  margin-top: 5px;' +
            '  padding: 13px;' +
            '  text-align: right;' +
            '}' +
            '.hovercard .hovercard-button {' +
            '  background-color: #EEEEEE;' +
            '  background-image: linear-gradient(#F5F6F6, #E4E4E3);' +
            '  border-color: #999999 #999999 #888888;' +
            '  border-style: solid;' +
            '  border-width: 1px;' +
            '  color: #555;' +
            '  text-decoration: none;' +
            '  margin: 5px;' +
            '  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 #FFFFFF inset;' +
            '  font: bold 11px tahoma, verdana, arial, sans-serif;' +
            '  padding: 5px 6px 5px 8px;' +
            '  text-align: center;' +
            '}' +
            '.hovercard .hovercard-button:hover {color: #444;border-color: #888888 #888888 #777777;}' +
            '.hovercard .hovercard-button img {vertical-align: bottom;}' +
            '</style>',
        hovercardWidth: 280, // Set hovercard width (px)
        openingInterval: 400, // 0.4 seconds to open the hovercard
        closingInterval: 400, // 0.4 seconds to close the hovercard
        content: function(user, url, id, photo, msg, rep, reg) {
            hovercard.hovercard.html(
                '<div class="hovercard-inner">' +
                '    <h3>' +
                '        <img src="' + photo + '" class="hover-photo" alt>' +
                '        <a href="/profile?mode=viewprofile&u=' + user + '">' + user + '</a>' +
                '    </h3>' +
                '    <ul>' +
                '        <li>' +
                '            <span class="hovercard-field"><strong>' + hovercard.posts + '</strong></span>' +
                '            <span class="hovercard-value">' + msg + '</span>' +
                '        </li>' +
                '        <li>' +
                '            <span class="hovercard-field"><strong>' + hovercard.reputation + '</strong></span>' +
                '            <span class="hovercard-value">' + rep + '</span>' +
                '        </li>' +
                '        <li>' +
                '            <span class="hovercard-field"><strong>' + hovercard.join + '</strong></span>' +
                '            <span class="hovercard-value">' + reg + '</span>' +
                '        </li>' +
                '    </ul>' +
                '</div>' +
                '<div class="hovercard-footer">' +
                '    <a href="/privmsg?mode=post&u=' + id + '" class="hovercard-button" title="' + hovercard.sendPm + '">' +
                '        <img src="' + hovercard.pmImg + '">' +
                '    </a>' +
                '    <a href="/profile?mode=viewprofile&u=' + user + '" class="hovercard-button" title="' + hovercard.profile + '">' +
                '        <img src="' + hovercard.profileImg + '">' +
                '    </a>' +
                '    <a href="/spa/' + user + '" class="hovercard-button" title="' + hovercard.findContent + '">' +
                '        <img src="' + hovercard.findImg + '">' +
                '    </a>' +
                '</div>'
            );
        },
        fadeOutHovercard: function() {
            timeout = setTimeout(function() {
                hovercard.hovercard.fadeOut(hovercard.closingInterval, function() {
                    $(this).html(hovercard.loading);
                });
            }, 1500);
        },
        setupHovercard: function() {
            // Inserting CSS before page body
            $(hovercard.myCSS).insertBefore("body");
            // Inserting element hovercard append to page body
            $(hovercard.hovercard).appendTo("body");
            // Set hovercard width
            $(hovercard.hovercard).width(hovercard.hovercardWidth);
 
            var timeout,
                JSONuser = [];
 
            $(document).on("mouseenter", "a[href^='/u']", function(e) {
                if ($(this).attr("href").split(/[\d,]+/)[1]) return; // If it is user profile
                if (timeout) clearTimeout(timeout); // Clear time out
                // Hovercard position
                var pos = {
                    "top": $(this).offset().top + $(this).outerHeight(),
                    "left": $(this).offset().left - (hovercard.hovercard.width() / 2) + ($(this).outerWidth() / 2)
                };
                // Positioning and displaying hovercard
                hovercard.hovercard.html(hovercard.loading).css(pos).fadeIn(hovercard.openingInterval);
 
                var urlUser = $(this).attr("href"),
                    idUser = urlUser.match(/\d+/).toString(),
                    stored = sessionStorage.getItem("hovercard-" + idUser);
 
                if (!stored) {
                    $.ajax({
                        type: "GET",
                        url: urlUser + "?change_version=punbb",
                        success: function(data) {
                            var user = $(data).filter("title").text().split("- ")[1],
                                photoUser = $("#profile-advanced-right .module:first .main-content img", data).attr("src"),
                                msg = $("#field_id-6 dd", data).text(),
                                rep = $("#field_id-14 dd", data).text(),
                                reg = $("#field_id-4 dd", data).text();
                            JSONuser = [{
                                name: user,
                                url: urlUser,
                                photo: photoUser,
                                id: idUser,
                                message: msg,
                                reputation: rep,
                                register: reg
                            }];
                            var dataAsJsonString = JSON.stringify(JSONuser);
                            sessionStorage.setItem("hovercard-" + idUser, dataAsJsonString);
                            hovercard.content(user, urlUser, idUser, photoUser, msg, rep, reg);
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            if (jqXHR.status == 500) {
                                console.log("Internal error: " + jqXHR.responseText);
                            } else {
                                console.log("Unexpected error.");
                            }
                        }
                    });
                    return;
                }
 
                JSONuser = $.parseJSON(stored);
                $.each(JSONuser, function(i, val) {
                    if (val.id == idUser) hovercard.content(val.name, val.url, val.id, val.photo, val.message, val.reputation, val.register);
                });
            }).on("mouseleave", function(e) {
                hovercard.fadeOutHovercard();
            });
 
            hovercard.hovercard.on("mouseenter", function(e) {
                if (timeout) clearTimeout(timeout); // Clear time out
            }).on("mouseleave", function(e) {
                hovercard.fadeOutHovercard();
            });
        }
    };
    hovercard.initialize()
})();


To customize it I have a couple of "save points"/mark per line


33 margin for the box to go down
35 post reputation and etc font color
43 background of the card but not the arrow sticking out.[You must be registered and logged in to see this link.]
73 changes arrow color (aka the one I've mentioned ^)
76 this is the Header
89 hover name [You must be registered and logged in to see this link.]
105 footer color the one at the bottom
115 gradient buttons (mail, profile, and content)
116 buttons border color

And so far that's all I've got.
I probably missed a couple but just leave me a message if you're lost. I'll try to reply ASAP.

I'm having problems trying to keep the preview option but for now, let's leave it as it is. The important part is that we can use the forums.

Major Double Check
I know that the hover box looks out of place when you check a name by hovering it below the OP of the topic. That's due to how the forum is laid out. I can simply fix it by expanding the margins but I am still not quite so sure about my theory. I would probably make a test forum in the future.