# of categories per row index page

How/where do I set the number of categories displayed per row on the index page? I have it configured so the index page displays categories with names and images, but it's only displaying two per row when there's plenty of room for a third in each row. (http://oshoboulder.org/store/ )

thanks, JSC :P

admin/configuration/Maximum Values/Categories To List Per Row

May I ask one question here?
Info about the column count is stored in configuration database

INSERT INTO configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) VALUES ('New Products Columns per Row', 'SHOW_PRODUCT_INFO_COLUMNS_NEW_PRODUCTS', '3', 'New Products Columns per Row', '24', '95', 'zen_cfg_select_option(array('1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'), ', now());
which happens at the time of the install

Now when we update it from Admin, then how does this gets updated as it doesnt seems to have been referenced anywhere?
Thanks

Thanks, Superprg,
As I look closer it is already set to 3 categories per row, but still only displaying two. I think I may have found the reason. Here's what is being outputted on the index page:

<div id="indexCategoriesMainContent" class="content">

<div class="categoryListBoxContents" style="width:33%;">

Notice the width of the div containing the image and name: 33%. I may have increased the padding within the list box containing the categories. So I think if I could reduce the width per div to 31% or so, that might enable that third category to display on the same row.

Any idea where I could adjust the width of that div "indexCategoriesMainContent" class="content" (as above)?
thanks,
JSC :bigups:

I think width setting was automatic

if ($num_products_count > 0) {
if ($num_products_count < SHOW_PRODUCT_INFO_COLUMNS_NEW_PRODUCTS || SHOW_PRODUCT_INFO_COLUMNS_NEW_PRODUCTS == 0 ) {
$col_width = floor(100/$num_products_count);
} else {
$col_width = floor(100/SHOW_PRODUCT_INFO_COLUMNS_NEW_PRODUCTS);

Solved it, that was indeed it. Reduced the padding in the listboxContents div, and that enabled that third category to get onto the same row.

I would still love to know where I could adjust the
<div class="categoryListBoxContents" style="width:33%;">

so that it would read

<div class="categoryListBoxContents" style="width:31%;">

Any takers?
thanks all,

JSC :flex:

Ooooops,

you got a reply in there before I saw it. Great, thanks loads, that is the code for that style: width setting.

JSC

Sorry guys but this still isn't clear enough for me...

In stylesheet.css, I've set as follows for my effect:

.categoryListBoxContents {
padding: 0;
border: 1px solid #990000;
background-color: #ffffff;
color: #990000;
}

.categoryListBoxContents:hover{
border: 1px solid #990000;
background-color: #ffdddd;
color: #ffffff;
}

You can see I've cancelled any padding.

I've also found the following in new_products.php:

// show only when 1 or more
if ($num_products_count > 0) {
if ($num_products_count < SHOW_PRODUCT_INFO_COLUMNS_NEW_PRODUCTS || SHOW_PRODUCT_INFO_COLUMNS_NEW_PRODUCTS == 0 ) {
$col_width = floor(100/$num_products_count);
} else {
$col_width = floor(100/SHOW_PRODUCT_INFO_COLUMNS_NEW_PRODUCTS);
}

I've tried changing both instances of '100' to 90 and to 110, neither of those helps. I've got max per row set to 3, but I'm still only getting 2.

What have I not done?
http://stargate.terrassl.net/~admin36/shop/index.php?main_page=index&cPath=1

thanks in advance!!! :frusty:

AHHHH!

So, in the stylesheet, you need to locate or create the class categoryListBoxContents, and apply a width setting there.
Silly me, forgot all about the CSS width attribute.

Help! I've just realise that if it's an INLINE CSS style, which it is... if I create a CSS rule in the external stylesheet, the inline style will take precidence won't it :(

Can somebody PLEASe simplify this thread, I'm under loads of pressure.

Thanks in advance.

Phil, it should be a simple matter of

1. setting the number of items you want per line in the configurations setting in Admin

2. Setting the percentage width each item takes up in the style sheet.

3. Checking to see how wide your items are, in particular the setting on picture widths, and add them up against how wide your overall site and middle content area is. In other words if you have item pictures set to 150 px each, and want three per line, your middle content area better accommodate at least 450 pixels with NO padding or margin per item... otherwise the third item will wrap down to the next line.

JSC, Boulder