DiscussionCategoryStyleExtended

pluginFunctionsDiscussions.css

span.MItem.Category
{
    display: none
}

div.CategoryLabelContainer
{
	float: left;
	display: flex;
	height: 64px;
	min-height: 64px;
	width: 64px;
	margin-top:  -10px;
	margin-left: -15px;
	margin-right: 10px;
	margin-bottom: -15px;
    /* padding-left: inherit;
	padding-right: inherit; */
	padding-top: inherit;
	padding-bottom: inherit;
    
}
a.CategoryLabel
{
	width: inherit;
	text-align: center;
    color: white;
	font-weight: bold;
    font-size: 8px;
	word-spacing: 64px;
    
	line-height: normal;
	overflow-wrap: break-word;
	
	margin: auto;
    /* padding-left: 8px; */
	/* padding-right: 8px; */
	/* padding-top: inherit; */
	/* padding-bottom: inherit; */
    
    /* background-color: #333f67; */
}
a.CategoryLabel center
{
	align-self: center;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
}
	
/* Specific overrides */

div.CategoryLabelContainer[id="General Chat"]
{
	background-color: #464545;
}
div.CategoryLabelContainer[id="User Groups"]
{
	background-color: #8ac6ff;
}
div.CategoryLabelContainer[id="Professional Trade"]
{
	background-color: #ac7f42;
}
div.CategoryLabelContainer[id="Projects"]
{
	background-color: #553374;
}
div.CategoryLabelContainer[id="Resources"]
{
	background-color: #451c36;
}
div.CategoryLabelContainer[id="Tutorials"]
{
	background-color: #8d4e76;
}
div.CategoryLabelContainer[id="Design"], div.CategoryLabelContainer[id="Art & Design"]
{
	background-color: #b30f4b;
}
div.CategoryLabelContainer[id="Audio"]
{
	background-color: #d3aa39;
}
div.CategoryLabelContainer[id="GUI"]
{
	background-color: #589f60;
}
div.CategoryLabelContainer[id="2D"], div.CategoryLabelContainer[id="3D"]
{
	background-color: #223688;
}
div.CategoryLabelContainer[id="Programming"], div.CategoryLabelContainer[id="Shaders"]
{
	background-color: #0b6655;
}
div.CategoryLabelContainer[id="Exporting"]
{
	background-color: #154f72;
}
div.CategoryLabelContainer[id="Forum Chat"]
{
	background-color: #546a79;
}
div.CategoryLabelContainer[id="Archival"], div.CategoryLabelContainer[id="Moderation"], div.CategoryLabelContainer[id="Spam"]
{
	background-color: #5c1e1e;
}

pluginFunctionsDiscussions.js

// Injects HTML so the discussion category for each discussion is before the profile picture.
// REALLY ugly javascript that needs refactoring, but it works! Need to check browser compatability at some point.
function inject_category_name_before_profile_picture()
{
    var discussion_html_list = document.getElementsByClassName("DataList Discussions")[0].children;
    
    for (var i = 0; i < discussion_html_list.length; i++)
        {
            var discussion_category = discussion_html_list[i].getElementsByClassName("MItem Category");
            if (discussion_category.length > 0)
                {
                    var element_URL = discussion_category[0].children[0].href;
                    var element_ID = discussion_category[0].children[0].innerHTML;
                    var element_HTML = "";
                    
                    element_HTML += '<div class="CategoryLabelContainer" id="' + element_ID + '">';
                    element_HTML += '<a class="CategoryLabel" href="' + element_URL + '" id="' + element_ID + '">';
                    element_HTML += '<center>' + element_ID + '</center>';
                    element_HTML += '</a>';
                    element_HTML += '</div>';
                    
                    discussion_html_list[i].insertAdjacentHTML('afterbegin', element_HTML);
                }
        }
}

$(document).ready(function() {
    inject_category_name_before_profile_picture();
});