Skip to content

Instantly share code, notes, and snippets.

@Webcreations907
Last active September 23, 2015 13:17
Show Gist options
  • Save Webcreations907/5efce6dc8f1d971411e2 to your computer and use it in GitHub Desktop.
Save Webcreations907/5efce6dc8f1d971411e2 to your computer and use it in GitHub Desktop.

Envato Old Forum Style Userscript

Changes Envato forum to display avatars and user badges using userscript.

Features
  • Avatars on Forum & Topic View 80x80
  • User Badges on Topic View
  • QuickLinks (mouseover avatar) Topic View
  • Username Clickable to Marketplace Portfolio
  • Recent Posts Link
  • Threads Started Link
Forum View Screen Image

forum-avatar-view

Topic View Screen Image

topic-avatar-view

This userscript is a modified version of Old Forum Style for New Forums by surjithctly see original forum post HERE.


Compatibility / Tested On


Installation

With GreaseMonkey Or TamperMonkey installed (depending on browser) click the "Raw" button OR Here for the below envato-forum-avatars.user.js file, your extension should ask you if you want to install, Install and Activate 😄

Visit the Forum and Enjoy!

Change Log

version 1.1
  • Quick Links Fix (wasn't displaying due to forum code changes)
version 1.0
  • initial release
// ==UserScript==
// @name envato old-new forum
// @namespace gist-envato-forum-avatar-js
// @description Changes Envato forums to old style sortof atleast, adding bigger user avatars, font, and user badges.
// @include https://forums.envato.com/*
// @exclude https://forums.envato.com/users/*/preferences
// @version 1.1
// @grant none
// ==/UserScript==
$(function() {
var link = window.document.createElement('style');
link.type = 'text/css';
link.textContent = '.topic-post .topic-avatar .contents:hover .user-quick-links-avatar{display:block;}.topic-post .topic-body{z-index:0;}.user-quick-links-avatar{display:none;position:absolute;top:70px}.inner-quick-links:before{background-color:#000;content:" ";height:20px;left:10px;position:absolute;top:-10px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);width:20px}.inner-quick-links{background-color:#000;box-shadow:0 0 0 1px #454547 inset;font-size:11px;min-width:150px;padding:10px;position:relative;text-align:left;top:25px;z-index:1000}.inner-quick-links a.user-portfolio-link{color:#fff;font-size:14px;font-weight:bold;padding-bottom:4px;padding-top:4px}.inner-quick-links a{display:block}.market-portfolio-link{float:left;font-size:12px;}.topic-badges{height:75px;overflow:hidden;padding-top:8px;margin-bottom:20px;}.topic-badges img{margin:2px 4px;width:30px}a.expand-badges{display:block;font-size:12px;margin-top:-15px;padding-bottom:20px;text-align:center}.topic-avatar{width:85px;}.topic-list .main-link a.title{font-size:22px;}.topic-list-item .discourse-tags{padding-left:110px;}.d-header{background-color:#f4f4f4}.topic-list,.topic-list:not(.categories)>tbody>tr:nth-child(even) td{background-color:#fbfbfb}.topic-list{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 td:first-of-type,.topic-list th:first-of-type{padding-left:20px}.old-forum-loaded .discourse-tags{margin-left:110px}.topic-list .main-link{box-sizing:border-box;color:#444;text-align:left;text-decoration:none;border:0 #444;font:normal normal normal normal 24px/28.8px \'Helvetica Neue\',Helvetica,Arial,sans-serif;list-style:none;outline:#444 0;vertical-align:top}.topic-list .category,.topic-list .posters,.topic-list .topic-excerpt,.topic-list .views{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:400;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-body{font-size:16px;line-height:24px}.topic-post .topic-avatar img{border-radius:0}';
document.getElementsByTagName('HEAD')[0].appendChild(link);
function envatoAvatars() {
$('.list-container .topic-list-item:not(.rendered)').each(function() {
var userImg = $(this).find('.posters a:first-child img').attr('src').replace('/25/', '/80/'),
latest = $(this).find('.posters .latest img').attr('src').replace('/25/', '/40/')
startedBy = $(this).find('.posters a:first-child').attr('data-user-card'),
latestBy = $(this).find('.posters a.latest').attr('data-user-card'),
startLink = $(this).find('.title').attr('href');
endLink = $(this).find('.activity a').attr('href');
$(this).find('.topic-post-badges').append('<div class="thread-quick-links"><div><a href="' + startLink + '">Started</a> by ' + startedBy + '</div><div> <a href="' + endLink + '">Last reply</a> by ' + latestBy + '</div></div>');
$(this).find('.main-link').prepend('<div class="thread_thumbs"><img src="' + userImg + '" class="thread-started-by"><img src="' + latest + '" class="thread-last-reply"></div>');
$('.topic-list-item').addClass('rendered');
});
$('.ember-view.topic-post:not(.rendered)').each(function() {
if ($(this).has('.small-action:not(.time-gap)').length > 0) {
return;
}
var userImg = $(this).find('article .row .topic-avatar .avatar');
userImg.attr('src', userImg.attr('src').replace('/45/', '/80/'));
userImg.attr('width', 80).attr('height', 80);
$(this).addClass('rendered');
// badges
var badges = '',
userName = userImg.parent().attr('data-user-card');
$.getJSON("https://forums.envato.com/user-badges/" + userName + ".json", function(data) {
if (data.badges.length > 0) {
$.each(data.badges, function(i, userBadge) {
badges += '<img src="' + userBadge.image + '" title="' + userBadge.name + '" class="user-badges"/>';
});
userImg.parents('.topic-avatar').append('<div class="topic-badges">' + badges + '</div>');
if (data.badges.length > 4) {
var moreText = (data.badges.length - 4) + '+ more';
userImg.parents('.topic-avatar').append('<a href="#" class="expand-badges">' + moreText + '</a>')
}
}
});
//Add Quick links, portfolio, topics,etc
userImg.parents('.topic-avatar').wrapInner('<div class="contents"></div>');
userImg.parents('.topic-avatar .contents').append('<div class="user-quick-links-avatar"><div class="inner-quick-links"></div></div>');
userImg.parents('.topic-avatar').find('.inner-quick-links').append('<a class="user-portfolio-link" href="http://themeforest.net/user/'+userName+'" title="View '+userName+'\'s Portfolio" target="_blank">'+userName+'</a>');
userImg.parents('.topic-avatar').find('.inner-quick-links').append('<a href="https://forums.envato.com/users/'+userName+'/activity/posts">Recent Posts</a>');
userImg.parents('.topic-avatar').find('.inner-quick-links').append('<a href="https://forums.envato.com/users/'+userName+'/activity/topics">Threads Started</a>');
});
}
envatoAvatars();
var renderTimer;
$('#main-outlet').bind('DOMSubtreeModified', function(e) {
if ($('.topic-list-item:not(.rendered)').length > 0 || $('.ember-view.topic-post:not(.rendered)').length > 0) {
clearTimeout(renderTimer);
renderTimer = setTimeout(function() {
envatoAvatars();
}, 2); //2? seems to work though :)
}
});
$('#main-outlet').on('click', '.expand-badges', function(e) {
e.preventDefault();
$(this).parent().find('.topic-badges').css('height', 'auto');
$(this).remove();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment