Please help with css and New Products

[mattc428]

Hello, I have to jump on the bandwagon here with a question. I am trying to put a specific style around each product in the "Whats new for "Month" box. I figured out how to put a border around only the product images using css in modules/new_products.php - but if you take a look at this screenshot you will see that I would also like to include the text and price, not just the image.

 

 

The link to the live site with this is http://www.7dana.org/oscommerce/Gift_Shop_Red/index.php

 

and the css code being used is:

 

.new_product { background-color: #F8F8F8; border: 3px solid White;font-size: 10px; padding: 5px; color: #F37C25; text-align: center; font-weight: bold;  }

 

Where does the class get declared inside of new_products.php to acheive this desired look?

 

Thanks,

Matt

[Sousa]

you can use div tags.

[mattc428]

im going to google div tags now, im not that familiar with them - can you post an example? Thanks for the reply :)

 

would this div tag be added to new_products.php?

[Sousa]

try this:

 

catalog/includes/modules/new_products.php

 

+-line 34 find:

	$info_box_contents[$row][$col] = array('align' => 'center',
									   'params' => 'class="smallText" width="33%" valign="top"',
									   'text' => '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . $new_products['products_name'] . '</a><br>' . $currencies->display_price($new_products['products_price'], tep_get_tax_rate($new_products['products_tax_class_id'])));

 

change to:

 

$info_box_contents[$row][$col] = array('align' => 'center',

'params' => 'class="smallText" width="33%" valign="middle"',

'text' => '<div class="borderproduct"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $random_product['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $random_product['products_image'], $random_product['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a></div><div><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $random_product['products_id']) . '">' . $random_product['products_name'] . '</a><br>' . $currencies->display_price($random_product['products_price'], tep_get_tax_rate($random_product['products_tax_class_id'])));

[mattc428]

Okay, I tried your code and modified it a bit to this...

 

$info_box_contents = array();
 while ($new_products = tep_db_fetch_array($new_products_query)) {
$new_products['products_name'] = tep_get_products_name($new_products['products_id']);
$info_box_contents[$row][$col] = array('align' => 'center',
									   'text' => '<div class="new_product"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . $new_products['products_name'] . '</a><br>' . $currencies->display_price($new_products['products_price'], tep_get_tax_rate($new_products['products_tax_class_id'])));

 

And this is the end result on my site:

 

2 Problems now, First is that I cannot figure out where to place a closing </div> tag in the above code without getting errors.

 

Second problem is if you look at the screenshot you will see that the MIcrosoft Intellimouse Explorer box is bigger than the rest of the boxes.. Somehow these borders need to be set not to adjust size... any ideas?

[Sousa]

change to:

 

$info_box_contents[$row][$col] = array('align' => 'center',

'text' => '<div class="new_product"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . $new_products['products_name'] . '</a><br>' . $currencies->display_price($new_products['products_price'], tep_get_tax_rate($new_products['products_tax_class_id'])) . '</div>' .);

[mattc428]

DOH'

 

Did not work, makes the side panels and bottom disappear and only the example text is left. So close here!

[Sousa]

what you mind with DOH'?

[mattc428]

DOH' is just another way of saying Oops...

[Sousa]

ok,

if i can help you in another way say it.

[mattc428]

I tried to put in the </div> tag where you suggested, but it did not work. So i am still stuck with these 2 problems

 

1) Need to figure out where to put the closing </div> tag without messing up the site

 

2) Need to figure out how to keep all the product boxes the same size without shifting

 

Any ideas?

[Sousa]

please post the page html source code after the changes, what end user see.

[mattc428]

have a look at the site

[Sousa]

your index.php is only this:

 

What's New Here? What's New Here?

Welcome Guest! Would you like to log yourself in? Or would you prefer to create an account?

This is a default setup of the osCommerce project, products shown are for demonstrational purposes, any products purchased will not be delivered nor will the customer be billed. Any information seen on these products is to be treated as fictional.

 

Error Messages

 

If there are any error or warning messages shown above, please correct them first before proceeding.

 

Error messages are displayed at the very top of the page with a complete background color.

 

Several checks are performed to ensure a healthy setup of your online store - these checks can be disabled by editing the appropriate parameters at the bottom of the includes/application_top.php file.

Editing Page Texts

 

The text shown here can be modified in the following file, on each language basis:

 

[path to catalog]/includes/languages/english/index.php

 

That file can be edited manually, or via the Administration Tool with the Languages->English->Define or Tools->File Manager modules.

 

The text is set in the following manner:

 

define('TEXT_MAIN', 'This is a default setup of the osCommerce project...');

 

The text highlighted in green may be modified - it is important to keep the define() of the TEXT_MAIN keyword. To remove the text for TEXT_MAIN completely, the following example is used where only two single quote characters exist:

 

define('TEXT_MAIN', '');

 

More information concerning the PHP define() function can be read here.

Securing The Administration Tool

 

It is important to secure the Administration Tool as there is currently no security implementation available.

Online Documentation

 

Online documentation can be read at the osCommerce Knowledge Base site.

 

Community support is available at the osCommerce Community Support Forums site.

 

If you wish to download the solution powering this shop, or if you wish to contribute to the osCommerce project, please visit the support site of osCommerce. This shop is running on osCommerce version osCommerce 2.2-MS2.

 

 

 

 

Maybe the problem is not only the new_products

[mattc428]

Its only that because the </div> tag is breaking the page up, which is my whole problem.

Thanks for all your help, I really don't think I have enough experience to do this myself.

[Sousa]

put only the open div

 

<div class="new_product">

 

and let see

[mattc428]

ok I took out the </div> tag. Now you can see the New Products table. I am only working on this right now and thats why the rest of the site looks like crap.

 

SITE IS HERE

 

 

ALso notice how the boxes are different sizes, and they shift around. I would like them to be fixed and aligned.

[Sousa]

Now its ok, i insist and say the div tags is not closed, but if is working is ok :-)

[mattc428]

Thanks for all your help sousa,

 

Can anyone tell me how to get this finished up properly and also highlight the items in new products with css when the mouse is over them?

[Sousa]

Try this,

 

in the new_product class apply a:hover css

 

ex.:(in css file)

#new_product a:hover {

.

.

.

}