Joomla Templates Club 406,261 posts

[joomini Friend joominiJoin date: August 2007Posts: 11Downloads:0Uploads:0 Thanks: 3]

#721628

Hi,

How do I add another column to the K2 Tools module “Browse Listings By Categories”
On the JA Directory demo there are only 4 column.

I would like to have 5 or 6 columns.

Thanks.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#723330

Hi,

This is example to change 4 columns to 5 into the K2 Tools module “Browse Listings By Categories”

+ Open templates/ja_directory/html/mod_k2_tools/customcategories.php file and change as my highlight text below

+ Create templates/ja_directory/css/custom.css file and add new rule

.t3-section .k2CategoriesListBlock .level0 > li {
width: 20% !important;
}

.t3-section .k2CategoriesListBlock .level0 > li:nth-child(5n + 1) {
clear: both !important;
}

.t3-section .k2CategoriesListBlock .level0 > li:nth-child(4n + 1) {
clear: none;
}

Regards

1 user says Thank You to Ninja Lead for this useful post

1. joomini

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#754038

Hi,

This is example to change 4 columns to 5 into the K2 Tools module “Browse Listings By Categories”

+ Open templates/ja_directory/html/mod_k2_tools/customcategories.php file and change as my highlight text below

+ Create templates/ja_directory/css/custom.css file and add new rule

.t3-section .k2CategoriesListBlock .level0 > li {
width: 20% !important;
}

.t3-section .k2CategoriesListBlock .level0 > li:nth-child(5n + 1) {
clear: both !important;
}

.t3-section .k2CategoriesListBlock .level0 > li:nth-child(4n + 1) {
clear: none;
}

Regards

1 user says Thank You to Ninja Lead for this useful post

1. joomini

[joomini Friend joominiJoin date: August 2007Posts: 11Downloads:0Uploads:0 Thanks: 3]

#723600

Thanks a lot.
It’s working!

[joomini Friend joominiJoin date: August 2007Posts: 11Downloads:0Uploads:0 Thanks: 3]

#754130

Thanks a lot.
It’s working!

[teutobahiano Friend teutobahianoJoin date: February 2011Posts: 284Downloads:16Uploads:26 Thanks: 109 Thanked: 9 times in 1 posts]

#815420

Hi,

I need 8 colums IN TWO ROWS. I tried using a copy of the ‘Browse Listings by Categories’ module but I got a blank page. Any other solution?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#816113

teutobahiano wrote:

Hi,

I need 8 colums IN TWO ROWS. I tried using a copy of the ‘Browse Listings by Categories’ module but I got a blank page. Any other solution?

@teutobahiano: You need to set 8 columns in two rows, it means: it is 4 columns per row, right? I see by default it is displaying in that way, look at our demo here

[winbelltrade Friend winbelltradeJoin date: July 2015Posts: 32Downloads:353Uploads:8 Thanks: 1]

#851225

I followed this solution. I created 6 columns and the categories listing changed to 6 columns listings from 4 columns were displayed and the 2 new columns remained blank. How do I make the newly created 2 columns to list category items. Check http://www.nigerialist.com See image.

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#851467

@winbelltrade: Below is solution to change from 4 -> 6 columns of the Browse Listings by Categories module

• Open templates/ja_directory/html/mod_k2_tools/customcategories.php file

find and change

if (($option == 'com_k2') && ($view == 'itemlist') && ($catid == $row->id))
{
    $liClass = 'activeCategory';
    if ($i >= 4) {
        $liClass .= 'collapse';
    }
}
else
{
    $liClass = '';

    if ($i >= 4) {
        $liClass .= 'collapse';
    }
}

to

if (($option == 'com_k2') && ($view == 'itemlist') && ($catid == $row->id))
{
    $liClass = 'activeCategory';
    if ($i >= 6) {
        $liClass .= 'collapse';
    }
}
else
{
    $liClass = '';

    if ($i >= 6) {
        $liClass .= 'collapse';
    }
}

• Open templates/ja_directory/css/custom.css file and add rule CSS style

.t3-section .k2CategoriesListBlock .level0 > li {
    width: 15% !important;
}    

.t3-section .k2CategoriesListBlock .level0 > li:nth-child(6n + 1) {
  clear: both !important;
}

.t3-section .k2CategoriesListBlock .level0 > li:nth-child(4n + 1) {
    clear: none;
}

Hope it helps

[winbelltrade Friend winbelltradeJoin date: July 2015Posts: 32Downloads:353Uploads:8 Thanks: 1]

#851614

It did help but not completely. The first row now displays 6 columns correctly but the second and subsequent rows are display only 3 columns instead of 6 columns (see image). The directory is to have 6 columns and 5 rows. What should I add to the code to let it render 6 columns in every row. Thanks

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#851624

Try to add the CSS style below into templates/ja_directory/css/custom.css file

.t3-section .k2CategoriesListBlock .level0 > li:nth-child(5n) {
    clear: none;
}

Hope it helps

[winbelltrade Friend winbelltradeJoin date: July 2015Posts: 32Downloads:353Uploads:8 Thanks: 1]

#853467

Thank you Ninja Lead, the code did the job perfectly. However a little issue came up after the implementation and I have not been able to fix it. I would like to increase the spacing between a new CATEGORY and the sub-categore before it. Currently the spacing have gone. Kindly see the attached image with the red arrow pointing to where I will like a larger spacing.

Thanks

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#854343

Hi,

You can fix the spacing issue on your site with my tweak given below

Open templates/ja_directory/css/custom.css file and add new CSS style

.t3-section .k2CategoriesListBlock .level0 > li.collapse.in {
    padding-top: 10px;
}

Hope it helps

[winbelltrade Friend winbelltradeJoin date: July 2015Posts: 32Downloads:353Uploads:8 Thanks: 1]

#858174

Your solution solved the problem. Thanks

[Author]

Posts