Boxes on the side

Moved Technical Support
  • Hi everyone,
    Quick question, how do I get this nice boxes on one side of the screen? any module?

    Thanks for your help!

  • Hello, those are just regular widgets, the top one is a html widget, and the bottom one is the popular tags widget with some custom css. You can create these at /admin/extend/widgets

  • Awesome! thanks!

  • 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:


    $(document).ready(function () {
        function animateTags() {
        	if ( === 'categories') {
        		var tags = $('.popular-tags .tag-item');
        		var bar = $('<div class="popular-tags-bar"></div>');
        		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;
            		       width: val / max * 100 + '%'
        		}, 100)
        $(window).on('action:ajaxify.end', animateTags);


    .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;
  • @psychobunny thanks for codes

  • barisB baris referenced this topic on

Suggested Topics