Envato : Old Forum Style for New Forums

Readme.md

###Envato : Old Forum Style for New Forums The Envato Forum Homepage looks cluttered. So, I changed the Home Page of New Forums with CSS and a Bit of jQuery. See how it looks like

Related Forum URL

###How to Install (Chrome)

1. Install Stylish Extension
2. Intall Custom Javascript Extension
3. Copy JS & CSS Below and Paste Appropriately
4. Activate Both Styles & JS for URL https://forums.envato.com/
5. Refresh Forums

forum-script.js

// DomChange Function
var observeDOM = (function(){
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
        eventListenerSupported = window.addEventListener;

    return function(obj, callback){
        if( MutationObserver ){
            // define a new observer
            var obs = new MutationObserver(function(mutations, observer){
                if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
                    callback();
            });
            // have the observer observe foo for changes in children
            obs.observe( obj, { childList:true, subtree:true });
        }
        else if( eventListenerSupported ){
            obj.addEventListener('DOMNodeInserted', callback, false);
            obj.addEventListener('DOMNodeRemoved', callback, false);
        }
    }
})();

// Cut URL Part

function cutUrl(str) {
    var matched = str.match(/([^/]*\/){4}/);
    return matched ? matched[0] : str/* or null if you wish */;
}



var poster_avatar, 
poster_avatar_big, 
last_reply_avatar, 
last_reply_avatar_med,
started_by_name,
last_reply_name,
started_by_url,
last_reply_url;


//$('.topic-list thead tr').prepend('<th>Avatar</th>')

function showAvatars(thisObj) {
    poster_avatar = $('.posters a:first-child img', thisObj).attr('src');
    poster_avatar_big = poster_avatar.replace("25","80");
    last_reply_avatar = $('.posters .latest img', thisObj).attr('src');
    last_reply_avatar_mid = last_reply_avatar.replace("25","40");
    
    started_by_name = $('.posters a:first-child', thisObj).data('user-card');
    last_reply_name = $('.posters .latest', thisObj).data('user-card');
    
    started_by_url = cutUrl( $('.main-link .title', thisObj).attr('href') );
    last_reply_url =  $('.activity a', thisObj).attr('href');
    
    $('.main-link', thisObj).prepend('<div class="thread_thumbs"><img src="'+poster_avatar_big+'" class="thread-started-by"><img src="'+last_reply_avatar_mid+'" class="thread-last-reply"></div>');
   
   if ($(".topic-post-badges" , thisObj).length){
    $(".main-link .topic-post-badges" , thisObj).after('<div class="thread-quick-links"></div>');
} else {
     $(".main-link .title" , thisObj).after('<div class="thread-quick-links"></div>');
}

 $('.thread-quick-links', thisObj).append('<div><a href="'+started_by_url+'">Started</a> by ' + started_by_name + '</div><div> <a href="'+last_reply_url+'">Last reply</a> by ' + last_reply_name + '</div>' )
   
   
    $('.topic-list-item').addClass('old-forum-loaded');
}

function hideCustomTags(thisObj) {
    /*hide post if found any of these tags*/
    var blacklist = ["audio", "photography", "video", "3d", "graphics"]; 
    /*but show posts if included these tags (when using multiple tags) */
    var whitelist = ["code","web_design","wordpress"];
   
    var foundtags = [];
    
    $('.discourse-tag', thisObj).each(function() {
    foundtags.push($(this).text());
    });
    
    for (var i = 0; i < foundtags.length; i++) {
        if (blacklist.indexOf(foundtags[i]) > -1) {
          thisObj.hide();
                 break; 
        }
    }
    
 
     for (var g = 0; g < foundtags.length; g++) {
               if (whitelist.indexOf(foundtags[g]) > -1) {
                 thisObj.show();
                 break; 
               }  
    }
 
}

$('.topic-list-item').each(function() {
showAvatars( $(this) );
hideCustomTags( $(this) );
});
 

observeDOM( document.getElementById('main-outlet') ,function(){
     setTimeout(function(){
            $('.topic-list-item').not('.old-forum-loaded').each(function() {
             showAvatars( $(this) );
             hideCustomTags( $(this) );
             });
        },1000)
});

forum-styles.css

/*
 *
 * ENVATO FORUM CUSTOMIZATION
 * BY SURJITH S M (surjithctly)
 *
 */

/*
 * GLOBAL PAGE
 */


.d-header {
    background-color: #f4f4f4;
}


/*
 *
 * HOME PAGE
 *
 */



.topic-list {
background-color: #fbfbfb;
    border: 1px solid #e1e8ed;
}

.list-controls {
        margin-bottom: 10px;
}

.topic-list:not(.categories) > tbody > tr:nth-child(even) td:first-child {
    border-left:0;
}
.topic-list:not(.categories) > tbody > tr:nth-child(even) td:last-child {
     border-right:0;
}

.topic-list td {
    padding: 20px 5px;
}

.topic-list th:first-of-type, .topic-list td:first-of-type {
    padding-left: 20px;
}

.topic-list:not(.categories) > tbody > tr:nth-child(even) td {
    background-color: #fbfbfb;
}

.old-forum-loaded .discourse-tags {
        margin-left: 110px;
}

.topic-list .main-link {
    box-sizing: border-box;
    color: rgb(68, 68, 68);
    text-align: left;
    text-decoration: none;
    border: 0px none rgb(68, 68, 68);
    font: normal normal normal normal 24px/28.7999992370605px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    list-style: none outside none;
    outline: rgb(68, 68, 68) none 0px;
    vertical-align: top;
}/*#A_1*/

.topic-list .topic-excerpt, .topic-list .views, .topic-list .posters, .topic-list .category {
    display:none;
}

.topic-list .posts {
    width: 80px;
}

.topic-list .posts-map.badge-posts {
    font-size:24px;
    background: #ECECEC;
    border-radius: 4px;
    display: block;
    margin-top: 5px;
    padding: 10px 0 25px!important;
    position:relative;
}

.topic-list .posts-map.badge-posts:after {
 	content:'Replies';
    position:absolute;
    bottom:8px;
    left:0;
    right:auto;
    text-transform:uppercase;
    font-size:11px;
    font-weight:normal;
    width:80px;
}

.thread_thumbs {
 float:left;
 position:relative;
 width:90px;
 height:90px;
 margin-right:20px;
}

.thread-last-reply {
    position:absolute;
    right:0;
    bottom:0;
}

.topic-list .badge-notification.new-topic {
       font-size: 14px;
}

.thread-quick-links {
 font-size:12px; 
    margin-top:10px;
    margin-bottom:5px;
    
}
.thread-quick-links div {
    line-height: 1.7;
}

.show-more.has-topics {
    top: 0;
}

.show-more.has-topics .alert {
    padding: 13px 35px 12px 14px;
}

/*
 *
 * TOPIC PAGE
 *
 */


.topic-body {
    font-size: 16px;
    line-height: 24px;
}

.topic-post .topic-avatar img {
  border-radius:0;
}