Nickel Theme: Bootstrap Columns

The way the current method of code works when you select column count in the backend (and only for nickel theme or where it's coded in) and adjusts for width percentage. If you have columns three or more, it can get pretty crowded when the window shrinks. I've made a Bootstrap alternative that you can tune to your liking. If your template isn't already calling Bootstrap styling, you'll have additional work beyond what I've provided.

You'll want to make a template override. I'm fond of the manual method. Copy:

administrator/components/com_easyblog/themes/nickel/blogs/latest/default.main.php

To:

<template_name>/html/com_easyblog/blogs/latest

Unless something has changed after this posting, you should see this on line 15:

<?php $column = $this->params->get('post_nickel_column', 2); ?>

<?php $grid_size = 99 / $column; ?>

<div class="eb-masonry-post eb-responsive" data-blog-posts style="width: <?php echo $grid_size; ?>%">

Replace with the following:

<?php $bsColWidth= $this->params->get('post_nickel_column', 2);

$colStyle='col-md-12'; //if something breaks, the default width will take up the entire 12 Bootstrap columns

switch ($bsColWidth) {

	case 2:

		$colStyle='col-md-6';

		break;

	case 3:

		$colStyle='col-lg-4';

		break;

	case 4:

		$colStyle='col-lg-3';

		break;

	case 5:

	case 6:

		$colStyle='col-lg-2';

	break;

} ?>



<div class="eb-masonry-post eb-responsive <?php echo $colStyle; ?>" data-blog-posts>

You can change the type of columns you want within the switch statement. This is just what's works best with my template customizations. I've chosen to omit the usage of 5 columns by including it with 6 columns as 12/5 results in an annoying remainder.

If you need reference on what the different Bootstrap columns do, .check them out here

Suggestions welcome.

5/18/16 Update

This is in reference to a bug found here. You'll want to add this CSS to your custom.css file. Only col-lg-4 has been tested, but the others should work as well.

@media (min-width: 1200px) {

	div#fd.eb .col-lg-2 {		/*6 Columns*/

		width: 16.5% !important;

	}

	div#fd.eb .col-lg-3 {		/*4 Columns*/

		width: 24.75%% !important;

	}

	div#fd.eb .col-lg-4 {		/*3 Columns*/

		width: 33% !important;

	}

	div#fd.eb .col-lg-6 {		/*2 Columns*/

		width: 49.5% !important;

	}

	div#fd.eb .col-lg-12 {		/*1 Column */

		width: 99% !important;

	}

}

In a nutshell whatever $grid_size = 99 / $column; calculates to, the CSS width needs to match for masonry.js to work properly on all browsers.