Happy to share the custom CSS/JS used to theme those widgets as well, just paste these into the Custom Content panels in the ACP:
JS:
$(document).ready(function () { function animateTags() { if (ajaxify.data.template.name === 'categories') { var tags = $('.popular-tags .tag-item'); var bar = $('<div class="popular-tags-bar"></div>'); tags.append(bar); var max; setTimeout(function() { tags.each(function() { var bar = $(this).find('.popular-tags-bar'); var val = parseInt(bar.parents('a').find('.tag-topic-count').text(), 10); max = max > val ? max : val; bar.css({ width: val / max * 100 + '%' }); }); }, 100) } } animateTags(); $(window).on('action:ajaxify.end', animateTags); });CSS:
.popular-tags > .inline-block { width: 100%; margin-top: -8px; &:first-child { margin-top: 0; } &:last-child { margin-bottom: -5px; } } .popular-tags .tag-topic-count { float: left; width: 20%; margin-top: 0px; background-color: #cbebf7; color: #777; padding: 4px 4px 5px 4px; border: 0; text-align: center; } .popular-tags .tag-item { float: left; width: 80%; background-color: #4fc3f7; color: white; font-weight: 500; padding-left: 10px; position: relative; padding: 5px 5px 4px 10px; } .popular-tags-bar { background-color: rgba(0,0,0,0.07); width: 0px; height: 32px; position: absolute; top: 0px; left: 0px; -webkit-transition: width 750ms ease-out; -moz-transition: width 750ms ease-out; -ms-transition: width 750ms ease-out; -o-transition: width 750ms ease-out; transition: width 750ms ease-out; }
