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;
}
