remove background and hover from img

products_results.php

I notice a back ground color on my image - brown and pink. I assume this is background color and hover since the image is a link. How do I eliminate this - should I create the image as a jpeg with a white background to cover what is going on or is there code that I can insert?

Thanks

Hi Lisa,

I'm not sure I understand exactly what effect you are looking for, - could you explain what you want to happen when the link element is normal (what it should look like), and when it is hovered over? Is there supposed to be an image in the links?

Neil, I am looking to eliminate the strange bars behind my dvd image:

products_detail.php?ProductID=1 ( I am in firefox)

On this page, I am trying to eliminate the brown background behind the DVD image -
products_detail.php?ProductID=1

Part of my issue is the background color for the .ps_pod1 { color: #555555;} rule, but when I change this rule it changes my home page 3 middle pod colors.

Oh yes - I see what you mean,

Yes - that color is in the configurable.css (line 157), but if you remove that color it would remove it from behind the 'Add to Cart' area too.

The easiest - and probably most effective way would be to edit the .productDetailWrapper .image .imageWrapper by adding a white background color:

webassist/plugins/catalog/css/products_detail.css (at about line 10)

.productDetailWrapper .image .imageWrapper {
    background-color: #FFFFFF;
}

Also - may I suggest something extra (bit cheeky) - as the 'Back to Product Catalog' link at the bottom is a bit falling off the page, in the default_styles.css (line 485) for .links class, to add a bottom padding of about 15px:

.links {
    font-size: 11px;
    font-weight: bold;
    margin-left: 20px;
    padding: 0 0 15px;
}

Neil,

You may be a "bit cheeky" but you're good. Thanks for taking it one step further. I will implement your suggestions shortly.

Good work! How can I give you points for a correct answer?

You're very welcome. But best not to give me points, - I can't be trusted with them, and would just go and blow them in my next post.

Neil - all worked, only issue is when you click on products from home page - my dvd image has an annoying brown/pink line. Once again, I can't determine the trigger (even with firebug). Any suggestions?

Thanks

Hi Lisa,

I think in this case, as I don't have Powerstore 4 (I have PowerStore 3) and I don't know how changing style for this element in the stylesheet will impact on other areas, to be absolutely safe I would add an in-line style to the <a> link directly in products_results.php.

In Powerstore 3 it is at about line 462:

<div class="imageWrapper"> <a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>" title="<?php echo $row_WADAProducts["ProductName"]; ?>"> <img class="WADAResultThumb" border="0" src="imagesupload/<?php echo $row_WADAProducts['ProductThumb']; ?>" /></a> </div>

just add the style: background-color:#FFFFFF; before the end of the opening <a> tag:

<div class="imageWrapper"> <a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>" title="<?php echo $row_WADAProducts["ProductName"]; ?>" style="background-color:#FFFFFF;"> <img class="WADAResultThumb" border="0" src="imagesupload/<?php echo $row_WADAProducts['ProductThumb']; ?>" /></a> </div>

That means that it will apply to all products but just in that link, and to no other elaments in the site. You could give that a try.

Hey Neil,

Rather than me destroy my site I copied the code from my detail.php file. Perhaps you can direct me to the correct part of my page to add a white background.

<?php require_once('../../../Connections/PowerStoreConnection.php'); ?>
<?php require_once('../../../WA_DigitalFilePro/HelperPHP.php'); ?>
<?php
if(!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") {
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
}
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
?>
<?php
$WAAddToCart = new WA_Include('../shopping_cart/add_to_cart.php');
require($WAAddToCart->BaseName);
$WAAddToCart->Initialize(true);
?>
<?php
$ParamProductID_WADAProducts = "-1";
if(isset($_GET['ProductID'])) {
$ParamProductID_WADAProducts = (get_magic_quotes_gpc()) ? $_GET['ProductID'] : addslashes($_GET['ProductID']);
}
mysql_select_db($database_PowerStoreConnection, $PowerStoreConnection);
$query_WADAProducts = sprintf("SELECT * FROM ps4_products WHERE ProductID = %s", GetSQLValueString($ParamProductID_WADAProducts, "int"));
$WADAProducts = mysql_query($query_WADAProducts, $PowerStoreConnection) or die(mysql_error());
$row_WADAProducts = mysql_fetch_assoc($WADAProducts);
$totalRows_WADAProducts = mysql_num_rows($WADAProducts);
?>
<html>
<head>
<?php echo($WAAddToCart->Head); ?>
<link rel="stylesheet" type="text/css" href="css/products_detail.css"/>
<title><?php echo str_replace("|","<br />",$row_WADAProducts["ProductName"]); ?></title>
</head>
<body>
<a name="top"></a>
<h1 class="larger">
<span id="WADAPageTitle"><?php echo str_replace("|","<br />",$row_WADAProducts["ProductName"]); ?></span>
<span class="price">
<span class="ProductPrice">Price: $<span id="ProductPrice"><?php echo number_format($row_WADAProducts["ProductPrice"], 2); ?></span></span>
<span id="retailRow" class="ProductRetailPrice errorText" <?php echo((!empty($row_WADAProducts["ProductRetailPrice"]) && $row_WADAProducts["ProductRetailPrice"] > $row_WADAProducts["ProductPrice"])?' style="display:block"':' style="display:none"'); ?>>Retail Price: $<span id="ProductRetailPrice" class="strike"><?php echo number_format($row_WADAProducts["ProductRetailPrice"], 2); ?></span> (Save $<span id="ProductRetailPriceSave"><?php echo number_format(floatval($row_WADAProducts["ProductRetailPrice"]) - floatval($row_WADAProducts["ProductPrice"]), 2); ?></span>)</span>
</span>
</h1>

<div class="contentBox ps_pod1 borderColor block">
<?php if ($totalRows_WADAProducts > 0) { // Show if recordset not empty ?>
<div class="productDetailWrapper">
<div class="image">
<div class="imageWrapper">
<?php
$imgWidth = 300;
$imgSrc = "../../../" . ($WAGLOBAL_Images_Folder) . ((isset($row_WADAProducts['ProductImage']) && $row_WADAProducts['ProductImage'] != "default-product.png")?$row_WADAProducts['ProductImage']:$row_WADAProducts['ProductThumb']);
$imgSrc = abs2rel(rel2abs($imgSrc,dirname(__FILE__)),dirname($_SERVER['PHP_SELF']));
$WAResultsImage = new WA_Include('scripts/resize_image.php');
require($WAResultsImage->BaseName);
$WAResultsImage->Initialize(true);
?>
<img class="WADAResultThumb" border="0" src="<?php echo(abs2rel(rel2abs($WAResultsImage->Body,dirname($_SERVER['PHP_SELF'])),dirname(__FILE__))); ?>" id="ProductImage" />
</div>
</div>
<div class="addToCart"><?php echo($WAAddToCart->Body); ?></div>
</div>
<div id="ProductLongDesc"><?php echo wa_evaluate($row_WADAProducts["ProductLongDesc"]); ?></div>
<?php } // Show if recordset not empty ?>
<?php if ($totalRows_WADAProducts == 0) { // Show if recordset empty ?>
<em>No product found.</em>
<?php } // Show if recordset empty ?>
</div>
<div class="productDetails-bottomShadow"></div>

<div class="bottomLinkWrapper">
<div class="links">
<span class="button"><a href="../../../products_results.php" class="ps_buttons">Back to Product Catalog</a></span>
</div>
</div>
</body>
</html>
<?php
if(isset($WADAProducts)) mysql_free_result($WADAProducts); ?>

Thanks,

Lisa