Boxes on the side

[Christian Mendieta]

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

Thanks for your help!
Christian

[baris]

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

[Christian Mendieta]

Awesome! thanks!

[psychobunny]

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

[cagatay]

@psychobunny thanks for codes