Articles list from a category displayed in 2 columns

Question

I try to display the articles list from a specific category (mod_articles_category) in 2 columns.

There is a great example here about what I want: http://jsfiddle.net/HP85j/393/

I would love to do this for only one module, not all the mod_articles_category. So, overridfes can't be use here, I think.

Thanks in advance for your help :)

Answer 1

It's not clear what kind of answer you are seeking here and your question is getting a bit broad - I assume you are asking about directions and will try to provide some.

You have a few options to achieve what you want:

1. CSS overrides only for the page/module instance you want
2. Module Alternative Layout + CSS overrides for the module.

Extended Instructions

1. You can give a custom Page Class Suffix on the page/menu item where the module is appearing, or give a custom Module Class Suffix. Then create your custom CSS overrides (e.g. in your template's custom css file) where you can "describe" the 2 columns layout for the module's output.

2. You can create an alternative module layout and only use it for that particular module instance. Copy the default template file of the module, inside the templates/YOUR_TEMPLATE/html/YOUR_MODULE/default.php then rename it to something like yourLayout.php and do any html overrides you want there. Then in the module's instance go and select that new alternative layout for your module. Then go and do also and special CSS overrides you need, to complete the 2 columns layout.

Answer 2

If the template is based on Bootstrap or any other CSS framework, then let's use the grid classes to achieve the multi-column output.

1. create an override of the module articles category in your template
2. rename this override as you want (for example columns.php)
3. in this file, add the CSS class "row-fuild" to the ul tag and 'span6" to the li tag
4. save and close
5. in your module, go to the advanced parameters and select "columns" as layout
6. save and close
7. Enjoy!

If you have a display issue on frontend, add the CSS style "margin-left:0px !important" to the li tag in your overrided file. Thanks to Taimur Aziz‏ @Taimurian for the solution

Answer 3

just do that :

    .category-module {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 40px;
column-gap: 40px;
-moz-column-gap: 40px;
}

gap is not mandatory you can add a class to your module and write : .category-module.myclass

enjoy