[themes] Color.module regarding the correct id and classes for preview.css

[Holly Ferree]

Hello all,

I need some help figuring out the css id or class that are used in the
preview.css (regarding the top header and bottom header areas) when using
the color.mdoule. I have not found any documentation specifying the id's and
classes that can be used when styling areas in the preview.png, and am out
of possible names they could be.

Background:
I decided to learn more and create my own theme that integrates the
color.module. I have everything working and the colors switch to mercury,
ash, etc. without any trouble. :o) (very happy that it works)

But I am having difficulty with the preview.png showing correctly. It wants
to combine the top header color and the bottom header color in a gradient,
that is not used in my theme. And I figure that since the colors display the
properly when a different theme color set is chosen, it would be nice for
the preview.png to show the user an exact preview before they select their
new color set. 

My theme uses the top header (with borwn) and the bottom header (with blue).
There is no gradient used, so I want it to reflect that in the preview.png.

Issue:
Need the know the css tag for displaying the top header and the bottom
header colors.

I have it semi working for the top 16px -- it shows the base color if I use
the css pasted below (but I want the top header color, since that is the
actual color it will be).

The bottom header area that is 48px high wants to display the gradient (top
header and bottom header...all I want is the bottom header color). Does
anyone know the correct css to insert so that it doesn't use the gradient
but uses the bottom header color?

Thanks,
Holly Ferree

----------------------
Preview.css: 
(the top:17px allows the top header color to display perfectly :D. However
the height: 48px displays the gradient which I would like it to display the
bottom header color but I don't know the correct css tag. I've tried
changing #gradient to #bottom, #header, #headerbottom, and #header-bottom,
but no luck for either)

#preview #gradient { <-- what should I put here? #preview #_______?
  position: absolute;
  left: 0;
  right: 0;
  top: 17px;
  height: 48px;
  z-index: 2;
}

*******************************
Color.inc:

fill' => array(
    'base' => array(0, 74, 900, 426),
    'top' => array(0, 0, 900, 17),
    'bottom' => array(0, 17, 900, 48),
  ),

Example of the preview.png layout using Belgian Chocolate theme:
------------------------------------------
Top header, dark brown, #6c420e, height: 17px
------------------------------------------
Bottom Header, red, #971702, height: 48px;

------------------------------------------
THIS AREA IS DISPLAYING PERFECTLY

Content Area

base color, tan #d5b048
height: auto;

Link color: dark brown #6c420e
Text color: dark red, #494949
------------------------------------------