Styling the Special Product Listing

[jagall]

yes I did change to -6 and no difference at all but my codes looks slightly different?

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

[keneso]

yes I did change to -6 and no difference at all but my codes looks slightly different?

I copied it from your first post!
Anyhow try this

$col_width = floor(90/$num_products_count);
} else {
$col_width = floor(90/SHOW_PRODUCT_INFO_COLUMNS_SPECIALS_PRODUCTS)

and add to .specialsListBoxContents
margin-right: 5px !important;

[jagall]

Thank you Keneso, I tried exactly what you said but it hasn't changed anything really. I have been looking at the SNAF thread and posted there as I have the column grid layout installed so that module is an update on that but not sure if I need to install it to achieve what I am trying to do, ahhh wish I was better at css. Cheers for your all your help.

[keneso]

You're welcome, sorry I couldn't do more, Niccol is far more expert than I am, and very kind I may add, you'll be fine at the SNAF support.

[jagall]

Cheers I'll post the solution if I get to it.

[jagall]

Hi Guys,

I am back on about this, I am trying to change the specials to appear something like this:


Niccol advised me to place the following code in the product_listing.php:

$list_box_contents[$rows][$column] = array('params' => 'class="centerBoxContentsProducts centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',
'text' => '<div class="innerColumn">'.$lc_text.'</div>');

But not sure where to go from here, I have altered the CSS alright but I am not getting the ribbon to appear on each of the specialsListBoxContents, I can get it wrap the entire centre box which is no good, so any help here would be greatly appreciated. Cheers.

[keneso]

From Niccol's code
<div class="innerColumn">'.$lc_text.'</div>
Add the .innerColumn class in your stylesheet, and style it

[slobberdog]

I got this right by simply:

and add to .specialsListBoxContents
margin-left: -5px !important;