Styling the Special Product Listing

[jagall]

Hi I am trying to style the special product listing so it has box and background image with specials etc. I have it set to display 3 special products per row but since adding the border, it seems to push the third product onto a third line, I know this is an automatic setting it has set at 33%. looked up thread and found that if I change the following in special_index.php it might solve it but no

SHOW_PRODUCT_INFO_COLUMNS_SPECIALS_PRODUCTS == 0 ) {
$col_width = floor(100/$num_products_count)-3;
} else {
$col_width = floor(100/SHOW_PRODUCT_INFO_COLUMNS_SPECIALS_PRODUCTS)-3;
}

I added the following to the css:

.specialsListBoxContents {
border-left:1px solid #2c130f;

border-bottom:1px solid #2c130f;
border-top:1px solid #2c130f;
padding-top:3px;
background-image : url(../images/offer.png);
background-repeat : no-repeat;
position:top;

}

and this is what I get

but cannot get space between boxes and if I put in right border it throws it off and only allows 2 on one line and the third box on another. Any ideas how this can be made more presentable. thanks.

[keneso]

Have you tried a higher value than 3? Maybe 5, or 6?

With -3

if you change the padding-left from 0.3em to 0.1em in
.centerColumn

and you change the padding-top: 3px; to padding: 3px 0 0 0;
it'll let you add the border-right

[jagall]

Hi thank you for that the padding on centercolumn worked but still not space between columns. So I am trying to this probably going around it the wrong way though. In the CSS, i have placed:
#specialswrapper, .specialsListBoxContents{

border-left:1px solid #2c130f;
border-right:1px solid #2c130f;
border-bottom:1px solid #2c130f;
border-top:1px solid #2c130f;
padding:3px 0 0 0;
background-image : url(../images/offer.png);
background-repeat : no-repeat;
position:top;
float: left;
position: relative;
z-index:4;
}

.specialsListBoxContents {

float: left;
position: relative;
z-index:4;

}

#ribbon {
background:url(../images/slider/ribbon.png) no-repeat;
width:140px;
height:135px;
position:absolute;
top:-12px;
left:-15px;
z-index:600;
}


a img {

margin-top:27px;
background-color:transparent;
}

and in the tpl_modules_specials_default.php added this

<!-- bof: specials -->
<?php if ($zc_show_specials == true) { ?>

<div class="centerBoxWrapper" id="specialsDefault">

<div id="specialswrapper">
<div id="ribbon"></div>

<?php
/**
* require the columnar_display template to show the products
*/
require($template->get_template_dir('tpl_columnar_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_columnar_display.php');
?>


</div>
</div>
<?php } ?>
<!-- eof: specials -->

Trying to achieve something similar to this link and think it is best achieved through divs and the CSS. Hopefully you can shed some light to error of my ways. thanks

[keneso]

Hi thank you for that the padding on centercolumn worked but still not space between columns.

Have you tried to change the -3?

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;
}

You could also try the SNAF add-on?
http://www.zen-cart.com/downloads.php?do=file&id=1358

[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.