different colour row in search

Submitted by wilkins on Sat, 2013-03-23 15:16 in Price Tapestry

Hi David

looking for the different colour for alternate lines in search, tried to find it in forum without success.

Brent

Hi Brent, Easiest method is

Submitted by support on Sat, 2013-03-23 15:25

Hi Brent,

Easiest method is with CSS nth-child selectors, using the "even" and/or "odd" shorthands. In your default.css, start with something like the following for alternating background colors:

.searchresults tr:nth-child(even)

{

  background-color: #FFCCCC;

}

.searchresults tr:nth-child(odd) {

  background-color: #CCCCFF;

}

Don't forget to do a hard refresh (CTRL+F5) in your browser after editing CSS to ensure that all resources are reloaded...

Cheers,
David.
--
PriceTapestry.com

Hi David, I have applied the

Submitted by ChrisNBC on Thu, 2013-03-28 10:15

Hi David,

I have applied the above to both products and search tables and it works beautifully! but please could you suggest if there is an easy way to have alternating coloured rows but also set the first header row to a different colour?

Thanks in advance.
Regards
Chris

Hi Chris, Specifying a

Submitted by support on Thu, 2013-03-28 10:27

Hi Chris,

Specifying a unique class for the header row should do the trick. In the distribution, using the price comparison table (html/prices.php as an example, the header row is coloured in normal HTML, so check if you have the following code in place around line 3:

<tr bgcolor='#eeeeee'>

(this will be overruled by your CSS color as it stands anyway)

But if you REPLACE that with:

<tr class='prices_header'>

...and then in your CSS, define the .prices_header e.g.

.prices_header {

  background-color: #112233;

}

...that should do the trick!

Cheers,
David.
--
PriceTapestry.com

Hi David, Thanks as always

Submitted by ChrisNBC on Sat, 2013-03-30 23:13

Hi David,
Thanks as always for your super quick response. I made the changes but couldn't get them to work but in the meantime discovered I could control the top row of the table with the code:

.prices tr:nth-child(1)
{
background-color: #33CCFF;
}

I am however really stuck on how to format the top row on the products.php page containing the text "Price search results for xxxxx" (where xxxxx is my product). Would be grateful if you could confirm if there is as existing definition for this in the default.css or if not if you could suggest a simple way to format this component.
Thanks in advance.
Regards
Chris

Hello Chris, The top row

Submitted by support on Sun, 2013-03-31 08:05

Hello Chris,

The top row containing "Price search resultsfor ..." is generated by the H2 line of html/banner.php. The code is at line 3 of that file, and the corresponding CSS (.banner h3) starts at line 20 of default.css

Cheers,
David.
--
PriceTapestry.com