Product Reviews Page has overlapping elements

jeu4328 · November 11, 2013

Hello:

I've tried to find posts that would pertain to my issue, but I was not able to find anything.

My Product Review Page has overlapping elements, and I am wondering if there is anything that can be done about that.

The link to the page is as follows:

http://www.jewellsembroidery.com/shop/product_reviews.php?products_id=111&reviews_id=13

Is this something I can correct easily? Or is it recommended that I add some sort of Reviews Add-on to correct the problem?

And if so, can you suggest a good add-on that is easy to install?

Thank you,

Jewell

tgely · November 11, 2013

Looks like float problem.

change:

<div style="float: right; width: 20px; text-align: center;">
   <a href="http://www.jewellsembroidery.com/shop/product_info.php?products_id=111"><img width="225" vspace="5" hspace="5" height="300" title="Vintage Children" alt="Vintage Children" src="images/2013 VER VINTAGE CHILDREN DESIGN SET Portrait 300h.png"></a>
   <p><span class=""><a href="http://www.jewellsembroidery.com/shop/product_reviews.php?products_id=111&reviews_id=13&action=buy_now" id="tdb4" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-priority-secondary" role="button" aria-disabled="false"><span class="ui-button-icon-primary ui-icon ui-icon-cart"></span><span class="ui-button-text">Add to Cart</span></a></span><script type="text/javascript">$("#tdb4").button({icons:{primary:"ui-icon-cart"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script></p>
 </div>

to:

<div style="width: 20px; text-align: center;">
   <a href="http://www.jewellsembroidery.com/shop/product_info.php?products_id=111"><img width="225" vspace="5" hspace="5" height="300" title="Vintage Children" alt="Vintage Children" src="images/2013 VER VINTAGE CHILDREN DESIGN SET Portrait 300h.png"></a>
   <p><span class=""><a href="http://www.jewellsembroidery.com/shop/product_reviews.php?products_id=111&reviews_id=13&action=buy_now" id="tdb4" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-priority-secondary" role="button" aria-disabled="false"><span class="ui-button-icon-primary ui-icon ui-icon-cart"></span><span class="ui-button-text">Add to Cart</span></a></span><script type="text/javascript">$("#tdb4").button({icons:{primary:"ui-icon-cart"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script></p>
 </div>

jeu4328 · November 11, 2013

Looks like float problem.

change:

<div style="float: right; width: 20px; text-align: center;">
<a href="http://www.jewellsembroidery.com/shop/product_info.php?products_id=111"><img width="225" vspace="5" hspace="5" height="300" title="Vintage Children" alt="Vintage Children" src="images/2013 VER VINTAGE CHILDREN DESIGN SET Portrait 300h.png"></a>
<p><span class=""><a href="http://www.jewellsembroidery.com/shop/product_reviews.php?products_id=111&reviews_id=13&action=buy_now" id="tdb4" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-priority-secondary" role="button" aria-disabled="false"><span class="ui-button-icon-primary ui-icon ui-icon-cart"></span><span class="ui-button-text">Add to Cart</span></a></span><script type="text/javascript">$("#tdb4").button({icons:{primary:"ui-icon-cart"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script></p>
</div>

to:

<div style="width: 20px; text-align: center;">
<a href="http://www.jewellsembroidery.com/shop/product_info.php?products_id=111"><img width="225" vspace="5" hspace="5" height="300" title="Vintage Children" alt="Vintage Children" src="images/2013 VER VINTAGE CHILDREN DESIGN SET Portrait 300h.png"></a>
<p><span class=""><a href="http://www.jewellsembroidery.com/shop/product_reviews.php?products_id=111&reviews_id=13&action=buy_now" id="tdb4" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-priority-secondary" role="button" aria-disabled="false"><span class="ui-button-icon-primary ui-icon ui-icon-cart"></span><span class="ui-button-text">Add to Cart</span></a></span><script type="text/javascript">$("#tdb4").button({icons:{primary:"ui-icon-cart"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script></p>
</div>

Thank you, I really appreciate your help.

Could you tell me where I might find that code? I am not able to find it. I've looked in:

index.php

reviews.php

product_reviews.php

product_reviews_info.php

product_reviews_write.php

product_info.php

bm_reviews.php

tgely · November 11, 2013

http://www.jewellsembroidery.com/shop/product_reviews.php?products_id=111&reviews_id=13

product_reviews.php

<div style="float: right; width: <?php echo SMALL_IMAGE_WIDTH+20; ?>px; text-align: center;">
   <?php echo '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $product_info['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '</a>'; ?>

jeu4328 · November 11, 2013

Hi, Gergely:

When I replace:

<div style="float: right; width: <?php echo SMALL_IMAGE_WIDTH+20; ?>px; text-align: center;"><div style="width: 20px; text-align: center;">

<?php echo '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $product_info['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '</a>'; ?>

With:

<p><span class=""><a href="http://www.jewellsembroidery.com/shop/product_reviews.php?products_id=111&reviews_id=13&action=buy_now" id="tdb4" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-priority-secondary" role="button" aria-disabled="false"><span class="ui-button-icon-primary ui-icon ui-icon-cart"></span><span class="ui-button-text">Add to Cart</span></a></span><script type="text/javascript">$("#tdb4").button({icons:{primary:"ui-icon-cart"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script></p>

</div>

Everything appears to be forced to the left and the right column appears under the review and is also forced to the left.

Any thoughts?

♥joli1811 · November 11, 2013

Hi, Gergely:

When I replace:

<div style="float: right; width: <?php echo SMALL_IMAGE_WIDTH+20; ?>px; text-align: center;"><div style="width: 20px; text-align: center;">

<?php echo '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $product_info['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '</a>'; ?></DIV>

Find the stray </DIV> and remove.

<div style="width: 20px; text-align: center;">

<a href="http://www.jewellsembroidery.com/shop/product_info.php?products_id=111"><img width="225" vspace="5" hspace="5" height="300" title="Vintage Children" alt="Vintage Children" src="images/2013 VER VINTAGE CHILDREN DESIGN SET Portrait 300h.png"></a>

<p><span class=""><a href="http://www.jewellsembroidery.com/shop/product_reviews.php?products_id=111&reviews_id=13&action=buy_now" id="tdb4" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-priority-secondary" role="button" aria-disabled="false"><span class="ui-button-icon-primary ui-icon ui-icon-cart"></span><span class="ui-button-text">Add to Cart</span></a></span><script type="text/javascript">$("#tdb4").button({icons:{primary:"ui-icon-cart"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script></p>

</div>

With:

<div style="width: 20px; text-align: center;">

<a href="http://www.jewellsembroidery.com/shop/product_info.php?products_id=111"><img width="225" vspace="5" hspace="5" height="300" title="Vintage Children" alt="Vintage Children" src="images/2013 VER VINTAGE CHILDREN DESIGN SET Portrait 300h.png"></a>

<p><span class=""><a href="http://www.jewellsembroidery.com/shop/product_reviews.php?products_id=111&reviews_id=13&action=buy_now" id="tdb4" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-priority-secondary" role="button" aria-disabled="false"><span class="ui-button-icon-primary ui-icon ui-icon-cart"></span><span class="ui-button-text">Add to Cart</span></a></span><script type="text/javascript">$("#tdb4").button({icons:{primary:"ui-icon-cart"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script></p>

</div>

Everything appears to be forced to the left and the right column appears under the review and is also forced to the left.

Any thoughts?

jeu4328 · November 11, 2013

I am not understanding the change you would like for me to make. The code that you highlighted in red appears to me to be part of the code you wanted me to replace.

The only extra </div> that I see is at the bottom of the file, and that is one that is part of the original code.

Thank you,

Jewell

<?php

/*

$Id$

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

Released under the GNU General Public License

*/

require('includes/application_top.php');

if (!isset($HTTP_GET_VARS['products_id'])) {

tep_redirect(tep_href_link(FILENAME_REVIEWS));

}

$product_info_query = tep_db_query("select p.products_id, p.products_model, p.products_image, p.products_price, p.products_tax_class_id, pd.products_name from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and p.products_status = '1' and p.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "'");

if (!tep_db_num_rows($product_info_query)) {

tep_redirect(tep_href_link(FILENAME_REVIEWS));

} else {

$product_info = tep_db_fetch_array($product_info_query);

}

if ($new_price = tep_get_products_special_price($product_info['products_id'])) {

$products_price = '<del>' . $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) . '</del> <span class="productSpecialPrice">' . $currencies->display_price($new_price, tep_get_tax_rate($product_info['products_tax_class_id'])) . '</span>';

} else {

$products_price = $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id']));

}

if (tep_not_null($product_info['products_model'])) {

$products_name = $product_info['products_name'] . '<br /><span class="smallText">[' . $product_info['products_model'] . ']</span>';

} else {

$products_name = $product_info['products_name'];

}

require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_PRODUCT_REVIEWS);

$breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_PRODUCT_REVIEWS, tep_get_all_get_params()));

require(DIR_WS_INCLUDES . 'template_top.php');

?>

<?php

if ($messageStack->size('product_reviews') > 0) {

echo $messageStack->output('product_reviews');

}

?>

<div>

</div>

<?php

if (tep_not_null($product_info['products_image'])) {

?>

<p><span class=""><a href="http://www.jewellsembroidery.com/shop/product_reviews.php?products_id=111&reviews_id=13&action=buy_now" id="tdb4" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-priority-secondary" role="button" aria-disabled="false"><span class="ui-button-icon-primary ui-icon ui-icon-cart"></span><span class="ui-button-text">Add to Cart</span></a></span><script type="text/javascript">$("#tdb4").button({icons:{primary:"ui-icon-cart"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script></p>

</div>

</div>

<?php

}

$reviews_query_raw = "select r.reviews_id, left(rd.reviews_text, 100) as reviews_text, r.reviews_rating, r.date_added, r.customers_name from " . TABLE_REVIEWS . " r, " . TABLE_REVIEWS_DESCRIPTION . " rd where r.products_id = '" . (int)$product_info['products_id'] . "' and r.reviews_id = rd.reviews_id and rd.languages_id = '" . (int)$languages_id . "' and r.reviews_status = 1 order by r.reviews_id desc";

$reviews_split = new splitPageResults($reviews_query_raw, MAX_DISPLAY_NEW_REVIEWS);

if ($reviews_split->number_of_rows > 0) {

if ((PREV_NEXT_BAR_LOCATION == '1') || (PREV_NEXT_BAR_LOCATION == '3')) {

?>

<p style="float: right;"><?php echo TEXT_RESULT_PAGE . ' ' . $reviews_split->display_links(MAX_DISPLAY_PAGE_LINKS, tep_get_all_get_params(array('page', 'info'))); ?></p>

<p><?php echo $reviews_split->display_count(TEXT_DISPLAY_NUMBER_OF_REVIEWS); ?></p>

</div>

<br />

<?php

}

$reviews_query = tep_db_query($reviews_split->sql_query);

while ($reviews = tep_db_fetch_array($reviews_query)) {

?>

<div>

<h2><?php echo '<a href="' . tep_href_link(FILENAME_PRODUCT_REVIEWS_INFO, 'products_id=' . $product_info['products_id'] . '&reviews_id=' . $reviews['reviews_id']) . '">' . sprintf(TEXT_REVIEW_BY, tep_output_string_protected($reviews['customers_name'])) . '</a>'; ?></h2>

</div>

<?php echo tep_break_string(tep_output_string_protected($reviews['reviews_text']), 60, '-<br />') . ((strlen($reviews['reviews_text']) >= 100) ? '..' : '') . '<br /><br /><i>' . sprintf(TEXT_REVIEW_RATING, tep_image(DIR_WS_IMAGES . 'stars_' . $reviews['reviews_rating'] . '.gif', sprintf(TEXT_OF_5_STARS, $reviews['reviews_rating'])), sprintf(TEXT_OF_5_STARS, $reviews['reviews_rating'])) . '</i>'; ?>

</div>

<?php

}

} else {

?>

<?php echo TEXT_NO_REVIEWS; ?>

</div>

<?php

}

if (($reviews_split->number_of_rows > 0) && ((PREV_NEXT_BAR_LOCATION == '2') || (PREV_NEXT_BAR_LOCATION == '3'))) {

?>

<p style="float: right;"><?php echo TEXT_RESULT_PAGE . ' ' . $reviews_split->display_links(MAX_DISPLAY_PAGE_LINKS, tep_get_all_get_params(array('page', 'info'))); ?></p>

<p><?php echo $reviews_split->display_count(TEXT_DISPLAY_NUMBER_OF_REVIEWS); ?></p>

</div>

<?php

}

?>

<br />

<?php echo tep_draw_button(IMAGE_BUTTON_BACK, 'triangle-1-w', tep_href_link(FILENAME_PRODUCT_INFO, tep_get_all_get_params())); ?>

</div>

<?php

require(DIR_WS_INCLUDES . 'template_bottom.php');

require(DIR_WS_INCLUDES . 'application_bottom.php');

?>

♥joli1811 · November 12, 2013

Hi,

Easiest way first is to upload a new /product_reviews.php check in admin which version you are using and re upload the required file as it is unlikely that you have any review addon just easier to reupload a new than try and repair notice that the buttons have also gone haywire.

To get rid of the line on the star images

add to stylesheet although you will have to check if it affects anything else may have to make a new class.

.contentText img {

border: none; !important;

}

Regards

John

jeu4328 · November 12, 2013

Thank you, John. I appreciate your help.

I am just heading out to one of my cleaning jobs, but when I get back home I will definitely do as you suggested.

Have a great evening,

Jewell

jeu4328 · November 12, 2013

Thank you so much, John. I really appreciate your guidance. :)

I have uploaded new 'product_reviews_info.php' and 'product_reviews.php' files to my store to return them to their original state.

I am still having issues with the overlapping elements within the store, and the 'Add to Cart' button appears to be more square than rectangular. :blush:

Do you have any suggestions on how to fix this issue?

Re: Border around stars image:

I was able to remove the border around the Reviews 'Stars' image! WooHoo! :P

I accomplished this by adding the following to my css Stylesheet:

.contentText img {

border: none; !important;

}

also

.infoBoxContents img {

border: none; !important;

}

The top code removed the border around the stars on the Reviews page.

The bottom code removed the border around the stars in the Reviews box in the right column.

Thanks again, John! You're a great asset to this forum! :D

Jewell

♥joli1811 · November 12, 2013

Hi Jewel,

It is very hard to see what is wrong with this page

a quick fix is to replace .contentContainer with the one below it means we are defining a width you may have to adjust the width a bit in you stylesheet but it is a hack and does not fix the distorted button.

This should not be necessary as the grid should determine the width of the page so there is an underlying fault .

Remember in the past seeing this (distorted button) on a product_listing.php but can not remember why !! the other review pages seem ok .

You could post / upload your product_reviews.php and I will take a look what version do you use 2.3 ?????

Just go to more reply options to upload the file

Although again unlikely disable temporally the Project Ideas box as the javascript is broke small chance he is producing a conflict with the buttons but do not think so.

.contentContainer {

padding-bottom: 10px;

width: 450px;

}

jeu4328 · November 12, 2013

Hello, John:

Yes, I use version 2.3.3, and last night I had uploaded a fresh version of the code, but I will upload it nonetheless.

<?php
/*
 $Id$
 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com
 Copyright (c) 2012 osCommerce
 Released under the GNU General Public License
*/
 require('includes/application_top.php');
 if (!isset($HTTP_GET_VARS['products_id'])) {
   tep_redirect(tep_href_link(FILENAME_REVIEWS));
 }
 $product_info_query = tep_db_query("select p.products_id, p.products_model, p.products_image, p.products_price, p.products_tax_class_id, pd.products_name from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and p.products_status = '1' and p.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "'");
 if (!tep_db_num_rows($product_info_query)) {
   tep_redirect(tep_href_link(FILENAME_REVIEWS));
 } else {
   $product_info = tep_db_fetch_array($product_info_query);
 }
 if ($new_price = tep_get_products_special_price($product_info['products_id'])) {
   $products_price = '<del>' . $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) . '</del> <span class="productSpecialPrice">' . $currencies->display_price($new_price, tep_get_tax_rate($product_info['products_tax_class_id'])) . '</span>';
 } else {
   $products_price = $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id']));
 }
 if (tep_not_null($product_info['products_model'])) {
   $products_name = $product_info['products_name'] . '<br /><span class="smallText">[' . $product_info['products_model'] . ']</span>';
 } else {
   $products_name = $product_info['products_name'];
 }
 require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_PRODUCT_REVIEWS);
 $breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_PRODUCT_REVIEWS, tep_get_all_get_params()));
 require(DIR_WS_INCLUDES . 'template_top.php');
?>
<?php
 if ($messageStack->size('product_reviews') > 0) {
   echo $messageStack->output('product_reviews');
 }
?>
<div>
 <h1 style="float: right;"><?php echo $products_price; ?></h1>
 <h1><?php echo $products_name; ?></h1>
</div>
<div class="contentContainer">
<?php
 if (tep_not_null($product_info['products_image'])) {
?>
 <div style="float: right; width: <?php echo SMALL_IMAGE_WIDTH+20; ?>px; text-align: center;">
   <?php echo '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $product_info['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '</a>'; ?>
   <p><?php echo tep_draw_button(IMAGE_BUTTON_IN_CART, 'cart', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now')); ?></p>
 </div>
<?php
 }
 $reviews_query_raw = "select r.reviews_id, left(rd.reviews_text, 100) as reviews_text, r.reviews_rating, r.date_added, r.customers_name from " . TABLE_REVIEWS . " r, " . TABLE_REVIEWS_DESCRIPTION . " rd where r.products_id = '" . (int)$product_info['products_id'] . "' and r.reviews_id = rd.reviews_id and rd.languages_id = '" . (int)$languages_id . "' and r.reviews_status = 1 order by r.reviews_id desc";
 $reviews_split = new splitPageResults($reviews_query_raw, MAX_DISPLAY_NEW_REVIEWS);
 if ($reviews_split->number_of_rows > 0) {
   if ((PREV_NEXT_BAR_LOCATION == '1') || (PREV_NEXT_BAR_LOCATION == '3')) {
?>
 <div class="contentText">
   <p style="float: right;"><?php echo TEXT_RESULT_PAGE . ' ' . $reviews_split->display_links(MAX_DISPLAY_PAGE_LINKS, tep_get_all_get_params(array('page', 'info'))); ?></p>
   <p><?php echo $reviews_split->display_count(TEXT_DISPLAY_NUMBER_OF_REVIEWS); ?></p>
 </div>
 <br />
<?php
   }
   $reviews_query = tep_db_query($reviews_split->sql_query);
   while ($reviews = tep_db_fetch_array($reviews_query)) {
?>
 <div>
   <span style="float: right;"><?php echo sprintf(TEXT_REVIEW_DATE_ADDED, tep_date_long($reviews['date_added'])); ?></span>
   <h2><?php echo '<a href="' . tep_href_link(FILENAME_PRODUCT_REVIEWS_INFO, 'products_id=' . $product_info['products_id'] . '&reviews_id=' . $reviews['reviews_id']) . '">' . sprintf(TEXT_REVIEW_BY, tep_output_string_protected($reviews['customers_name'])) . '</a>'; ?></h2>
 </div>
 <div class="contentText">
   <?php echo tep_break_string(tep_output_string_protected($reviews['reviews_text']), 60, '-<br />') . ((strlen($reviews['reviews_text']) >= 100) ? '..' : '') . '<br /><br /><i>' . sprintf(TEXT_REVIEW_RATING, tep_image(DIR_WS_IMAGES . 'stars_' . $reviews['reviews_rating'] . '.gif', sprintf(TEXT_OF_5_STARS, $reviews['reviews_rating'])), sprintf(TEXT_OF_5_STARS, $reviews['reviews_rating'])) . '</i>'; ?>
 </div>
<?php
   }
 } else {
?>
 <div class="contentText">
   <?php echo TEXT_NO_REVIEWS; ?>
 </div>
<?php
 }
 if (($reviews_split->number_of_rows > 0) && ((PREV_NEXT_BAR_LOCATION == '2') || (PREV_NEXT_BAR_LOCATION == '3'))) {
?>
 <div class="contentText">
   <p style="float: right;"><?php echo TEXT_RESULT_PAGE . ' ' . $reviews_split->display_links(MAX_DISPLAY_PAGE_LINKS, tep_get_all_get_params(array('page', 'info'))); ?></p>
   <p><?php echo $reviews_split->display_count(TEXT_DISPLAY_NUMBER_OF_REVIEWS); ?></p>
 </div>
<?php
 }
?>
 <br />
 <div class="buttonSet">
   <span class="buttonAction"><?php echo tep_draw_button(IMAGE_BUTTON_WRITE_REVIEW, 'comment', tep_href_link(FILENAME_PRODUCT_REVIEWS_WRITE, tep_get_all_get_params()), 'primary'); ?></span>
   <?php echo tep_draw_button(IMAGE_BUTTON_BACK, 'triangle-1-w', tep_href_link(FILENAME_PRODUCT_INFO, tep_get_all_get_params())); ?>
 </div>
</div>
<?php
 require(DIR_WS_INCLUDES . 'template_bottom.php');
 require(DIR_WS_INCLUDES . 'application_bottom.php');
?>

I tried adding the code to my stylesheet, replacing existing code, and it did correct the overlap problems to a point. It forced things to the left so they are no longer under the right column. However, it caused issues on other pages, such as the 'Welcome Guest' line becoming 2 lines, images to be closer to one another and no longer centered in the space. The 'add to cart' button is also still not right.

.contentContainer {

padding-bottom: 10px;

width: 450px;

}

I have removed this change in my stylesheet for now, as I am not happy with the changes.

Also, I noticed this morning that when I removed the border from the stars that it also removed the border from all images. However, the image in the Reviews page still has a border. Weird. (w00t) <<pulling my hair out!>> I guess I need to decide which I dislike more ... having a border around the stars, or having no border around my images. <<sigh>> Oh well, life goes on! If this is the least of my worries, I'm doing ok! :thumbsup:

At this point, do you think it would be best if I just upload a new version of osC and begin afresh? Do you think that I have a corrupted file someplace that is causing issues? <<I'm hoping the answer is 'no' ... but I will accept the inevitable>> :unsure:

And if you think I should ... could you tell me what program I can use that will allow me to upload the program onto my own computer and make all of the changes there, making sure I am happy with the changes before uploading it to my server? Is there a free program that I can use to do this? (I'm thinking it would be wise to use this program even if I don't have to upload a whole new version, so that I don't have to make changes 'live')

Thank you so much for all your help. It is sincerely appreciated. :)

Jewell

♥joli1811 · November 12, 2013

Hi,

Here we add a new style/ class just for the stars in red below

.stars {

border: none; !important;

}

<div>

<h2><?php echo '<a href="' . tep_href_link(FILENAME_PRODUCT_REVIEWS_INFO, 'products_id=' . $product_info['products_id'] . '&reviews_id=' . $reviews['reviews_id']) . '">' . sprintf(TEXT_REVIEW_BY, tep_output_string_protected($reviews['customers_name'])) . '</a>'; ?></h2>

</div>

<?php echo tep_break_string(tep_output_string_protected($reviews['reviews_text']), 60, '-<br />') . ((strlen($reviews['reviews_text']) >= 100) ? '..' : '') . '<br /><br /><i class="stars">' . sprintf(TEXT_REVIEW_RATING, tep_image(DIR_WS_IMAGES . 'stars_' . $reviews['reviews_rating'] . '.gif', sprintf(TEXT_OF_5_STARS, $reviews['reviews_rating'])), sprintf(TEXT_OF_5_STARS, $reviews['reviews_rating'])) . '</i>'; ?>

</div>

♥joli1811 · November 12, 2013

As regards uploading a new store I would say no.

at the very beginning a few months ago you were warned about the dangers of manually changing the jquery-ui stylesheets as they are complicated and need a lot of experience to manually change well think what is happening here is the knock on effect where other problems appear later.

It is really better to get the basic style done by http://jqueryui.com/themeroller/ and then later tweak to suit.

It is a good idea to have a development store anyway if the site is live but you are still working on it this can be done easily simply by creating a new directory called development on your host just beside the store files.

I find it easier just to work on the server when developing new sites as then I can be sure they work in my hosting enviroment.

Whether or not you create a new database depends if you are doing a lot of database changes in your case no as the changes at the minute are mainly cosmetic.

So uploading a clean copy of osccommerce into a development directory requires then just a change to the x 2 configure files includes/configure.php and admin/includes/configure.php to reflect the new path

That is no longer http://www.jewellsembroidery.com/shop/

But instead http://www.jewellsembroidery.com/development/

The database can stay the same just the address needs changing.

jeu4328 · November 12, 2013

As regards uploading a new store I would say no.

at the very beginning a few months ago you were warned about the dangers of manually changing the jquery-ui stylesheets as they are complicated and need a lot of experience to manually change well think what is happening here is the knock on effect where other problems appear later.

It is really better to get the basic style done by http://jqueryui.com/themeroller/ and then later tweak to suit.

It is a good idea to have a development store anyway if the site is live but you are still working on it this can be done easily simply by creating a new directory called development on your host just beside the store files.

I find it easier just to work on the server when developing new sites as then I can be sure they work in my hosting enviroment.

Whether or not you create a new database depends if you are doing a lot of database changes in your case no as the changes at the minute are mainly cosmetic.

So uploading a clean copy of osccommerce into a development directory requires then just a change to the x 2 configure files includes/configure.php and admin/includes/configure.php to reflect the new path

That is no longer http://www.jewellsembroidery.com/shop/

But instead http://www.jewellsembroidery.com/development/

The database can stay the same just the address needs changing.

WOW! That sounds easy enough! I'll create that new directory and work from there when making style changes.

That is a great piece of advice!

Thank you so much!

Jewell

jeu4328 · November 12, 2013

Hi, John: I've made the suggested changes and I am still seeing the border around the stars.

Hi,

Here we add a new style/ class just for the stars in red below

.stars {

border: none; !important;

}

<div>

<span style="float: right;"><?php echo sprintf(TEXT_REVIEW_DATE_ADDED, tep_date_long($reviews['date_added'])); ?></span>

<h2><?php echo '<a href="' . tep_href_link(FILENAME_PRODUCT_REVIEWS_INFO, 'products_id=' . $product_info['products_id'] . '&reviews_id=' . $reviews['reviews_id']) . '">' . sprintf(TEXT_REVIEW_BY, tep_output_string_protected($reviews['customers_name'])) . '</a>'; ?></h2>

</div>

<div class="contentText">

<?php echo tep_break_string(tep_output_string_protected($reviews['reviews_text']), 60, '-<br />') . ((strlen($reviews['reviews_text']) >= 100) ? '..' : '') . '<br /><br /><i class="stars">' . sprintf(TEXT_REVIEW_RATING, tep_image(DIR_WS_IMAGES . 'stars_' . $reviews['reviews_rating'] . '.gif', sprintf(TEXT_OF_5_STARS, $reviews['reviews_rating'])), sprintf(TEXT_OF_5_STARS, $reviews['reviews_rating'])) . '</i>'; ?>

</div>

My product_reviews.php now looks like this:

<?php
/*
 $Id$
 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com
 Copyright (c) 2012 osCommerce
 Released under the GNU General Public License
*/
 require('includes/application_top.php');
 if (!isset($HTTP_GET_VARS['products_id'])) {
   tep_redirect(tep_href_link(FILENAME_REVIEWS));
 }
 $product_info_query = tep_db_query("select p.products_id, p.products_model, p.products_image, p.products_price, p.products_tax_class_id, pd.products_name from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and p.products_status = '1' and p.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "'");
 if (!tep_db_num_rows($product_info_query)) {
   tep_redirect(tep_href_link(FILENAME_REVIEWS));
 } else {
   $product_info = tep_db_fetch_array($product_info_query);
 }
 if ($new_price = tep_get_products_special_price($product_info['products_id'])) {
   $products_price = '<del>' . $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) . '</del> <span class="productSpecialPrice">' . $currencies->display_price($new_price, tep_get_tax_rate($product_info['products_tax_class_id'])) . '</span>';
 } else {
   $products_price = $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id']));
 }
 if (tep_not_null($product_info['products_model'])) {
   $products_name = $product_info['products_name'] . '<br /><span class="smallText">[' . $product_info['products_model'] . ']</span>';
 } else {
   $products_name = $product_info['products_name'];
 }
 require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_PRODUCT_REVIEWS);
 $breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_PRODUCT_REVIEWS, tep_get_all_get_params()));
 require(DIR_WS_INCLUDES . 'template_top.php');
?>
<?php
 if ($messageStack->size('product_reviews') > 0) {
   echo $messageStack->output('product_reviews');
 }
?>
<div>
 <h1 style="float: right;"><?php echo $products_price; ?></h1>
 <h1><?php echo $products_name; ?></h1>
</div>
<div class="contentContainer">
<?php
 if (tep_not_null($product_info['products_image'])) {
?>
 <div style="float: right; width: <?php echo SMALL_IMAGE_WIDTH+20; ?>px; text-align: center;">
   <?php echo '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $product_info['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '</a>'; ?>
   <p><?php echo tep_draw_button(IMAGE_BUTTON_IN_CART, 'cart', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now')); ?></p>
 </div>
<?php
 }
 $reviews_query_raw = "select r.reviews_id, left(rd.reviews_text, 100) as reviews_text, r.reviews_rating, r.date_added, r.customers_name from " . TABLE_REVIEWS . " r, " . TABLE_REVIEWS_DESCRIPTION . " rd where r.products_id = '" . (int)$product_info['products_id'] . "' and r.reviews_id = rd.reviews_id and rd.languages_id = '" . (int)$languages_id . "' and r.reviews_status = 1 order by r.reviews_id desc";
 $reviews_split = new splitPageResults($reviews_query_raw, MAX_DISPLAY_NEW_REVIEWS);
 if ($reviews_split->number_of_rows > 0) {
   if ((PREV_NEXT_BAR_LOCATION == '1') || (PREV_NEXT_BAR_LOCATION == '3')) {
?>
 <div class="contentText">
   <p style="float: right;"><?php echo TEXT_RESULT_PAGE . ' ' . $reviews_split->display_links(MAX_DISPLAY_PAGE_LINKS, tep_get_all_get_params(array('page', 'info'))); ?></p>
   <p><?php echo $reviews_split->display_count(TEXT_DISPLAY_NUMBER_OF_REVIEWS); ?></p>
 </div>
 <br />
<?php
   }
   $reviews_query = tep_db_query($reviews_split->sql_query);
   while ($reviews = tep_db_fetch_array($reviews_query)) {
?>
 <div>
   <span style="float: right;"><?php echo sprintf(TEXT_REVIEW_DATE_ADDED, tep_date_long($reviews['date_added'])); ?></span>
   <h2><?php echo '<a href="' . tep_href_link(FILENAME_PRODUCT_REVIEWS_INFO, 'products_id=' . $product_info['products_id'] . '&reviews_id=' . $reviews['reviews_id']) . '">' . sprintf(TEXT_REVIEW_BY, tep_output_string_protected($reviews['customers_name'])) . '</a>'; ?></h2>
 </div>
 <div class="contentText">
   <?php echo tep_break_string(tep_output_string_protected($reviews['reviews_text']), 60, '-<br />') . ((strlen($reviews['reviews_text']) >= 100) ? '..' : '') . '<br /><br />[color=#ff0000]<i class="stars">'.[/color] sprintf(TEXT_REVIEW_RATING, tep_image(DIR_WS_IMAGES . 'stars_' . $reviews['reviews_rating'] . '.gif', sprintf(TEXT_OF_5_STARS, $reviews['reviews_rating'])), sprintf(TEXT_OF_5_STARS, $reviews['reviews_rating'])) . '</i>'; ?>
 </div>

<?php
   }
 } else {
?>
 <div class="contentText">
   <?php echo TEXT_NO_REVIEWS; ?>
 </div>
<?php
 }
 if (($reviews_split->number_of_rows > 0) && ((PREV_NEXT_BAR_LOCATION == '2') || (PREV_NEXT_BAR_LOCATION == '3'))) {
?>
 <div class="contentText">
   <p style="float: right;"><?php echo TEXT_RESULT_PAGE . ' ' . $reviews_split->display_links(MAX_DISPLAY_PAGE_LINKS, tep_get_all_get_params(array('page', 'info'))); ?></p>
   <p><?php echo $reviews_split->display_count(TEXT_DISPLAY_NUMBER_OF_REVIEWS); ?></p>
 </div>
<?php
 }
?>
 <br />
 <div class="buttonSet">
   <span class="buttonAction"><?php echo tep_draw_button(IMAGE_BUTTON_WRITE_REVIEW, 'comment', tep_href_link(FILENAME_PRODUCT_REVIEWS_WRITE, tep_get_all_get_params()), 'primary'); ?></span>
   <?php echo tep_draw_button(IMAGE_BUTTON_BACK, 'triangle-1-w', tep_href_link(FILENAME_PRODUCT_INFO, tep_get_all_get_params())); ?>
 </div>
</div>
<?php
 require(DIR_WS_INCLUDES . 'template_bottom.php');
 require(DIR_WS_INCLUDES . 'application_bottom.php');
?>

jeu4328 · November 12, 2013

at the very beginning a few months ago you were warned about the dangers of manually changing the jquery-ui stylesheets as they are complicated and need a lot of experience to manually change well think what is happening here is the knock on effect where other problems appear later.

It is really better to get the basic style done by http://jqueryui.com/themeroller/ and then later tweak to suit.

I'm not clear ... when you refer to jqueyr-ui stylesheets, are you referring to the css stylesheet or other stylesheets?

I've tried going working with themeroller but I was having a difficult time trying to figure out how to use it ... and then once it is done, I have no idea what to do at that point.

I will try to work with it again.

I've installed a 2nd osC to my server and have renamed it. I will work with that version going forward when I am trying to get my store to where I want it.

Thanks again for all your help! :thumbsup:

Jewell

♥joli1811 · November 13, 2013

In a standard oscommerce you have x 2 main stylesheets and a few smaller ones the first is the theme but for to make simple we will only talk about the x 2 main ones

jquery-ui.css ..... this is your theme a standard install is called redmond and can be found here in your store

ext/jquery/ui/redmond/jquery-ui-1.8.22.css (numbers may vary if it is updated)

that is the blue colour that you see and should NOT BE manually changed unless you are very experienced.

The best way is to go to the themeroller page

http://jqueryui.com/themeroller/

and choose a theme which is near to what you want here you can adjust the fine details like buttons and the small 1px outlines etc which later are hard to change.

Just google for how to install multimixer has a great blog

http://minitemplatesystem.com/usage/do-it-your-self/create-and-install-your-own-jquery-ui-theme/

and kymation explains also very well

http://www.oscommerce.com/forums/topic/369510-designing-new-themes-the-easy-way/

Now when you want to customize a bit this you do in your stylesheet.css you can do most everthing in here

the stylesheets are called cascading style sheets easiest way to explain imagine a waterfall the jqueyr-ui stylesheets are called first in template._top.php then after comes the normal stylesheet if more than one rule matches against a particular element that is you want to change something in the jqueyr-ui stylesheets you can do all this in the normal stylesheet because he comes second and will override any previous commands.

This is what we have been doing in your stylesheets by putting new commands in at the very bottom to override the previous commands that you were not happy with.

The other thing that controls oscommerce is the grid system this determines where a particular element appears on your page if you want to know more about that Burt has written a great book which explains everything in an easy understandable way

http://www.oscbooks.com/oscommerce-ebooks/designing_oscommerce_23x.php

For example we could try and repair your product_reviews page by specifying within the page <div class="grid_16 pull_6 ">

This would mean that your content was 16 units wide and we are pulling the 8 units back where your right hand column is and maybe being able to center again.

Well all fine and good but there is still a bug in there because should not be happening in the first place!! (w00t) and I do not like bugs they tend to create more bugs as time goes on.

To go bug hunting you would download and save your shop .......then 1 x 1 or 10 x 10 upload new files from an original install and keep checking the product reviews until everything centers again this way you could narrow down the cause to a particular file remembering that we do not have to worry about admin.

Well if you are doing a new install leave the jquery-ui-1.8.22.css alone o:) make sure you do the new v2.3.3.4 version you do not have many addons so once you get the theme installed should not take long takes a bit of getting used to but takes me 5 minutes to do a new theme.

Changing your column width follow the instructions here

http://multimixer.gr/17/01/2011/change-the-width-of-your-oscommerce-store/

jeu4328 · November 13, 2013

Hi, John:

Thank you so much for this vast amount of information. I am THRILLED to have it!!!

I will spend the next days working on installing 2.3.3.4 ... and praying that it goes well!!!

Dumb question ... should I install it using a new database and then copy the data from my old database to the new store?

Or will that transfer over bugs?

Question 2: Should I do the new install ... calling it something other than 'shop' ... to enable me to keep my shop running while I'm working on the install ... and then rename 'shop' to 'old shop' or something like that, and rename my new install 'shop'?

Question 3: Can it do the install by just 'uploading' the new oscommerce file to my server and 'extracting' the files into a new folder called 'newshop' ... changing the configure.php files ... work on formatting it the way I want and then renaming it 'shop' once it is the way I want it?

I will be sure to NOT touch the jquery-ui 1.8.22.css file!!! :P

Thanks again!

Jewell

♥joli1811 · November 13, 2013

Hi,

Dumb question:( Not Really :D your database is the most important thing you have)

Just use your old database no bugs there if you ever start to add a lot of add ons you could use a second copy database to work with but for now you do not need just make sure you back up database and shop to your computer and keep safe before starting any work.

You should be able to download a backup from your control panel. The main changes you are making are cosmetic and do not affect the database.

You do not need to go through the install just open your ftp client and create a new directory (yellow folder) beside the shop called newshop

Question 2: Upload the contents of the new 3.3.3.4 to new shop so you should see for example the index.php when you open newshop folder now all you have to do is change the x 2 configure files to reflect the new path everywhere you see shop change to newshop go to your browser and http://www.jewellsembroidery.com/newshop you should see the new shop.

You seem to have some sort of .htaccess redirect from http://www.jewellsembroidery.com/ to http://www.jewellsembroidery.com/shop so you may have to open the .htaccess file and change also shop -----> to newshop then you should be ready to go .

As you do not have a lot of addons it is easier to do a new install than the upgrade also more fun you have a live shop and it does look pretty good to me so take your time getting it exactly how you want

A small tip when you are on the themeroller site and you create a new theme that you may like bookmark the page before you go to download this way if you want to do later another few minor changes the bookmark will bring up your work up again if you go directly to download and then decide something does not suit you will have to start from the beginning again.

If you decide to keep the development site for a longer time probably better to put a no index robots text in so google does not try to index your store twice that is not good for seo but thats for later

The biggest problem with the themes is getting these x 3 files right in template top as they change every once in a while as you notice below it is no longer jquery-ui 1.8.22.css but think now jquery-ui-1.10.3.min.js

These are found in template _top.php if you have problems view the page source in your browser and simply click on the above links if your files are ok you will see if not you will get an error so you know that is what you have to correct it is just a name and address but has to be right.

regards

John

PS: You will also have to upload your images from the shop to the new shop to have a real working copy

jeu4328 · November 13, 2013

Thank you so much for this great information, John. You are a wealth of knowledge! :thumbsup:

I will work on this tonight ... and over the next few days.

Thanks a million!

Jewell

jeu4328 · November 13, 2013

Hi again ...

I'm trying to upload the zip file for the newest version of osc, and when I extract it I get this error message:

Archive: /home4/jeu4328/public_html/oscommerce-2.3.3.4(2).zip

End-of-central-directory signature not found. Either this file is not

a zipfile, or it constitutes one disk of a multi-part archive. In the

latter case the central directory and zipfile comment will be found on

the last disk(s) of this archive.

unzip: cannot find zipfile directory in one of /home4/jeu4328/public_html/oscommerce-2.3.3.4(2).zip or

/home4/jeu4328/public_html/oscommerce-2.3.3.4(2).zip.zip, and cannot find /home4/jeu4328/public_html/oscommerce-2.3.3.4(2).zip.ZIP, period.

When I downloaded the new files from the osc website, there were two files:

oscommerce-2.3.3.4.zip

Can you or anyone else give me guidance as to how to unzip the newest version onto my server?

Thank you,

Jewell

jeu4328 · November 13, 2013

HOLD THE PHONE ... I think I may have found my problem. :P

jeu4328 · November 14, 2013

Well, I spent several HOURS (not 5 minutes! :P ) uploading osc 2.3.3.4 and working on setting it up.

All was going well until all of a sudden it went beserk and spread itself out across the screen ... outside of the borders of the web page.

Even the small side columns were stretched out across the screen.

I also noticed that the individual review page is overlapped ... just as my current store is.

Sooo ... I deleted the new store. Since I'm still going to have the same problems with the new store as with the current store, I thought I'd take a break from the endless hours of trying to get this exactly right. Who knows, I may decide to start all over again in a few days, but at this point I need to take a break.

Thanks again for everything!

Jewell

November 14, 2013

If you are talking about the picture that`s gone under the right side menu, then do the folowing:

Change this:

<div style="float: right; width: 20px; text-align: center;">

To this:

<div style="float:right; width: 154px; text-align: center;">

Product Reviews Page has overlapping elements

Recommended Posts

jeu4328

tgely

jeu4328

tgely

jeu4328

♥joli1811

jeu4328

♥joli1811

jeu4328

jeu4328

♥joli1811

jeu4328

♥joli1811

♥joli1811

jeu4328

jeu4328

jeu4328

♥joli1811

jeu4328

♥joli1811

jeu4328

jeu4328

jeu4328

jeu4328

Guest

Archived

Browse

Activity