Styling the Special Product Listing

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