Boxes on the side



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

    Thanks for your help!
    Christian


  • Admin

    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!


  • Admin

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

Log in to reply
 


Looks like your connection to NodeBB was lost, please wait while we try to reconnect.