close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

remove background and hover from img

Thread began 1/20/2011 6:23 pm by segalmedia367166 | Last modified 1/24/2011 7:11 pm by segalmedia367166 | 1914 views | 13 replies |

segalmedia367166

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

Sign in to reply to this post

neilo

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?

Sign in to reply to this post

segalmedia367166

what I'm looking for

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.

Sign in to reply to this post

neilo

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;
}
Sign in to reply to this post

neilo

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;
}
Sign in to reply to this post

segalmedia367166

terrific solutions

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?

Sign in to reply to this post

neilo

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.

Sign in to reply to this post

segalmedia367166

all worked, still have color in background on another page

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

Sign in to reply to this post

neilo

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.

Sign in to reply to this post

segalmedia367166

code from details.php

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

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...