Styling the Special Product Listing

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.

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

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

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

jagall:

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

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

jagall:

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;

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.

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.

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

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.

From Niccol's code

Thanks Keneso I have tried this but doesn't make much difference, I need to include a div somewhere maybe in the special_default file for the ribbon which I want to overlay each box as in the example above, this is a sticking point for me now.

Have you added that code, and the class to the stylesheet?

Also maybe something like this in the special_index.php (on the original zen cart file is line 75)

    'text' => '<div class="innerColumn">'. (($specials_index->fields['products_image'] == '' and PRODUCTS_IMAGE_NO_IMAGE_STATUS == 0) ? '' : '<a href="' . zen_href_link(zen_get_info_page($specials_index->fields['products_id']), 'cPath=' . $productsInCategory[$specials_index->fields['products_id']] . '&products_id=' . (int)$specials_index->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $specials_index->fields['products_image'], $specials_index->fields['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br />') . '<a href="' . zen_href_link(zen_get_info_page($specials_index->fields['products_id']), 'cPath=' . $productsInCategory[$specials_index->fields['products_id']] . '&products_id=' . $specials_index->fields['products_id']) . '">' . $specials_index->fields['products_name'] . '</a><br />' . $products_price).'</div>';

And of course the stylesheet addition.

DISCLAIMER
I am not php expert, but am pretty much confident it might work; DO a backup, and try at your own risk.

Thank you, I included the div in the special_index.php and this is what I have in the CSS
.innerColumn, .specialsListBoxContents, .ribbon{

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

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

But nothing has changed, I know this might be obvious but I cannot seem to get it.

Reason I was asking is that I don't see them.
Are you sure you uploaded to the correct location?

If you get yourself firefox, and the firbug and/or web developer extensions for it you can inspect, and test all real time.

By inspecting your page with firebug, and your page source, I don't see any reference to the innerColumn, or ribbon

Yes it is in the stylesheet, just as copied out. I have removed the code Niccol gave me as I just realised that all category products were not displaying at all been so busy with the specials hadn't realise that was all people could see, so back to square one, that code must be in the wrong place, it was product_listing.php Niccol advised to place it, should it just be the special_index.php file and if I placed just in this file, where does the ribbon div go? ahh sorry being a pest now:dontgetit

Ok, let's get to square one.
Stylesheet is ok.
I would load the original untouched files, and restart from there.
That meaning that since you have installed the SNAF to use those files, then modifying each one piece at a time, to see what happens.
Also before editing the files check the configurations in the admin part.

Hi, well you seen the excerpt from the stylesheet, do you think its okay? Sorry we have cross-wires I haven't loaded SNAF at all, Niccol's advice as I have column grid layout already installed then I should just edit the product_listing.php with that code he gave me see the thread here

I misunderstood.
Anyhow, since we are at square one, like said upload the original files, then we'll go step by step.

I used column grid for a test a while back, and really don't recall much, but that shouldn't be a big obstacle, hopefully.

I would do this:
make a copy of the original files, then we'll start editing the files one per time to see how it goes.

Start with Niccol's suggestion on the product_listing.php, and make sure you uploaded to the correct folder.

Don't you worry about the styling of it right now, we can play with that later.

Hi keneso, sorry only getting back to your now I tried that code that Niccol gave me but it doesn't work as all the products disappear from the product listing pages so I can't use it, there must be another way without going near this file, you suggested the special_index, will I try this?