highlight the complete line in the list of products

[VladDrakul]

Is it possible to highlight a product line when the mouses passes over a product for better horizontal viewing.

 

In huge lists text where it is only show the product name + price + buy image its hard for the costumer to check the price if products have small names, so this would help!!

 

Is it possible to do this with css ?

 

Or at least to have the possibility to alternate (using white and gray at 20%) a background colour for each line

[VladDrakul]

Anyone knows?

a simple colour alternation of the rows of the product listing will be enough.

I looked at the stylesheet.css file but couldn't figure out how to do that

[ardley216]

the way i change colours on the stylesheet.ccs is by trial and error.. because i dont understand it much either...

 

just make back up ( as always) and go through editing the colours.. the names can be helpful sometimes...

 

hope that MIGHT help :P

[VladDrakul]

that doesn't help much!

The problem is that I think that possibility is not available, you need to add on the right section of stylesheet.css.

I know how to do it via javascript / html but not via css and I don't even know if its possible!

 

So anyone knows how to?

I guess this would help much people and it would help costumers to visualize better the name + price of each product specialy the ones with 1024x768 screen resolution (probably almost all nowdays)

[jhande]

Is it possible to do this with css ?

 

Or at least to have the possibility to alternate (using white and gray at 20%) a background colour for each line

 

You can easily change the alternating background color of your product listing rows in the sytlesheet.css.

 

Look for the below code (in mine it's around line 320):

 

} TR.productListing-even {

background: #FFFF99;

} TR.productListing-odd {

background: #FFFFCC;

} TR.productReviews-even {

background: #FFFF99;

} TR.productReviews-odd {

background: #FFFFCC;

} TR.upcomingProducts-even {

background: #FFFF99;

} TR.upcomingProducts-odd {

background: #FFFFCC;

}

 

Change the blue hexidecimal color code to your liking. :thumbsup:

 

I'm thinking you probably could just add a CSS rollover to change the color background to each of the TR tags above.

[Guest]

I'm not sure i understand what you are trying to do completely but i think you need to be looking at pseudo classes in css. Particularly the :hover class which changes elements onmouseover in css.

[VladDrakul]

here goes my css stylesheet, I don't have the code you posted

Check it out

 

 

 

 

/*

$Id: stylesheet.css,v 1.56 2003/06/30 20:04:02 hpdl Exp $

 

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

 

Copyright © 2003 osCommerce

 

Released under the GNU General Public License

*/

 

.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }

.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; background: #ffb3b5; font-weight: bold; }

.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #cc0033; }

.productsNotifications { background: #f2fff7; }

.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

 

BODY {

text-align: center;

background: #444444;

color: #000000;

margin: 0px;

}

 

.fixcenter {

width: 900px;

border: solid;

border-width: 1px;

background: #FFFFFF;

color: #000000;

margin: auto;

margin-top: 0px;

text-align: left;

}

 

A {

color: #000000;

text-decoration: none;

}

 

A:hover {

color: #FF0000;

text-decoration: none;

}

 

FORM {

display: inline;

}

 

TR.header {

background: #ffffff;

}

 

TR.headerNavigation {

background: #bbc3d3;

}

 

TD.headerNavigation {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

background: #000000;

color: #ffffff;

font-weight : bold;

}

 

A.headerNavigation {

color: #FFFFFF;

}

 

A.headerNavigation:hover {

color: #FF0000;

}

 

TR.headerError {

background: #ff0000;

}

 

TD.headerError {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 12px;

background: #ff0000;

color: #ffffff;

font-weight : bold;

text-align : center;

}

 

TR.headerInfo {

background: #00ff00;

}

 

TD.headerInfo {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 12px;

background: #00ff00;

color: #ffffff;

font-weight: bold;

text-align: center;

}

 

TR.footer {

background: #bbc3d3;

}

 

TD.footer {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

background: #000000;

color: #ffffff;

font-weight: bold;

}

 

.infoBox {

background: #003A54;

}

 

.infoBoxContents {

background: #ffffff;

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

}

 

.infoBoxNotice {

background: #FF8E90;

}

 

.infoBoxNoticeContents {

background: #FFE6E6;

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

}

 

TD.infoBoxHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

font-weight: bold;

background: #003A54;

color: #ffffff;

}

 

TD.infoBox, SPAN.infoBox {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

}

 

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {

background: #ffffff;

}

 

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {

background: #ffffff;

}

 

TABLE.productListing {

border: 1px;

border-style: solid;

border-color: #003A54;

border-spacing: 1px;

}

 

.productListing-heading {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

background: #003A54;

color: #FFFFFF;

font-weight: bold;

}

 

TD.productListing-data {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

}

 

A.pageResults {

color: #00334A;

}

 

A.pageResults:hover {

color: #FF0000;

background: #FFFFFF;

}

 

TD.pageHeading, DIV.pageHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 14px;

font-weight: bold;

color: #000000;

}

 

TR.subBar {

background: #f4f7fd;

}

 

TD.subBar {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

color: #000000;

}

 

TD.main, P.main {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

line-height: 1.5;

}

 

TD.smallText, SPAN.smallText, P.smallText {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

}

 

TD.accountCategory {

font-family: Verdana, Arial, sans-serif;

font-size: 13px;

color: #aabbdd;

}

 

TD.fieldKey {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

font-weight: bold;

}

 

TD.fieldValue {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

}

 

TD.tableHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

font-weight: bold;

}

 

SPAN.newItemInCart {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

color: #ff0000;

}

 

CHECKBOX, INPUT, RADIO, SELECT {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

}

 

TEXTAREA {

width: 100%;

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

}

 

SPAN.greetUser {

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

color: #f0a480;

font-weight: bold;

}

 

TABLE.formArea {

background: #f1f9fe;

border-color: #7b9ebd;

border-style: solid;

border-width: 1px;

}

 

TD.formAreaTitle {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 12px;

font-weight: bold;

}

 

SPAN.markProductOutOfStock {

font-family: Tahoma, Verdana, Arial, sans-serif;

font-size: 12px;

color: #c76170;

font-weight: bold;

}

 

SPAN.productSpecialPrice {

font-family: Verdana, Arial, sans-serif;

color: #ff0000;

}

 

SPAN.errorText {

font-family: Verdana, Arial, sans-serif;

color: #ff0000;

}

 

.moduleRow { }

.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor: hand; }

.moduleRowSelected { background-color: #E9F4FC; }

 

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }

.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }

 

/* message box */

 

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }

.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }

.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

 

/* input requirement */

 

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }

[VladDrakul]

I discovered these lines now it works, the background colour for each row on product listing

 

TR.productListing-even {

background: #FCFCFC;

} TR.productListing-odd {

background: #FFFFFF;

} TR.productReviews-even {

background: #FCFCFC;

} TR.productReviews-odd {

background: #FFFFFF;

} TR.upcomingProducts-even {

background: #FCFCFC;

} TR.upcomingProducts-odd {

background: #FFFFFF;

}

 

 

Now I just wanted to know to to highlight the entire product listing row, the same way like during the checkout process (selection of shipping or payment method).

here goes how on the checkout works:

 

.moduleRow { }

.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor: hand; }

.moduleRowSelected { background-color: #E9F4FC; }

 

How can I use this on the product listing?